Update Class Manager and tests

README.md

@@ -170,7 +170,7 @@ $ npm run test
 
 ## Todos before beta release
 
-* **Class Manager** (*in development*) - Ability to assign different classes to components and style them (beacause CSS with only ids is pretty much a pain)
+* **Class Manager** (*in development*) - Ability to assign different classes to components and style them (because CSS with only ids is pretty much a pain)
 * **Breakpoint Manager** - Resize canvas according to breakpoints established by user (in simple terms, for responsive templates). Will be put into development immediately after Class Manager
 * **Style Manager improvements** - Mainly `stack` type is not yet complete
 

src/class_manager/main.js

@@ -30,10 +30,9 @@ define(function(require) {
        * */
       addClass: function(name){
         var label = name;
-        var fname = this.escapeName(name);
-        var c = this.getClass(fname);
+        var c = this.getClass(name);
         if(!c)
-          return  this.classes.add({name: fname, label: label});
+          return  this.classes.add({name: name, label: label});
         return c;
       },
 
@@ -57,16 +56,6 @@ define(function(require) {
         return  this.classes;
       },
 
-      /**
-       * Escape string
-       * @param {String} name
-       *
-       * @return {String}
-       */
-      escapeName: function(name) {
-        return name.toLowerCase().replace(/([^a-z0-9\w]+)/gi, '-');
-      },
-
   };
 
   return ClassManager;

src/class_manager/model/ClassTag.js

@@ -10,5 +10,19 @@ define(['backbone'],
 				name:	  '',
 			},
 
+			initialize: function(){
+				  this.set('name', this.escapeName(this.get('name')));
+			},
+
+			/**
+       * Escape string
+       * @param {String} name
+       *
+       * @return {String}
+       */
+      escapeName: function(name) {
+        return name.toLowerCase().replace(/([^a-z0-9\w]+)/gi, '-');
+      },
+
 		});
 });

src/class_manager/template/classTag.html

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

src/dom_components/model/Component.js

@@ -25,12 +25,29 @@ define(['backbone','./Components', 'ClassManager/model/ClassTags'],
 			initialize: function(o) {
 				this.config 	= o || {};
 				this.defaultC = this.config.components || [];
-				this.defaultCl = this.config.classes || [];
+				this.defaultCl = this.normalizeClasses(this.config.classes || []);
 				this.components	= new Components(this.defaultC);
 				this.set('components', this.components);
 				this.set('classes', new ClassTags(this.defaultCl));
 			},
 
+			/**
+			 * Normalize input classes from array to array of objects
+			 * @param {Array} arr
+			 *
+			 * @return {Array}
+			 */
+			normalizeClasses: function(arr){
+				var res = [];
+				arr.forEach(function(val){
+					if(typeof val === 'string')
+						res.push({ name: val });
+					else
+						res.push(val);
+				});
+				return res;
+			},
+
 			/**
 			 * Override original clone method
 			 */

src/dom_components/view/ComponentView.js

@@ -26,6 +26,22 @@ define(['backbone', './ComponentsView'],
 				this.listenTo(this.model.get('classes'), 'add remove change', this.updateClasses);
 				this.$el.data("model", this.model);
 				this.$el.data("model-comp", this.components);
+
+				if(this.model.get('classes').length)
+					this.importClasses();
+			},
+
+			/**
+			 * Import, if possible, classes inside main container
+			 * */
+			importClasses: function(){
+				var clm = this.config.em.get('ClassManager');
+
+				if(clm){
+					this.model.get('classes').each(function(m){
+							clm.addClass(m.get('name'));
+					});
+				}
 			},
 
 			/**

styles/css/main.css

@@ -3238,7 +3238,8 @@ ol.example li.placeholder:before {
     display: inline-block;
     border-radius: 3px;
     margin: 0 3px 3px 0;
-    padding: 4px; }
+    padding: 4px;
+    cursor: default; }
   .wte-clm-tags #wte-clm-close {
     font-size: 20px;
     line-height: 0;
@@ -3246,6 +3247,9 @@ ol.example li.placeholder:before {
     .wte-clm-tags #wte-clm-close:hover {
       opacity: 0.7;
       filter: alpha(opacity=70); }
+  .wte-clm-tags #wte-clm-checkbox {
+    vertical-align: middle;
+    font-size: 9px; }
 
 /********* END Class manager **********/
 /********* Modal dialog **********/

styles/scss/main.scss

@@ -777,6 +777,7 @@ $tagBg: #804f7b;
 		border-radius:3px;
 		margin: 0 3px 3px 0;
     padding: 4px;
+    cursor: default;
 	}
 	##{$clm-prefix}close {
 		@extend  .opac50;
@@ -788,6 +789,10 @@ $tagBg: #804f7b;
     	@include opacity(0.7);
     }
 	}
+	##{$clm-prefix}checkbox {
+		vertical-align: middle;
+		font-size: 9px;
+	}
 }
 /********* END Class manager **********/
 

test/specs/class_manager/e2e/ClassManager.js

@@ -41,10 +41,11 @@ define(
               model.get('classes').length.should.equal(0);
 
               // Init Class Manager and set editor as a target
+              var $clm;
               var clm = this.gjs.editor.get('ClassManager');
               clm.config.target = this.gjs.editor;
               if(clm){
-                var $clm = new clm.ClassTagsView({
+                $clm = new clm.ClassTagsView({
                   collection: new clm.ClassTags([]),
                   config: clm.config,
                 }).render();
@@ -60,6 +61,26 @@ 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'] },
+                  ],
+                }
+              });
+              gjs.render();
+              console.log(this.$fixture);
+              gjs.editor.get('ClassManager').getClasses().length.should.equal(4);
+            });
+
         });
       }
     };

test/specs/class_manager/main.js

@@ -80,10 +80,6 @@ define([
 					obj2.should.deep.equal(obj);
 				});
 
-				it('escapeName test', function() {
-					this.obj.escapeName('@Te sT*').should.equal('-te-st-');
-				});
-
 			});
 
 			Models.run();

test/specs/class_manager/model/ClassModels.js

@@ -19,10 +19,14 @@ define([path + 'ClassTag',
               this.obj.has('name').should.equal(true);
             });
 
-           it('Has label property', function() {
+            it('Has label property', function() {
               this.obj.has('label').should.equal(true);
             });
 
+            it('escapeName test', function() {
+              this.obj.escapeName('@Te sT*').should.equal('-te-st-');
+            });
+
         });
         describe('ClassTags', function() {