Started Class Manager

package.json

@@ -40,7 +40,7 @@
     "editor"
   ],
   "scripts": {
-    "postinstall": "node_modules/.bin/bower install --config.interactive=false",
+    "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/class_manager/config/config.js

@@ -0,0 +1,7 @@
+define(function () {
+	return {
+
+    // Default classes
+    classes : [],
+	};
+});

src/class_manager/main.js

@@ -0,0 +1,47 @@
+define(function(require) {
+  /**
+   * @class   ClassManager
+   * @param   {Object} config Configurations
+   *
+   * */
+  var ClassManager  = function(config)
+  {
+    var c = config || {},
+      def = require('./config/config'),
+      Classes = require('./model/Classes');
+
+    for (var name in def) {
+      if (!(name in c))
+        c[name] = def[name];
+    }
+
+    this.classes = new Classes(c.classes);
+
+    this.Classes = Classes;
+  };
+
+  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;
+      },
+  };
+
+  return ClassManager;
+
+});

src/class_manager/model/Class.js

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

src/class_manager/model/Classes.js

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

src/class_manager/view/ClassItemsView.js

@@ -0,0 +1,93 @@
+define(['backbone', 'text!./../template/classItems.html'],
+  function (Backbone, itemsTemplate) {
+  /**
+   * @class ClassItemsView
+   * */
+  return Backbone.View.extend({
+
+    template: _.template(itemsTemplate),
+
+    events:{
+      'click .add': 'startNewClass',
+      'keyup .input' : 'onInputKeyUp'
+    },
+
+    initialize: function(o) {
+      this.events['click #'+this.pfx+'add'] = 'addLayer';
+
+      if(!this.layers){
+        this.layers   = new Layers();
+        this.model.set('layers', this.layers);
+        this.$layers  = new LayersView({
+          collection  : this.layers,
+          stackModel  : this.model,
+          preview   : this.model.get('preview'),
+          config    : o.config
+        });
+      }
+
+      this.targetCl  = this.target.classes;
+
+      this.listenTo( this.targetCl, 'add', this.addClass);
+      this.listenTo( this.targetCl, 'reset', this.renderClasses);
+
+      this.delegateEvents();
+    },
+
+    onInputKeyUp: function(e){
+      if (e.keyCode === 13) {
+        this.addItem();
+      }else{
+        this.searchItem();
+      }
+    },
+
+    /**
+     * Add new object to collection
+     * @param Object Model
+     * @param Object Fragment collection
+     *
+     * @return Object Object created
+     * */
+    addToClasses: function(model, fragmentEl){
+      var fragment  = fragmentEl || null;
+      var viewObject  = ClassTagView;
+
+      var view = new viewObject({
+          model:  model,
+          config: this.config,
+      });
+      var rendered  = view.render().el;
+
+      if(fragment)
+        fragment.appendChild( rendered );
+      else
+        this.$classes.append(rendered);
+
+      return rendered;
+    },
+
+    renderClasses: function() {
+      var fragment = document.createDocumentFragment();
+      this.$classes.empty();
+
+      this.collection.each(function(model){
+        this.addToClasses(model, fragment);
+      },this);
+
+      this.$classes.append(fragment);
+      return this;
+    },
+
+
+    /** @inheritdoc */
+    render : function(){
+      this.renderLabel();
+      this.renderField();
+      this.renderLayers();
+      this.$el.attr('class', this.className);
+      return this;
+    },
+
+  });
+});

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

@@ -28,7 +28,6 @@ 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;
 		}
 

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,15 @@ define([
 				this.on('change:selectedComponent', this.componentSelected, this);
 			},
 
+			/**
+			 * Initialize Class manager
+			 * */
+			initClassManager: function()
+			{
+				this.clm		= new ClassManager(this.config.classManager);
+				this.set('ClassManager', this.clm);
+			},
+
 			/**
 			 * Initialize components
 			 * */