From 018fef31690869828e34456570c3a1c278d629c2 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Mon, 27 Jun 2016 23:28:26 +0200
Subject: [PATCH] Add selector helper

---
 src/class_manager/template/classTags.html     |  5 +++
 src/class_manager/view/ClassTagsView.js       | 31 ++++++++++++++++---
 styles/css/main.css                           |  5 ++-
 styles/scss/main.scss                         |  6 +++-
 .../specs/class_manager/view/ClassTagsView.js |  1 +
 5 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/class_manager/template/classTags.html b/src/class_manager/template/classTags.html
index c30c69e69..8ddbe35a6 100644
--- a/src/class_manager/template/classTags.html
+++ b/src/class_manager/template/classTags.html
@@ -20,3 +20,8 @@
   <input id="<%= pfx %>new" />
   <span id="<%= pfx %>add-tag" class="fa fa-plus"></span>
 </div>
+<div id="<%= pfx %>sel-help">
+  <div id="<%= pfx %>label">Selected</div>
+  <div id="<%= pfx %>sel"></div>
+  <div style="clear:both"></div>
+</div>
diff --git a/src/class_manager/view/ClassTagsView.js b/src/class_manager/view/ClassTagsView.js
index e73bef658..5663151fc 100644
--- a/src/class_manager/view/ClassTagsView.js
+++ b/src/class_manager/view/ClassTagsView.js
@@ -25,11 +25,12 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
 
       this.target  = this.config.target;
 
-      this.listenTo( this.target ,'change:selectedComponent',this.componentChanged);
+      this.listenTo(this.target ,'change:selectedComponent',this.componentChanged);
+      this.listenTo(this.target, 'targetClassUpdated', this.updateSelector);
 
-      this.listenTo( this.collection, 'add', this.addNew);
-      this.listenTo( this.collection, 'reset', this.renderClasses);
-      this.listenTo( this.collection, 'remove', this.tagRemoved);
+      this.listenTo(this.collection, 'add', this.addNew);
+      this.listenTo(this.collection, 'reset', this.renderClasses);
+      this.listenTo(this.collection, 'remove', this.tagRemoved);
 
       this.delegateEvents();
     },
@@ -115,6 +116,27 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
         this.$statesC.css('display','block');
       else
         this.$statesC.css('display','none');
+      this.updateSelector();
+    },
+
+    /**
+     * Udpate selector helper
+     * @return {this}
+     * @private
+     */
+    updateSelector: function(){
+      this.compTarget = this.target.get('selectedComponent');
+      if(!this.compTarget || !this.compTarget.get)
+        return;
+      var result = '';
+      var models = this.compTarget.get('classes');
+      models.each(function(model){
+        if(model.get('active'))
+          result += '.' + model.get('name');
+      });
+      var state = this.compTarget.get('state');
+      result = state ? result + ':' + state : result;
+      this.el.querySelector('#' + this.pfx + 'sel').innerHTML = result;
     },
 
     /**
@@ -126,6 +148,7 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
         this.compTarget.set('state', this.$states.val());
         if(this.target)
           this.target.trigger('targetStateUpdated');
+        this.updateSelector();
       }
     },
 
diff --git a/styles/css/main.css b/styles/css/main.css
index da8dde3ce..389374834 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -3272,9 +3272,12 @@ ol.example li.placeholder:before {
 .wte-clm-tags {
   font-size: 11px;
   padding: 10px 5px; }
-  .wte-clm-tags #wte-clm-label {
+  .wte-clm-tags #wte-clm-label, .wte-clm-tags #wte-clm-sel {
     padding: 7px 0;
     float: left; }
+  .wte-clm-tags #wte-clm-sel {
+    font-style: italic;
+    margin-left: 5px; }
   .wte-clm-tags #wte-clm-status-c {
     float: right; }
   .wte-clm-tags #wte-clm-tags-field {
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index fa28282fc..085f3f405 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -815,10 +815,14 @@ $paddElClm: 5px 6px;
 	font-size: 11px;
 	padding: 10px 5px;
 
-	##{$clm-prefix}label{
+	##{$clm-prefix}label, ##{$clm-prefix}sel{
 		padding: 7px 0;
 		float:left;
 	}
+  ##{$clm-prefix}sel{
+    font-style: italic;
+    margin-left: 5px;
+  }
 	##{$clm-prefix}status-c{
 		float:right;
 	}
diff --git a/test/specs/class_manager/view/ClassTagsView.js b/test/specs/class_manager/view/ClassTagsView.js
index e2c82c2ea..961e063c0 100644
--- a/test/specs/class_manager/view/ClassTagsView.js
+++ b/test/specs/class_manager/view/ClassTagsView.js
@@ -117,6 +117,7 @@ define([path + 'ClassTagsView', 'ClassManager/model/ClassTags'],
               sinon.stub(this.target, "get").returns(this.targetStub);
               this.view.compTarget = this.compTargetStub;
               this.view.addNewTag('test');
+              this.view.compTarget = this.compTargetStub;
               this.view.addNewTag('test2');
               this.$tags.children().length.should.equal(2);
             });