diff --git a/src/selector_manager/index.js b/src/selector_manager/index.js index 8f1a30df5..815527a55 100644 --- a/src/selector_manager/index.js +++ b/src/selector_manager/index.js @@ -55,6 +55,7 @@ module.exports = config => { var c = config || {}, defaults = require('./config/config'), + Selector = require('./model/Selector'), Selectors = require('./model/Selectors'), ClassTagsView = require('./view/ClassTagsView'); var selectors, selectorTags; @@ -89,15 +90,13 @@ module.exports = config => { c.stylePrefix = ppfx + c.stylePrefix; } - selectors = new Selectors(c.selectors, { - em, - config: c, - }); selectorTags = new ClassTagsView({ - collection: selectors, + collection: new Selectors([], {em,config: c}), config: c, }); + // Global selectors container + selectors = new Selectors(c.selectors); selectors.on('add', (model) => em.trigger('selector:add', model)); @@ -120,11 +119,20 @@ module.exports = config => { * }); * */ add(name, opts = {}) { - const selector = this.get(name); + if (typeof name == 'object') { + opts = name; + } else { + opts.name = name; + } + + if (opts.label && !opts.name) { + opts.name = Selector.escapeName(opts.label); + } + + const cname = opts.name; + const selector = cname ? this.get(cname) : selectors.where(opts)[0]; if (!selector) { - console.log('Add pls', selector); - opts.name = name.name || name; return selectors.add(opts); } diff --git a/src/selector_manager/model/Selector.js b/src/selector_manager/model/Selector.js index a83d12a1e..1ceba7b6a 100644 --- a/src/selector_manager/model/Selector.js +++ b/src/selector_manager/model/Selector.js @@ -1,6 +1,6 @@ var Backbone = require('backbone'); -module.exports = Backbone.Model.extend({ +const Selector = Backbone.Model.extend({ idAttribute: 'name', @@ -23,20 +23,16 @@ module.exports = Backbone.Model.extend({ }, initialize() { - this.set('name', this.escapeName(this.get('name'))); - var label = this.get('label').trim(); - if(!label) - this.set('label', this.get('name')); - }, + const name = this.get('name'); + const label = this.get('label'); - /** - * Escape string - * @param {string} name - * @return {string} - * @private - */ - escapeName(name) { - return name.replace(/([^a-z0-9\w]+)/gi, '-'); + if (!name) { + this.set('name', label); + } else if (!label) { + this.set('label', name); + } + + this.set('name', Selector.escapeName(this.get('name'))); }, /** @@ -58,4 +54,16 @@ module.exports = Backbone.Model.extend({ return init + this.get('name'); } +}, { + /** + * Escape string + * @param {string} name + * @return {string} + * @private + */ + escapeName(name) { + return name.trim().replace(/([^a-z0-9\w]+)/gi, '-'); + }, }); + +module.exports = Selector; diff --git a/src/selector_manager/view/ClassTagsView.js b/src/selector_manager/view/ClassTagsView.js index 5a861b928..493836bc0 100644 --- a/src/selector_manager/view/ClassTagsView.js +++ b/src/selector_manager/view/ClassTagsView.js @@ -197,23 +197,28 @@ module.exports = Backbone.View.extend({ * @param {Object} e * @private */ - addNewTag(name) { - if(!name) - return; + addNewTag(label) { + const target = this.target; + const component = this.compTarget; - if(this.target){ - var cm = this.target.get('SelectorManager'); - var model = cm.add(name); + if (!label.trim()) { + return; + } - if(this.compTarget){ - var targetCls = this.compTarget.get('classes'); - var lenB = targetCls.length; - targetCls.add(model); - var lenA = targetCls.length; + if (target) { + const sm = target.get('SelectorManager'); + var model = sm.add({label}); + + if (component) { + var compCls = component.get('classes'); + var lenB = compCls.length; + compCls.add(model); + var lenA = compCls.length; this.collection.add(model); - if(lenA > lenB) - this.target.trigger('targetClassAdded'); + if (lenA > lenB) { + target.trigger('targetClassAdded'); + } this.updateStateVis(); }