diff --git a/src/commands/view/CommandAbstract.js b/src/commands/view/CommandAbstract.js index 577028dad..785bf81ed 100644 --- a/src/commands/view/CommandAbstract.js +++ b/src/commands/view/CommandAbstract.js @@ -40,9 +40,7 @@ define(['backbone'], * @param {Object} sender Button sender * @private * */ - run: function(em, sender) { - console.warn("No run method found"); - }, + run: function(em, sender) {}, /** * Method that stop command @@ -50,9 +48,7 @@ define(['backbone'], * @param {Object} sender Button sender * @private * */ - stop: function(em, sender) { - console.warn("No stop method found"); - } + stop: function(em, sender) {} }); }); \ No newline at end of file diff --git a/src/commands/view/OpenStyleManager.js b/src/commands/view/OpenStyleManager.js index e66dd4973..0b94c0ed9 100644 --- a/src/commands/view/OpenStyleManager.js +++ b/src/commands/view/OpenStyleManager.js @@ -9,12 +9,12 @@ define(['StyleManager'], function(StyleManager) { { this.sender = sender; if(!this.$cn){ - var config = em.get('Config'), - panels = em.get('Panels'), + var config = em.getConfig(), + panels = em.Panels, pfx = config.styleManager.stylePrefix || 'sm-'; config.styleManager.stylePrefix = config.stylePrefix + pfx; - config.styleManager.target = em; + config.styleManager.target = em.editor; // Main container this.$cn = $('
'); @@ -23,7 +23,7 @@ define(['StyleManager'], function(StyleManager) { this.$cn.append(this.$cn2); // Class Manager container - this.clm = em.get('ClassManager'); + this.clm = em.ClassManager; if(this.clm){ this.$clm = new this.clm.ClassTagsView({ collection: new this.clm.ClassTags([]), @@ -54,7 +54,7 @@ define(['StyleManager'], function(StyleManager) { // Add all containers to the panel this.panel.set('appendContent', this.$cn).trigger('change:appendContent'); - this.target = em; + this.target = em.editor; this.listenTo( this.target ,'change:selectedComponent', this.toggleSm); } this.toggleSm(); diff --git a/src/editor/main.js b/src/editor/main.js index 441f4d475..cd395d6b0 100644 --- a/src/editor/main.js +++ b/src/editor/main.js @@ -8,6 +8,8 @@ * * [getStyle](#getstyle) * * [setStyle](#setstyle) * * [getSelected](#getselected) + * * [runCommand](#runcommand) + * * [stopCommand](#stopcommand) * * [store](#store) * * [load](#load) * * [render](#render) @@ -27,7 +29,7 @@ define(function (require){ var Editor = function(config) { var c = config || {}, defaults = require('./config/config'), - Editor = require('./model/Editor'), + EditorModel = require('./model/Editor'), EditorView = require('./view/EditorView'); for (var name in defaults) { @@ -35,9 +37,9 @@ define(function (require){ c[name] = defaults[name]; } - var editorModel = new Editor(c); + var em = new EditorModel(c); var obj = { - model : editorModel, + model : em, config : c, }; @@ -45,62 +47,77 @@ define(function (require){ return { - editor: editorModel, + editor: em, /** * @property {DomComponents} */ - DomComponents: editorModel.get('Components'), + DomComponents: em.get('Components'), /** * @property {CssComposer} */ - CssComposer: editorModel.get('CssComposer'), + CssComposer: em.get('CssComposer'), /** * @property {StorageManager} */ - StorageManager: editorModel.get('StorageManager'), + StorageManager: em.get('StorageManager'), /** * @property {AssetManager} */ - AssetManager: editorModel.get('AssetManager'), + AssetManager: em.get('AssetManager'), /** * @property {ClassManager} */ - ClassManager: editorModel.get('ClassManager'), + ClassManager: em.get('ClassManager'), /** * @property {CodeManager} */ - CodeManager: editorModel.get('CodeManager'), + CodeManager: em.get('CodeManager'), /** * @property {Commands} */ - Commands: editorModel.get('Commands'), + Commands: em.get('Commands'), /** * @property {Dialog} */ - Dialog: editorModel.get('Modal'), + Dialog: em.get('Modal'), /** * @property {Panels} */ - Panels: editorModel.get('Panels'), + Panels: em.get('Panels'), /** * @property {StyleManager} */ - StyleManager: editorModel.get('StyleManager'), + StyleManager: em.get('StyleManager'), /** * @property {StyleManager} */ - Canvas: editorModel.get('Canvas'), + Canvas: em.get('Canvas'), + + /** + * @property {Utils} + */ + Utils: em.get('Utils'), + + /** + * Initialize editor model + * @return {this} + * @private + */ + init: function(){ + em.init(this); + return this; + }, /** * Returns configuration object @@ -115,7 +132,7 @@ define(function (require){ * @return {string} HTML string */ getHtml: function(){ - return editorModel.getHtml(); + return em.getHtml(); }, /** @@ -123,7 +140,7 @@ define(function (require){ * @return {string} CSS string */ getCss: function(){ - return editorModel.getCss(); + return em.getCss(); }, /** @@ -131,7 +148,7 @@ define(function (require){ * @return {Object} */ getComponents: function(){ - return editorModel.get('Components').getComponents(); + return em.get('Components').getComponents(); }, /** @@ -148,7 +165,7 @@ define(function (require){ * }); */ setComponents: function(components){ - editorModel.setComponents(components); + em.setComponents(components); return this; }, @@ -157,7 +174,7 @@ define(function (require){ * @return {Object} */ getStyle: function(){ - return editorModel.get('CssComposer').getRules(); + return em.get('CssComposer').getRules(); }, /** @@ -173,7 +190,7 @@ define(function (require){ * }); */ setStyle: function(style){ - editorModel.setStyle(style); + em.setStyle(style); return this; }, @@ -182,7 +199,7 @@ define(function (require){ * @return {grapesjs.Component} */ getSelected: function(){ - return editorModel.getSelected(); + return em.getSelected(); }, /** @@ -193,21 +210,21 @@ define(function (require){ * editor.runCommand('myCommand', {someValue: 1}); */ runCommand: function(id, options) { - var command = editorModel.get('Commands').get(id); + var command = em.get('Commands').get(id); if(command) command.run(this, this, options); }, /** - * Stop command executed before + * Stop the command if stop method was provided * @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); + var command = em.get('Commands').get(id); if(command) command.stop(this, this, options); @@ -218,7 +235,7 @@ define(function (require){ * @return {Object} Stored data */ store: function(){ - return editorModel.store(); + return em.store(); }, /** @@ -226,7 +243,7 @@ define(function (require){ * @return {Object} Stored data */ load: function(){ - return editorModel.load(); + return em.load(); }, /** diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 08cce65f5..cdb5078b7 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -43,7 +43,7 @@ define([ }, initialize: function(c) { - this.config = _.clone(c); + this.config = c; this.pfx = this.config.storagePrefix; this.compName = this.pfx + 'components' + this.config.id; this.rulesName = this.pfx + 'rules' + this.config.id; @@ -70,6 +70,15 @@ define([ this.on('change:selectedComponent', this.componentSelected, this); }, + /** + * Initialize editor model and set editor instance + * @param {Editor} editor Editor instance + * @return {this} + */ + init: function(editor){ + this.set('Editor', editor); + }, + /** * Initialize Parser * */ diff --git a/src/grapesjs/main.js b/src/grapesjs/main.js index 1768a785d..0a88660d4 100644 --- a/src/grapesjs/main.js +++ b/src/grapesjs/main.js @@ -46,7 +46,7 @@ define(function (require) { throw new Error("'container' is required"); c.el = document.querySelector(els); - var editor = new Editor(c); + var editor = new Editor(c).init(); // Execute all plugins var plugs = plugins.getAll(); diff --git a/src/panels/view/ButtonView.js b/src/panels/view/ButtonView.js index b536550f7..869e0ff44 100644 --- a/src/panels/view/ButtonView.js +++ b/src/panels/view/ButtonView.js @@ -141,6 +141,7 @@ function(Backbone, require) { * */ updateActive: function(){ var command = null; + var editor = this.em && this.em.get ? this.em.get('Editor') : null; if(this.commands) command = this.commands.get(this.model.get('command')); @@ -154,7 +155,7 @@ function(Backbone, require) { this.parentM.set('active', true, { silent: true }).trigger('checkActive'); if(command) - command.run(this.em, this.model); + command.run(editor, this.model); }else{ this.$el.removeClass(this.activeCls); @@ -164,7 +165,7 @@ function(Backbone, require) { this.parentM.set('active', false, { silent: true }).trigger('checkActive'); if(command) - command.stop(this.em, this.model); + command.stop(editor, this.model); } }, diff --git a/test/specs/grapesjs/main.js b/test/specs/grapesjs/main.js index f5803ca54..742846c97 100644 --- a/test/specs/grapesjs/main.js +++ b/test/specs/grapesjs/main.js @@ -148,8 +148,8 @@ define(['GrapesJS', 'PluginManager', 'chai'], editor.testVal = ''; editor.setComponents(htmlString); editor.Commands.add('test-command', { - run: function(editor, caller, opts){ - editor.testVal = editor.getHtml() + opts.val; + run: function(ed, caller, opts){ + ed.testVal = ed.getHtml() + opts.val; }, }); editor.runCommand('test-command', {val: 5}); @@ -161,8 +161,8 @@ define(['GrapesJS', 'PluginManager', 'chai'], editor.testVal = ''; editor.setComponents(htmlString); editor.Commands.add('test-command', { - stop: function(editor, caller, opts){ - editor.testVal = editor.getHtml() + opts.val; + stop: function(ed, caller, opts){ + ed.testVal = ed.getHtml() + opts.val; }, }); editor.stopCommand('test-command', {val: 5}); diff --git a/test/specs/panels/e2e/PanelsE2e.js b/test/specs/panels/e2e/PanelsE2e.js new file mode 100644 index 000000000..aa907ed8e --- /dev/null +++ b/test/specs/panels/e2e/PanelsE2e.js @@ -0,0 +1,74 @@ + +define(['GrapesJS'], + function(GrapesJS) { + + return { + run : function(){ + + describe('E2E tests', function() { + + var fixtures; + var fixture; + var obj; + var editorName = 'panel-fixture'; + + before(function () { + fixtures = $("#fixtures"); + }); + + beforeEach(function () { + obj = GrapesJS; + config = { + container: '#' + editorName, + storage: { autoload: 0, type:'none' }, + }; + fixture = $('
'); + fixture.empty().appendTo(fixtures); + }); + + afterEach(function () { + delete obj; + delete config; + fixture.remove(); + }); + + after(function () { + fixture.remove(); + }); + + it('Command is correctly executed on button click', function() { + var commandId = 'command-test'; + config.commands = { + defaults: [{ + id: commandId, + run: function(ed, caller){ + ed.testValue = 'testValue'; + caller.set('active', false); + } + }] + }; + config.panels = { + defaults : [{ + id : 'toolbar-test', + buttons : [{ + id : 'button-test', + className : 'fa fa-smile-o', + command : commandId, + }], + }], + }; + var editor = obj.init(config); + editor.testValue = ''; + var button = editor.Panels.getButton('toolbar-test', 'button-test'); + button.set('active', 1); + editor.testValue.should.equal('testValue'); + button.get('active').should.equal(false); + }); + + }); + + } + + }; + +}); \ No newline at end of file diff --git a/test/specs/panels/main.js b/test/specs/panels/main.js index 3c287966e..cc2195bb4 100644 --- a/test/specs/panels/main.js +++ b/test/specs/panels/main.js @@ -6,7 +6,8 @@ define([ modulePath + '/view/PanelView', modulePath + '/view/PanelsView', modulePath + '/view/ButtonView', - modulePath + '/view/ButtonsView' + modulePath + '/view/ButtonsView', + modulePath + '/e2e/PanelsE2e' ], function( Panels, @@ -14,7 +15,8 @@ define([ PanelView, PanelsView, ButtonView, - ButtonsView + ButtonsView, + e2e ) { describe('Panels', function() { @@ -111,5 +113,6 @@ define([ PanelsView.run(); ButtonView.run(); ButtonsView.run(); + e2e.run(); }); }); \ No newline at end of file