From 453b261f0e0dee02a5c8a2339ba1f294d89807cf Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Mon, 6 Jun 2016 23:43:15 +0200
Subject: [PATCH] Update class tag to be editable

---
 src/class_manager/template/classTag.html |  4 ++-
 src/class_manager/view/ClassTagView.js   | 38 +++++++++++++++++++++++-
 src/editor/model/Editor.js               |  1 +
 styles/css/main.css                      | 10 +++++--
 styles/scss/main.scss                    |  8 +++--
 5 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/class_manager/template/classTag.html b/src/class_manager/template/classTag.html
index 1a9156134..39d01f543 100644
--- a/src/class_manager/template/classTag.html
+++ b/src/class_manager/template/classTag.html
@@ -1,3 +1,5 @@
 <span id="<%= pfx %>checkbox" class="fa"></span>
- <span id="<%= pfx %>tag-label"><%= label %></span>
+ <span id="<%= pfx %>tag-label">
+    <input class="<%= ppfx %>no-app" value="<%= label %>" <%= inputProp %>/>
+  </span>
 <span id="<%= pfx %>close">&Cross;</span>
\ No newline at end of file
diff --git a/src/class_manager/view/ClassTagView.js b/src/class_manager/view/ClassTagView.js
index 5fed012cc..d193ecd13 100644
--- a/src/class_manager/view/ClassTagView.js
+++ b/src/class_manager/view/ClassTagView.js
@@ -13,6 +13,8 @@ define(['backbone', 'text!./../template/classTag.html'],
       this.config = o.config || {};
       this.coll = o.coll || null;
       this.pfx = this.config.stylePrefix || '';
+      this.ppfx = this.config.pStylePrefix || '';
+      this.inputProp = 'readonly';
       this.target = this.config.target;
       this.className = this.pfx + 'tag';
       this.closeId = this.pfx + 'close';
@@ -20,13 +22,33 @@ define(['backbone', 'text!./../template/classTag.html'],
       this.labelId = this.pfx + 'tag-label';
       this.events['click #' + this.closeId ] = 'removeTag';
       this.events['click #' + this.chkId ] = 'changeStatus';
-      this.events['click #' + this.labelId ] = 'changeStatus';
+      this.events['dblclick #' + this.labelId ] = 'startEditTag';
+      this.events['keypress #' + this.labelId + ' input'] = 'updateInputLabel';
+      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();
     },
 
+    /**
+     * Start editing tag
+     */
+    startEditTag: function(){
+      this.$labelInput.prop(this.inputProp, false);
+    },
+
+    /**
+     * End editing tag
+     */
+    endEditTag: function(){
+      this.$labelInput.prop(this.inputProp, true);
+    },
+
+    /**
+     * Update status of the tag
+     */
     changeStatus: function(){
       this.model.set('active', !this.model.get('active'));
       this.target.trigger('targetClassUpdated');
@@ -66,14 +88,28 @@ define(['backbone', 'text!./../template/classTag.html'],
       }
     },
 
+    /**
+     * Update label's input
+     */
+    updateInputLabel: function(){
+      if(!this.$labelInput)
+        this.$labelInput = this.$el.find('input');
+      var size = this.$labelInput.val().length - 2;
+      size = size < 1 ? 1 : size;
+      this.$labelInput.attr('size', size);
+    },
+
     /** @inheritdoc */
     render : function(){
       this.$el.html( this.template({
         label: this.model.get('label'),
         pfx: this.pfx,
+        ppfx: this.ppfx,
+        inputProp: this.inputProp,
       }));
       this.updateStatus();
       this.$el.attr('class', this.className);
+      this.updateInputLabel();
       return this;
     },
 
diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js
index d986bf9d9..2d70c8994 100644
--- a/src/editor/model/Editor.js
+++ b/src/editor/model/Editor.js
@@ -153,6 +153,7 @@ define([
 			initClassManager: function() {
 				var cfg = this.config.classManager,
 				pfx	= cfg.stylePrefix || 'clm-';
+				cfg.pStylePrefix = this.config.stylePrefix;
 				cfg.stylePrefix	= this.config.stylePrefix + pfx;
 				cfg.target = this;
 				this.clm = new ClassManager(cfg);
diff --git a/styles/css/main.css b/styles/css/main.css
index f2ed6d101..fa2393a6f 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -2561,9 +2561,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 /*#383838*/
 /*#515151*/
 /*l: #d8d7db*/
-.wte-invis-invis, .wte-clm-tags #wte-clm-new {
+.wte-invis-invis, .wte-clm-tags #wte-clm-new, .wte-no-app {
   background-color: transparent;
-  border: none; }
+  border: none;
+  color: inherit; }
+
+.wte-no-app {
+  height: 10px; }
 
 .wte-test::btn {
   color: '#fff'; }
@@ -3282,7 +3286,7 @@ ol.example li.placeholder:before {
     cursor: pointer;
     font-size: 9px; }
   .wte-clm-tags #wte-clm-tag-label {
-    cursor: pointer; }
+    cursor: text; }
 
 /********* END Class manager **********/
 /********* Modal dialog **********/
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index 89a4e4398..973388ac5 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -47,9 +47,13 @@ $imageCompDim:	50px;
 	appearance: $v;
 }
 
-.#{$app-prefix}invis-invis{
+.#{$app-prefix}invis-invis, .#{$app-prefix}no-app{
 	background-color: transparent;
 	border: none;
+	color:inherit;
+}
+.#{$app-prefix}no-app{
+	height: 10px;
 }
 
 .#{$app-prefix}test {
@@ -840,7 +844,7 @@ $tagBg: #804f7b;
 	}
 
 	##{$clm-prefix}tag-label {
-		cursor: pointer;
+		cursor: text;
 		@extend  .no-select;
 	}
 }