From 2c80b1a546a7437280b73aa110bab608519a5350 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 15 Jul 2016 18:39:16 +0200 Subject: [PATCH] Update frame on device change --- src/canvas/view/FrameView.js | 13 ++------- src/commands/view/OpenStyleManager.js | 17 +++++++---- src/device_manager/main.js | 17 +++++++++-- src/device_manager/template/devices.html | 1 + src/device_manager/view/DevicesView.js | 36 ++++++++++++++++++------ src/editor/model/Editor.js | 11 ++++++++ styles/css/main.css | 2 +- styles/scss/main.scss | 2 +- test/specs/device_manager/main.js | 4 +++ 9 files changed, 74 insertions(+), 29 deletions(-) create mode 100644 src/device_manager/template/devices.html diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index 91c8073e6..5d286f804 100644 --- a/src/canvas/view/FrameView.js +++ b/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(){ diff --git a/src/commands/view/OpenStyleManager.js b/src/commands/view/OpenStyleManager.js index 6d6ba4c36..ba01b9cfc 100644 --- a/src/commands/view/OpenStyleManager.js +++ b/src/commands/view/OpenStyleManager.js @@ -17,14 +17,19 @@ define(['StyleManager'], function(StyleManager) { this.$cn2 = $('
'); 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()); diff --git a/src/device_manager/main.js b/src/device_manager/main.js index 114366670..fe9cfb90a 100644 --- a/src/device_manager/main.js +++ b/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; + }, + }; }; diff --git a/src/device_manager/template/devices.html b/src/device_manager/template/devices.html new file mode 100644 index 000000000..9375e2b29 --- /dev/null +++ b/src/device_manager/template/devices.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/device_manager/view/DevicesView.js b/src/device_manager/view/DevicesView.js index 7bd6df522..1ea80a8a5 100644 --- a/src/device_manager/view/DevicesView.js +++ b/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; }, diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 7182538a6..14425b2a8 100644 --- a/src/editor/model/Editor.js +++ b/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); + }, + }); }); diff --git a/styles/css/main.css b/styles/css/main.css index 5bfef51d6..4eaecd591 100644 --- a/styles/css/main.css +++ b/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; diff --git a/styles/scss/main.scss b/styles/scss/main.scss index cd01c6fa5..a9c5af4a4 100644 --- a/styles/scss/main.scss +++ b/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 { diff --git a/test/specs/device_manager/main.js b/test/specs/device_manager/main.js index f169cf77d..fe8c209d9 100644 --- a/test/specs/device_manager/main.js +++ b/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; + }); + }); });