From 4a409cd96c4d9bd59fea2274175fc1e0cbebd4ba Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 15 Jul 2016 13:29:59 +0200 Subject: [PATCH] Start devices module --- src/canvas/view/FrameView.js | 14 +++-- src/commands/view/InsertCustom.js | 8 ++- src/devices/config/config.js | 21 ++++++++ src/devices/main.js | 87 +++++++++++++++++++++++++++++++ src/devices/model/Device.js | 14 +++++ src/devices/model/Devices.js | 9 ++++ src/editor/model/Editor.js | 1 + 7 files changed, 149 insertions(+), 5 deletions(-) create mode 100644 src/devices/config/config.js create mode 100644 src/devices/main.js create mode 100644 src/devices/model/Device.js create mode 100644 src/devices/model/Devices.js diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index 190e7a45f..c90e23c3c 100644 --- a/src/canvas/view/FrameView.js +++ b/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(){ diff --git a/src/commands/view/InsertCustom.js b/src/commands/view/InsertCustom.js index 8a504b8fe..06f7323ed 100644 --- a/src/commands/view/InsertCustom.js +++ b/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); diff --git a/src/devices/config/config.js b/src/devices/config/config.js new file mode 100644 index 000000000..ffe5c2879 --- /dev/null +++ b/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', + }, + ], + + }; +}); \ No newline at end of file diff --git a/src/devices/main.js b/src/devices/main.js new file mode 100644 index 000000000..04d486352 --- /dev/null +++ b/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} [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; + }, + + }; + + }; + +}); \ No newline at end of file diff --git a/src/devices/model/Device.js b/src/devices/model/Device.js new file mode 100644 index 000000000..078392c32 --- /dev/null +++ b/src/devices/model/Device.js @@ -0,0 +1,14 @@ +define(['backbone'], + function(Backbone){ + + return Backbone.Model.extend({ + + idAttribute: 'name', + + defaults :{ + name: '', + width: '', + }, + + }); + }); diff --git a/src/devices/model/Devices.js b/src/devices/model/Devices.js new file mode 100644 index 000000000..da0d52ced --- /dev/null +++ b/src/devices/model/Devices.js @@ -0,0 +1,9 @@ +define(['backbone','./Device'], + function (Backbone, Device) { + + return Backbone.Collection.extend({ + + model: Device, + + }); +}); diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 9ba4ce5d6..cd41bec81 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -42,6 +42,7 @@ define([ selectedComponent: null, previousModel: null, changesCount: 0, + device: '', }, initialize: function(c) {