Update Class Manager

src/class_manager/model/ClassTag.js

@@ -8,6 +8,7 @@ define(['backbone'],
 			defaults: {
         label:  '',
 				name:	  '',
+        active: true,
 			},
 
 			initialize: function(){

src/class_manager/template/classTag.html

@@ -1,3 +1,3 @@
-<span id="<%= pfx %>checkbox" class="fa fa-circle-o"></span>
-  <%= label %>
+<span id="<%= pfx %>checkbox" class="fa"></span>
+ <span id="<%= pfx %>tag-label"> <%= label %> </span>
 <span id="<%= pfx %>close">&Cross;</span>

src/class_manager/view/ClassTagView.js

@@ -11,14 +11,25 @@ define(['backbone', 'text!./../template/classTag.html'],
 
     initialize: function(o) {
       this.config = o.config || {};
+      this.coll = o.coll || null;
       this.pfx = this.config.stylePrefix || '';
       this.className = this.pfx + 'tag';
       this.closeId = this.pfx + 'close';
+      this.chkId = this.pfx + 'checkbox';
+      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.listenTo( this.model, 'change:active', this.updateStatus);
 
       this.delegateEvents();
     },
 
+    changeStatus: function(){
+      this.model.set('active', !this.model.get('active'));
+    },
+
     /**
      * Remove tag from the selected component
      * @param {Object} e
@@ -29,15 +40,32 @@ define(['backbone', 'text!./../template/classTag.html'],
       if(comp)
         comp.get('classes').remove(this.model);
 
+      if(this.coll)
+        this.coll.remove(this.model);
+
       this.remove();
     },
 
+    /**
+     * Update status of the checkbox
+     */
+    updateStatus: function(){
+      if(!this.$chk)
+        this.$chk = this.$el.find('#' + this.pfx + 'checkbox');
+
+      if(this.model.get('active'))
+        this.$chk.removeClass('fa-circle-o').addClass('fa-dot-circle-o');
+      else
+        this.$chk.removeClass('fa-dot-circle-o').addClass('fa-circle-o');
+    },
+
     /** @inheritdoc */
     render : function(){
       this.$el.html( this.template({
         label: this.model.get('label'),
         pfx: this.pfx,
       }));
+      this.updateStatus();
       this.$el.attr('class', this.className);
       return this;
     },

src/class_manager/view/ClassTagsView.js

@@ -26,18 +26,11 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
       this.listenTo( this.target ,'change:selectedComponent',this.componentChanged);
 
       this.listenTo( this.collection, 'add', this.addNew);
-      this.listenTo( this.collection, 'remove', this.removed);
       this.listenTo( this.collection, 'reset', this.renderClasses);
 
-      //this.config.
-
       this.delegateEvents();
     },
 
-    removed: function(){
-      console.log('removed');
-    },
-
     /**
      * Add new model
      * @param {Object} model
@@ -134,6 +127,7 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
       var view = new ClassTagView({
           model:  model,
           config: this.config,
+          coll: this.collection,
       });
       var rendered  = view.render().el;
 

src/dom_components/main.js

@@ -35,8 +35,8 @@ define(function(require) {
 			c.wrapper.style 		= {};
 
 		c.wrapper.style.position	= 'relative';
+		this.component		= new Component(c.wrapper, { sm: c.em });
 
-		this.component		= new Component(c.wrapper);
 		var obj				= {
 			model: this.component,
 			config: c,

src/dom_components/model/Component.js

@@ -22,11 +22,12 @@ define(['backbone','./Components', 'ClassManager/model/ClassTags'],
 				attributes	: {},
 			},
 
-			initialize: function(o) {
+			initialize: function(o, opt) {
+				this.sm = opt ? opt.sm || {} : {};
 				this.config 	= o || {};
 				this.defaultC = this.config.components || [];
 				this.defaultCl = this.normalizeClasses(this.config.classes || []);
-				this.components	= new Components(this.defaultC);
+				this.components	= new Components(this.defaultC, opt);
 				this.set('components', this.components);
 				this.set('classes', new ClassTags(this.defaultCl));
 			},
@@ -39,11 +40,24 @@ define(['backbone','./Components', 'ClassManager/model/ClassTags'],
 			 */
 			normalizeClasses: function(arr){
 				var res = [];
+
+				if(!this.sm.get)
+					return;
+
+				var clm = this.sm.get('ClassManager');
+				if(!clm)
+					return;
+
 				arr.forEach(function(val){
+					var name = '';
+
 					if(typeof val === 'string')
-						res.push({ name: val });
+						name = val;
 					else
-						res.push(val);
+						name = val.name;
+
+					var model = clm.addClass(name);
+					res.push(model);
 				});
 				return res;
 			},

src/dom_components/model/Components.js

@@ -11,6 +11,9 @@ define([ 'backbone', 'require'],
 				this.model	= function(attrs, options) {
 					var model;
 
+					if(!options.sm && opt && opt.sm)
+						options.sm = opt.sm;
+
 					switch(attrs.type){
 
 						case 'text':

src/dom_components/view/ComponentImageView.js

@@ -59,6 +59,7 @@ define(['backbone', './ComponentView'],
 
 		render: function() {
 			this.updateAttributes();
+			this.updateClasses();
 			return this;
 		},
 	});

src/dom_components/view/ComponentTextView.js

@@ -66,6 +66,7 @@ define(['backbone', './ComponentView'],
 
 		render: function() {
 			this.updateAttributes();
+			this.updateClasses();
 			this.$el.html(this.model.get('content'));
 			return this;
 		},

styles/css/main.css

@@ -2587,7 +2587,7 @@ html, body, #wte-app, .wte-editor {
 .clear {
   clear: both; }
 
-.no-select, .wte-com-no-select, .wte-com-no-select img, .wte-clm-tags #wte-clm-close {
+.no-select, .wte-com-no-select, .wte-com-no-select img, .wte-clm-tags #wte-clm-close, .wte-clm-tags #wte-clm-tag-label {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
@@ -3249,7 +3249,10 @@ ol.example li.placeholder:before {
       filter: alpha(opacity=70); }
   .wte-clm-tags #wte-clm-checkbox {
     vertical-align: middle;
+    cursor: pointer;
     font-size: 9px; }
+  .wte-clm-tags #wte-clm-tag-label {
+    cursor: pointer; }
 
 /********* END Class manager **********/
 /********* Modal dialog **********/

styles/scss/main.scss

@@ -791,8 +791,14 @@ $tagBg: #804f7b;
 	}
 	##{$clm-prefix}checkbox {
 		vertical-align: middle;
+		cursor: pointer;
 		font-size: 9px;
 	}
+
+	##{$clm-prefix}tag-label {
+		cursor: pointer;
+		@extend  .no-select;
+	}
 }
 /********* END Class manager **********/
 

test/specs/class_manager/e2e/ClassManager.js

@@ -62,23 +62,22 @@ define(
             });
 
             it('Classes from components are correctly imported inside main container', function() {
-              this.$fixture.empty();
-              var Grapes = require('editor/main');
-              var gjs = new Grapes({
-                storageType: 'none',
-                storageManager: { storageType: 'none',},
-                assetManager: { storageType: 'none', },
-                container: '#ClassManager-fixture',
-                components: {
-                  defaults: [
-                    { classes: ['test11', 'test12', 'test13'] },
-                    { classes: ['test11', 'test22', 'test22'] },
-                  ],
-                }
+              var wrp = this.gjs.editor.get('Components').getWrapper().get('components');
+              var model = wrp.add([
+                { classes: ['test11', 'test12', 'test13'] },
+                { classes: ['test11', 'test22', 'test22'] },
+              ]);
+              this.gjs.editor.get('ClassManager').getClasses().length.should.equal(4);
+            });
+
+            it('Class imported into component is the same model from main container', function() {
+              var wrp = this.gjs.editor.get('Components').getWrapper().get('components');
+              var model = wrp.add({
+                classes: ['test1']
               });
-              gjs.render();
-              console.log(this.$fixture);
-              gjs.editor.get('ClassManager').getClasses().length.should.equal(4);
+              var clModel = model.get('classes').at(0);
+              var clModel2 = this.gjs.editor.get('ClassManager').getClasses().at(0);
+              clModel.should.deep.equal(clModel2);
             });
 
         });