From 967a5f2d188f5d5116071ba282a8b222bf11dabd Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 7 Jun 2016 14:06:31 +0200
Subject: [PATCH] Add the possibility to edit class tags

---
 src/class_manager/model/ClassTag.js           |  4 ++--
 src/class_manager/view/ClassTagView.js        | 18 ++++++++++++---
 src/css_composer/view/CssRuleView.js          |  9 ++++++++
 test/specs/class_manager/view/ClassTagView.js | 23 +++++++++++++------
 .../specs/class_manager/view/ClassTagsView.js |  2 +-
 5 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/class_manager/model/ClassTag.js b/src/class_manager/model/ClassTag.js
index 735d0341c..328b68db3 100644
--- a/src/class_manager/model/ClassTag.js
+++ b/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, '-');
diff --git a/src/class_manager/view/ClassTagView.js b/src/class_manager/view/ClassTagView.js
index d193ecd13..1843a1a3c 100644
--- a/src/class_manager/view/ClassTagView.js
+++ b/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);
     },
 
diff --git a/src/css_composer/view/CssRuleView.js b/src/css_composer/view/CssRuleView.js
index 0f76d6ffb..620e9182b 100644
--- a/src/css_composer/view/CssRuleView.js
+++ b/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();
     },
 
     /**
diff --git a/test/specs/class_manager/view/ClassTagView.js b/test/specs/class_manager/view/ClassTagView.js
index e95bb63cd..4af571ce5 100644
--- a/test/specs/class_manager/view/ClassTagView.js
+++ b/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);
             });
 
         });
diff --git a/test/specs/class_manager/view/ClassTagsView.js b/test/specs/class_manager/view/ClassTagsView.js
index 30e934bd1..e2c82c2ea 100644
--- a/test/specs/class_manager/view/ClassTagsView.js
+++ b/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() {