Start devices module

src/canvas/view/FrameView.js

@@ -14,14 +14,22 @@ function(Backbone) {
     initialize: function(o) {
       this.config = o.config || {};
       this.ppfx = this.config.pStylePrefix || '';
-      this.listenTo(this.model, 'change:width', this.updateWidth);
+      this.em = this.config.em;
+      this.listenTo(this.em, 'change:device', this.updateWidth);
     },
 
     /**
      * Update width of the frame
      */
-    updateWidth: function(){
-      this.el.style.width = this.model.get('width');
+    updateWidth: function(model){
+      // 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/commands/view/InsertCustom.js

@@ -8,6 +8,7 @@ define(['backbone', './CreateComponent'],
 
 			init: function(){
 				CreateComponent.init.apply(this, arguments);
+				_.bindAll(this, 'insertComponent');
 				this.allowDraw = 0;
 			},
 
@@ -25,7 +26,7 @@ define(['backbone', './CreateComponent'],
 
 			enable: function(){
 				CreateComponent.enable.apply(this, arguments);
-				this.$wr.on('click', this.insertComponent.bind(this));
+				this.$wr.on('click', this.insertComponent);
 			},
 
 			/**
@@ -42,10 +43,13 @@ define(['backbone', './CreateComponent'],
 				var model = this.create(this.sorter.target, object, index, null, {silent: false});
 
 				if(this.opt.terminateAfterInsert && this.sender)
-					this.sender.set('active',false);
+					this.sender.set('active', false);
 				else
 					this.enable();
 
+				if(!model)
+					return;
+
 				if(this.em)
 						this.em.editor.initChildrenComp(model);
 

src/devices/config/config.js

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

src/devices/main.js

@@ -0,0 +1,87 @@
+/**
+ *
+ * * [getAll](#getall)
+ * * [get](#get)
+ * * [add](#add)
+ *
+ * Before using methods you should get first the module from the editor instance, in this way:
+ *
+ * ```js
+ * var deviceManager = editor.Devices;
+ * ```
+ *
+ * @module Devices
+ * @param {Object} config Configurations
+ * @param {Array<Object>} [config.devices=[]] Default devices
+ * @example
+ * ...
+ * devices: {
+ *    devices: [
+ *      {name: 'Desktop', width: ''}
+ *      {name: 'Tablet', width: '991px'}
+ *    ],
+ * }
+ * ...
+ */
+define(function(require) {
+
+  return function(config) {
+    var c = config || {},
+      defaults = require('./config/config'),
+      Devices = require('./model/Devices');
+
+    for (var name in defaults) {
+      if (!(name in c))
+        c[name] = defaults[name];
+    }
+
+    var devices = new Devices(c.devices);
+
+    return {
+
+        /**
+         * Add new device to the collection. URLs are supposed to be unique
+         * @param {string} name Device name
+         * @param {string} width Width of the device
+         * @param {Object} opts Custom options
+         * @return {Device} Added device
+         * @example
+         * // In case of strings, would be interpreted as images
+         * deviceManager.add('Tablet', '900px');
+         */
+        add: function(name, width, opts){
+          var obj = opts || {};
+          obj.name = name;
+          obj.width = width;
+          return devices.add(obj);
+        },
+
+        /**
+         * Return device by name
+         * @param  {string} name Name of the device
+         * @example
+         * var device = deviceManager.get('Tablet');
+         * console.log(JSON.stringify(device));
+         * // {name: 'Tablet', width: '900px'}
+         */
+        get: function(name){
+          return devices.get(name);
+        },
+
+        /**
+         * Return all devices
+         * @return {Collection}
+         * @example
+         * var devices = deviceManager.getAll();
+         * console.log(JSON.stringify(devices));
+         * // [{name: 'Desktop', width: ''}, ...]
+         */
+        getAll: function(){
+          return devices;
+        },
+
+    };
+
+  };
+
+});

src/devices/model/Device.js

@@ -0,0 +1,14 @@
+define(['backbone'],
+  function(Backbone){
+
+    return Backbone.Model.extend({
+
+      idAttribute: 'name',
+
+      defaults :{
+        name: '',
+        width: '',
+      },
+
+    });
+  });

src/devices/model/Devices.js

@@ -0,0 +1,9 @@
+define(['backbone','./Device'],
+  function (Backbone, Device) {
+
+    return Backbone.Collection.extend({
+
+      model:  Device,
+
+    });
+});

src/editor/model/Editor.js

@@ -42,6 +42,7 @@ define([
 				selectedComponent: null,
 				previousModel: null,
 				changesCount:	0,
+				device: '',
 			},
 
 			initialize: function(c) {