diff --git a/src/asset_manager/index.js b/src/asset_manager/index.js index c72d413ab..716601686 100644 --- a/src/asset_manager/index.js +++ b/src/asset_manager/index.js @@ -24,6 +24,9 @@ * * `asset` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback. * * ## Methods + * * [open](#open) + * * [close](#close) + * * [isOpen](#isopen) * * [add](#add) * * [get](#get) * * [getAll](#getall) @@ -32,16 +35,13 @@ * * [store](#store) * * [load](#load) * * [getContainer](#getcontainer) - * * [getAssetsEl](#getassetsel) - * * [addType](#addtype) - * * [getType](#gettype) - * * [getTypes](#gettypes) * * [Asset]: asset.html * * @module AssetManager */ +import { debounce, isFunction } from 'underscore'; import Module from 'common/module'; import defaults from './config/config'; import Asset from './model/Assets'; @@ -56,7 +56,7 @@ export const evUpdate = `${evPfx}update`; export const evAdd = `${evPfx}add`; export const evRemove = `${evPfx}remove`; export const evRemoveBefore = `${evRemove}:before`; -export const evCustom = `${evRemove}:custom`; +export const evCustom = `${evPfx}custom`; export default () => { let c = {}; @@ -113,6 +113,26 @@ export default () => { this.getAll().trigger(ev, ...data); }, + __onAllEvent() { + this.__trgCustom(); + }, + + __trgCustom: debounce(function() { + const bhv = this.__getBehaviour(); + this.em.trigger(this.events.custom, { + am: this, + open: this.isOpen(), + assets: this.getAll().models, + types: bhv.types || [], + container: bhv.container, + close: () => this.close(), + select: (asset, complete) => { + const res = this.add(asset); + isFunction(bhv.select) && bhv.select(res, complete); + } + }); + }), + /** * Open the asset manager. * @param {Object} [options] Options for the asset manager. @@ -160,7 +180,7 @@ export default () => { */ isOpen() { const cmd = this.em.get('Commands'); - return cmd.isActive(assetCmd); + return !!(cmd && cmd.isActive(assetCmd)); }, /** @@ -280,12 +300,14 @@ export default () => { * @returns {HTMLElement} */ getContainer() { - return am.el; + const bhv = this.__getBehaviour(); + return bhv.container || (am && am.el); }, /** * Get assets element container * @returns {HTMLElement} + * @private */ getAssetsEl() { return am.el.querySelector('[data-el=assets]'); @@ -337,6 +359,7 @@ export default () => { * `model` (business logic), `view` (presentation logic) * and `isType` function which recognize the type of the * passed entity + * @private * @example * assetManager.addType('my-type', { * model: {}, @@ -352,6 +375,7 @@ export default () => { * Get type * @param {string} id Type ID * @returns {Object} Type definition + * @private */ getType(id) { return this.getAll().getType(id); @@ -360,6 +384,7 @@ export default () => { /** * Get types * @returns {Array} + * @private */ getTypes() { return this.getAll().getTypes(); diff --git a/src/commands/view/OpenAssets.js b/src/commands/view/OpenAssets.js index 16c24efcb..0846a1a98 100644 --- a/src/commands/view/OpenAssets.js +++ b/src/commands/view/OpenAssets.js @@ -1,3 +1,5 @@ +import { createEl } from '../../utils/dom'; + export default { open(content) { const { editor, title } = this; @@ -11,38 +13,43 @@ export default { }, run(editor, sender, opts = {}) { - this.editor = editor; - const modal = editor.Modal; const am = editor.AssetManager; const config = am.getConfig(); - const types = opts.types; - const accept = opts.accept; + const { types = [], accept, select } = opts; this.title = opts.modalTitle || editor.t('assetManager.modalTitle') || ''; + this.editor = editor; am.setTarget(opts.target); am.onClick(opts.onClick); am.onDblClick(opts.onDblClick); am.onSelect(opts.onSelect); am.__behaviour({ - select: opts.select + select, + types }); - if (!this.rendered || types) { - let assets = am.getAll().filter(i => i); + if (config.custom) { + this.rendered = this.rendered || createEl('div'); + am.__behaviour({ container: this.rendered }); + am.__trgCustom(); + } else { + if (!this.rendered || types) { + let assets = am.getAll().filter(i => i); - if (types && types.length) { - assets = assets.filter(a => types.indexOf(a.get('type')) !== -1); - } + if (types && types.length) { + assets = assets.filter(a => types.indexOf(a.get('type')) !== -1); + } - am.render(assets); - this.rendered = am.getContainer(); - } + am.render(assets); + this.rendered = am.getContainer(); + } - if (accept) { - const uploadEl = this.rendered.querySelector( - `input#${config.stylePrefix}uploadFile` - ); - uploadEl && uploadEl.setAttribute('accept', accept); + if (accept) { + const uploadEl = this.rendered.querySelector( + `input#${config.stylePrefix}uploadFile` + ); + uploadEl && uploadEl.setAttribute('accept', accept); + } } this.open(this.rendered); diff --git a/src/common/module.js b/src/common/module.js index b34f6c677..35a48d954 100644 --- a/src/common/module.js +++ b/src/common/module.js @@ -13,7 +13,7 @@ export default { getAllMap() { return this.getAll().reduce((acc, i) => { - acc[i.get('id')] = i; + acc[i.get(i.idAttribute)] = i; return acc; }, {}); },