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