From 92454f0301f48fc1c6fdd9e731ad61d6b25c3c2d Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 11 Jun 2016 14:20:27 +0200 Subject: [PATCH] Add runCommand and stopCommand methods --- README.md | 4 +- src/demo.js | 4 ++ src/editor/main.js | 28 +++++++++++ src/editor/model/Editor.js | 2 - src/panels/main.js | 10 ++-- src/style_manager/model/PropertyFactory.js | 55 ++++++++++++++++++++++ test/specs/grapesjs/main.js | 28 ++++++++++- test/specs/style_manager/model/Models.js | 32 +++++++++++++ 8 files changed, 153 insertions(+), 10 deletions(-) create mode 100644 src/style_manager/model/PropertyFactory.js diff --git a/README.md b/README.md index 9a2b6b3ee..21e744301 100644 --- a/README.md +++ b/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) diff --git a/src/demo.js b/src/demo.js index dec4bafc9..59b24e72c 100644 --- a/src/demo.js +++ b/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', diff --git a/src/editor/main.js b/src/editor/main.js index 0be2896cc..441f4d475 100644 --- a/src/editor/main.js +++ b/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 diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 6b9ef7196..08cce65f5 100644 --- a/src/editor/model/Editor.js +++ b/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; }, diff --git a/src/panels/main.js b/src/panels/main.js index 28d39ff0c..293bd2481 100644 --- a/src/panels/main.js +++ b/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', diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js new file mode 100644 index 000000000..a49d49afd --- /dev/null +++ b/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} props Array of properties name + * @return {Array} + */ + 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; + }, + + }; + + }; +}); \ No newline at end of file diff --git a/test/specs/grapesjs/main.js b/test/specs/grapesjs/main.js index 39b3ad7c2..f5803ca54 100644 --- a/test/specs/grapesjs/main.js +++ b/test/specs/grapesjs/main.js @@ -39,7 +39,7 @@ define(['GrapesJS', 'PluginManager', 'chai'], type:'none' }, } - obj = new GrapesJS(); + obj = GrapesJS; fixture = $('
'); 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'); + }); + }); }); diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js index 3e2a421a4..9f153d016 100644 --- a/test/specs/style_manager/model/Models.js +++ b/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'}, + ], + }]); + }); + }); + } };