Add device manager to the editor

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.2.9",
+  "version": "0.2.13",
   "author": "Artur Arseniev",
   "homepage": "http://grapesjs.com",
   "main": [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Open source Web Template Editor",
-  "version": "0.2.9",
+  "version": "0.2.13",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/canvas/view/FrameView.js

@@ -25,11 +25,13 @@ function(Backbone) {
       // Refactor: maybe its better put it inside EditorModel
       // as I will use it also inside Style Manager
       // editor.getMediaWidth();
+      /*
       var value = model.get('device');
       var media = em.get('Devices').get(value);
       if(!media)
         return;
       this.el.style.width = media.get('width');
+      */
     },
 
     getBody: function(){

src/config/require-config.js

@@ -38,6 +38,7 @@ require.config({
 		            {  name: 'AssetManager', 		location: 'asset_manager', 		},
 		            {  name: 'StyleManager', 		location: 'style_manager', 		},
 		            {  name: 'ClassManager', 		location: 'class_manager', 		},
+		            {  name: 'DeviceManager', 	location: 'device_manager', 	},
 		            {  name: 'StorageManager', 	location: 'storage_manager', 	},
 		            {  name: 'PluginManager',		location: 'plugin_manager',		},
 		            {  name: 'Navigator', 			location: 'navigator', 				},

src/device_manager/config/config.js

@@ -0,0 +1,7 @@
+define(function () {
+	return {
+
+    'devices': [],
+
+	};
+});

src/devices/main.js → src/device_manager/main.js

@@ -1,13 +1,12 @@
 /**
- *
- * * [getAll](#getall)
- * * [get](#get)
  * * [add](#add)
+ * * [get](#get)
+ * * [getAll](#getall)
  *
  * Before using methods you should get first the module from the editor instance, in this way:
  *
  * ```js
- * var deviceManager = editor.Devices;
+ * var deviceManager = editor.DeviceManager;
  * ```
  *
  * @module Devices
@@ -15,7 +14,7 @@
  * @param {Array<Object>} [config.devices=[]] Default devices
  * @example
  * ...
- * devices: {
+ * deviceManager: {
  *    devices: [
  *      {name: 'Desktop', width: ''}
  *      {name: 'Tablet', width: '991px'}

src/devices/config/config.js

@@ -1,21 +0,0 @@
-define(function () {
-	return {
-
-    'devices': [
-      {
-        name: 'Desktop',
-        width: '',
-      },{
-        name: 'Tablet',
-        width: '991px',
-      },{
-        name: 'Mobile landscape',
-        width: '767px',
-      },{
-        name: 'Mobile portrait',
-        width: '479px',
-      },
-    ],
-
-	};
-});

src/editor/config/config.js

@@ -79,6 +79,23 @@ define(function () {
 		//Configurations for Css Composer
 		cssComposer				: {},
 
+		//Configurations for Device Manager
+		deviceManager: {
+			'devices': [{
+	        name: 'Desktop',
+	        width: '',
+	      },{
+	        name: 'Tablet',
+	        width: '991px',
+	      },{
+	        name: 'Mobile landscape',
+	        width: '767px',
+	      },{
+	        name: 'Mobile portrait',
+	        width: '479px',
+	    }],
+		},
+
 		// Dom element
 		el: '',
 

src/editor/main.js

@@ -8,6 +8,8 @@
  * * [getStyle](#getstyle)
  * * [setStyle](#setstyle)
  * * [getSelected](#getselected)
+ * * [setDevice](#setdevice)
+ * * [getDevice](#getdevice)
  * * [runCommand](#runcommand)
  * * [stopCommand](#stopcommand)
  * * [store](#store)
@@ -132,6 +134,11 @@ define(function (require){
 				 */
 				UndoManager: em.get('UndoManager'),
 
+				/**
+				 * @property {DeviceManager}
+				 */
+				DeviceManager: em.get('DeviceManager'),
+
 				/**
 				 * @property {Utils}
 				 */
@@ -235,6 +242,29 @@ define(function (require){
 					return em.getSelected();
 				},
 
+				/**
+				 * Set device to the editor. If the device exists it will
+				 * change the canvas to the proper width
+				 * @return {this}
+				 * @example
+				 * editor.setDevice('Tablet');
+				 */
+				setDevice: function(name){
+					return em.set('device', name);
+				},
+
+				/**
+				 * Return the actual active device
+				 * @return {string} Device name
+				 * @example
+				 * var device = editor.getDevice();
+				 * console.log(device);
+				 * // 'Tablet'
+				 */
+				getDevice: function(){
+					return em.get('device');
+				},
+
 				/**
 				 * Execute command
 				 * @param {string} id Command ID

src/editor/model/Editor.js

@@ -4,6 +4,7 @@ define([
         'keymaster',
         'AssetManager',
         'StorageManager',
+        'DeviceManager',
         'ModalDialog',
         'CodeManager',
         'CssComposer',
@@ -22,6 +23,7 @@ define([
 			Keymaster,
 			AssetManager,
 			StorageManager,
+			DeviceManager,
 			ModalDialog,
 			CodeManager,
 			CssComposer,
@@ -55,6 +57,7 @@ define([
 				if(c.el && c.fromElement)
 					this.config.components = c.el.innerHTML;
 
+				this.initDeviceManager();
 				this.initParser();
 				this.initStorage();
 				this.initClassManager();
@@ -84,6 +87,16 @@ define([
 				this.set('Editor', editor);
 			},
 
+			/**
+			 * Initialize device manager
+			 * @private
+			 * */
+			initDeviceManager: function(){
+				var cfg = this.config.deviceManager;
+				var dm = new DeviceManager(cfg);
+				this.set('DeviceManager', dm);
+			},
+
 			/**
 			 * Initialize Parser
 			 * @private

test/runner/main.js

@@ -15,6 +15,7 @@ require(['../src/config/require-config.js', 'config/config.js'], function() {
 	         'specs/class_manager/main.js',
 	         'specs/css_composer/main.js',
 	         'specs/code_manager/main.js',
+	         'specs/device_manager/main.js',
 	         'specs/panels/main.js',
 	         'specs/commands/main.js',
 	         'specs/style_manager/main.js',

test/specs/device_manager/main.js

@@ -0,0 +1,66 @@
+var modulePath = './../../../test/specs/device_manager';
+
+define([ 'DeviceManager',
+        //modulePath + '/model/DeviceModels',
+         ],
+  function(DeviceManager) {
+
+    describe('DeviceManager', function() {
+
+      describe('Main', function() {
+
+        var obj;
+        var testNameDevice;
+        var testWidthDevice;
+
+        beforeEach(function () {
+          testNameDevice = 'Tablet';
+          testWidthDevice = '100px';
+          obj = new DeviceManager();
+        });
+
+        afterEach(function () {
+          delete obj;
+        });
+
+        it('Object exists', function() {
+          obj.should.be.exist;
+        });
+
+        it('No device inside', function() {
+          var coll = obj.getAll();
+          coll.length.should.equal(0);
+        });
+
+        it('Add new device', function() {
+          var model = obj.add(testNameDevice, testWidthDevice);
+          obj.getAll().length.should.equal(1);
+        });
+
+        it('Added device has correct data', function() {
+          var model = obj.add(testNameDevice, testWidthDevice);
+          model.get('name').should.equal(testNameDevice);
+          model.get('width').should.equal(testWidthDevice);
+        });
+
+        it('Add device width options', function() {
+          var model = obj.add(testNameDevice, testWidthDevice, {opt: 'value'});
+          model.get('opt').should.equal('value');
+        });
+
+        it('The name of the device is unique', function() {
+          var model = obj.add(testNameDevice, testWidthDevice);
+          var model2 = obj.add(testNameDevice, '2px');
+          model.should.deep.equal(model2);
+        });
+
+        it('Get device by name', function() {
+          var model = obj.add(testNameDevice, testWidthDevice);
+          var model2 = obj.get(testNameDevice);
+          model.should.deep.equal(model2);
+        });
+
+      });
+
+    });
+});

test/specs/grapesjs/main.js

@@ -169,6 +169,28 @@ define(['GrapesJS', 'PluginManager', 'chai'],
         editor.testVal.should.equal(htmlString + '5');
       });
 
+      it('Set default devices', function() {
+        config.deviceManager = {};
+        config.deviceManager.devices = [
+          {name:'1', width: '2'},
+          {name:'3', width: '4'},
+        ];
+        var editor = obj.init(config);
+        editor.DeviceManager.getAll().length.should.equal(2);
+      });
+
+      it('There is no active device', function() {
+        var editor = obj.init(config);
+        editor.getDevice().should.be.empty;
+      });
+
+      it('Active another device', function() {
+        var editor = obj.init(config);
+        editor.setDevice('Tablet');
+        editor.getDevice().should.equal('Tablet');
+      });
+
+
     });
 
   });