Add selector helper

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>

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();
       }
     },
 

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 {

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;
 	}

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);
             });