Update frame on device change

src/canvas/view/FrameView.js

@@ -20,18 +20,11 @@ function(Backbone) {
 
     /**
      * Update width of the frame
+     * @private
      */
     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');
-      */
+      var device = this.em.getDeviceModel();
+      this.el.style.width = device ? device.get('width') : '';
     },
 
     getBody: function(){

src/commands/view/OpenStyleManager.js

@@ -17,14 +17,19 @@ define(['StyleManager'], function(StyleManager) {
 					this.$cn2 = $('<div/>');
 					this.$cn.append(this.$cn2);
 
+					// Device Manager
+					var dvm = em.DeviceManager;
+					if(dvm)
+						this.$cn2.append(dvm.render());
+
 					// Class Manager container
-					this.clm = em.ClassManager;
-					if(this.clm){
-						this.$clm = new this.clm.ClassTagsView({
-							collection: new this.clm.ClassTags([]),
-							config: this.clm.config,
+					var clm = em.ClassManager;
+					if(clm){
+						var $clm = new clm.ClassTagsView({
+							collection: new clm.ClassTags([]),
+							config: clm.config,
 						}).render().el;
-						this.$cn2.append(this.$clm);
+						this.$cn2.append($clm);
 					}
 
 					this.$cn2.append(em.StyleManager.render());

src/device_manager/main.js

@@ -27,7 +27,8 @@ define(function(require) {
   return function(config) {
     var c = config || {},
       defaults = require('./config/config'),
-      Devices = require('./model/Devices');
+      Devices = require('./model/Devices'),
+      DevicesView = require('./view/DevicesView');
 
     for (var name in defaults) {
       if (!(name in c))
@@ -35,7 +36,10 @@ define(function(require) {
     }
 
     var devices = new Devices(c.devices);
-    //var view = new DevicesView({ collection: devices });
+    var view = new DevicesView({
+      collection: devices,
+      config: c
+    });
 
     return {
 
@@ -80,6 +84,15 @@ define(function(require) {
           return devices;
         },
 
+        /**
+         * Render devices
+         * @return {string} HTML string
+         * @private
+         */
+        render: function(){
+          return view.render().el;
+        },
+
     };
 
   };

src/device_manager/template/devices.html

@@ -0,0 +1 @@
+<select class="<%= ppfx %>devices"></select>

src/device_manager/view/DevicesView.js

@@ -1,18 +1,37 @@
-define(['backbone'],
-function(Backbone) {
+define(['backbone', 'text!./../template/devices.html'],
+function(Backbone, devicesTemplate) {
 
   return Backbone.View.extend({
 
-    //template: _.template(assetsTemplate),
+    template: _.template(devicesTemplate),
+
+    events: {
+      'change': 'updateDevice'
+    },
 
     initialize: function(o) {
       this.config = o.config || {};
+      console.log(this.config);
       this.ppfx = this.config.pStylePrefix || '';
     },
 
+    /**
+     * Update device of the editor
+     * @private
+     */
+    updateDevice: function(){
+      var em = this.config.em;
+      if(em){
+        var devEl = this.devicesEl;
+        var val = devEl ? devEl.val() : '';
+        em.set('device', val);
+      }
+    },
+
     /**
      * Return devices options
      * @return {string} String of options
+     * @private
      */
     getOptions: function(){
       var result = '';
@@ -24,12 +43,11 @@ function(Backbone) {
     },
 
     render: function() {
-      /*
-      this.$el.html(this.template({
-        ppfx: this.ppfx,
-      }));
-       */
-      //this.$el.attr({class: this.ppfx + 'frame'});
+      var pfx = this.ppfx;
+      this.$el.html(this.template({ ppfx: pfx }));
+      this.devicesEl = this.$el.find('.' + pfx + 'devices');
+      this.devicesEl.append(this.getOptions());
+      this.el.className = pfx + 'devices-c';
       return this;
     },
 

src/editor/model/Editor.js

@@ -93,6 +93,8 @@ define([
 			 * */
 			initDeviceManager: function(){
 				var cfg = this.config.deviceManager;
+				cfg.em = this;
+				cfg.pStylePrefix = this.config.stylePrefix;
 				var dm = new DeviceManager(cfg);
 				this.set('DeviceManager', dm);
 			},
@@ -751,5 +753,14 @@ define([
 				return this.cacheLoad;
 			},
 
+			/**
+			 * Returns device model by name
+			 * @return {Device|null}
+			 */
+			getDeviceModel: function(){
+				var name = this.get('device');
+				return this.get('DeviceManager').get(name);
+			},
+
 		});
 	});

styles/css/main.css

@@ -2681,7 +2681,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   box-sizing: border-box; }
 
 .wte-frame {
-  transition: width 0.35s linear; }
+  transition: width 0.35s ease; }
 
 .btn-cl, .wte-mdl-dialog .wte-mdl-btn-close, .wte-am-assets-cont #wte-am-close {
   font-size: 25px;

styles/scss/main.scss

@@ -180,7 +180,7 @@ $imageCompDim:	50px;
 .#{$cv-prefix}canvas *{box-sizing: border-box;}
 
 .#{$app-prefix}frame{
-  transition: width 0.35s linear;
+  transition: width 0.35s ease;
 }
 
 .btn-cl {

test/specs/device_manager/main.js

@@ -60,6 +60,10 @@ define([ 'DeviceManager',
           model.should.deep.equal(model2);
         });
 
+        it('Render devices', function() {
+          obj.render().should.be.ok;
+        });
+
       });
 
     });