Update states rendering

src/common/module.js

@@ -30,7 +30,7 @@ export default {
     this.em = this.config.em;
   },
 
-  __initListen() {
+  __initListen(opts = {}) {
     const { all, em, events } = this;
     all &&
       em &&
@@ -41,6 +41,16 @@ export default {
           em.trigger(events.update, p, p.changedAttributes(), c)
         )
         .on('all', this.__catchAllEvent, this);
+    // Register collections
+    this.cls = [all].concat(opts.collections || []);
+    // Propagate events
+    (opts.propagate || []).forEach(({ entity, event }) => {
+      entity.on('all', (ev, model, coll, opts) => {
+        const options = opts || coll;
+        const opt = { event: ev, ...options };
+        [em, all].map(md => md.trigger(event, model, opt));
+      });
+    });
   },
 
   __remove(model, opts = {}) {
@@ -88,5 +98,13 @@ export default {
     } while (allMap[id]);
 
     return id;
+  },
+
+  __destroy() {
+    this.cls.forEach(coll => {
+      coll.stopListening();
+      coll.reset();
+    });
+    this.em = 0;
   }
 };

src/selector_manager/index.js

@@ -44,7 +44,7 @@
  * * `selector:add` - Selector added. The [Selector] is passed as an argument to the callback.
  * * `selector:remove` - Selector removed. The [Selector] is passed as an argument to the callback.
  * * `selector:update` - Selector updated. The [Selector] and the object containing changes are passed as arguments to the callback.
- * * `selector:state` - State changed. Passes the new state value as an argument.
+ * * `selector:state` - States changed. An object containing all the available data about the triggered event is passed as an argument to the callback.
  * * `selector` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
  *
  * ## Methods
@@ -134,13 +134,9 @@ export default () => {
         em.trigger('selector:type', value)
       );
       const listenTo =
-        'component:toggled component:update:classes styleManager:update change:state selector:type';
+        'component:toggled component:update:classes styleManager:update selector:state selector:type';
       this.model.listenTo(em, listenTo, () => this.__update());
 
-      em.on(this.events.all, (...args) => {
-        console.log('All event', args);
-      });
-
       return this;
     },
 
@@ -409,12 +405,9 @@ export default () => {
 
     destroy() {
       const { selectorTags, model } = this;
-      const all = this.getAll();
       model.stopListening();
-      all.stopListening();
-      all.reset();
+      this.__destroy();
       selectorTags && selectorTags.remove();
-      this.em = {};
       this.selectorTags = {};
     },
 

src/selector_manager/model/State.js

@@ -26,7 +26,7 @@ export default class State extends Model {
    * @returns {String}
    */
   getLabel() {
-    return this.get('label');
+    return this.get('label') || this.getName();
   }
 }
 

src/selector_manager/view/ClassTagsView.js

@@ -3,15 +3,7 @@ import Backbone from 'backbone';
 import ClassTagView from './ClassTagView';
 
 export default Backbone.View.extend({
-  template({
-    labelInfo,
-    labelStates,
-    labelHead,
-    iconSync,
-    iconAdd,
-    pfx,
-    ppfx
-  }) {
+  template({ labelInfo, labelHead, iconSync, iconAdd, pfx, ppfx }) {
     return `
     <div id="${pfx}up" class="${pfx}header">
       <div id="${pfx}label" class="${pfx}header-label">${labelHead}</div>
@@ -19,9 +11,7 @@ export default Backbone.View.extend({
         <span id="${pfx}input-c" data-states-c>
           <div class="${ppfx}field ${ppfx}select">
             <span id="${ppfx}input-holder">
-              <select id="${pfx}states" data-states>
-                <option value="">${labelStates}</option>
-              </select>
+              <select id="${pfx}states" data-states></select>
             </span>
             <div class="${ppfx}sel-arrow">
               <div class="${ppfx}d-s-arrow"></div>
@@ -66,7 +56,8 @@ export default Backbone.View.extend({
     const { em } = this.config;
     const coll = this.collection;
     this.target = this.config.em;
-    this.module = o.module;
+    const md = o.module;
+    this.module = md;
     this.em = em;
     const toList = 'component:toggled component:update:classes';
     const toListCls = 'component:update:classes change:state';
@@ -77,6 +68,11 @@ export default Backbone.View.extend({
     this.listenTo(coll, 'add', this.addNew);
     this.listenTo(coll, 'reset', this.renderClasses);
     this.listenTo(coll, 'remove', this.tagRemoved);
+    this.listenTo(
+      md.getAll(),
+      md.events.state,
+      debounce(() => this.renderStates())
+    );
     this.delegateEvents();
   },
 
@@ -125,28 +121,6 @@ export default Backbone.View.extend({
     this.updateStateVis();
   },
 
-  /**
-   * Create select input with states
-   * @return {string} String of options
-   * @private
-   */
-  getStateOptions() {
-    const { states, em } = this;
-    let result = [];
-
-    states.forEach(state =>
-      result.push(
-        `<option value="${state.name}">${em.t(
-          `selectorManager.states.${state.name}`
-        ) ||
-          state.label ||
-          state.name}</option>`
-      )
-    );
-
-    return result.join('');
-  },
-
   /**
    * Add new model
    * @param {Object} model
@@ -397,6 +371,26 @@ export default Backbone.View.extend({
     return this.$statesC;
   },
 
+  renderStates() {
+    const { module, em } = this;
+    const labelStates = em.t('selectorManager.emptyState');
+    const options = module
+      .getStates()
+      .map(state => {
+        const label =
+          em.t(`selectorManager.states.${state.id}`) ||
+          state.getLabel() ||
+          state.id;
+        return `<option value="${state.id}">${label}</option>`;
+      })
+      .join('');
+
+    const statesEl = this.getStates();
+    statesEl &&
+      statesEl.html(`<option value="">${labelStates}</option>${options}`);
+    this.checkStates();
+  },
+
   render() {
     const { em, pfx, ppfx, config, $el, el } = this;
     const { render, iconSync, iconAdd } = config;
@@ -404,7 +398,6 @@ export default Backbone.View.extend({
       iconSync,
       iconAdd,
       labelHead: em.t('selectorManager.label'),
-      labelStates: em.t('selectorManager.emptyState'),
       labelInfo: em.t('selectorManager.selected'),
       ppfx,
       pfx,
@@ -418,8 +411,7 @@ export default Backbone.View.extend({
     this.$classes = $el.find('#' + pfx + 'tags-c');
     this.$btnSyncEl = $el.find('[data-sync-style]');
     this.$input.hide();
-    const statesEl = this.getStates();
-    statesEl && statesEl.append(this.getStateOptions());
+    this.renderStates();
     this.renderClasses();
     $el.attr('class', `${this.className} ${ppfx}one-bg ${ppfx}two-color`);
     return this;