Sync common selectors with state and media

src/dom_components/model/Component.js

@@ -380,7 +380,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
       const em = this.em;
 
       if (em && em.getConfig('avoidInlineStyle')) {
-        const state = this.get('state');
+        const state = em.get('state');
         const cc = em.get('CssComposer');
         const rule = cc.getIdRule(this.getId(), { state });
         this.rule = rule;
@@ -408,7 +408,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
         const style = this.get('style') || {};
         prop = isString(prop) ? this.parseStyle(prop) : prop;
         prop = { ...prop, ...style };
-        const state = this.get('state');
+        const state = em.get('state');
         const cc = em.get('CssComposer');
         const propOrig = this.getStyle();
         this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state });

src/dom_components/view/ComponentView.js

@@ -33,7 +33,6 @@ export default Backbone.View.extend({
     this.listenTo(model, 'change:attributes', this.renderAttributes);
     this.listenTo(model, 'change:highlightable', this.updateHighlight);
     this.listenTo(model, 'change:status', this.updateStatus);
-    this.listenTo(model, 'change:state', this.updateState);
     this.listenTo(model, 'change:script', this.reset);
     this.listenTo(model, 'change:content', this.updateContent);
     this.listenTo(model, 'change', this.handleChange);
@@ -150,22 +149,6 @@ export default Backbone.View.extend({
     }
   },
 
-  /**
-   * Fires on state update. If the state is not empty will add a helper class
-   * @param  {Event} e
-   * @private
-   * */
-  updateState(e) {
-    var cl = 'hc-state';
-    var state = this.model.get('state');
-
-    if (state) {
-      this.$el.addClass(cl);
-    } else {
-      this.$el.removeClass(cl);
-    }
-  },
-
   /**
    * Update item on status change
    * @param  {Event} e

src/selector_manager/view/ClassTagsView.js

@@ -11,7 +11,7 @@ export default Backbone.View.extend({
         <span id="${pfx}input-c">
           <div class="${ppfx}field ${ppfx}select">
             <span id="${ppfx}input-holder">
-              <select id="${pfx}states">
+              <select id="${pfx}states" data-states>
                 <option value="">${statesLabel}</option>
               </select>
             </span>
@@ -40,6 +40,7 @@ export default Backbone.View.extend({
   },
 
   events: {
+    'change [data-states]': 'stateChanged',
     'click [data-sync-style]': 'syncStyle'
   },
 
@@ -56,7 +57,6 @@ export default Backbone.View.extend({
     this.events['click #' + this.addBtnId] = 'startNewTag';
     this.events['blur #' + this.newInputId] = 'endNewTag';
     this.events['keyup #' + this.newInputId] = 'onInputKeyUp';
-    this.events['change #' + this.stateInputId] = 'stateChanged';
     const { em } = this.config;
     const emitter = this.getStyleEmitter();
     const coll = this.collection;
@@ -66,7 +66,11 @@ export default Backbone.View.extend({
     const toList = 'component:toggled component:update:classes';
     this.listenTo(em, toList, this.componentChanged);
     this.listenTo(emitter, 'styleManager:update', this.componentChanged);
-    this.listenTo(em, 'component:update:classes', this.updateSelector);
+    this.listenTo(
+      em,
+      'component:update:classes change:state',
+      this.updateSelector
+    );
     this.listenTo(em, 'styleable:change change:device', this.checkSync); // component:styleUpdate
     this.listenTo(coll, 'add', this.addNew);
     this.listenTo(coll, 'reset', this.renderClasses);
@@ -80,7 +84,7 @@ export default Backbone.View.extend({
     const cssC = em.get('CssComposer');
     const opts = { noDisabled: 1 };
     const selectors = this.getCommonSelectors({ opts });
-    const state = target.get('state');
+    const state = em.get('state');
     const mediaText = em.getCurrentMedia();
     const rule =
       cssC.get(selectors, state, mediaText) ||
@@ -191,13 +195,13 @@ export default Backbone.View.extend({
    * @private
    */
   componentChanged: debounce(function() {
+    const { em } = this;
     const target = this.getTarget();
-    // this.compTarget = target;
+    const state = em.get('state');
     let validSelectors = [];
 
     if (target) {
-      const state = target.get('state');
-      state && this.getStates().val(state);
+      this.getStates().val(state);
       validSelectors = this.getCommonSelectors();
       this.checkSync({ validSelectors });
     }
@@ -267,7 +271,6 @@ export default Backbone.View.extend({
   updateSelector(target) {
     const cmpFrst = this.config.componentFirst;
     const selected = target || this.getTarget();
-    this.compTarget = selected;
     if (!selected || !selected.get) return;
     const result = cmpFrst
       ? this.getTargets()
@@ -279,21 +282,21 @@ export default Backbone.View.extend({
   },
 
   __getName(target) {
-    const { pfx, config } = this;
+    const { pfx, config, em } = this;
     const { selectedName, componentFirst } = config;
     const coll = this.collection;
     const selectors = target.getSelectors().getStyleable();
-    const state = target.get('state');
+    const state = em.get('state');
     const idRes = target.getId
       ? `<span class="${pfx}sel-cmp">${target.getName()}</span><span class="${pfx}sel-id">#${target.getId()}</span>`
       : '';
     let result = coll.getFullString(selectors);
     result = result || target.get('selectorsAdd') || idRes;
     result = componentFirst ? idRes : result;
-    result += state ? `:${state}` : '';
+    result += state ? `<span class="${pfx}sel-state">:${state}</span>` : '';
     result = selectedName ? selectedName({ result, state, target }) : result;
 
-    return result;
+    return result && `<span class="${pfx}sel">${result}</span>`;
   },
 
   /**
@@ -301,11 +304,10 @@ export default Backbone.View.extend({
    * @param  {Object} e
    * @private
    */
-  stateChanged(e) {
-    if (this.compTarget) {
-      this.compTarget.set('state', this.$states.val());
-      this.updateSelector();
-    }
+  stateChanged(ev) {
+    const { em } = this;
+    const { value } = ev.target;
+    em.set('state', value);
   },
 
   /**
@@ -315,7 +317,7 @@ export default Backbone.View.extend({
    */
   addNewTag(label) {
     const target = this.target;
-    const component = this.compTarget;
+    const component = this.getTarget();
 
     if (!label.trim()) {
       return;

src/style_manager/index.js

@@ -267,7 +267,7 @@ export default () => {
         const cssC = em.get('CssComposer');
         const sm = em.get('SelectorManager');
         const smConf = sm ? sm.getConfig() : {};
-        const state = !config.devicePreviewMode ? model.get('state') : '';
+        const state = !config.devicePreviewMode ? em.get('state') : '';
         const valid = classes.getStyleable();
         const hasClasses = valid.length;
         const opts = { state };

src/style_manager/view/SectorsView.js

@@ -4,6 +4,8 @@ import { isTaggableNode } from 'utils/mixins';
 import { appendAtIndex } from 'utils/dom';
 import SectorView from './SectorView';
 
+const helperCls = 'hc-state';
+
 export default Backbone.View.extend({
   initialize(o = {}) {
     const config = o.config || {};
@@ -23,7 +25,7 @@ export default Backbone.View.extend({
     this.propTarget = target;
     const coll = this.collection;
     const events =
-      'component:toggled component:update:classes component:update:state change:device';
+      'component:toggled component:update:classes change:state change:device';
     this.listenTo(coll, 'add', this.addTo);
     this.listenTo(coll, 'reset', this.render);
     this.listenTo(this.target, events, this.targetUpdated);
@@ -39,18 +41,29 @@ export default Backbone.View.extend({
     this.addToCollection(model, null, opts);
   },
 
+  toggleStateCls(targets = [], enable) {
+    targets.forEach(trg => {
+      const el = trg.getEl();
+      el && el.classList[enable ? 'add' : 'remove'](helperCls);
+    });
+  },
+
   /**
    * Fired when target is updated
    * @private
    */
-  targetUpdated() {
+  targetUpdated(trg) {
     const em = this.target;
     const pt = this.propTarget;
+    const targets = em.getSelectedAll();
     let model = em.getSelected();
+
+    // Clean components
+    trg && !!trg.toHTML && this.toggleStateCls([trg]);
     if (!model) return;
 
     const config = em.get('Config');
-    const state = !config.devicePreviewMode ? model.get('state') : '';
+    const state = !config.devicePreviewMode ? em.get('state') : '';
     const { componentFirst } = em.get('SelectorManager').getConfig();
     const el = model.getEl();
     pt.helper = null;
@@ -64,7 +77,6 @@ export default Backbone.View.extend({
     // Create a new rule for the state as a helper
     const appendStateRule = (style = {}) => {
       const cc = em.get('CssComposer');
-      const helperCls = 'hc-state';
       const rules = cc.getAll();
       let helperRule = cc.getClassRule(helperCls);
 
@@ -82,9 +94,14 @@ export default Backbone.View.extend({
     };
 
     model = em.get('StyleManager').getModelToStyle(model);
-    state && appendStateRule(model.getStyle());
+
+    if (state) {
+      appendStateRule(model.getStyle());
+      this.toggleStateCls(targets, 1);
+    }
+
     pt.model = model;
-    if (componentFirst) pt.targets = em.getSelectedAll();
+    if (componentFirst) pt.targets = targets;
     pt.trigger('update');
   },
 
@@ -96,7 +113,6 @@ export default Backbone.View.extend({
    */
   setTarget(target, opts = {}) {
     const em = this.target;
-    const config = em.get('Config');
     const { targetIsClass, stylable } = opts;
     let model = target;
 
@@ -122,7 +138,6 @@ export default Backbone.View.extend({
       model = rule;
     }
 
-    const state = !config.devicePreviewMode ? model.get('state') : '';
     const pt = this.propTarget;
     pt.model = model;
     pt.trigger('styleManager:update', model);