Fix class removing from Components. Fixes #661

src/commands/index.js

@@ -139,7 +139,7 @@ module.exports = () => {
           var collection = sel.collection;
           var index = collection.indexOf(sel);
           collection.add(sel.clone(), {at: index + 1});
-          ed.trigger('component:update', sel);
+          sel.emitUpdate()
         },
       };
 
@@ -164,7 +164,7 @@ module.exports = () => {
           const onEnd = (e, opts) => {
             em.runDefault();
             em.set('selectedComponent', sel);
-            ed.trigger('component:update', sel);
+            sel.emitUpdate()
             dragger && dragger.blur();
           };
 

src/dom_components/model/Component.js

@@ -168,6 +168,8 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     this.initComponents();
     this.initToolbar();
     this.set('status', '');
+    this.listenTo(this.get('classes'), 'add remove change',
+      () => this.emitUpdate('classes'));
     this.init();
   },
 
@@ -282,7 +284,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
    */
   getAttributes() {
     const classes = [];
-    const attributes = this.get('attributes') || {};
+    const attributes = { ...this.get('attributes') };
 
     // Add classes
     this.get('classes').each(cls => classes.push(cls.get('name')));
@@ -723,7 +725,14 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     })
 
     return scr;
-  }
+  },
+
+
+  emitUpdate(property) {
+    const em = this.em;
+    const event = 'component:update' + (property ? `:${property}` : '');
+    em && em.trigger(event, this.model);
+  },
 
 },{
 

src/dom_components/view/ComponentView.js

@@ -56,14 +56,11 @@ module.exports = Backbone.View.extend({
    * @private
    */
   handleChange() {
-    var em = this.em;
+    const model = this.model;
-    if(em) {
+    model.emitUpdate();
-      var model = this.model;
-      em.trigger('component:update', model);
 
-      for(var prop in model.changed) {
+    for (let prop in model.changed) {
-        em.trigger('component:update:' + prop, model);
+      model.emitUpdate(prop);
-      }
     }
   },
 

src/selector_manager/view/ClassTagView.js

@@ -89,7 +89,6 @@ module.exports = require('backbone').View.extend({
    */
   changeStatus() {
     this.model.set('active', !this.model.get('active'));
-    this.target.trigger('targetClassUpdated');
   },
 
 
@@ -107,7 +106,6 @@ module.exports = require('backbone').View.extend({
     sel && sel.get & sel.get('classes').remove(model);
     coll && coll.remove(model);
     setTimeout(() => this.remove(), 0);
-    em && em.trigger('targetClassRemoved');
   },
 
 

src/selector_manager/view/ClassTagsView.js

@@ -52,7 +52,7 @@ module.exports = Backbone.View.extend({
     this.em = this.target;
 
     this.listenTo(this.target ,'change:selectedComponent',this.componentChanged);
-    this.listenTo(this.target, 'targetClassUpdated', this.updateSelector);
+    this.listenTo(this.target, 'component:update:classes', this.updateSelector);
 
     this.listenTo(this.collection, 'add', this.addNew);
     this.listenTo(this.collection, 'reset', this.renderClasses);
@@ -190,8 +190,6 @@ module.exports = Backbone.View.extend({
   stateChanged(e) {
     if(this.compTarget){
       this.compTarget.set('state', this.$states.val());
-      if(this.target)
-        this.target.trigger('targetStateUpdated');
       this.updateSelector();
     }
   },
@@ -219,11 +217,6 @@ module.exports = Backbone.View.extend({
         compCls.add(model);
         var lenA = compCls.length;
         this.collection.add(model);
-
-        if (lenA > lenB) {
-          target.trigger('targetClassAdded');
-        }
-
         this.updateStateVis();
       }
     }

src/style_manager/view/SectorsView.js

@@ -19,10 +19,10 @@ module.exports = Backbone.View.extend({
     body.removeChild(dummy);
     this.propTarget = target;
     const coll = this.collection;
+    const events = 'change:selectedComponent component:update:classes change:device';
     this.listenTo(coll, 'add', this.addTo);
     this.listenTo(coll, 'reset', this.render);
-    this.listenTo(this.target, 'change:selectedComponent targetClassAdded targetClassRemoved targetClassUpdated ' +
+    this.listenTo(this.target, events, this.targetUpdated);
-      'targetStateUpdated targetStyleUpdated change:device', this.targetUpdated);
 
   },
 

test/specs/dom_components/model/Component.js

@@ -198,6 +198,13 @@ module.exports = {
           expect(result.length).toEqual(2);
         });
 
+        it('removeClass actually removes classes from attributes', () => {
+          obj.addClass('class1');
+          obj.removeClass('class1');
+          const result = obj.getAttributes();
+          expect(result.class).toEqual(undefined);
+        });
+
         it('setAttributes', () => {
           obj.setAttributes({
             id: 'test',

test/specs/dom_components/view/ComponentV.js

@@ -1,6 +1,7 @@
 const ComponentView = require('dom_components/view/ComponentView');
 const Component = require('dom_components/model/Component');
 const DomComponents = require('dom_components');
+const Editor = require('editor/model/Editor');
 
 module.exports = {
   run() {
@@ -13,13 +14,16 @@ module.exports = {
         var hClass = 'hc-state';
         var dcomp;
         var compOpts;
+        let em;
 
         beforeEach(() => {
+          em = new Editor({});
           dcomp = new DomComponents();
           compOpts = {
+            em,
             componentTypes: dcomp.componentTypes,
           };
-          model = new Component();
+          model = new Component({}, compOpts);
           view = new ComponentView({
             model
           });
@@ -121,6 +125,13 @@ module.exports = {
           expect(view.$el.html()).toEqual('<span data-highlightable="1"></span><div title="test" data-highlightable="1"></div>');
         });
 
+        it('removeClass removes classes from attributes', () => {
+          model.addClass('class1');
+          model.removeClass('class1');
+          const result = model.getAttributes();
+          expect(result.class).toEqual(undefined);
+        });
+
     });
   }
 };

test/specs/selector_manager/view/ClassTagView.js

@@ -69,14 +69,6 @@ module.exports = {
           setTimeout(() => expect(fixtures.innerHTML).toNotExist(), 0)
         });
 
-        it('On remove triggers event', () => {
-          var spy = sinon.spy();
-          sinon.stub(obj.target, 'get').returns(0);
-          obj.target.on("targetClassRemoved", spy);
-          obj.$el.find('#close').trigger('click');
-          expect(spy.called).toEqual(true);
-        });
-
         it('Checkbox toggles status', () => {
           var spy     = sinon.spy();
           obj.model.on("change:active", spy);
@@ -89,7 +81,7 @@ module.exports = {
         it('On toggle triggers event', () => {
           var spy = sinon.spy();
           sinon.stub(obj.target, 'get').returns(0);
-          obj.target.on("targetClassUpdated", spy);
+          obj.target.on("component:update:classes", spy);
           obj.$el.find('#checkbox').trigger('click');
           expect(spy.called).toEqual(true);
         });