Update traits

src/commands/main.js

@@ -96,6 +96,7 @@ define(function(require) {
 				defaultCommands['sw-visibility'] = require('./view/SwitchVisibility');
 				defaultCommands['open-layers'] = require('./view/OpenLayers');
 				defaultCommands['open-sm'] = require('./view/OpenStyleManager');
+				defaultCommands['open-tm'] = require('./view/OpenTraitManager');
 				defaultCommands['open-blocks'] = require('./view/OpenBlocks');
 				defaultCommands.fullscreen = require('./view/Fullscreen');
 				defaultCommands.preview = require('./view/Preview');
@@ -165,4 +166,4 @@ define(function(require) {
 		};
 
 	};
-});
+});

src/commands/view/OpenTraitManager.js

@@ -6,27 +6,27 @@ define(function() {
 				var config = editor.Config;
 				var pfx = config.stylePrefix;
 				var tm = editor.TraitManager;
-				if(!this.blocks){
+				if(!this.obj){
           var tmView = new tm.TraitsView({
 						collection: [],
-						editor: editor
+						editor: editor.editor
 					});
-					this.blocks = $('<div/>').get(0);
-					this.blocks.appendChild(tmView.render());
+					this.obj = $('<div/>').get(0);
+					this.obj.appendChild(tmView.render().el);
 					var panels = editor.Panels;
 					if(!panels.getPanel('views-container'))
 						panelC = panels.addPanel({id: 'views-container'});
 					else
 						panelC = panels.getPanel('views-container');
-					panelC.set('appendContent', this.blocks).trigger('change:appendContent');
+					panelC.set('appendContent', this.obj).trigger('change:appendContent');
 				}
 
-				this.blocks.style.display = 'block';
+				this.obj.style.display = 'block';
 			},
 
 			stop: function() {
-				if(this.blocks)
-					this.blocks.style.display = 'none';
+				if(this.obj)
+					this.obj.style.display = 'none';
 			}
 		};
 	});

src/config/require-config.js

@@ -34,7 +34,7 @@ require.config({
 
 	packages : 	[
 								{  name: 'GrapesJS', 				location: 'grapesjs'					},
-								{  name: 'Abstracts', 			location: 'domain_abstract'		},
+								{  name: 'Abstract', 				location: 'domain_abstract'		},
 								{  name: 'Editor', 					location: 'editor', 					},
 		            {  name: 'AssetManager', 		location: 'asset_manager', 		},
 		            {  name: 'BlockManager', 		location: 'block_manager', 		},

src/dom_components/model/Component.js

@@ -35,7 +35,10 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 				this.components	= new Components(this.defaultC, opt);
 				this.set('components', this.components);
 				this.set('classes', new Selectors(this.defaultCl));
-				this.set('traits', new Traits(this.get('traits'), this));
+				var traits = new Traits();
+				traits.setTarget(this);
+				traits.add(this.get('traits'));
+				this.set('traits', traits);
 			},
 
 			/**

src/domain_abstract/view/DomainViews.js

@@ -3,94 +3,12 @@ function(Backbone) {
 
   return Backbone.View.extend({
 
+    itemView: '',
+
     initialize: function(opts, config) {
-      _.bindAll(this, 'getSorter', 'onDrag', 'onDrop', 'dragHelper', 'moveHelper');
       this.config = config || {};
-      this.ppfx = this.config.pStylePrefix || '';
-      this.listenTo(this.collection, 'add', this.addTo);
-      this.em = this.config.em;
-      this.tac = 'test-tac';
-
-      if(this.em){
-        this.config.getSorter = this.getSorter;
-        this.config.dragHelper = this.dragHelper;
-        this.canvas = this.em.get('Canvas');
-      }
     },
 
-    /**
-     * Get sorter
-     * @private
-     */
-    getSorter: function(){
-      if(!this.em)
-        return;
-      if(!this.sorter){
-        var utils = this.em.get('Utils');
-        var canvas = this.canvas;
-        this.sorter = new utils.Sorter({
-          container: canvas.getBody(),
-          placer: canvas.getPlacerEl(),
-          containerSel: '*',
-          itemSel: '*',
-          pfx: this.ppfx,
-          onStart: this.onDrag,
-          onEndMove: this.onDrop,
-          document: canvas.getFrameEl().contentDocument,
-          direction: 'a',
-          wmargin: 1,
-          nested: 1,
-          em: this.em
-        });
-      }
-      return this.sorter;
-    },
-/*
-    updateOffset: function(){
-      if(!this.sorter)
-        return;
-      var sorter = this.sorter;
-      var offDim = this.canvas.getOffset();
-      sorter.offTop = offDim.top;
-      sorter.offLeft = offDim.left;
-    },
-*/
-    /**
-     * Callback when block is on drag
-     * @private
-     */
-    onDrag: function(){
-      this.em.stopDefault();
-      this.em.get('Canvas').getBody().style.cursor = 'grabbing';
-      document.body.style.cursor = 'grabbing';
-    },
-
-    dragHelper: function(el){
-      el.className += ' ' + this.ppfx + 'bdrag';
-      this.helper = el;
-      document.body.appendChild(el);
-      $(this.em.get('Canvas').getBody()).on('mousemove', this.moveHelper);
-      $(document).on('mousemove', this.moveHelper);
-    },
-
-    moveHelper: function(e){
-      this.helper.style.left = e.pageX + 'px';
-      this.helper.style.top = e.pageY + 'px';
-    },
-
-    /**
-     * Callback when block is dropped
-     * @private
-     */
-    onDrop: function(model){
-      this.em.runDefault();
-      this.em.get('Canvas').getBody().style.cursor = '';
-      document.body.style.cursor = '';
-      if(model && model.get('activeOnRender')){
-        model.trigger('active');
-        model.set('activeOnRender', 0);
-      }
-    },
 
     /**
      * Add new model to the collection
@@ -109,9 +27,8 @@ function(Backbone) {
      * */
     add: function(model, fragment){
       var frag = fragment || null;
-      var view = new BlockView({
-        model: model,
-        attributes: model.get('attributes'),
+      var view = new this.itemView({
+        model: model
       }, this.config);
       var rendered = view.render().el;
 
@@ -127,9 +44,10 @@ function(Backbone) {
       var frag = document.createDocumentFragment();
       this.$el.empty();
 
-      this.collection.each(function(model){
-        this.add(model, frag);
-      }, this);
+      if(this.collection.length)
+        this.collection.each(function(model){
+          this.add(model, frag);
+        }, this);
 
       this.$el.append(frag);
       return this;

src/panels/config/config.js

@@ -4,6 +4,7 @@ define(function () {
 	var swv = 'sw-visibility';
 	var expt = 'export-template';
 	var osm = 'open-sm';
+	var otm = 'open-tm';
 	var ola = 'open-layers';
 	var obl = 'open-blocks';
 	var ful = 'fullscreen';
@@ -64,6 +65,11 @@ define(function () {
 				command: osm,
 				active: true,
 				attributes: { title: 'Open Style Manager' },
+			},{
+				id: otm,
+				className: 'fa fa-cog',
+				command: otm,
+				attributes: { title: 'Settings' },
 			},{
 				id: ola,
 				className: 'fa fa-bars',
@@ -83,4 +89,4 @@ define(function () {
 		// Delay before show children buttons (in milliseconds)
 		delayBtnsShow	: 300,
 	};
-});
+});

src/trait_manager/main.js

@@ -9,7 +9,7 @@ define(function(require) {
 
 	  return {
 
-			Traits: Traits,
+			TraitsView: TraitsView,
 
 	  	/**
        * Name of the module

src/trait_manager/model/Trait.js

@@ -13,6 +13,8 @@ define(['backbone'],
 			},
 
 			initialize: function(){
+				if(!this.get('target'))
+          throw new Error('Target not found');
       },
 
     });

src/trait_manager/model/Traits.js

@@ -5,14 +5,19 @@ define(['backbone','./Trait', './TraitFactory'],
 
       model: Trait,
 
+      setTarget: function(target){
+        this.target = target;
+      },
+
       add: function(models, opt){
         // Use TraitFactory if necessary
 				if(typeof models === 'string' || models instanceof Array){
           if(typeof models === 'string')
             models = [models];
           for(var i = 0, len = models.length; i < len; i++){
-            var model = models[i];
-            models[i] = TraitFactory.build(model)[0];
+            var model = TraitFactory.build(models[i])[0];
+            model.target = this.target;
+            models[i] = model;
           }
 				}
 				return Backbone.Collection.prototype.add.apply(this, [models, opt]);

src/trait_manager/view/TraitView.js

@@ -32,6 +32,7 @@ define(['backbone'], function (Backbone) {
 		 * @private
 		 */
 		renderLabel: function() {
+			/*
 			this.$el.html(this.templateLabel({
 				pfx		: this.pfx,
 				ppfx	: this.ppfx,
@@ -39,6 +40,34 @@ define(['backbone'], function (Backbone) {
 				info	: this.model.get('info'),
 				label	: this.model.get('name'),
 			}));
+			*/
+		console.log(this.model);
+			this.$el.html('<div class="label"><div>' + this.getLabel() + '</div></div>');
+		},
+
+		/**
+		 * Returns label for the input
+		 * @return {string}
+		 * @private
+		 */
+		getLabel: function() {
+			var model = this.model;
+			return model.get('label') || model.get('name');
+		},
+
+		/**
+		 * Renders input
+		 * */
+		renderField: function(){
+			if(!this.$input){
+				this.$el.append('<div class="input-h"></div>');
+				this.$input = $('<input>', {
+					placeholder: this.model.get('defaults'),
+					type: 'text'
+				});
+				this.$el.find('.input-h').html(this.$input);
+			}
+			//this.setValue(this.componentValue, 0);
 		},
 
 		render : function() {

src/trait_manager/view/TraitsView.js

@@ -1,62 +1,62 @@
-define(['backbone'], function (Backbone) {
+define(['backbone', 'Abstract/view/DomainViews', './TraitView'],
+	function (Backbone, DomainViews, TraitView) {
 
-	return Backbone.View.extend({
+		return DomainViews.extend({
 
-		className: 'test-traits',
+			itemView: TraitView,
 
-		initialize: function(o) {
-			console.log(o);
-			this.config = o.config || {};
-			this.pfx = this.config.stylePrefix || '';
-			// listen selected component change
-			/*
-			if target not empty refresh
+			className: 'test-traits',
+
+			initialize: function(o) {
+				this.config = o.config || {};
+				this.em = o.editor;
+				this.pfx = this.config.stylePrefix || '';
+				this.listenTo(this.em, 'change:selectedComponent', this.updatedCollection);
+				/*
+				if target not empty refresh
+				 */
+			},
+
+			/**
+			 * Update view collection
+			 * @private
+			 */
+			updatedCollection: function() {
+				var comp = this.em.get('selectedComponent');
+				this.collection = comp.get('traits');
+				this.render();
+			},
+
+			onChange: function() {
+				//change model value
+			},
+
+			/**
+			 * On change callback
+			 * @private
+			 */
+			onValuesChange: function() {
+				var m = this.model;
+				var trg = m.target;
+				var attrs = trg.get('attributes');
+				attrs[m.get('name')] = m.get('value');
+				trg.set('attributes', attrs);
+			},
+
+			/**
+			 * Render label
+			 * @private
 			 */
-		},
-
-		onChange: function() {
-			//change model value
-		},
-
-		/**
-		 * On change callback
-		 * @private
-		 */
-		onValuesChange: function() {
-			var m = this.model;
-			var trg = m.target;
-			var attrs = trg.get('attributes');
-			attrs[m.get('name')] = m.get('value');
-			trg.set('attributes', attrs);
-		},
-
-		/**
-		 * Render label
-		 * @private
-		 */
-		renderLabel: function() {
-			this.$el.html(this.templateLabel({
-				pfx		: this.pfx,
-				ppfx	: this.ppfx,
-				icon	: this.model.get('icon'),
-				info	: this.model.get('info'),
-				label	: this.model.get('name'),
-			}));
-		},
-
-		render: function() {
-      var frag = document.createDocumentFragment();
-      this.$el.empty();
-
-      this.collection.each(function(model){
-        this.add(model, frag);
-      }, this);
-
-      this.$el.append(frag);
-      this.$el.addClass(this.ppfx + 'blocks-c');
-      return this;
-    },
-
-	});
+			renderLabel: function() {
+				this.$el.html(this.templateLabel({
+					pfx		: this.pfx,
+					ppfx	: this.ppfx,
+					icon	: this.model.get('icon'),
+					info	: this.model.get('info'),
+					label	: this.model.get('name'),
+				}));
+			},
+
+		});
 
 });