diff --git a/src/commands/view/OpenStyleManager.js b/src/commands/view/OpenStyleManager.js index ba01b9cfc..e29b2d5d1 100644 --- a/src/commands/view/OpenStyleManager.js +++ b/src/commands/view/OpenStyleManager.js @@ -19,7 +19,7 @@ define(['StyleManager'], function(StyleManager) { // Device Manager var dvm = em.DeviceManager; - if(dvm) + if(dvm && config.showDevices) this.$cn2.append(dvm.render()); // Class Manager container diff --git a/src/device_manager/config/config.js b/src/device_manager/config/config.js index 4371254be..081d54aa4 100644 --- a/src/device_manager/config/config.js +++ b/src/device_manager/config/config.js @@ -3,5 +3,7 @@ define(function () { 'devices': [], + deviceLabel: 'Device', + }; }); \ No newline at end of file diff --git a/src/device_manager/template/devices.html b/src/device_manager/template/devices.html index 0ff894420..effb8781a 100644 --- a/src/device_manager/template/devices.html +++ b/src/device_manager/template/devices.html @@ -1,4 +1,4 @@ -
Device
+
<%= deviceLabel %>
diff --git a/src/device_manager/view/DevicesView.js b/src/device_manager/view/DevicesView.js index eea2ee7ed..1e80d64ac 100644 --- a/src/device_manager/view/DevicesView.js +++ b/src/device_manager/view/DevicesView.js @@ -20,9 +20,7 @@ function(Backbone, devicesTemplate) { * Start adding new device * @return {[type]} [description] */ - startAdd: function(){ - console.log('start new device'); - }, + startAdd: function(){}, /** * Update device of the editor @@ -53,7 +51,10 @@ function(Backbone, devicesTemplate) { render: function() { var pfx = this.ppfx; - this.$el.html(this.template({ ppfx: pfx })); + this.$el.html(this.template({ + ppfx: pfx, + deviceLabel: this.config.deviceLabel + })); this.devicesEl = this.$el.find('.' + pfx + 'devices'); this.devicesEl.append(this.getOptions()); this.el.className = pfx + 'devices-c'; diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 7d4d78c1a..e9664f234 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -96,6 +96,9 @@ define(function () { }], }, + // If true render a select of available devices + showDevices: 1, + // Dom element el: '', diff --git a/src/editor/main.js b/src/editor/main.js index 0df19ad39..f2ec10e73 100644 --- a/src/editor/main.js +++ b/src/editor/main.js @@ -39,6 +39,7 @@ * @param {Object} [config.commands={}] Commands configuration, see the relative documentation * @param {Object} [config.domComponents={}] Components configuration, see the relative documentation * @param {Object} [config.panels={}] Panels configuration, see the relative documentation + * @param {Object} [config.showDevices=true] If true render a select of available devices inside style manager panel * @example * var editor = grapesjs.init({ * container : '#gjs', diff --git a/test/specs/device_manager/main.js b/test/specs/device_manager/main.js index fe8c209d9..b976afe94 100644 --- a/test/specs/device_manager/main.js +++ b/test/specs/device_manager/main.js @@ -1,9 +1,9 @@ var modulePath = './../../../test/specs/device_manager'; define([ 'DeviceManager', - //modulePath + '/model/DeviceModels', + modulePath + '/view/DevicesView', ], - function(DeviceManager) { + function(DeviceManager, DevicesView) { describe('DeviceManager', function() { @@ -66,5 +66,7 @@ define([ 'DeviceManager', }); + DevicesView.run(); + }); }); \ No newline at end of file diff --git a/test/specs/device_manager/view/DevicesView.js b/test/specs/device_manager/view/DevicesView.js new file mode 100644 index 000000000..079179012 --- /dev/null +++ b/test/specs/device_manager/view/DevicesView.js @@ -0,0 +1,82 @@ +var path = 'DeviceManager/view/'; +define([path + 'DevicesView', 'DeviceManager/model/Devices'], + function(DevicesView, Devices) { + + return { + run : function(){ + describe('DevicesView', function() { + + var $fixtures; + var $fixture; + var model; + var view; + var editorModel; + + before(function () { + $fixtures = $("#fixtures"); + $fixture = $('
'); + }); + + beforeEach(function () { + model = new Devices([]); + view = new DevicesView({ + collection: model + }); + $fixture.empty().appendTo($fixtures); + $fixture.html(view.render().el); + }); + + afterEach(function () { + view.collection.reset(); + }); + + after(function () { + $fixture.remove(); + }); + + it("The content is not empty", function (){ + view.el.innerHTML.should.be.not.empty; + }); + + it("No options without devices", function (){ + view.getOptions().should.equal(''); + }); + + it("Render new button", function (){ + view.collection.add({}); + view.$el.html().should.not.be.empty; + }); + + describe('With configs', function() { + + beforeEach(function () { + editorModel = new Backbone.Model(); + model = new Devices([ + {name:'test1'}, + {name:'test2'} + ]); + view = new DevicesView({ + collection: model, + config: { em: editorModel } + }); + $fixture.empty().appendTo($fixtures); + $fixture.html(view.render().el); + }); + + it("Update device on select change", function (){ + view.$el.find('select').val('test2'); + view.updateDevice(); + view.config.em.get('device').should.equal('test2'); + }); + + it("Render options", function (){ + view.getOptions().should.equal(''); + }); + + }); + + }); + } + }; + +}); \ No newline at end of file