Add runCommand and stopCommand methods

README.md

@@ -138,7 +138,7 @@ $ npm test
 
 ## TODOs before beta release
 
-* **Breakpoint Manager** - Resize canvas according to breakpoints established by user (in simple terms, for responsive templates). Will be put into development immediately after Class Manager
+* **Breakpoint Manager** - Resize canvas according to breakpoints established by user (in simple terms, for responsive templates)
 
 
 ## Acknowledgements
@@ -155,7 +155,7 @@ GrapesJS is built on top of this amazing open source projects:
 
 ## Support
 
-If you like the project support it, with a donation of your choice.
+If you like the project support it with a donation of your choice.
 
 [![PayPalMe](http://grapesjs.com/img/ppme.png)](https://paypal.me/grapesjs)
 

src/demo.js

@@ -144,6 +144,10 @@ require(['config/require-config'], function() {
 
 			styleManager : {
 				sectors: [{
+					name: 'General555',
+					buildProps: ['float', 'block', 'position', 'top', 'right', 'left', 'bottom'],
+					extendBuilded: 1,
+				},{
 					name: 'General',
 					properties:[{
 							name		: 'Alignment',

src/editor/main.js

@@ -185,6 +185,34 @@ define(function (require){
 					return editorModel.getSelected();
 				},
 
+				/**
+				 * Execute command
+				 * @param {string} id Command ID
+				 * @param {Object} options Custom options
+				 * @example
+				 * editor.runCommand('myCommand', {someValue: 1});
+				 */
+				runCommand: function(id, options) {
+					var command = editorModel.get('Commands').get(id);
+
+					if(command)
+						command.run(this, this, options);
+				},
+
+				/**
+				 * Stop command executed before
+				 * @param {string} id Command ID
+				 * @param {Object} options Custom options
+				 * @example
+				 * editor.stopCommand('myCommand', {someValue: 1});
+				 */
+				stopCommand: function(id, options) {
+					var command = editorModel.get('Commands').get(id);
+
+					if(command)
+						command.stop(this, this, options);
+				},
+
 				/**
 				 * Store data to the current storage
 				 * @return {Object} Stored data

src/editor/model/Editor.js

@@ -644,8 +644,6 @@ define([
 				if(smc.storeStyles)
 					store.styles = JSON.stringify(this.getStyle());
 
-				console.log('Store');
-				console.log(store);
 				sm.store(store);
 				return store;
 			},

src/panels/main.js

@@ -81,12 +81,12 @@ define(function(require) {
 			/**
 			 * Add new panel to the collection
 			 * @param {Object|Panel} panel Object with right properties or an instance of Panel
-			 * @return {Panel} Added panel. Useful in case of passed argument was an Object
+			 * @return {Panel} Added panel. Useful in case passed argument was an Object
 			 * @example
 			 * var newPanel = panelManager.addPanel({
-			 *  id: 'myNewPanel',
-			 * 	visible	: true,
-			 * 	buttons	: [...],
+			 * 	id: 'myNewPanel',
+			 *  visible	: true,
+			 *  buttons	: [...],
 			 * });
 			 */
 			addPanel: function(panel){
@@ -109,7 +109,7 @@ define(function(require) {
 			 * Add button to the panel
 			 * @param {string} panelId Panel's ID
 			 * @param {Object|Button} button Button object or instance of Button
-			 * @return {Button|null} Added button. Useful in case of passed button was an Object
+			 * @return {Button|null} Added button. Useful in case passed button was an Object
 			 * @example
 			 * var newButton = panelManager.addButton('myNewPanel',{
 			 * 	id: 'myNewButton',

src/style_manager/model/PropertyFactory.js

@@ -0,0 +1,55 @@
+define(['backbone'],
+  function(Backbone) {
+
+    return function() {
+
+      return {
+        /**
+         * Build props object by their name
+         * @param  {Array<string>} props Array of properties name
+         * @return {Array<Object>}
+         */
+        build: function(props){
+          var objs = [];
+          for (var i = 0, len = props.length; i < len; i++) {
+            var obj = {};
+            var prop = props[i];
+            obj.property = prop;
+            //obj.name = prop.charAt(0).toUpperCase() + prop.slice(1);
+
+            //Decide type
+            switch(prop){
+              case 'float':
+                obj.type = 'radio';
+                break;
+            }
+
+            //Default
+            switch(prop){
+              case 'float':
+                obj.defaults = 'none';
+                break;
+            }
+
+            //Options
+            switch(prop){
+              case 'float':
+                obj.list = [
+                    {value: 'none'},
+                    {value: 'left'},
+                    {value: 'right'},
+                  ];
+                break;
+            }
+
+            console.log(obj);
+            objs.push(obj);
+          }
+
+          return objs;
+        },
+
+      };
+
+    };
+});

test/specs/grapesjs/main.js

@@ -39,7 +39,7 @@ define(['GrapesJS', 'PluginManager', 'chai'],
             type:'none'
           },
         }
-        obj = new GrapesJS();
+        obj = GrapesJS;
         fixture = $('<div id="' + editorName + '"></div>');
         fixture.empty().appendTo(fixtures);
       });
@@ -143,6 +143,32 @@ define(['GrapesJS', 'PluginManager', 'chai'],
         data.html.should.equal(htmlString);
       });
 
+      it('Execute custom command', function() {
+        var editor = obj.init(config);
+        editor.testVal = '';
+        editor.setComponents(htmlString);
+        editor.Commands.add('test-command', {
+          run: function(editor, caller, opts){
+            editor.testVal = editor.getHtml() + opts.val;
+          },
+        });
+        editor.runCommand('test-command', {val: 5});
+        editor.testVal.should.equal(htmlString + '5');
+      });
+
+      it('Stop custom command', function() {
+        var editor = obj.init(config);
+        editor.testVal = '';
+        editor.setComponents(htmlString);
+        editor.Commands.add('test-command', {
+          stop: function(editor, caller, opts){
+            editor.testVal = editor.getHtml() + opts.val;
+          },
+        });
+        editor.stopCommand('test-command', {val: 5});
+        editor.testVal.should.equal(htmlString + '5');
+      });
+
     });
 
   });

test/specs/style_manager/model/Models.js

@@ -1,12 +1,14 @@
 var path = 'StyleManager/model/';
 define([path + 'Sector',
         path + 'Sectors',
+        path + 'PropertyFactory',
         path + 'Property',
         path + 'Properties',
         path + 'Layer',
         path + 'Layers'],
   function(Sector,
           Sectors,
+          PropertyFactory,
           Property,
           Properties,
           Layer,
@@ -172,6 +174,36 @@ define([path + 'Sector',
 
         });
 
+        describe('PropertyFactory', function() {
+
+          var obj;
+
+          beforeEach(function () {
+            obj = new PropertyFactory();
+          });
+
+          afterEach(function () {
+            delete obj;
+          });
+
+          it('Object exists', function() {
+            obj.should.be.ok;
+          });
+
+          it('Build single prop', function() {
+            obj.build(['float']).should.deep.equal([{
+              property: 'float',
+              type: 'radio',
+              defaults: 'none',
+              list: [
+                  {value: 'none'},
+                  {value: 'left'},
+                  {value: 'right'},
+                ],
+            }]);
+          });
+        });
+
       }
     };