Add SelectorManager.select method and update StyleManager.setTarget return

src/domain_abstract/model/Styleable.js

@@ -105,5 +105,11 @@ export default {
 
   getSelectors() {
     return this.get('selectors') || this.get('classes');
+  },
+
+  getSelectorsString() {
+    return this.selectorsToString
+      ? this.selectorsToString()
+      : this.getSelectors().getFullString();
   }
 };

src/selector_manager/index.js

@@ -57,7 +57,7 @@ const isClass = str => isString(str) && str[0] == '.';
 
 export default config => {
   var c = config || {};
-  var selectors, selectorTags;
+  var selectors;
 
   return {
     Selector,
@@ -98,7 +98,7 @@ export default config => {
         c.stylePrefix = ppfx + c.stylePrefix;
       }
 
-      selectorTags = new ClassTagsView({
+      this.selectorTags = new ClassTagsView({
         collection: new Selectors([], { em, config: c }),
         config: c
       });
@@ -129,6 +129,14 @@ export default config => {
       }
     },
 
+    select(value, opts = {}) {
+      const targets = Array.isArray(value) ? value : [value];
+      const toSelect = this.em.get('StyleManager').setTarget(targets, opts);
+      const res = toSelect.map(sel => sel.getSelectorsString());
+      this.selectorTags.componentChanged({ targets: res });
+      return this;
+    },
+
     /**
      * Change the selector state
      * @param {String} value State value
@@ -289,12 +297,12 @@ export default config => {
      */
     render(selectors) {
       if (selectors) {
-        var view = new ClassTagsView({
+        this.selectorTags = new ClassTagsView({
           collection: new Selectors(selectors),
           config: c
         });
-        return view.render().el;
+        return this.selectorTags.render().el;
-      } else return selectorTags.render().el;
+      } else return this.selectorTags.render().el;
     }
   };
 };

src/selector_manager/view/ClassTagsView.js

@@ -1,4 +1,4 @@
-import { isEmpty, debounce } from 'underscore';
+import { isEmpty, isArray, isString, debounce } from 'underscore';
 import Backbone from 'backbone';
 import ClassTagView from './ClassTagView';
 
@@ -92,6 +92,7 @@ export default Backbone.View.extend({
     const selectors = this.getCommonSelectors({ opts });
     const state = em.get('state');
     const mediaText = em.getCurrentMedia();
+    const ruleComponents = [];
     const rule =
       cssC.get(selectors, state, mediaText) ||
       cssC.add(selectors, state, mediaText);
@@ -104,6 +105,7 @@ export default Backbone.View.extend({
       });
       style = ruleComponent.getStyle();
       ruleComponent.setStyle({});
+      ruleComponents.push(ruleComponent);
     });
 
     style && rule.addStyle(style);
@@ -113,7 +115,7 @@ export default Backbone.View.extend({
       selectors,
       mediaText,
       rule,
-      ruleComponent,
+      ruleComponents,
       state
     });
   },
@@ -206,14 +208,13 @@ export default Backbone.View.extend({
    * @param  {Object} e
    * @private
    */
-  componentChanged: debounce(function() {
+  componentChanged: debounce(function({ targets } = {}) {
-    const { em } = this;
+    const target = targets || this.getTarget();
-    const target = this.getTarget();
     let validSelectors = [];
 
     if (target) {
       this.checkStates();
-      validSelectors = this.getCommonSelectors();
+      validSelectors = this.getCommonSelectors({ targets });
       this.checkSync({ validSelectors });
     }
 
@@ -223,7 +224,9 @@ export default Backbone.View.extend({
 
   getCommonSelectors({ targets, opts = {} } = {}) {
     const trgs = targets || this.getTargets();
-    const selectors = trgs.map(tr => tr.getSelectors().getValid(opts));
+    const selectors = trgs
+      .map(tr => tr.getSelectors && tr.getSelectors().getValid(opts))
+      .filter(i => i);
     return this._commonSelectors(...selectors);
   },
 
@@ -269,7 +272,7 @@ export default Backbone.View.extend({
   updateStateVis(target) {
     const em = this.em;
     const avoidInline = em && em.getConfig('avoidInlineStyle');
-    const display = this.collection.length || avoidInline ? 'block' : 'none';
+    const display = this.collection.length || avoidInline ? '' : 'none';
     this.getStatesC().css('display', display);
     this.updateSelector(target);
   },
@@ -279,34 +282,37 @@ export default Backbone.View.extend({
    * @return {this}
    * @private
    */
-  updateSelector(target) {
+  updateSelector(targets) {
-    const cmpFrst = this.config.componentFirst;
-    const selected = target || this.getTarget();
-    if (!selected || !selected.get) return;
-    const result = cmpFrst
-      ? this.getTargets()
-          .map(trg => this.__getName(trg))
-          .join(', ')
-      : this.__getName(selected);
     const elSel = this.el.querySelector('[data-selected]');
-    elSel && (elSel.innerHTML = result);
+    const result = [];
+    let trgs = targets || this.getTargets();
+    trgs = isArray(trgs) ? trgs : [trgs];
+
+    trgs.forEach(target => result.push(this.__getName(target)));
+    elSel && (elSel.innerHTML = result.join(', '));
     this.checkStates();
   },
 
   __getName(target) {
     const { pfx, config, em } = this;
     const { selectedName, componentFirst } = config;
-    const coll = this.collection;
+    let result;
-    const selectors = target.getSelectors().getStyleable();
+
-    const state = em.get('state');
+    if (isString(target)) {
-    const idRes = target.getId
+      result = `<span class="${pfx}sel-gen">${target}</span>`;
-      ? `<span class="${pfx}sel-cmp">${target.getName()}</span><span class="${pfx}sel-id">#${target.getId()}</span>`
+    } else {
-      : '';
+      if (!target || !target.get) return;
-    let result = coll.getFullString(selectors);
+      const selectors = target.getSelectors().getStyleable();
-    result = result || target.get('selectorsAdd') || idRes;
+      const state = em.get('state');
-    result = componentFirst ? idRes : result;
+      const idRes = target.getId
-    result += state ? `<span class="${pfx}sel-state">:${state}</span>` : '';
+        ? `<span class="${pfx}sel-cmp">${target.getName()}</span><span class="${pfx}sel-id">#${target.getId()}</span>`
-    result = selectedName ? selectedName({ result, state, target }) : result;
+        : '';
+      result = this.collection.getFullString(selectors);
+      result = result || target.get('selectorsAdd') || idRes;
+      result = componentFirst ? idRes : result;
+      result += state ? `<span class="${pfx}sel-state">:${state}</span>` : '';
+      result = selectedName ? selectedName({ result, state, target }) : result;
+    }
 
     return result && `<span class="${pfx}sel">${result}</span>`;
   },

src/style_manager/view/SectorsView.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-import { extend, isString } from 'underscore';
+import { extend, isString, isArray } from 'underscore';
 import { isTaggableNode } from 'utils/mixins';
 import { appendAtIndex } from 'utils/dom';
 import SectorView from './SectorView';
@@ -108,40 +108,47 @@ export default Backbone.View.extend({
   /**
    * Select different target for the Style Manager.
    * It could be a Component, CSSRule, or a string of any CSS selector
-   * @param {Component|CSSRule|String} target
+   * @param {Component|CSSRule|String|Array<Component|CSSRule|String>} target
-   * @return {Styleable} A Component or CSSRule
+   * @return {Array<Styleable>} Array of Components/CSSRules
    */
   setTarget(target, opts = {}) {
     const em = this.target;
+    const trgs = isArray(target) ? target : [target];
     const { targetIsClass, stylable } = opts;
-    let model = target;
+    const models = [];
 
-    if (isString(target)) {
+    trgs.forEach(target => {
-      let rule;
+      let model = target;
-      const rules = em.get('CssComposer').getAll();
 
-      if (targetIsClass) {
+      if (isString(target)) {
-        rule = rules.filter(
+        let rule;
-          rule => rule.get('selectors').getFullString() === target
+        const rules = em.get('CssComposer').getAll();
-        )[0];
-      }
 
-      if (!rule) {
+        if (targetIsClass) {
-        rule = rules.filter(rule => rule.get('selectorsAdd') === target)[0];
+          rule = rules.filter(
-      }
+            rule => rule.get('selectors').getFullString() === target
+          )[0];
+        }
+
+        if (!rule) {
+          rule = rules.filter(rule => rule.get('selectorsAdd') === target)[0];
+        }
+
+        if (!rule) {
+          rule = rules.add({ selectors: [], selectorsAdd: target });
+        }
 
-      if (!rule) {
+        stylable && rule.set({ stylable });
-        rule = rules.add({ selectors: [], selectorsAdd: target });
+        model = rule;
       }
 
-      stylable && rule.set({ stylable });
+      models.push(model);
-      model = rule;
+    });
-    }
 
     const pt = this.propTarget;
-    pt.model = model;
+    pt.targets = models;
-    pt.trigger('styleManager:update', model);
+    pt.trigger('update');
-    return model;
+    return models;
   },
 
   /**