Added new methods to handle state selector

src/selector_manager/index.js

@@ -39,7 +39,9 @@
  * * [add](#add)
  * * [addClass](#addclass)
  * * [get](#get)
- * * [getAll](#getAll)
+ * * [getAll](#getall)
+ * * [setState](#setstate)
+ * * [getState](#getstate)
  *
  * @module SelectorManager
  */
@@ -90,6 +92,7 @@ export default config => {
       };
       const em = c.em;
       const ppfx = c.pStylePrefix;
+      this.em = em;
 
       if (ppfx) {
         c.stylePrefix = ppfx + c.stylePrefix;
@@ -126,6 +129,26 @@ export default config => {
       }
     },
 
+    /**
+     * Change the selector state
+     * @param {String} value State value
+     * @returns {this}
+     * @example
+     * selectorManager.setState('hover');
+     */
+    setState(value) {
+      this.em.set('state', value);
+      return this;
+    },
+
+    /**
+     * Get the current selector state
+     * @returns {String}
+     */
+    getState() {
+      return this.em.get('state');
+    },
+
     addSelector(name, opt = {}) {
       let opts = { ...opt };
 

src/selector_manager/view/ClassTagsView.js

@@ -195,6 +195,12 @@ export default Backbone.View.extend({
     else if (e.keyCode === 27) this.endNewTag();
   },
 
+  checkStates() {
+    const state = this.em.get('state');
+    const statesEl = this.getStates();
+    statesEl && statesEl.val(state);
+  },
+
   /**
    * Triggered when component is changed
    * @param  {Object} e
@@ -203,12 +209,10 @@ export default Backbone.View.extend({
   componentChanged: debounce(function() {
     const { em } = this;
     const target = this.getTarget();
-    const state = em.get('state');
     let validSelectors = [];
 
     if (target) {
-      const statesEl = this.getStates();
+      this.checkStates();
-      statesEl && statesEl.val(state);
       validSelectors = this.getCommonSelectors();
       this.checkSync({ validSelectors });
     }
@@ -286,6 +290,7 @@ export default Backbone.View.extend({
       : this.__getName(selected);
     const elSel = this.el.querySelector('[data-selected]');
     elSel && (elSel.innerHTML = result);
+    this.checkStates();
   },
 
   __getName(target) {