diff --git a/src/trait_manager/index.js b/src/trait_manager/index.js index f9837572d..f9752cc9b 100644 --- a/src/trait_manager/index.js +++ b/src/trait_manager/index.js @@ -10,7 +10,6 @@ import TraitButtonView from './view/TraitButtonView'; export default () => { let c = {}; - let types = {}; let TraitsViewer; const typesDef = { text: TraitView, @@ -24,8 +23,6 @@ export default () => { return { TraitsView, - types, - /** * Name of the module * @type {String} @@ -50,7 +47,7 @@ export default () => { c = config; defaults(c, defaultOpts); const ppfx = c.pStylePrefix; - types = { ...typesDef }; + this.types = { ...typesDef }; ppfx && (c.stylePrefix = `${ppfx}${c.stylePrefix}`); return this; }, @@ -79,8 +76,8 @@ export default () => { * @param {Object} methods Object representing the trait */ addType(name, trait) { - const baseView = types.text; - types[name] = baseView.extend(trait); + const baseView = this.getType('text'); + this.types[name] = baseView.extend(trait); }, /** @@ -89,23 +86,33 @@ export default () => { * @return {Object} */ getType(name) { - return types[name]; + return this.getTypes()[name]; + }, + + /** + * Get all trait types + * @returns {Object} + */ + getTypes() { + return this.types; }, render() { - TraitsViewer && TraitsViewer.remove(); + const el = TraitsViewer && TraitsViewer.el; TraitsViewer = new TraitsView({ + el, collection: [], editor: c.em, config: c }); - TraitsViewer.itemsView = types; - return TraitsViewer.render().el; + TraitsViewer.itemsView = this.getTypes(); + TraitsViewer.updatedCollection(); + return TraitsViewer.el; }, destroy() { TraitsViewer && TraitsViewer.remove(); - [c, types, TraitsViewer].forEach(i => (i = {})); + [c, TraitsViewer].forEach(i => (i = {})); } }; }; diff --git a/src/trait_manager/view/TraitsView.js b/src/trait_manager/view/TraitsView.js index 1d1df36cf..5db8bd000 100644 --- a/src/trait_manager/view/TraitsView.js +++ b/src/trait_manager/view/TraitsView.js @@ -8,14 +8,14 @@ export default DomainViews.extend({ initialize(o = {}) { const config = o.config || {}; + const pfx = config.stylePrefix || ''; + const em = o.editor; this.config = config; - this.em = o.editor; - this.pfx = config.stylePrefix || ''; + this.em = em; + this.pfx = pfx; this.ppfx = config.pStylePrefix || ''; - this.className = this.pfx + 'traits'; - const toListen = 'component:toggled'; - this.listenTo(this.em, toListen, this.updatedCollection); - this.updatedCollection(); + this.className = `${pfx}traits`; + this.listenTo(em, 'component:toggled', this.updatedCollection); }, /** @@ -23,9 +23,9 @@ export default DomainViews.extend({ * @private */ updatedCollection() { - const ppfx = this.ppfx; - const comp = this.em.getSelected(); - this.el.className = `${this.className} ${ppfx}one-bg ${ppfx}two-color`; + const { ppfx, className, em } = this; + const comp = em.getSelected(); + this.el.className = `${className} ${ppfx}one-bg ${ppfx}two-color`; this.collection = comp ? comp.get('traits') : []; this.render(); }