diff --git a/src/asset_manager/index.js b/src/asset_manager/index.js index 755eccb4d..fe133626c 100644 --- a/src/asset_manager/index.js +++ b/src/asset_manager/index.js @@ -60,6 +60,7 @@ export const evRemoveBefore = `${evRemove}:before`; export default () => { let c = {}; let assets, assetsVis, am, fu; + const assetCmd = 'open-assets'; return { ...Module, @@ -114,14 +115,25 @@ export default () => { * Open the asset manager. * @param {Object} [options] Options for the asset manager. * @param {Array} [options.types=['image']] Types of assets to show. + * @param {Function} [options.select] Type of operation to perform on asset selection. If not specified, nothing will happen. * @example - * assetManager.open(); + * assetManager.open({ + * select(asset, complete = false) { + * const selected = editor.getSelected(); + * if (selected && selected.is('image')) { + * selected.addAttributes({ src: asset.getSrc() }); + * // The default AssetManager UI will trigger `select(asset)` on click + * // and `select(asset, true)` on double-click + * complete && assetManager.close(); + * } + * } + * }); * // with your custom types (you should have assets with those types declared) - * assetManager.open({ types: ['doc'] }); + * assetManager.open({ types: ['doc'], ... }); */ open(options = {}) { const cmd = this.em.get('Commands'); - cmd.run('open-assets', { + cmd.run(assetCmd, { types: ['image'], ...options }); @@ -134,7 +146,7 @@ export default () => { */ close() { const cmd = this.em.get('Commands'); - cmd.stop('open-assets'); + cmd.stop(assetCmd); }, /** @@ -393,6 +405,17 @@ export default () => { c.onDblClick = func; }, + __behaviour(opts = {}) { + return (this._bhv = { + ...(this._bhv || {}), + ...opts + }); + }, + + __getBehaviour(opts = {}) { + return this._bhv || {}; + }, + destroy() { assets.stopListening(); assetsVis.stopListening(); @@ -401,6 +424,7 @@ export default () => { fu && fu.remove(); am && am.remove(); [assets, am, fu].forEach(i => (i = null)); + this._bhv = {}; c = {}; } }; diff --git a/src/asset_manager/view/AssetImageView.js b/src/asset_manager/view/AssetImageView.js index b2ec24401..690d7c2ea 100644 --- a/src/asset_manager/view/AssetImageView.js +++ b/src/asset_manager/view/AssetImageView.js @@ -43,12 +43,15 @@ export default AssetView.extend({ * */ onClick() { const { model, pfx } = this; + const { select } = this.__getBhv(); const { onClick } = this.config; const coll = this.collection; coll.trigger('deselectAll'); this.$el.addClass(pfx + 'highlight'); - if (isFunction(onClick)) { + if (isFunction(select)) { + select(model, false); + } else if (isFunction(onClick)) { onClick(model); } else { this.updateTarget(coll.target); @@ -61,10 +64,13 @@ export default AssetView.extend({ * */ onDblClick() { const { em, model } = this; + const { select } = this.__getBhv(); const { onDblClick } = this.config; const { target, onSelect } = this.collection; - if (isFunction(onDblClick)) { + if (isFunction(select)) { + select(model, true); + } else if (isFunction(onDblClick)) { onDblClick(model); } else { this.updateTarget(target); diff --git a/src/asset_manager/view/AssetView.js b/src/asset_manager/view/AssetView.js index 7c097be76..443efe855 100644 --- a/src/asset_manager/view/AssetView.js +++ b/src/asset_manager/view/AssetView.js @@ -17,6 +17,12 @@ export default Backbone.View.extend({ init && init(o); }, + __getBhv() { + const { em } = this; + const am = em && em.get('AssetManager'); + return (am && am.__getBehaviour()) || {}; + }, + template() { const pfx = this.pfx; return ` diff --git a/src/commands/view/OpenAssets.js b/src/commands/view/OpenAssets.js index 93b51ee66..cf1400f40 100644 --- a/src/commands/view/OpenAssets.js +++ b/src/commands/view/OpenAssets.js @@ -11,6 +11,9 @@ export default { am.onClick(opts.onClick); am.onDblClick(opts.onDblClick); am.onSelect(opts.onSelect); + am.__behaviour({ + select: opts.select + }); if (!this.rendered || types) { let assets = am.getAll().filter(i => i);