Add abstracts

src/commands/view/OpenTraitManager.js

@@ -0,0 +1,32 @@
+define(function() {
+
+		return {
+
+			run: function(editor, sender) {
+				var config = editor.Config;
+				var pfx = config.stylePrefix;
+				var tm = editor.TraitManager;
+				if(!this.blocks){
+          var tmView = new tm.TraitsView({
+						collection: [],
+						editor: editor
+					});
+					this.blocks = $('<div/>').get(0);
+					this.blocks.appendChild(tmView.render());
+					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');
+				}
+
+				this.blocks.style.display = 'block';
+			},
+
+			stop: function() {
+				if(this.blocks)
+					this.blocks.style.display = 'none';
+			}
+		};
+	});

src/config/require-config.js

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

src/dom_components/model/Component.js

@@ -111,14 +111,5 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 				return this.name;
 			},
 
-			/**
-			 * Returns HTML code of the component
-			 * @return {string}
-			 * @private
-			 */
-			getCode: function() {
-				return '';
-			},
-
 		});
 });

src/domain_abstract/view/DomainViews.js

@@ -0,0 +1,139 @@
+define(['backbone'],
+function(Backbone) {
+
+  return Backbone.View.extend({
+
+    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
+     * @param {Model} model
+     * @private
+     * */
+    addTo: function(model){
+      this.add(model);
+    },
+
+    /**
+     * Render new model inside the view
+     * @param {Model} model
+     * @param {Object} fragment Fragment collection
+     * @private
+     * */
+    add: function(model, fragment){
+      var frag = fragment || null;
+      var view = new BlockView({
+        model: model,
+        attributes: model.get('attributes'),
+      }, this.config);
+      var rendered = view.render().el;
+
+      if(frag)
+        frag.appendChild(rendered);
+      else
+        this.$el.append(rendered);
+    },
+
+
+
+    render: function() {
+      var frag = document.createDocumentFragment();
+      this.$el.empty();
+
+      this.collection.each(function(model){
+        this.add(model, frag);
+      }, this);
+
+      this.$el.append(frag);
+      return this;
+    },
+
+  });
+});

src/editor/main.js

@@ -112,6 +112,11 @@ define(function (require){
 				 */
 				BlockManager: em.get('BlockManager'),
 
+				/**
+				 * @property {TraitManager}
+				 */
+				TraitManager: em.get('TraitManager'),
+
 				/**
 				 * @property {SelectorManager}
 				 */
@@ -394,4 +399,4 @@ define(function (require){
 		};
 
 		return Editor;
-});
+});

src/editor/model/Editor.js

@@ -1,11 +1,11 @@
 var deps = ['Utils', 'StorageManager', 'DeviceManager', 'Parser', 'SelectorManager', 'ModalDialog', 'CodeManager', 'Panels',
-				'RichTextEditor', 'StyleManager', 'AssetManager', 'CssComposer', 'DomComponents', 'Canvas', 'Commands', 'BlockManager'];
+				'RichTextEditor', 'StyleManager', 'AssetManager', 'CssComposer', 'DomComponents', 'Canvas', 'Commands', 'BlockManager', 'TraitManager'];
 
 // r.js do not see deps if I pass them as a variable
 // http://stackoverflow.com/questions/27545412/optimization-fails-when-passing-a-variable-with-a-list-of-dependencies-to-define
 define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'DeviceManager', 'Parser', 'SelectorManager',
 'ModalDialog', 'CodeManager', 'Panels', 'RichTextEditor', 'StyleManager', 'AssetManager', 'CssComposer', 'DomComponents',
-'Canvas', 'Commands', 'BlockManager'], function(){
+'Canvas', 'Commands', 'BlockManager', 'TraitManager'], function(){
 		return Backbone.Model.extend({
 
 			defaults: {

src/trait_manager/main.js

@@ -9,6 +9,8 @@ define(function(require) {
 
 	  return {
 
+			Traits: Traits,
+
 	  	/**
        * Name of the module
        * @type {String}

src/trait_manager/view/TraitsView.js

@@ -0,0 +1,62 @@
+define(['backbone'], function (Backbone) {
+
+	return Backbone.View.extend({
+
+		className: 'test-traits',
+
+		initialize: function(o) {
+			console.log(o);
+			this.config = o.config || {};
+			this.pfx = this.config.stylePrefix || '';
+			// listen selected component change
+			/*
+			if target not empty refresh
+			 */
+		},
+
+		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;
+    },
+
+	});
+
+});