diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index f1cb76af0..38b7d00f1 100644 --- a/src/canvas/view/FrameView.js +++ b/src/canvas/view/FrameView.js @@ -22,10 +22,10 @@ module.exports = require('backbone').View.extend({ * Update dimensions of the frame * @private */ - updateDim(model) { - const em = this.em; + updateDim() { + const { em, el, $el } = this; + const { style } = el; const device = em.getDeviceModel(); - const style = this.el.style; const currW = style.width || ''; const currH = style.height || ''; const newW = device ? device.get('width') : ''; @@ -37,7 +37,7 @@ module.exports = require('backbone').View.extend({ // Prevent fixed highlighting box which appears when on // component hover during the animation em.stopDefault({ preserveSelected: 1 }); - noChanges ? this.udpateOffset() : this.$el.on(motionsEv, this.udpateOffset); + noChanges ? this.udpateOffset() : $el.on(motionsEv, this.udpateOffset); }, udpateOffset() { diff --git a/src/device_manager/model/Device.js b/src/device_manager/model/Device.js index f7fbf029d..13cb0dca5 100644 --- a/src/device_manager/model/Device.js +++ b/src/device_manager/model/Device.js @@ -8,7 +8,7 @@ module.exports = Backbone.Model.extend({ name: '', // Width to set for the editor iframe - width: '', + width: null, // Height to set for the editor iframe height: '', @@ -24,7 +24,16 @@ module.exports = Backbone.Model.extend({ initialize() { this.get('widthMedia') === null && this.set('widthMedia', this.get('width')); + this.get('width') === null && this.set('width', this.get('widthMedia')); !this.get('priority') && this.set('priority', parseFloat(this.get('widthMedia')) || 0); + const toCheck = ['width', 'height', 'widthMedia']; + toCheck.forEach(prop => this.checkUnit(prop)); + }, + + checkUnit(prop) { + const pr = this.get(prop); + const noUnit = (parseFloat(pr) || 0).toString() === pr.toString(); + noUnit && this.set(prop, `${pr}px`); } });