Add block manager

src/block_manager/config/config.js

@@ -0,0 +1,7 @@
+define(function () {
+	return {
+
+    'blocks': [],
+
+	};
+});

src/block_manager/main.js

@@ -0,0 +1,105 @@
+/**
+ * * [add](#add)
+ * * [get](#get)
+ * * [getAll](#getall)
+ * * [render](#render)
+ *
+ * Block manager helps managing various, draggable, pieces of content that could be reused inside templates.
+ *
+ * Before using methods you should get first the module from the editor instance, in this way:
+ *
+ * ```js
+ * var blockManager = editor.BlockManager;
+ * ```
+ *
+ * @module BlockManager
+ * @param {Object} config Configurations
+ * @param {Array<Object>} [config.blocks=[]] Default blocks
+ * @example
+ * ...
+ * blockManager: {
+ *    blocks: [
+ *      {id:'h1-block' label: 'Heading', content:'<h1>...</h1>'},
+ *      ...
+ *    ],
+ * }
+ * ...
+ */
+define(function(require) {
+
+  return function(config) {
+    var c = config || {},
+      defaults = require('./config/config'),
+      Blocks = require('./model/Blocks'),
+      BlocksView = require('./view/BlocksView');
+
+    for (var name in defaults) {
+      if (!(name in c))
+        c[name] = defaults[name];
+    }
+
+    var blocks = new Blocks(c.blocks);
+    var view = new BlocksView({ collection: blocks }, c);
+
+    return {
+
+        /**
+         * Add new block to the collection.
+         * @param {string} id Block id
+         * @param {Object} opts Options
+         * @param {string} opts.label Name of the block
+         * @param {string} opts.content HTML content
+         * @param {Object} [opts.attributes={}] Block attributes
+         * @return {Block} Added block
+         * @example
+         * blockManager.add('h1-block', {
+         *   label: 'Heading',
+         *   content: '<h1>Put your title here</h1>',
+         *   attributes: {
+         *     title: 'Insert h1 block'
+         *   }
+         * });
+         */
+        add: function(id, opts){
+          var obj = opts || {};
+          obj.id = id;
+          return blocks.add(obj);
+        },
+
+        /**
+         * Return block by id
+         * @param  {string} id Block id
+         * @example
+         * var block = blockManager.get('h1-block');
+         * console.log(JSON.stringify(block));
+         * // {label: 'Heading', content: '<h1>Put your ...', ...}
+         */
+        get: function(id){
+          return blocks.get(id);
+        },
+
+        /**
+         * Return all blocks
+         * @return {Collection}
+         * @example
+         * var blocks = blockManager.getAll();
+         * console.log(JSON.stringify(blocks));
+         * // [{label: 'Heading', content: '<h1>Put your ...'}, ...]
+         */
+        getAll: function(){
+          return blocks;
+        },
+
+        /**
+         * Render blocks
+         * @return {HTMLElement}
+         */
+        render: function(){
+          return view.render().el;
+        },
+
+    };
+
+  };
+
+});

src/block_manager/model/Block.js

@@ -0,0 +1,13 @@
+define(['backbone'],
+  function(Backbone){
+
+    return Backbone.Model.extend({
+
+      defaults :{
+        label: '',
+        content: '',
+        attributes: {},
+      },
+
+    });
+  });

src/block_manager/model/Blocks.js

@@ -0,0 +1,9 @@
+define(['backbone','./Block'],
+  function (Backbone, Block) {
+
+    return Backbone.Collection.extend({
+
+      model: Block,
+
+    });
+});

src/block_manager/view/BlockView.js

@@ -0,0 +1,17 @@
+define(['backbone'],
+function(Backbone) {
+
+  return Backbone.View.extend({
+
+    initialize: function(o) {
+      this.config = o.config || {};
+      this.listenTo(this.model, 'destroy', this.remove);
+    },
+
+    render: function() {
+      this.el.innerHTML = this.model.get('label');
+      return this;
+    },
+
+  });
+});

src/block_manager/view/BlocksView.js

@@ -0,0 +1,56 @@
+define(['backbone', './BlockView'],
+function(Backbone, BlockView) {
+
+  return Backbone.View.extend({
+
+    initialize: function(opts, config) {
+      this.config = config || {};
+      this.ppfx = this.config.pStylePrefix || '';
+      this.listenTo(this.collection, 'add', this.addTo);
+    },
+
+    /**
+     * 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
+     * */
+    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);
+      this.$el.addClass(this.ppfx + 'blocks-c');
+      return this;
+    },
+
+  });
+});

src/commands/main.js

@@ -80,6 +80,7 @@ define(function(require) {
 		defaultCommands['sw-visibility'] = require('./view/SwitchVisibility');
 		defaultCommands['open-layers'] = require('./view/OpenLayers');
 		defaultCommands['open-sm'] = require('./view/OpenStyleManager');
+		defaultCommands['open-blocks'] = require('./view/OpenBlocks');
 		//this.defaultCommands['resize-comp'] 	= require('./view/ResizeComponent');
 
 		if(config.em)

src/commands/view/OpenBlocks.js

@@ -0,0 +1,27 @@
+define(function() {
+
+		return {
+
+			run: function(editor, sender) {
+				var config = editor.Config;
+				var pfx = config.stylePrefix;
+				var bm = editor.BlockManager;
+				if(!this.blocks){
+					this.blocks = bm.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

@@ -36,6 +36,7 @@ require.config({
 								{  name: 'GrapesJS', 				location: 'grapesjs', 				},
 								{  name: 'Editor', 					location: 'editor', 					},
 		            {  name: 'AssetManager', 		location: 'asset_manager', 		},
+		            {  name: 'BlockManager', 		location: 'block_manager', 		},
 		            {  name: 'StyleManager', 		location: 'style_manager', 		},
 		            {  name: 'ClassManager', 		location: 'class_manager', 		},
 		            {  name: 'DeviceManager', 	location: 'device_manager', 	},

src/demo.js

@@ -65,6 +65,7 @@ panels: {
             id        : 'selcomp',
             className : 'fa fa fa-mouse-pointer',
             command   : 'select-comp',
+            active: 1,
           },{
             id        : 'create',
             className : 'fa fa-plus-square-o icon-add-comp',
@@ -410,6 +411,8 @@ panels: {
 
 		);
 
+    window.grapesEditor = editor;
+
 	});
 });
 

src/device_manager/main.js

@@ -50,7 +50,6 @@ define(function(require) {
          * @param {Object} opts Custom options
          * @return {Device} Added device
          * @example
-         * // In case of strings, would be interpreted as images
          * deviceManager.add('Tablet', '900px');
          */
         add: function(name, width, opts){

src/editor/config/config.js

@@ -38,7 +38,7 @@ define(function () {
 		storageType: 'local',
 
 		// The css that could only be seen (for instance, inside the code viewer)
-		protectedCss: 'body{margin:0;}',
+		protectedCss: 'body{margin:0;height:100%}#wrapper{height:100%}',
 
 		//Configurations for Asset Manager
 		assetManager			: {},
@@ -96,6 +96,23 @@ define(function () {
 	    }],
 		},
 
+		//Configurations for Block Manager
+		blockManager: {
+			'blocks': [{
+					id: 'b1',
+	        label: 'Block1',
+	        content: '<h1>Block 1</h1>',
+	      },{
+					id: 'b2',
+	        label: 'Block2',
+	        content: '<h1>Block 2</h1>',
+	      },{
+					id: 'b3',
+	        label: 'Block3',
+	        content: '<h1>Block 3</h1>',
+	      }],
+		},
+
 		// If true render a select of available devices
 		showDevices: 1,
 

src/editor/main.js

@@ -95,6 +95,11 @@ define(function (require){
 				 */
 				AssetManager: em.get('AssetManager'),
 
+				/**
+				 * @property {BlockManager}
+				 */
+				BlockManager: em.get('BlockManager'),
+
 				/**
 				 * @property {ClassManager}
 				 */

src/editor/model/Editor.js

@@ -3,6 +3,7 @@ define([
         'backboneUndo',
         'keymaster',
         'AssetManager',
+        'BlockManager',
         'StorageManager',
         'DeviceManager',
         'ModalDialog',
@@ -22,6 +23,7 @@ define([
 			UndoManager,
 			Keymaster,
 			AssetManager,
+			BlockManager,
 			StorageManager,
 			DeviceManager,
 			ModalDialog,
@@ -63,6 +65,7 @@ define([
 				this.initClassManager();
 				this.initModal();
 				this.initAssetManager();
+				this.initBlockManager();
 				this.initCodeManager();
 				this.initCommands();
 				this.initPanels();
@@ -87,6 +90,17 @@ define([
 				this.set('Editor', editor);
 			},
 
+			/**
+			 * Initialize block manager
+			 * @private
+			 * */
+			initBlockManager: function(){
+				var cfg = this.config.blockManager;
+				cfg.em = this;
+				cfg.pStylePrefix = this.config.stylePrefix;
+				this.set('BlockManager', new BlockManager(cfg));
+			},
+
 			/**
 			 * Initialize device manager
 			 * @private

src/panels/main.js

@@ -52,6 +52,7 @@ define(function(require) {
 			defaults = require('./config/config'),
 			Panel = require('./model/Panel'),
 			Panels = require('./model/Panels'),
+			PanelView = require('./view/PanelView'),
 			PanelsView = require('./view/PanelsView');
 
 	  // Set default options

styles/css/main.css

@@ -2846,7 +2846,7 @@ ol.example li.placeholder:before {
     z-index: 4; }
   .wte-pn-panel#wte-pn-views-container {
     height: 100%;
-    padding: 52px 0 0;
+    padding: 42px 0 0;
     right: 0;
     width: 15%;
     overflow: auto;

styles/scss/main.scss

@@ -353,7 +353,7 @@ $leftWidth: 15%;
 
   &##{$pn-prefix}views-container{
   	height: 100%;
-    padding: 52px 0 0;
+    padding: 42px 0 0;
     right: 0;
     width: $leftWidth;
     overflow: auto;