Refactor class tag view

src/selector_manager/view/ClassTagView.js

@@ -23,11 +23,12 @@ module.exports = require('backbone').View.extend({
   },
 
   initialize(o) {
-    this.config = o.config || {};
+    const config = o.config || {};
+    this.config = config;
     this.coll = o.coll || null;
-    this.pfx = this.config.stylePrefix || '';
+    this.pfx = config.stylePrefix || '';
-    this.ppfx = this.config.pStylePrefix || '';
+    this.ppfx = config.pStylePrefix || '';
-    this.em = this.config.em;
+    this.em = config.em;
     this.listenTo(this.model, 'change:active', this.updateStatus);
   },
 
@@ -84,7 +85,8 @@ module.exports = require('backbone').View.extend({
    * @private
    */
   changeStatus() {
-    this.model.set('active', !this.model.get('active'));
+    const { model } = this;
+    model.set('active', !model.get('active'));
   },
 
   /**
@@ -105,17 +107,17 @@ module.exports = require('backbone').View.extend({
    * @private
    */
   updateStatus() {
-    var chkOn = 'fa-check-square-o';
+    const { model, $el } = this;
-    var chkOff = 'fa-square-o';
+    const chkOn = 'fa-check-square-o';
+    const chkOff = 'fa-square-o';
+    const $chk = $el.find('[data-tag-status]');
 
-    if (!this.$chk) this.$chk = this.$el.find('#' + this.pfx + 'checkbox');
+    if (model.get('active')) {
-
+      $chk.removeClass(chkOff).addClass(chkOn);
-    if (this.model.get('active')) {
+      $el.removeClass('opac50');
-      this.$chk.removeClass(chkOff).addClass(chkOn);
-      this.$el.removeClass('opac50');
     } else {
-      this.$chk.removeClass(chkOn).addClass(chkOff);
+      $chk.removeClass(chkOn).addClass(chkOff);
-      this.$el.addClass('opac50');
+      $el.addClass('opac50');
     }
   },
 

src/selector_manager/view/ClassTagsView.js

@@ -166,7 +166,6 @@ module.exports = Backbone.View.extend({
   },
 
   getTarget() {
-    const targetStyle = this.getStyleEmitter().model;
     return this.target.getSelected();
   },
 
@@ -252,34 +251,30 @@ module.exports = Backbone.View.extend({
    * @return {Object} Object created
    * @private
    * */
-  addToClasses(model, fragmentEl) {
+  addToClasses(model, fragmentEl = null) {
-    var fragment = fragmentEl || null;
+    const fragment = fragmentEl;
-
+    const classes = this.getClasses();
-    var view = new ClassTagView({
+    const rendered = new ClassTagView({
       model,
       config: this.config,
       coll: this.collection
-    });
+    }).render().el;
-    var rendered = view.render().el;
 
-    if (fragment) fragment.appendChild(rendered);
+    fragment ? fragment.appendChild(rendered) : classes.append(rendered);
-    else this.getClasses().append(rendered);
 
     return rendered;
   },
 
   /**
    * Render the collection of classes
-   * @return {this}
    * @private
    */
   renderClasses() {
     const frag = document.createDocumentFragment();
     const classes = this.getClasses();
+    classes.empty();
     this.collection.each(model => this.addToClasses(model, frag));
-    classes.get(0) && classes.empty().append(frag);
+    classes.append(frag);
-
-    return this;
   },
 
   /**
@@ -288,8 +283,7 @@ module.exports = Backbone.View.extend({
    * @private
    */
   getClasses() {
-    if (!this.$classes) this.$classes = this.$el.find(`#${this.pfx}tags-c`);
+    return this.$el.find(`#${this.pfx}tags-c`);
-    return this.$classes;
   },
 
   /**