Merge pull request #11 from artf/dev

Updates from dev

.gitignore

@@ -1,8 +1,9 @@
 .DS_Store
 .settings/
 .sass-cache/
-style/.sass-cache/
 .project
+npm-debug.log
+style/.sass-cache/
 grapes.sublime-project
 grapes.sublime-workspace
 

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "4.0"
+before_script:
+  - npm run build

Gruntfile.js

@@ -14,10 +14,10 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-clean');
-  grunt.loadNpmTasks('grunt-contrib-sass');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-bowercopy');
   grunt.loadNpmTasks('grunt-mocha');
+  grunt.loadNpmTasks('grunt-sass');
 
   grunt.initConfig({
     appDir: appPath,
@@ -167,7 +167,7 @@ module.exports = function(grunt) {
     	test: {
     		files: ['test/specs/**/*.js'],
     		tasks: ['mocha'],
-    		options: { livereload: true }, //default port 35729
+    		//options: { livereload: true }, //default port 35729
     	}
     },
 

README.md

@@ -1,4 +1,4 @@
-# [GrapesJS](http://grapesjs.com)
+# [GrapesJS](http://grapesjs.com) [![Build Status](https://travis-ci.org/artf/grapesjs.svg?branch=master)](https://travis-ci.org/artf/grapesjs)
 
 <p align="center"><img src="http://grapesjs.com/img/grapesjs-demo-template2.jpg" alt="GrapesJS" width="500" align="center"/></p>
 
@@ -39,6 +39,7 @@ GrapesJS uses [RequireJS](http://requirejs.org/) to organize its files inside `s
 Clone the repository and enter inside the folder
 
 ```sh
+$ npm install -g grunt-cli
 $ git clone https://github.com/artf/grapesjs.git
 $ cd grapesjs
 ```
@@ -105,7 +106,7 @@ var config = {
   container:          '',
 
   // Enable/Disable the possibility to copy (ctrl + c) and paste (ctrl + v) elements
-  copyPaste         : true,
+  copyPaste:          true,
 
   // Enable/Disable undo manager
   undoManager:        true,
@@ -156,12 +157,31 @@ Tests are run by [PhantomJS](http://phantomjs.org/) using [Mocha](https://mochaj
 $ npm run test
 ```
 
+### Acknowledgements
+
+GrapesJS is built on top of this amazing open source projects:
+
+* [Backbone] - gives Backbone to web applications
+* [Backbone.Undo] - a simple Backbone undo-manager
+* [Keymaster] - keyboard shortcuts
+* [CodeMirror] - versatile text editor
+* [Spectrum] - no hassle colorpicker
+* [FontAwesome] - the iconic font and CSS framework
+
 
 ### Contributing
 
-Any kind of help is welcome. At the moment there is no generic guidelines so use usual pull requests (with a little bit of parsimony)
+Any kind of help is welcome. At the moment there is no generic guidelines so use usual pull requests and push to `dev` branch
 
 
 ## License
 
-BSD 3-clause
+BSD 3-clause
+
+
+[Backbone]: <http://backbonejs.org/>
+[Backbone.Undo]: <http://backbone.undojs.com/>
+[Keymaster]: <https://github.com/madrobby/keymaster>
+[CodeMirror]: <http://codemirror.net/>
+[Spectrum]: <https://github.com/bgrins/spectrum>
+[FontAwesome]: <https://fortawesome.github.io/Font-Awesome/>

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": "Artur Arseniev",
   "homepage": "http://grapesjs.com",
   "main": [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",
@@ -16,6 +16,7 @@
   "devDependencies": {
     "grunt": "^0.4.5",
     "grunt-bowercopy": "^1.2.4",
+    "grunt-cli": "^0.1.13",
     "grunt-contrib-clean": "^0.7.0",
     "grunt-contrib-concat": "^0.5.1",
     "grunt-contrib-connect": "^0.11.2",
@@ -23,10 +24,11 @@
     "grunt-contrib-cssmin": "^0.14.0",
     "grunt-contrib-jshint": "^0.12.0",
     "grunt-contrib-requirejs": "^0.4.4",
-    "grunt-contrib-sass": "^0.9.2",
     "grunt-contrib-uglify": "^0.11.0",
     "grunt-contrib-watch": "^0.6.1",
-    "grunt-mocha": "^0.4.15"
+    "grunt-mocha": "^0.4.15",
+    "grunt-sass": "^1.1.0",
+    "node-sass": "^3.4.2"
   },
   "keywords": [
     "wte",
@@ -40,9 +42,9 @@
     "editor"
   ],
   "scripts": {
-    "postinstall": "node_modules/.bin/bower install --config.interactive=false",
-    "build": "node_modules/.bin/grunt build",
-    "test": "node_modules/.bin/grunt test",
-    "dev": "node_modules/.bin/grunt dev"
+    "postinstall": "node ./node_modules/bower/bin/bower install --config.interactive=false",
+    "build": "./node_modules/.bin/grunt build",
+    "test": "./node_modules/.bin/grunt test",
+    "dev": "./node_modules/.bin/grunt dev"
   }
 }

src/asset_manager/view/AssetView.js

@@ -1,17 +1,17 @@
-define(['backbone'], 
+define(['backbone'],
 	function (Backbone) {
-	/** 
+	/**
 	 * @class AssetView
 	 * */
 	return Backbone.View.extend({
-			
+
 		initialize: function(o) {
-			this.options 	= o;
-			this.config		= o.config || {};
-			this.pfx		= this.config.stylePrefix;
+			this.options 		= o;
+			this.config			= o.config || {};
+			this.pfx				= this.config.stylePrefix || '';
 			this.className	= this.pfx + 'asset';
 			this.listenTo( this.model, 'destroy remove', this.remove );
 		},
-		
+
 	});
 });

src/asset_manager/view/FileUploader.js

@@ -13,7 +13,7 @@ define(['backbone', 'text!./../template/fileUploader.html'],
 		initialize: function(o) {
 			this.options 	= o || {};
 			this.config		= o.config	|| {};
-			this.pfx		= this.config.stylePrefix;
+			this.pfx			= this.config.stylePrefix || '';
 			this.target		= this.collection || {};
 			this.uploadId	= this.pfx + 'uploadFile';
 			this.disabled	= this.config.disableUpload;

src/class_manager/config/config.js

@@ -0,0 +1,17 @@
+define(function () {
+	return {
+
+    // Style prefix
+    stylePrefix     : 'clm-',
+
+    // Default classes
+    classes : [],
+
+    // Label for classes
+    label: 'Classes',
+
+    // Label for states
+    statesLabel: 'States',
+
+	};
+});

src/class_manager/main.js

@@ -0,0 +1,84 @@
+define(function(require) {
+  /**
+   * @class   ClassManager
+   * @param   {Object} config Configurations
+   *
+   * */
+  var ClassManager  = function(config)
+  {
+    var c = config || {},
+      def = require('./config/config'),
+      ClassTags = require('./model/ClassTags'),
+      ClassTagsView = require('./view/ClassTagsView');
+
+    for (var name in def) {
+      if (!(name in c))
+        c[name] = def[name];
+    }
+
+    this.classes = new ClassTags(c.classes);
+
+    var obj = {
+        collection: this.classes,
+        config: c,
+    };
+    this.tagsView  = new ClassTagsView(obj);
+    //this.ClassTagsView  = new ClassTagsView(obj);
+  };
+
+  ClassManager.prototype  = {
+
+      /**
+       * Get collection of classes
+       *
+       * @return  {Object}
+       * */
+      getClasses : function() {
+        return  this.classes;
+      },
+
+      /**
+       * Get class by its name
+       *
+       * @return  {Object|null}
+       * */
+      getClass  : function(id) {
+        var res = this.classes.where({name: id});
+        return res.length ? res[0] : null;
+      },
+
+      /**
+       * Add new class to collection only if it's not already exists
+       * @param {String} name Class name
+       * @return  {Object} Model class
+       * */
+      addClass: function(name){
+        var label = name;
+        var fname = this.escapeName(name);
+        var c = this.getClass(fname);
+        if(!c)
+          return  this.classes.add({name: fname, label: label});
+        return c;
+      },
+
+      /**
+       * Escape string
+       * @param {String} name
+       * @return {String}
+       */
+      escapeName: function(name) {
+        return name.toLowerCase().replace(/([^a-z0-9\w]+)/gi, '-');
+      },
+
+      /**
+       * Renders a collection of class tags. Useful for components classes
+       * @return {Object} Rendered view
+       */
+      renderTags: function(){
+          return this.tagsView.render().el;
+      },
+  };
+
+  return ClassManager;
+
+});

src/class_manager/model/ClassTag.js

@@ -0,0 +1,14 @@
+define(['backbone'],
+	function (Backbone) {
+		/**
+		 * @class ClassTag
+		 * */
+		return Backbone.Model.extend({
+
+			defaults: {
+        label:  '',
+				name:	  '',
+			},
+
+		});
+});

src/class_manager/model/ClassTags.js

@@ -0,0 +1,11 @@
+define(['backbone','./ClassTag'],
+  function (Backbone, ClassTag) {
+    /**
+     * @class ClassTags
+     * */
+    return Backbone.Collection.extend({
+
+      model:  ClassTag,
+
+    });
+});

src/class_manager/template/classTags.html

@@ -0,0 +1,12 @@
+<div id="<%= pfx %>up">
+  <div id="<%= pfx %>label"><%= label %></div>
+  <div id="<%= pfx %>status-c">
+    <%= statesLabel %>
+    <span id="<%= pfx %>input-c"></span>
+  </div>
+</div>
+<div id="<%= pfx %>tags-field">
+  <div id="<%= pfx %>tags-c"></div>
+  <input id="<%= pfx %>new" />
+  <span id="<%= pfx %>add-tag" class="fa fa-plus"></span>
+</div>

src/class_manager/view/ClassTagView.js

@@ -0,0 +1,22 @@
+define(['backbone'],
+  function (Backbone) {
+  /**
+   * @class ClassTagView
+   * */
+  return Backbone.View.extend({
+
+    initialize: function(o) {
+      this.config = o.config || {};
+      this.pfx = this.config.stylePrefix;
+      this.className = this.pfx + 'tag';
+    },
+
+    /** @inheritdoc */
+    render : function(){
+      this.$el.html(this.model.get('name')+': ' + this.model.get('label'));
+      this.$el.attr('class', this.className);
+      return this;
+    },
+
+  });
+});

src/class_manager/view/ClassTagsView.js

@@ -0,0 +1,166 @@
+define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
+  function (Backbone, tagsTemplate, ClassTagView) {
+  /**
+   * @class ClassTagsView
+   * */
+  return Backbone.View.extend({
+
+    template: _.template(tagsTemplate),
+
+    events:{
+      'click .add': 'startNewClass',
+    },
+
+    initialize: function(o) {
+      this.config = o.config || {};
+      this.pfx = this.config.stylePrefix;
+      this.className = this.pfx + 'tags';
+      this.addBtnId = this.pfx + 'add-tag';
+      this.newInputId = this.pfx + 'new';
+      this.events['click #' + this.addBtnId] = 'startNewTag';
+      this.events['blur #'+this.newInputId] = 'endNewTag';
+      this.events['keyup #'+this.newInputId] = 'onInputKeyUp';
+
+      this.target  = this.config.target;
+
+      this.listenTo( this.target ,'change:selectedComponent',this.componentChanged);
+
+      this.listenTo( this.collection, 'add', this.addNew);
+      this.listenTo( this.collection, 'reset', this.renderClasses);
+
+      this.delegateEvents();
+    },
+
+    /**
+     * Add new model
+     * @param {Object} model
+     */
+    addNew: function(model){
+      this.addToClasses(model);
+    },
+
+    /**
+     * Start new tag event
+     * @param {Object} e
+     *
+     */
+    startNewTag: function(e) {
+      this.$addBtn.hide();
+      this.$input.show().focus();
+    },
+
+    /**
+     * Start new tag event
+     * @param {Object} e
+     *
+     */
+    endNewTag: function(e) {
+      this.$addBtn.show();
+      this.$input.hide().val('');
+    },
+
+
+    /**
+     * Add new class tag
+     * @param {Object} model
+     *
+     */
+    addTag: function(model){
+
+    },
+
+    /**
+     * Triggered when component is changed
+     * @param  {Object} e
+     */
+    componentChanged: function(e){
+    },
+
+    /**
+     * Checks what to do on keyup event
+     * @param  {Object} e
+     */
+    onInputKeyUp: function(e) {
+      if (e.keyCode === 13)
+        this.addNewTag(this.$input.val());
+      else if(e.keyCode === 27)
+        this.endNewTag();
+      else{
+        //this.searchItem();
+        //console.log('search');
+      }
+    },
+
+    /**
+     * Add new tag to collection, if possible, and to the component
+     * @param  {Object} e
+     */
+    addNewTag: function(name){
+      if(!name)
+        return;
+
+      if(this.target){
+        var cm = this.target.get('ClassManager');
+        var model = cm.addClass(name);
+        console.log(model);
+      }
+      this.endNewTag();
+    },
+
+    /**
+     * Add new object to collection
+     * @param   {Object} model  Model
+     * @param   {Object} fragmentEl   Fragment collection
+     *
+     * @return {Object} Object created
+     * */
+    addToClasses: function(model, fragmentEl) {
+      var fragment  = fragmentEl || null;
+
+      var view = new ClassTagView({
+          model:  model,
+          config: this.config,
+      });
+      var rendered  = view.render().el;
+
+      if(fragment)
+        fragment.appendChild( rendered );
+      else
+        this.$classes.append(rendered);
+
+      return rendered;
+    },
+
+    /**
+     * Render the collection of classes
+     * @return {this}
+     */
+    renderClasses: function() {
+      var fragment = document.createDocumentFragment();
+
+      this.collection.each(function(model){
+        this.addToClasses(model, fragment);
+      },this);
+
+      this.$classes.empty().append(fragment);
+      return this;
+    },
+
+
+    /** @inheritdoc */
+    render : function(){
+      this.$el.html( this.template({
+        label: this.config.label,
+        statesLabel: this.config.statesLabel,
+        pfx: this.pfx,
+      }));
+      this.$input = this.$el.find('input#' + this.newInputId);
+      this.$addBtn = this.$el.find('#' + this.addBtnId);
+      this.$classes = this.$el.find('#' + this.pfx + 'tags-c');
+      this.renderClasses();
+      this.$el.attr('class', this.className);
+      return this;
+    },
+
+  });
+});

src/commands/view/OpenStyleManager.js

@@ -7,7 +7,7 @@ define(['StyleManager'], function(StyleManager) {
 			run: function(em, sender)
 			{
 				this.sender	= sender;
-				if(!this.$sm){
+				if(!this.$cn){
 					var config		= em.get('Config'),
 							panels		= em.get('Panels'),
 							pfx				= config.styleManager.stylePrefix || 'sm-';
@@ -15,22 +15,40 @@ define(['StyleManager'], function(StyleManager) {
 					config.styleManager.stylePrefix = config.stylePrefix + pfx;
 					config.styleManager.target		= em;
 
-					var sm		= new StyleManager(config.styleManager);
-					this.$sm	= sm.render();
+					// Main container
+					this.$cn = $('<div/>');
+					// Secondary container
+					this.$cn2 = $('<div/>');
+					this.$cn.append(this.$cn2);
 
-					if(!panels.getPanel('views-container'))
-						this.panel	= panels.addPanel({ id: 'views-container'});
-					else
-						this.panel	= panels.getPanel('views-container');
+					// Class Manager container
+					this.clm = em.get('ClassManager');
+					if(this.clm){
+						//this.$clm = this.clm.renderTags();
+						//this.$cn2.append(this.$clm);
+					}
+
+					// Style Manager manager container
+					this.sm = new StyleManager(config.styleManager);
+					this.$sm = this.sm.render();
+					this.$cn2.append(this.$sm);
 
 					// Create header
 					this.$header	= $('<div>', {
 						class	: config.styleManager.stylePrefix + 'header',
 						text 	: config.styleManager.textNoElement,
 					});
+					//this.$cn = this.$cn.add(this.$header);
+					this.$cn.append(this.$header);
 
-					// Add all to the panel
-					this.panel.set('appendContent', this.$sm.add(this.$header) ).trigger('change:appendContent');
+					// Create panel if not exists
+					if(!panels.getPanel('views-container'))
+						this.panel	= panels.addPanel({ id: 'views-container'});
+					else
+						this.panel	= panels.getPanel('views-container');
+
+					// Add all containers to the panel
+					this.panel.set('appendContent', this.$cn).trigger('change:appendContent');
 
 					this.target		= em;
 					this.listenTo( this.target ,'change:selectedComponent', this.toggleSm);
@@ -46,18 +64,21 @@ define(['StyleManager'], function(StyleManager) {
 					if(!this.sender.get('active'))
 						return;
 					if(this.target.get('selectedComponent')){
-							this.$sm.show();
+							this.$cn2.show();
 							this.$header.hide();
 					}else{
-							this.$sm.hide();
+							this.$cn2.hide();
 							this.$header.show();
 					}
 			},
 
 			stop: function()
 			{
-				if(this.$sm)
-					this.$sm.hide();
+				// Hide secondary container if exists
+				if(this.$cn2)
+					this.$cn2.hide();
+
+				// Hide header container if exists
 				if(this.$header)
 					this.$header.hide();
 			}

src/config/require-config.js

@@ -35,6 +35,7 @@ require.config({
 	packages : 	[
 		            {  name: 'AssetManager', 		location: 'asset_manager', 		},
 		            {  name: 'StyleManager', 		location: 'style_manager', 		},
+		            {  name: 'ClassManager', 		location: 'class_manager', 		},
 		            {  name: 'StorageManager', 	location: 'storage_manager', 	},
 		            {  name: 'Navigator', 			location: 'navigator', 				},
 		            {  name: 'DomComponents', 	location: 'dom_components', 	},

src/dom_components/main.js

@@ -16,7 +16,7 @@ define(function(require) {
 			ComponentImageView	= require('./view/ComponentImageView'),
 			ComponentTextView	= require('./view/ComponentTextView');
 
-	    // Set default options
+	  // Set default options
 		for (var name in defaults) {
 			if (!(name in c))
 				c[name] = defaults[name];
@@ -28,32 +28,61 @@ define(function(require) {
 
 		// If there is no components try to append defaults
 		if(!c.wrapper.components.length && c.defaults.length){
-			console.log('Set defaults');
 			c.wrapper.components = c.defaults;
 		}
 
 		if(!c.wrapper.style)
 			c.wrapper.style 		= {};
+
 		c.wrapper.style.position	= 'relative';
 
 		this.component		= new Component(c.wrapper);
 		var obj				= {
-				model	: this.component,
-		    	config	: c,
+			model: this.component,
+			config: c,
 		};
 
-	    this.ComponentView 	= new ComponentView(obj);
+		this.c = c;
+	  this.ComponentView 	= new ComponentView(obj);
 	}
 
 	Components.prototype	= {
 
-			render		: function(){
-				return this.ComponentView.render().$el;
-			},
-
+			/**
+			 * Returns main wrapper which will contain all new components
+			 *
+			 * @return {Object}
+			 */
 			getComponent	: function(){
 				return this.component;
 			},
+
+			/**
+			 * Returns main wrapper which will contain all new components
+			 *
+			 * @return {Object}
+			 */
+			getWrapper: function(){
+				return this.getComponent();
+			},
+
+			/**
+			 * Returns children from the wrapper
+			 *
+			 * @return {Object}
+			 */
+			getComponents: function(){
+				return this.getWrapper().get('components');
+			},
+
+			/**
+			 * Render and returns wrapper
+			 *
+			 * @return {Object}
+			 */
+			render		: function(){
+				return this.ComponentView.render().el;
+			},
 	};
 
 	return Components;

src/dom_components/model/Component.js

@@ -7,7 +7,7 @@ define(['backbone','./Components'],
 
 			defaults: {
 				tagName			: 'div',
-				type			: '',
+				type				: '',
 				editable		: false,
 				removable		: true,
 				movable			: true,
@@ -18,12 +18,13 @@ define(['backbone','./Components'],
 				status			: '',
 				previousModel	: '',
 				content			: '',
-				style			: {},
-				attributes		: {},
+				style				: {},
+				attributes	: {},
 			},
 
-			initialize: function(options) {
-				this.defaultC = options.components || [];
+			initialize: function(o) {
+				this.config 	= o || {};
+				this.defaultC = this.config.components || [];
 				this.components	= new Components(this.defaultC);
 				this.set('components', this.components);
 			},
@@ -47,7 +48,7 @@ define(['backbone','./Components'],
 			/**
 			 * Get name of the component
 			 *
-			 * @return string
+			 * @return {String}
 			 * */
 			getName: function(){
 				if(!this.name){

src/editor/config/config.js

@@ -61,6 +61,9 @@ define(function () {
 		//Configurations for Commands
 		commands					: {},
 
+		//Configurations for Class Manager
+		classManager			: {},
+
 	};
 	return config;
 });

src/editor/model/Editor.js

@@ -10,6 +10,7 @@ define([
         'Canvas',
         'RichTextEditor',
         'DomComponents',
+        'ClassManager',
         'Panels'],
 	function(
 			Backbone,
@@ -23,6 +24,7 @@ define([
 			Canvas,
 			RichTextEditor,
 			DomComponents,
+			ClassManager,
 			Panels
 			){
 		return Backbone.Model.extend({
@@ -40,6 +42,7 @@ define([
 				this.compName	= this.config.storagePrefix + 'components' + this.config.id;
 				this.set('Config', c);
 
+				this.initClassManager();
 				this.initStorage();
 				this.initModal();
 				this.initAssetManager();
@@ -54,6 +57,19 @@ define([
 				this.on('change:selectedComponent', this.componentSelected, this);
 			},
 
+			/**
+			 * Initialize Class manager
+			 * */
+			initClassManager: function()
+			{
+				var cfg = this.config.classManager,
+						pfx	= cfg.stylePrefix || 'clm-';
+				cfg.stylePrefix	= this.config.stylePrefix + pfx;
+				cfg.target = this;
+				this.clm = new ClassManager(cfg);
+				this.set('ClassManager', this.clm);
+			},
+
 			/**
 			 * Initialize components
 			 * */

src/style_manager/main.js

@@ -2,7 +2,7 @@ define(function(require) {
 	/**
 	 * @class 	StyleManager
 	 * @param 	{Object} Configurations
-	 * 
+	 *
 	 * @return	{Object}
  	 * */
 	function StyleManager(config)
@@ -16,33 +16,33 @@ define(function(require) {
 			if (!(name in c))
 				c[name] = defaults[name];
 		}
-		
+
 		this.sectors		= new Sectors(c.sectors);
 		var obj				= {
 				collection	: this.sectors,
 				target		: c.target,
-		    	config		: c,
+		    config		: c,
 		};
-		
-	    this.SectorsView 	= new SectorsView(obj);
+
+	  this.SectorsView 	= new SectorsView(obj);
 	}
-	
+
 	StyleManager.prototype	= {
-			
+
 			/**
 			 * Get all sectors
-			 * 
+			 *
 			 * @return	{Sectors}
 			 * */
 			getSectors	: function()
 			{
 				return this.sectors;
 			},
-			
+
 			/**
 			 * Get sector by id
 			 * @param	{String}	id	Object id
-			 * 
+			 *
 			 * @return	{Sector}|{null}
 			 * */
 			getSector	: function(id)
@@ -50,12 +50,12 @@ define(function(require) {
 				var res	= this.sectors.where({id: id});
 				return res.length ? res[0] : null;
 			},
-			
+
 			/**
 			 * Add new Sector
 			 * @param	{String}	id	Object id
 			 * @param	{Object}	obj	Object data
-			 * 
+			 *
 			 * @return	{Sector}
 			 * */
 			addSector	: function(id, obj)
@@ -65,16 +65,16 @@ define(function(require) {
 					return this.sectors.add(obj);
 				}
 			},
-			
+
 			/**
 			 * Render sectors
-			 * 
+			 *
 			 * @return	{String}
 			 * */
 			render		: function(){
 				return this.SectorsView.render().$el;
 			},
 	};
-	
+
 	return StyleManager;
 });

styles/css/font-awesome.css

@@ -11,9 +11,10 @@
   src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.5.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.5.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.5.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular") format("svg");
   font-weight: normal;
   font-style: normal; }
+
 .fa {
   display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
+  font: normal normal normal 14px / 1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
@@ -21,7 +22,7 @@
 
 /* makes the font 33% larger relative to the icon container */
 .fa-lg {
-  font-size: 1.33333em;
+  font-size: 1.3333333333em;
   line-height: 0.75em;
   vertical-align: -15%; }
 
@@ -38,24 +39,24 @@
   font-size: 5em; }
 
 .fa-fw {
-  width: 1.28571em;
+  width: 1.2857142857em;
   text-align: center; }
 
 .fa-ul {
   padding-left: 0;
-  margin-left: 2.14286em;
+  margin-left: 2.1428571429em;
   list-style-type: none; }
   .fa-ul > li {
     position: relative; }
 
 .fa-li {
   position: absolute;
-  left: -2.14286em;
-  width: 2.14286em;
-  top: 0.14286em;
+  left: -2.1428571429em;
+  width: 2.1428571429em;
+  top: 0.1428571429em;
   text-align: center; }
   .fa-li.fa-lg {
-    left: -1.85714em; }
+    left: -1.8571428571em; }
 
 .fa-border {
   padding: .2em .25em .15em;
@@ -70,6 +71,7 @@
 
 .fa.fa-pull-left {
   margin-right: .3em; }
+
 .fa.fa-pull-right {
   margin-left: .3em; }
 
@@ -82,6 +84,7 @@
 
 .fa.pull-left {
   margin-right: .3em; }
+
 .fa.pull-right {
   margin-left: .3em; }
 
@@ -100,6 +103,7 @@
   100% {
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg); } }
+
 @keyframes fa-spin {
   0% {
     -webkit-transform: rotate(0deg);
@@ -107,6 +111,7 @@
   100% {
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg); } }
+
 .fa-rotate-90 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
   -webkit-transform: rotate(90deg);
@@ -2072,5 +2077,3 @@
 
 .fa-percent:before {
   content: ""; }
-
-/*# sourceMappingURL=font-awesome.css.map */

styles/css/main.css

@@ -211,12 +211,11 @@ License: MIT
 @media (max-device-width: 480px) {
   .sp-color {
     right: 40%; }
-
   .sp-hue {
     left: 63%; }
-
   .sp-fill {
     padding-top: 60%; } }
+
 .sp-dragger {
   border-radius: 5px;
   height: 5px;
@@ -491,9 +490,10 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.5.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.5.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.5.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular") format("svg");
   font-weight: normal;
   font-style: normal; }
+
 .fa {
   display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
+  font: normal normal normal 14px / 1 FontAwesome;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
@@ -501,7 +501,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 /* makes the font 33% larger relative to the icon container */
 .fa-lg {
-  font-size: 1.33333em;
+  font-size: 1.3333333333em;
   line-height: 0.75em;
   vertical-align: -15%; }
 
@@ -518,24 +518,24 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   font-size: 5em; }
 
 .fa-fw {
-  width: 1.28571em;
+  width: 1.2857142857em;
   text-align: center; }
 
 .fa-ul {
   padding-left: 0;
-  margin-left: 2.14286em;
+  margin-left: 2.1428571429em;
   list-style-type: none; }
   .fa-ul > li {
     position: relative; }
 
 .fa-li {
   position: absolute;
-  left: -2.14286em;
-  width: 2.14286em;
-  top: 0.14286em;
+  left: -2.1428571429em;
+  width: 2.1428571429em;
+  top: 0.1428571429em;
   text-align: center; }
   .fa-li.fa-lg {
-    left: -1.85714em; }
+    left: -1.8571428571em; }
 
 .fa-border {
   padding: .2em .25em .15em;
@@ -550,6 +550,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 .fa.fa-pull-left {
   margin-right: .3em; }
+
 .fa.fa-pull-right {
   margin-left: .3em; }
 
@@ -562,6 +563,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 .fa.pull-left {
   margin-right: .3em; }
+
 .fa.pull-right {
   margin-left: .3em; }
 
@@ -580,6 +582,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   100% {
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg); } }
+
 @keyframes fa-spin {
   0% {
     -webkit-transform: rotate(0deg);
@@ -587,6 +590,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   100% {
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg); } }
+
 .fa-rotate-90 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
   -webkit-transform: rotate(90deg);
@@ -2557,6 +2561,10 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 /*#383838*/
 /*#515151*/
 /*l: #d8d7db*/
+.wte-invis-invis, .wte-clm-tags #wte-clm-new {
+  background-color: transparent;
+  border: none; }
+
 .wte-test::btn {
   color: '#fff'; }
 
@@ -2564,7 +2572,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   opacity: 0.5;
   filter: alpha(opacity=50); }
 
-.checker-bg, .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box {
+.checker-bg, .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer > #wte-sm-preview-box {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=="); }
 
 /********************* MAIN ************************/
@@ -2816,7 +2824,7 @@ ol.example li.placeholder:before {
     background-color: rgba(0, 0, 0, 0.3); }
   .wte-nv-navigator .wte-nv-item.wte-nv-hide {
     opacity: 0.55;
-    filter: alpha(opacity=55.0); }
+    filter: alpha(opacity=55); }
   .wte-nv-navigator .wte-nv-item #wte-nv-counter {
     font-size: 10px;
     position: absolute;
@@ -2903,7 +2911,7 @@ ol.example li.placeholder:before {
   outline: 3px solid #ffca6f;
   outline-offset: -3px;
   text-align: center;
-  font-size: 16.66667px;
+  font-size: 16.6666666667px;
   cursor: pointer; }
   .wte-comp-image-placeholder.fa-picture-o::after {
     content: "\f03e"; }
@@ -2915,7 +2923,7 @@ ol.example li.placeholder:before {
 /*#252525*/
 /*#d5d5d5*/
 /*b1b1b1*/
-.wte-sm-close-btn, .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close {
+.wte-sm-close-btn, .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close {
   display: block;
   font-size: 23px;
   position: absolute;
@@ -2924,7 +2932,7 @@ ol.example li.placeholder:before {
   top: 0;
   opacity: 0.2;
   filter: alpha(opacity=20); }
-  .wte-sm-close-btn:hover, .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close:hover {
+  .wte-sm-close-btn:hover, .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close:hover, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close:hover {
     opacity: 0.7;
     filter: alpha(opacity=70); }
 
@@ -2935,7 +2943,7 @@ ol.example li.placeholder:before {
   padding: 10px;
   text-shadow: 0 1px 0 #252525; }
 
-.wte-sm-sector {
+.wte-sm-sector, .wte-clm-tags {
   clear: both;
   border-bottom: 1px solid #303030;
   color: #eee;
@@ -2945,10 +2953,10 @@ ol.example li.placeholder:before {
   /*------------------END Field--------------------*/
   /*------------------Property--------------------*/
   /*------------------END Property--------------------*/ }
-  .wte-sm-sector #wte-sm-caret {
+  .wte-sm-sector #wte-sm-caret, .wte-clm-tags #wte-sm-caret {
     padding-right: 5px;
     font-size: 11px; }
-  .wte-sm-sector .wte-sm-title {
+  .wte-sm-sector .wte-sm-title, .wte-clm-tags .wte-sm-title {
     background-color: #3a3a3a;
     font-size: 13px;
     letter-spacing: 1px;
@@ -2957,19 +2965,19 @@ ol.example li.placeholder:before {
     border-bottom: 1px solid #303030;
     border-top: 1px solid #414141;
     cursor: pointer; }
-  .wte-sm-sector .wte-sm-label {
+  .wte-sm-sector .wte-sm-label, .wte-clm-tags .wte-sm-label {
     margin: 5px 5px 2px 0; }
-  .wte-sm-sector .wte-sm-field {
+  .wte-sm-sector .wte-sm-field, .wte-clm-tags .wte-sm-field {
     width: 100%;
     position: relative; }
-    .wte-sm-sector .wte-sm-field input {
+    .wte-sm-sector .wte-sm-field input, .wte-clm-tags .wte-sm-field input {
       box-sizing: border-box;
       color: #d5d5d5;
       background: none;
       border: none;
       padding: 3px 21px 3px 0;
       width: 100%; }
-    .wte-sm-sector .wte-sm-field select {
+    .wte-sm-sector .wte-sm-field select, .wte-clm-tags .wte-sm-field select {
       background: none;
       border: none;
       color: #d5d5d5;
@@ -2982,40 +2990,40 @@ ol.example li.placeholder:before {
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none; }
-      .wte-sm-sector .wte-sm-field select::-ms-expand {
+      .wte-sm-sector .wte-sm-field select::-ms-expand, .wte-clm-tags .wte-sm-field select::-ms-expand {
         display: none; }
-    .wte-sm-sector .wte-sm-field .wte-sm-unit {
+    .wte-sm-sector .wte-sm-field .wte-sm-unit, .wte-clm-tags .wte-sm-field .wte-sm-unit {
       position: absolute;
       right: 10px;
       top: 3px;
       font-size: 10px;
       color: #b1b1b1;
       cursor: pointer; }
-    .wte-sm-sector .wte-sm-field .wte-sm-int-arrows, .wte-sm-sector .wte-sm-field .wte-sm-sel-arrow {
+    .wte-sm-sector .wte-sm-field .wte-sm-int-arrows, .wte-clm-tags .wte-sm-field .wte-sm-int-arrows, .wte-sm-sector .wte-sm-field .wte-sm-sel-arrow, .wte-clm-tags .wte-sm-field .wte-sm-sel-arrow {
       height: 100%;
       width: 9px;
       position: absolute;
       right: 0;
       top: 0;
       cursor: ns-resize; }
-    .wte-sm-sector .wte-sm-field .wte-sm-sel-arrow {
+    .wte-sm-sector .wte-sm-field .wte-sm-sel-arrow, .wte-clm-tags .wte-sm-field .wte-sm-sel-arrow {
       cursor: pointer; }
-    .wte-sm-sector .wte-sm-field .wte-sm-u-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow {
+    .wte-sm-sector .wte-sm-field .wte-sm-u-arrow, .wte-clm-tags .wte-sm-field .wte-sm-u-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow {
       position: absolute;
       height: 0;
       width: 0;
       border-left: 3px solid transparent;
       border-right: 4px solid transparent;
       cursor: pointer; }
-    .wte-sm-sector .wte-sm-field .wte-sm-u-arrow {
+    .wte-sm-sector .wte-sm-field .wte-sm-u-arrow, .wte-clm-tags .wte-sm-field .wte-sm-u-arrow {
       border-bottom: 4px solid #b1b1b1;
       top: 4px; }
-    .wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow {
+    .wte-sm-sector .wte-sm-field .wte-sm-d-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-arrow, .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow {
       border-top: 4px solid #b1b1b1;
       bottom: 4px; }
-    .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow {
+    .wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow {
       bottom: 7px; }
-    .wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-field.wte-sm-composite {
+    .wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite {
       background-color: #333333;
       /*353535*/
       border: 1px solid #292929;
@@ -3026,59 +3034,59 @@ ol.example li.placeholder:before {
       border-radius: 2px;
       box-sizing: border-box;
       padding: 0 5px; }
-    .wte-sm-sector .wte-sm-field.wte-sm-select {
+    .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select {
       padding: 0; }
-    .wte-sm-sector .wte-sm-field.wte-sm-select select {
+    .wte-sm-sector .wte-sm-field.wte-sm-select select, .wte-clm-tags .wte-sm-field.wte-sm-select select {
       height: 20px; }
-    .wte-sm-sector .wte-sm-field.wte-sm-select option {
+    .wte-sm-sector .wte-sm-field.wte-sm-select option, .wte-clm-tags .wte-sm-field.wte-sm-select option {
       margin: 5px 0; }
-    .wte-sm-sector .wte-sm-field.wte-sm-composite {
+    .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite {
       background-color: transparent;
       border: 1px solid #333333; }
-    .wte-sm-sector .wte-sm-field.wte-sm-list {
+    .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list {
       width: auto;
       padding: 0;
       overflow: hidden;
       float: left; }
-      .wte-sm-sector .wte-sm-field.wte-sm-list input {
+      .wte-sm-sector .wte-sm-field.wte-sm-list input, .wte-clm-tags .wte-sm-field.wte-sm-list input {
         display: none; }
-      .wte-sm-sector .wte-sm-field.wte-sm-list label {
+      .wte-sm-sector .wte-sm-field.wte-sm-list label, .wte-clm-tags .wte-sm-field.wte-sm-list label {
         cursor: pointer;
         padding: 5px;
         display: block; }
-      .wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-radio:checked + label {
+      .wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-radio:checked + label, .wte-clm-tags .wte-sm-field.wte-sm-list .wte-sm-radio:checked + label {
         background-color: #5b5b5b;
         /*5b5b5b*/ }
-      .wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-icon {
+      .wte-sm-sector .wte-sm-field.wte-sm-list .wte-sm-icon, .wte-clm-tags .wte-sm-field.wte-sm-list .wte-sm-icon {
         background-repeat: no-repeat;
         background-position: center;
         text-shadow: none;
         line-height: normal; }
-    .wte-sm-sector .wte-sm-field.wte-sm-integer select {
+    .wte-sm-sector .wte-sm-field.wte-sm-integer select, .wte-clm-tags .wte-sm-field.wte-sm-integer select, .wte-clm-tags #wte-clm-tags-field select {
       width: auto;
       padding: 0;
       color: transparent; }
-  .wte-sm-sector .wte-sm-list .wte-sm-el {
+  .wte-sm-sector .wte-sm-list .wte-sm-el, .wte-clm-tags .wte-sm-list .wte-sm-el {
     float: left;
     border-left: 1px solid #252525;
     text-shadow: 0 1px 0 #232323;
     /*232323*/ }
-    .wte-sm-sector .wte-sm-list .wte-sm-el:first-child {
+    .wte-sm-sector .wte-sm-list .wte-sm-el:first-child, .wte-clm-tags .wte-sm-list .wte-sm-el:first-child {
       border: none; }
-    .wte-sm-sector .wte-sm-list .wte-sm-el:hover {
+    .wte-sm-sector .wte-sm-list .wte-sm-el:hover, .wte-clm-tags .wte-sm-list .wte-sm-el:hover {
       background: #3a3a3a; }
-  .wte-sm-sector .wte-sm-properties {
+  .wte-sm-sector .wte-sm-properties, .wte-clm-tags .wte-sm-properties {
     font-size: 11px;
     padding: 10px 5px; }
-  .wte-sm-sector .wte-sm-property {
+  .wte-sm-sector .wte-sm-property, .wte-clm-tags .wte-sm-property {
     box-sizing: border-box;
     float: left;
     width: 50%;
     margin-bottom: 5px;
     padding: 0 5px; }
-    .wte-sm-sector .wte-sm-property.wte-sm-file, .wte-sm-sector .wte-sm-property.wte-sm-composite, .wte-sm-sector .wte-sm-property.wte-sm-stack, .wte-sm-sector .wte-sm-property.wte-sm-list {
+    .wte-sm-sector .wte-sm-property.wte-sm-file, .wte-clm-tags .wte-sm-property.wte-sm-file, .wte-sm-sector .wte-sm-property.wte-sm-composite, .wte-clm-tags .wte-sm-property.wte-sm-composite, .wte-sm-sector .wte-sm-property.wte-sm-stack, .wte-clm-tags .wte-sm-property.wte-sm-stack, .wte-sm-sector .wte-sm-property.wte-sm-list, .wte-clm-tags .wte-sm-property.wte-sm-list {
       width: 100%; }
-    .wte-sm-sector .wte-sm-property .wte-sm-btn {
+    .wte-sm-sector .wte-sm-property .wte-sm-btn, .wte-clm-tags .wte-sm-property .wte-sm-btn {
       background-color: #5b5b5b;
       /*#5d5d5d*/
       border-radius: 2px;
@@ -3095,36 +3103,36 @@ ol.example li.placeholder:before {
       border: none;
       opacity: 0.85;
       filter: alpha(opacity=85); }
-    .wte-sm-sector .wte-sm-property .wte-sm-btn-c {
+    .wte-sm-sector .wte-sm-property .wte-sm-btn-c, .wte-clm-tags .wte-sm-property .wte-sm-btn-c {
       box-sizing: border-box;
       float: left;
       width: 100%;
       padding: 0 5px; }
-    .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box {
+    .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box {
       background-color: #414141;
       border-radius: 2px;
       margin-top: 5px;
       position: relative;
       overflow: hidden; }
-      .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box.wte-sm-show {
+      .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box.wte-sm-show, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box.wte-sm-show {
         border: 1px solid #3f3f3f;
         padding: 3px 5px; }
-      .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close {
+      .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close {
         display: block; }
-    .wte-sm-sector .wte-sm-property.wte-sm-file .wte-sm-show #wte-sm-preview-file {
+    .wte-sm-sector .wte-sm-property.wte-sm-file .wte-sm-show #wte-sm-preview-file, .wte-clm-tags .wte-sm-property.wte-sm-file .wte-sm-show #wte-sm-preview-file {
       height: 50px; }
-    .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-file {
+    .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-file, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-file {
       background-size: auto 100%;
       background-repeat: no-repeat;
       background-position: center center; }
-    .wte-sm-sector .wte-sm-property .wte-sm-layers {
+    .wte-sm-sector .wte-sm-property .wte-sm-layers, .wte-clm-tags .wte-sm-property .wte-sm-layers {
       background-color: #3a3a3a;
       border: 1px solid #333333;
       box-shadow: 1px 1px 0 #575757;
       border-radius: 2px;
       margin-top: 5px;
       min-height: 30px; }
-    .wte-sm-sector .wte-sm-property .wte-sm-layer {
+    .wte-sm-sector .wte-sm-property .wte-sm-layer, .wte-clm-tags .wte-sm-property .wte-sm-layer {
       background-color: #454545;
       border-radius: 2px;
       box-shadow: 1px 1px 0 #333333, 1px 1px 0 #515151 inset;
@@ -3132,15 +3140,15 @@ ol.example li.placeholder:before {
       padding: 7px;
       position: relative;
       cursor: pointer; }
-      .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box {
+      .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer > #wte-sm-preview-box {
         height: 15px;
         position: absolute;
         right: 27px;
         top: 6px;
         width: 15px; }
-      .wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-preview-box, .wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-preview {
+      .wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer #wte-sm-preview-box, .wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-preview, .wte-clm-tags .wte-sm-property .wte-sm-layer #wte-sm-preview {
         border-radius: 2px; }
-      .wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-close-layer {
+      .wte-sm-sector .wte-sm-property .wte-sm-layer #wte-sm-close-layer, .wte-clm-tags .wte-sm-property .wte-sm-layer #wte-sm-close-layer {
         display: block;
         font-size: 23px;
         position: absolute;
@@ -3149,18 +3157,18 @@ ol.example li.placeholder:before {
         top: 0;
         opacity: 0.2;
         filter: alpha(opacity=20); }
-      .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box #wte-sm-preview {
+      .wte-sm-sector .wte-sm-property .wte-sm-layer > #wte-sm-preview-box #wte-sm-preview, .wte-clm-tags .wte-sm-property .wte-sm-layer > #wte-sm-preview-box #wte-sm-preview {
         background-color: white;
         height: 100%;
         width: 100%;
         background-size: cover !important; }
-      .wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-active {
+      .wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-active, .wte-clm-tags .wte-sm-property .wte-sm-layer.wte-sm-active {
         background-color: #4c4c4c; }
-      .wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-no-preview #wte-sm-preview-box {
+      .wte-sm-sector .wte-sm-property .wte-sm-layer.wte-sm-no-preview #wte-sm-preview-box, .wte-clm-tags .wte-sm-property .wte-sm-layer.wte-sm-no-preview #wte-sm-preview-box {
         display: none; }
-  .wte-sm-sector .wte-sm-stack .wte-sm-properties {
+  .wte-sm-sector .wte-sm-stack .wte-sm-properties, .wte-clm-tags .wte-sm-stack .wte-sm-properties {
     padding-top: 5px; }
-  .wte-sm-sector .wte-sm-stack #wte-sm-add {
+  .wte-sm-sector .wte-sm-stack #wte-sm-add, .wte-clm-tags .wte-sm-stack #wte-sm-add {
     background: none;
     border: none;
     color: white;
@@ -3171,10 +3179,10 @@ ol.example li.placeholder:before {
     right: 0;
     top: -20px;
     opacity: 0.75; }
-    .wte-sm-sector .wte-sm-stack #wte-sm-add:hover {
+    .wte-sm-sector .wte-sm-stack #wte-sm-add:hover, .wte-clm-tags .wte-sm-stack #wte-sm-add:hover {
       opacity: 1;
       filter: alpha(opacity=100); }
-  .wte-sm-sector .wte-sm-color-picker {
+  .wte-sm-sector .wte-sm-color-picker, .wte-clm-tags .wte-sm-color-picker {
     background-color: #eee;
     border: 2px solid #575757;
     box-sizing: border-box;
@@ -3184,17 +3192,49 @@ ol.example li.placeholder:before {
     position: absolute;
     right: 0;
     top: 0; }
-  .wte-sm-sector .wte-sm-btn-upload #wte-sm-upload {
+  .wte-sm-sector .wte-sm-btn-upload #wte-sm-upload, .wte-clm-tags .wte-sm-btn-upload #wte-sm-upload {
     left: 0;
     top: 0;
     position: absolute;
     width: 100%;
     opacity: 0;
     cursor: pointer; }
-  .wte-sm-sector .wte-sm-btn-upload #wte-sm-label {
+  .wte-sm-sector .wte-sm-btn-upload #wte-sm-label, .wte-clm-tags .wte-sm-btn-upload #wte-sm-label {
     padding: 2px 0; }
 
 /********* END Style Manager **********/
+/********* Class manager **********/
+.wte-clm-tags {
+  font-size: 11px;
+  padding: 10px 5px; }
+  .wte-clm-tags #wte-clm-label {
+    padding-bottom: 5px;
+    float: left; }
+  .wte-clm-tags #wte-clm-status-c {
+    float: right; }
+  .wte-clm-tags #wte-clm-tags-field {
+    clear: both;
+    padding: 5px;
+    margin-bottom: 5px; }
+  .wte-clm-tags #wte-clm-add-tag {
+    background-color: #535353;
+    border-radius: 2px;
+    padding: 5px 6px;
+    box-shadow: 1px 1px 0 #6d6d6d inset;
+    border: 1px solid #323232;
+    cursor: pointer; }
+  .wte-clm-tags #wte-clm-new {
+    color: #eee;
+    padding: 5px 6px;
+    display: none; }
+  .wte-clm-tags .wte-clm-tag {
+    background-color: #804f7b;
+    display: inline-block;
+    border-radius: 2px;
+    margin: 0 3px 3px 0;
+    padding: 4px; }
+
+/********* END Class manager **********/
 /********* Modal dialog **********/
 .wte-mdl-backlayer {
   background-color: #000;
@@ -3432,5 +3472,3 @@ ol.example li.placeholder:before {
   text-shadow: none;
   box-shadow: none;
   padding: 3px 5px; }
-
-/*# sourceMappingURL=main.css.map */

styles/scss/main.scss

@@ -12,6 +12,7 @@ $pn-prefix: 	$app-prefix + 'pn-';
 $com-prefix: 	$app-prefix + 'com-';
 $sm-prefix: 	$app-prefix + 'sm-';
 $cv-prefix: 	$app-prefix + 'cv-';
+$clm-prefix: 	$app-prefix + 'clm-';
 $mainColor:		#444; /* Light: #573454 Dark: #3b2639 -moz-linear-gradient(top, #fca99b 0%, #6e2842 100%)*/
 $mainDkColor:	darken($mainColor, 4%);/*#383838*/
 $mainLhColor:	lighten($mainColor, 5%);/*#515151*/
@@ -46,6 +47,11 @@ $imageCompDim:	50px;
 	appearance: $v;
 }
 
+.#{$app-prefix}invis-invis{
+	background-color: transparent;
+	border: none;
+}
+
 .#{$app-prefix}test {
 
   &::btn { color: '#fff';}
@@ -717,6 +723,56 @@ $arrowColor:		darken($fontColor,24%); /*b1b1b1*/
 }
 /********* END Style Manager **********/
 
+/********* Class manager **********/
+$addBtnBg: lighten($mainDkColor, 10%);
+$paddElClm: 5px 6px;
+$tagBg: #804f7b;
+
+.#{$clm-prefix}tags{
+	@extend .#{$sm-prefix}sector;
+	font-size: 11px;
+	padding: 10px 5px;
+
+	##{$clm-prefix}label{
+		padding-bottom: 5px;
+		float:left;
+	}
+	##{$clm-prefix}status-c{
+		float:right;
+	}
+
+	##{$clm-prefix}tags-field{
+		@extend .#{$sm-prefix}field.#{$sm-prefix}integer;
+		clear:both;
+		padding: 5px;
+		margin-bottom: 5px;
+	}
+
+	##{$clm-prefix}add-tag{
+		background-color: $addBtnBg;
+		border-radius: 2px;
+    padding: $paddElClm;
+    box-shadow: 1px 1px 0 lighten($addBtnBg, 10%) inset;
+    border: 1px solid darken($addBtnBg, 13%);
+    cursor: pointer;
+	}
+
+	##{$clm-prefix}new {
+		@extend  .#{$app-prefix}invis-invis;
+		color: $fontColor;
+		padding: $paddElClm;
+		display:none;
+	}
+
+	.#{$clm-prefix}tag {
+		background-color: $tagBg;
+		display: inline-block;
+		border-radius:2px;
+		margin: 0 3px 3px 0;
+    padding: 4px;
+	}
+}
+/********* END Class manager **********/
 
 /********* Modal dialog **********/
 

test/runner/main.js

@@ -1,9 +1,17 @@
 require(['../src/config/require-config.js', 'config/config.js'], function() {
 
 	require(['chai',
+					 'sinon',
 	         'specs/main.js',
 	         'specs/asset_manager/main.js',
 	         'specs/asset_manager/model/Asset.js',
+	         'specs/asset_manager/model/AssetImage.js',
+	         'specs/asset_manager/model/Assets.js',
+	         'specs/asset_manager/view/AssetsView.js',
+	         'specs/asset_manager/view/AssetView.js',
+	         'specs/asset_manager/view/AssetImageView.js',
+	         'specs/asset_manager/view/FileUploader.js',
+	         'specs/dom_components/main.js',
 	     ], function(chai)
 	     {
 				var should 	= chai.should(),

test/specs/asset_manager/main.js

@@ -1,17 +1,57 @@
 define(['AssetManager'],
 	function(AssetManager) {
-	
+
 		describe('Asset Manager', function() {
-			
+
 			describe('Main', function() {
 				it('Object exists', function() {
 					AssetManager.should.be.exist;
 				});
-				
+
 				it('No assets inside', function() {
 					var obj 	= new AssetManager();
 					obj.getAssets().length.should.be.empty;
 				});
+
+				it('AssetsView exists and is an instance of Backbone.View', function() {
+					var obj 	= new AssetManager();
+					obj.am.should.be.exist;
+					obj.am.should.be.an.instanceOf(Backbone.View);
+				});
+
+				it('FileUpload exists and is an instance of Backbone.View', function() {
+					var obj 	= new AssetManager();
+					obj.fu.should.be.exist;
+					obj.fu.should.be.an.instanceOf(Backbone.View);
+				});
+
+				it('Target is assigning', function() {
+					var obj 	= new AssetManager();
+					var t 		= 'target';
+					obj.setTarget(t);
+					obj.am.collection.target.should.equal(t);
+				});
+
+				it('onSelect callback is assigning', function() {
+					var obj 	= new AssetManager();
+					var cb 		= function(){
+						return 'callback';
+					};
+					obj.onSelect(cb);
+					obj.am.collection.onSelect.should.equal(cb);
+				});
+
+				it('Render propagates', function() {
+					var obj 	= new AssetManager(),
+							jq 		= { $el: $('<div>') };
+					sinon.stub(obj.am, "render").returns(jq);
+					sinon.stub(obj.fu, "render").returns(jq);
+					obj.render();
+					obj.am.render.calledOnce.should.equal(true);
+					obj.fu.render.calledOnce.should.equal(true);
+					obj.rendered.should.not.be.empty;
+				});
+
 			});
 		});
 });

test/specs/asset_manager/model/AssetImage.js

@@ -0,0 +1,24 @@
+define(['AssetManager/model/AssetImage'],
+	function(AssetImage) {
+
+		describe('Asset Manager', function() {
+
+			describe('AssetImage', function() {
+				it('Object exists', function() {
+					AssetImage.should.be.exist;
+				});
+
+				it('Has default values', function() {
+					var obj 	= new AssetImage({});
+					obj.get('type').should.equal("image");
+					obj.get('src').should.equal("");
+					obj.get('unitDim').should.equal("px");
+					obj.get('height').should.equal(0);
+					obj.get('width').should.equal(0);
+					obj.getExtension().should.be.empty;
+					obj.getFilename().should.be.empty;
+				});
+
+			});
+		});
+});

test/specs/asset_manager/model/Assets.js

@@ -0,0 +1,13 @@
+define(['AssetManager/model/Assets'],
+	function(Assets) {
+
+		describe('Asset Manager', function() {
+
+			describe('Assets', function() {
+				it('Object exists', function() {
+					Assets.should.be.exist;
+				});
+
+			});
+		});
+});

test/specs/asset_manager/view/AssetImageView.js

@@ -0,0 +1,77 @@
+define(['AssetManager/view/AssetImageView', 'AssetManager/model/AssetImage', 'AssetManager/model/Assets'],
+	function(AssetImageView, AssetImage, Assets) {
+
+		describe('Asset Manager', function() {
+
+			describe('AssetImageView', function() {
+
+				before(function () {
+					this.$fixtures 	= $("#fixtures");
+					this.$fixture 	= $('<div class="asset-fixture"></div>');
+				});
+
+				beforeEach(function () {
+					var coll 	= new Assets();
+					var model = coll.add({ type:'image', src: '/test' });
+					this.view = new AssetImageView({
+						config : {},
+						model: model
+					});
+					this.$fixture.empty().appendTo(this.$fixtures);
+					this.$fixture.html(this.view.render().el);
+				});
+
+				afterEach(function () {
+					this.view.model.destroy();
+				});
+
+				after(function () {
+					this.$fixture.remove();
+				});
+
+				it('Object exists', function() {
+					AssetImageView.should.be.exist;
+				});
+
+				describe('Asset should be rendered correctly', function() {
+
+						it('Has preview box', function() {
+							var $asset = this.view.$el;
+							$asset.find('#preview').should.have.property(0);
+						});
+
+						it('Has meta box', function() {
+							var $asset = this.view.$el;
+							$asset.find('#meta').should.have.property(0);
+						});
+
+						it('Has close button', function() {
+							var $asset = this.view.$el;
+							$asset.find('#close').should.have.property(0);
+						});
+
+				});
+
+				it('Could be selected', function() {
+					sinon.stub(this.view, 'updateTarget');
+					this.view.$el.trigger('click');
+					this.view.$el.attr('class').should.contain('highlight');
+					this.view.updateTarget.calledOnce.should.equal(true);
+				});
+
+				it('Could be chosen', function() {
+					sinon.stub(this.view, 'updateTarget');
+					this.view.$el.trigger('dblclick');
+					this.view.updateTarget.calledOnce.should.equal(true);
+				});
+
+				it('Could be removed', function() {
+					var spy 		= sinon.spy();
+					this.view.model.on("remove", spy);
+					this.view.$el.find('#close').trigger('click');
+					spy.called.should.equal(true);
+				});
+
+			});
+		});
+});

test/specs/asset_manager/view/AssetView.js

@@ -0,0 +1,42 @@
+define(['AssetManager/view/AssetView', 'AssetManager/model/Asset', 'AssetManager/model/Assets'],
+	function(AssetView, Asset, Assets) {
+
+		describe('Asset Manager', function() {
+
+			describe('AssetView', function() {
+
+				before(function () {
+					this.$fixtures 	= $("#fixtures");
+					this.$fixture 	= $('<div class="asset-fixture"></div>');
+				});
+
+				beforeEach(function () {
+					var coll 	= new Assets();
+					var model = coll.add({});
+					this.view = new AssetView({
+						config : {},
+						model: model
+					});
+					this.$fixture.empty().appendTo(this.$fixtures);
+					this.$fixture.html(this.view.render().el);
+				});
+
+				afterEach(function () {
+					this.view.model.destroy();
+				});
+
+				after(function () {
+					this.$fixture.remove();
+				});
+
+				it('Object exists', function() {
+					AssetView.should.be.exist;
+				});
+
+				it('Has correct prefix', function() {
+					this.view.pfx.should.equal('');
+				});
+
+			});
+		});
+});

test/specs/asset_manager/view/AssetsView.js

@@ -0,0 +1,91 @@
+define(['AssetManager/view/AssetsView', 'AssetManager/model/Assets'],
+	function(AssetsView, Assets) {
+
+		describe('Asset Manager', function() {
+
+			describe('AssetsView', function() {
+
+				before(function () {
+					this.$fixtures 	= $("#fixtures");
+					this.$fixture 	= $('<div class="assets-fixture"></div>');
+				});
+
+				beforeEach(function () {
+					this.coll 	= new Assets([]);
+					this.view = new AssetsView({
+						config : {},
+						collection: this.coll
+					});
+					this.$fixture.empty().appendTo(this.$fixtures);
+					this.$fixture.html(this.view.render().el);
+				});
+
+				afterEach(function () {
+					this.view.collection.reset();
+				});
+
+				after(function () {
+					this.$fixture.remove();
+				});
+
+				it('Object exists', function() {
+					AssetsView.should.be.exist;
+				});
+
+				it("Collection is empty", function (){
+					this.view.$el.html().should.be.empty;
+				});
+
+				it("Add new asset", function (){
+					sinon.stub(this.view, "addAsset");
+					this.coll.add({});
+					this.view.addAsset.calledOnce.should.equal(true);
+				});
+
+				it("Render new asset", function (){
+					this.coll.add({});
+					this.view.$el.html().should.not.be.empty;
+				});
+
+				it("Render correctly new asset", function (){
+					this.coll.add({});
+					var $asset = this.view.$el.children().first();
+					$asset.prop("tagName").should.equal('DIV');
+					$asset.html().should.be.empty;
+				});
+
+				it("Render correctly new image asset", function (){
+					this.coll.add({ type: 'image'});
+					var $asset = this.view.$el.children().first();
+					$asset.prop("tagName").should.equal('DIV');
+					$asset.html().should.not.be.empty;
+				});
+
+				it("Clean collection from asset", function (){
+					var model = this.coll.add({});
+					this.coll.remove(model);
+					this.view.$el.html().should.be.empty;
+				});
+
+				it("Load no assets", function (){
+					(this.view.load() === null).should.be.true;
+				});
+
+				it("Load assets", function (){
+					var obj = { test: '1' };
+					this.view.storagePrv = { load : function(){} };
+					sinon.stub(this.view.storagePrv, "load").returns(obj);
+					this.view.load().should.equal(obj);
+				});
+
+				it("Deselect works", function (){
+					this.coll.add([{},{}]);
+					var $asset = this.view.$el.children().first();
+					$asset.attr('class', this.view.pfx + 'highlight');
+					this.coll.trigger('deselectAll');
+					$asset.attr('class').should.be.empty;
+				});
+
+			});
+		});
+});

test/specs/asset_manager/view/FileUploader.js

@@ -0,0 +1,77 @@
+define(['AssetManager/view/FileUploader'],
+	function(FileUploader) {
+
+		describe('Asset Manager', function() {
+
+			describe('File Uploader', function() {
+
+				before(function () {
+					this.$fixtures 	= $("#fixtures");
+					this.$fixture 	= $('<div class="fileupload-fixture"></div>');
+				});
+
+				beforeEach(function () {
+					this.view = new FileUploader({ config : {} });
+					this.$fixture.empty().appendTo(this.$fixtures);
+					this.$fixture.html(this.view.render().el);
+				});
+
+				afterEach(function () {
+					this.view.remove();
+				});
+
+				after(function () {
+					this.$fixture.remove();
+				});
+
+				it('Object exists', function() {
+					FileUploader.should.be.exist;
+				});
+
+				it('Has correct prefix', function() {
+					this.view.pfx.should.equal('');
+				});
+
+				describe('Should be rendered correctly', function() {
+
+						it('Has title', function() {
+							this.view.$el.find('#title').should.have.property(0);
+						});
+
+						it('Title is empty', function() {
+							this.view.$el.find('#title').html().should.equal('');
+						});
+
+						it('Has file input', function() {
+							this.view.$el.find('input[type=file]').should.have.property(0);
+						});
+
+						it('File input is enabled', function() {
+							this.view.$el.find('input[type=file]').prop('disabled').should.equal(false);
+						});
+
+				});
+
+				describe('Interprets configurations correctly', function() {
+
+						it('Has correct title', function() {
+							var view = new FileUploader({ config : {
+								uploadText : 'Test',
+							} });
+							view.render();
+							view.$el.find('#title').html().should.equal('Test');
+						});
+
+						it('Could be disabled', function() {
+							var view = new FileUploader({ config : {
+								disableUpload: true,
+							} });
+							view.render();
+							view.$el.find('input[type=file]').prop('disabled').should.equal(true);
+						});
+
+				});
+
+			});
+		});
+});

test/specs/components/model/componentModel.js

@@ -1,36 +0,0 @@
-define(['componentModel'],
-	function(componentModel) {
-		describe('Component', function() {
-			
-			it('Contiene valori di default', function() {//Has default values
-				var model = new componentModel({});
-				var modelComponents = model.components;
-				model.should.be.ok;
-				model.get('tagName').should.equal("div");
-				model.get('classes').should.be.empty;
-				model.get('css').should.be.empty;
-				model.get('attributes').should.be.empty;
-				modelComponents.models.should.be.empty;
-			});
-			it('Non ci sono altri componenti all\'interno ', function() {//No other components inside
-				var model = new componentModel({});
-				var modelComponents = model.components;
-				model.should.be.ok;
-				modelComponents.models.should.be.empty;
-			});
-			it('Imposta valori passati', function() {//Sets passed attributes
-				var model = new componentModel({
-					tagName : 		'span',
-					classes : 		['one','two','three'],
-					css : 			{ 'one':'vone', 'two':'vtwo', },
-					attributes : 	{ 'data-one':'vone', 'data-two':'vtwo', },
-				});
-				model.should.be.ok;
-				model.get('tagName').should.equal("span");
-				model.get('classes').should.have.length(3);
-				model.get('css').should.have.keys(["one", "two",]);
-				model.get('attributes').should.have.keys(["data-one", "data-two",]);
-			});
-			it('Possibilità di istanziare componenti annidati');		//Possibility to init nested components
-		});
-});

test/specs/components/model/components.js

@@ -1,58 +0,0 @@
-define(['Components'],
-		function(Components) {
-			describe('Components', function() {
-				before(function () {
-				    this.collection = new Components();
-				    this.collection.localStorage._clear();
-				});
-				after(function () {			
-					this.collection = null;
-				});
-				describe('Creazione', function() {
-					it('Contiene valori di default', function() {//Has default values
-						this.collection.should.be.ok;
-						this.collection.should.have.length(0);
-					});
-				});
-				describe('Modifica', function() {
-					beforeEach(function () {
-						this.collection.create({
-							tagName : 		'span',
-							classes : 		['one','two','three'],
-							css : 			{ 'one':'vone', 'two':'vtwo', },
-							attributes : 	{ 'data-one':'vone', 'data-two':'vtwo', },
-						});
-				    });
-				    afterEach(function () {
-				    	this.collection.localStorage._clear();
-				    	this.collection.reset();
-				    });
-					it('Contiene un singolo componente', function(done) {	//Has single object
-						var collection = this.collection, model;
-						
-						collection.once("reset", function () {
-							collection.should.have.length(1);
-							model = collection.at(0);
-							model.should.be.ok;
-							model.get('tagName').should.equal("span");
-							model.get('classes').should.have.length(3);
-							model.get('css').should.have.keys(["one", "two",]);
-							model.get('attributes').should.have.keys(["data-one", "data-two",]);
-							done();
-						});
-						collection.fetch({ reset: true });
-					});
-					
-					it("Componenete eliminabile", function (done) {			//Can delete a component
-						var collection = this.collection, model;
-						collection.should.have.length(1);
-						collection.once("remove", function () {
-							collection.should.have.length(0);
-					        done();
-					     });
-
-						model = collection.shift();
-					});
-				});
-			});
-	});

test/specs/dom_components/main.js

@@ -0,0 +1,46 @@
+var modulePath = './../../../test/specs/dom_components';
+
+define([
+				'DomComponents',
+				 modulePath + '/model/Component'
+				 ],
+	function(DomComponents,
+					ComponentModels
+					) {
+
+		describe('DOM Components', function() {
+
+			describe('Main', function() {
+
+				beforeEach(function () {
+					this.obj 	= new DomComponents();
+				});
+
+				afterEach(function () {
+					delete this.obj;
+				});
+
+				it('Object exists', function() {
+					DomComponents.should.be.exist;
+				});
+
+				it('Wrapper exists', function() {
+					this.obj.getWrapper().should.not.be.empty;
+				});
+
+				it('No components inside', function() {
+					this.obj.getComponents().length.should.equal(0);
+				});
+
+				it('Render wrapper', function() {
+					sinon.stub(this.obj.ComponentView, "render").returns({ el: '' });
+					this.obj.render();
+					this.obj.ComponentView.render.calledOnce.should.equal(true);
+				});
+
+			});
+
+			ComponentModels.run();
+
+		});
+});

test/specs/dom_components/model/Component.js

@@ -0,0 +1,109 @@
+define(['DomComponents/model/Component',
+        'DomComponents/model/ComponentImage',
+        'DomComponents/model/ComponentText',
+        'DomComponents/model/Components'],
+	function(Component, ComponentImage, ComponentText, Components) {
+
+    return {
+      run : function(){
+          describe('Component', function() {
+
+            beforeEach(function () {
+              this.obj  = new Component();
+            });
+
+            afterEach(function () {
+              delete this.obj;
+            });
+
+            it('Has no children', function() {
+              this.obj.get('components').length.should.equal(0);
+            });
+
+            it('Clones correctly', function() {
+              var sAttr = this.obj.attributes;
+              var cloned = this.obj.clone();
+              var eAttr = cloned.attributes;
+              sAttr.components = {};
+              eAttr.components = {};
+              sAttr.should.deep.equal(eAttr);
+            });
+
+            it('Has expected name', function() {
+              this.obj.cid = 'c999';
+              this.obj.getName().should.equal('Box999');
+            });
+
+            it('Has expected name 2', function() {
+              this.obj.cid = 'c999';
+              this.obj.set('type','testType');
+              this.obj.getName().should.equal('TestTypeBox999');
+            });
+
+        });
+
+        describe('Image Component', function() {
+
+            beforeEach(function () {
+              this.obj  = new ComponentImage();
+            });
+
+            afterEach(function () {
+              delete this.obj;
+            });
+
+            it('Has src property', function() {
+              this.obj.has('src').should.equal(true);
+            });
+
+            it('Not droppable', function() {
+              this.obj.get('droppable').should.equal(false);
+            });
+
+        });
+
+        describe('Text Component', function() {
+
+            beforeEach(function () {
+              this.obj  = new ComponentText();
+            });
+
+            afterEach(function () {
+              delete this.obj;
+            });
+
+            it('Has content property', function() {
+              this.obj.has('content').should.equal(true);
+            });
+
+            it('Not droppable', function() {
+              this.obj.get('droppable').should.equal(false);
+            });
+
+        });
+
+        describe('Components', function() {
+
+            it('Creates component correctly', function() {
+              var c = new Components();
+              var m = c.add({});
+              m.should.be.an.instanceOf(Component);
+            });
+
+            it('Creates image component correctly', function() {
+              var c = new Components();
+              var m = c.add({ type: 'image' });
+              m.should.be.an.instanceOf(ComponentImage);
+            });
+
+            it('Creates text component correctly', function() {
+              var c = new Components();
+              var m = c.add({ type: 'text' });
+              m.should.be.an.instanceOf(ComponentText);
+            });
+
+        });
+      }
+    };
+
+});