Add the possibility to edit class tags

src/class_manager/model/ClassTag.js

@@ -17,9 +17,9 @@ define(['backbone'],
 
 			/**
        * Escape string
-       * @param {String} name
+       * @param {string} name
        *
-       * @return {String}
+       * @return {string}
        */
       escapeName: function(name) {
         return name.toLowerCase().replace(/([^a-z0-9\w]+)/gi, '-');

src/class_manager/view/ClassTagView.js

@@ -27,8 +27,6 @@ define(['backbone', 'text!./../template/classTag.html'],
       this.events['blur #' + this.labelId + ' input'] = 'endEditTag';
 
       this.listenTo( this.model, 'change:active', this.updateStatus);
-      //this.listenTo( this.model, 'change:label', this.updateStatus);
-
       this.delegateEvents();
     },
 
@@ -40,9 +38,23 @@ define(['backbone', 'text!./../template/classTag.html'],
     },
 
     /**
-     * End editing tag
+     * End editing tag. If the class typed already exists the
+     * old one will be restored otherwise will be changed
      */
     endEditTag: function(){
+      var value = this.$labelInput.val();
+      var next = this.model.escapeName(value);
+
+      if(this.target){
+        var clsm = this.target.ClassManager;
+
+        if(clsm){
+          if(clsm.getClass(next))
+            this.$labelInput.val(this.model.get('label'));
+          else
+            this.model.set({ name: next, label: value});
+        }
+      }
       this.$labelInput.prop(this.inputProp, true);
     },
 

src/css_composer/view/CssRuleView.js

@@ -11,6 +11,15 @@ define(['backbone'],
       this.config = o.config || {};
       this.listenTo(this.model, 'change:style', this.render);
       this.listenTo(this.model, 'change:state', this.render);
+      this.listenTo(this.model.get('selectors'), 'change', this.selChanged);
+    },
+
+    /**
+     * Triggered when some selector is changed
+     */
+    selChanged: function(){
+      this.selStr = this.renderSelectors();
+      this.render();
     },
 
     /**

test/specs/class_manager/view/ClassTagView.js

@@ -101,13 +101,22 @@ define([path + 'ClassTagView', 'ClassManager/model/ClassTags'],
               spy.called.should.equal(true);
             });
 
-            it('Label toggles status', function() {
-              var spy     = sinon.spy();
-              this.view.model.on("change:active", spy);
-              this.view.model.set('active', true);
-              this.view.$el.find('#tag-label').trigger('click');
-              this.view.model.get('active').should.equal(false);
-              spy.called.should.equal(true);
+            it('Label input is disabled', function() {
+              var inputProp = this.view.inputProp;
+              this.view.$labelInput.prop(inputProp).should.equal(true);
+            });
+
+            it('On double click label input is enable', function() {
+              var inputProp = this.view.inputProp;
+              this.view.$el.find('#tag-label').trigger('dblclick');
+              this.view.$labelInput.prop(inputProp).should.equal(false);
+            });
+
+            it('On blur label input turns back disabled', function() {
+              var inputProp = this.view.inputProp;
+              this.view.$el.find('#tag-label').trigger('dblclick');
+              this.view.endEditTag();
+              this.view.$labelInput.prop(inputProp).should.equal(true);
             });
 
         });

test/specs/class_manager/view/ClassTagsView.js

@@ -123,7 +123,7 @@ define([path + 'ClassTagsView', 'ClassManager/model/ClassTags'],
 
             it("New tag correctly added", function() {
               this.coll.add({ label: 'test' });
-              this.$tags.children().first().find('#tag-label').html().should.equal('test');
+              this.$tags.children().first().find('#tag-label input').val().should.equal('test');
             });
 
             it("States are hidden in case no tags", function() {