From ca8378e599b53823fb5246be62ae4bacd427a927 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 15 Jul 2016 14:25:27 +0200 Subject: [PATCH] Add device manager to the editor --- bower.json | 2 +- package.json | 2 +- src/canvas/view/FrameView.js | 2 + src/config/require-config.js | 1 + src/device_manager/config/config.js | 7 ++ src/{devices => device_manager}/main.js | 9 ++- .../model/Device.js | 0 .../model/Devices.js | 0 src/devices/config/config.js | 21 ------ src/editor/config/config.js | 17 +++++ src/editor/main.js | 30 +++++++++ src/editor/model/Editor.js | 13 ++++ test/runner/main.js | 1 + test/specs/device_manager/main.js | 66 +++++++++++++++++++ test/specs/grapesjs/main.js | 22 +++++++ 15 files changed, 165 insertions(+), 28 deletions(-) create mode 100644 src/device_manager/config/config.js rename src/{devices => device_manager}/main.js (96%) rename src/{devices => device_manager}/model/Device.js (100%) rename src/{devices => device_manager}/model/Devices.js (100%) delete mode 100644 src/devices/config/config.js create mode 100644 test/specs/device_manager/main.js diff --git a/bower.json b/bower.json index 710e4893c..4cb610967 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "grapesjs", "description": "Open source Web Template Editor", - "version": "0.2.9", + "version": "0.2.13", "author": "Artur Arseniev", "homepage": "http://grapesjs.com", "main": [ diff --git a/package.json b/package.json index 53e5fce5d..ceb125717 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "grapesjs", "description": "Open source Web Template Editor", - "version": "0.2.9", + "version": "0.2.13", "author": "Artur Arseniev", "license": "BSD-3-Clause", "homepage": "http://grapesjs.com", diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index c90e23c3c..91c8073e6 100644 --- a/src/canvas/view/FrameView.js +++ b/src/canvas/view/FrameView.js @@ -25,11 +25,13 @@ function(Backbone) { // 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/config/require-config.js b/src/config/require-config.js index 5d48af2cb..53f894737 100644 --- a/src/config/require-config.js +++ b/src/config/require-config.js @@ -38,6 +38,7 @@ require.config({ { name: 'AssetManager', location: 'asset_manager', }, { name: 'StyleManager', location: 'style_manager', }, { name: 'ClassManager', location: 'class_manager', }, + { name: 'DeviceManager', location: 'device_manager', }, { name: 'StorageManager', location: 'storage_manager', }, { name: 'PluginManager', location: 'plugin_manager', }, { name: 'Navigator', location: 'navigator', }, diff --git a/src/device_manager/config/config.js b/src/device_manager/config/config.js new file mode 100644 index 000000000..4371254be --- /dev/null +++ b/src/device_manager/config/config.js @@ -0,0 +1,7 @@ +define(function () { + return { + + 'devices': [], + + }; +}); \ No newline at end of file diff --git a/src/devices/main.js b/src/device_manager/main.js similarity index 96% rename from src/devices/main.js rename to src/device_manager/main.js index 04d486352..8c4dfd2bb 100644 --- a/src/devices/main.js +++ b/src/device_manager/main.js @@ -1,13 +1,12 @@ /** - * - * * [getAll](#getall) - * * [get](#get) * * [add](#add) + * * [get](#get) + * * [getAll](#getall) * * Before using methods you should get first the module from the editor instance, in this way: * * ```js - * var deviceManager = editor.Devices; + * var deviceManager = editor.DeviceManager; * ``` * * @module Devices @@ -15,7 +14,7 @@ * @param {Array} [config.devices=[]] Default devices * @example * ... - * devices: { + * deviceManager: { * devices: [ * {name: 'Desktop', width: ''} * {name: 'Tablet', width: '991px'} diff --git a/src/devices/model/Device.js b/src/device_manager/model/Device.js similarity index 100% rename from src/devices/model/Device.js rename to src/device_manager/model/Device.js diff --git a/src/devices/model/Devices.js b/src/device_manager/model/Devices.js similarity index 100% rename from src/devices/model/Devices.js rename to src/device_manager/model/Devices.js diff --git a/src/devices/config/config.js b/src/devices/config/config.js deleted file mode 100644 index ffe5c2879..000000000 --- a/src/devices/config/config.js +++ /dev/null @@ -1,21 +0,0 @@ -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/editor/config/config.js b/src/editor/config/config.js index d48ab3e8a..7d4d78c1a 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -79,6 +79,23 @@ define(function () { //Configurations for Css Composer cssComposer : {}, + //Configurations for Device Manager + deviceManager: { + 'devices': [{ + name: 'Desktop', + width: '', + },{ + name: 'Tablet', + width: '991px', + },{ + name: 'Mobile landscape', + width: '767px', + },{ + name: 'Mobile portrait', + width: '479px', + }], + }, + // Dom element el: '', diff --git a/src/editor/main.js b/src/editor/main.js index 2c9f77c3b..0df19ad39 100644 --- a/src/editor/main.js +++ b/src/editor/main.js @@ -8,6 +8,8 @@ * * [getStyle](#getstyle) * * [setStyle](#setstyle) * * [getSelected](#getselected) + * * [setDevice](#setdevice) + * * [getDevice](#getdevice) * * [runCommand](#runcommand) * * [stopCommand](#stopcommand) * * [store](#store) @@ -132,6 +134,11 @@ define(function (require){ */ UndoManager: em.get('UndoManager'), + /** + * @property {DeviceManager} + */ + DeviceManager: em.get('DeviceManager'), + /** * @property {Utils} */ @@ -235,6 +242,29 @@ define(function (require){ return em.getSelected(); }, + /** + * Set device to the editor. If the device exists it will + * change the canvas to the proper width + * @return {this} + * @example + * editor.setDevice('Tablet'); + */ + setDevice: function(name){ + return em.set('device', name); + }, + + /** + * Return the actual active device + * @return {string} Device name + * @example + * var device = editor.getDevice(); + * console.log(device); + * // 'Tablet' + */ + getDevice: function(){ + return em.get('device'); + }, + /** * Execute command * @param {string} id Command ID diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index cd41bec81..7182538a6 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -4,6 +4,7 @@ define([ 'keymaster', 'AssetManager', 'StorageManager', + 'DeviceManager', 'ModalDialog', 'CodeManager', 'CssComposer', @@ -22,6 +23,7 @@ define([ Keymaster, AssetManager, StorageManager, + DeviceManager, ModalDialog, CodeManager, CssComposer, @@ -55,6 +57,7 @@ define([ if(c.el && c.fromElement) this.config.components = c.el.innerHTML; + this.initDeviceManager(); this.initParser(); this.initStorage(); this.initClassManager(); @@ -84,6 +87,16 @@ define([ this.set('Editor', editor); }, + /** + * Initialize device manager + * @private + * */ + initDeviceManager: function(){ + var cfg = this.config.deviceManager; + var dm = new DeviceManager(cfg); + this.set('DeviceManager', dm); + }, + /** * Initialize Parser * @private diff --git a/test/runner/main.js b/test/runner/main.js index 2bfdd9451..8e9f0882d 100644 --- a/test/runner/main.js +++ b/test/runner/main.js @@ -15,6 +15,7 @@ require(['../src/config/require-config.js', 'config/config.js'], function() { 'specs/class_manager/main.js', 'specs/css_composer/main.js', 'specs/code_manager/main.js', + 'specs/device_manager/main.js', 'specs/panels/main.js', 'specs/commands/main.js', 'specs/style_manager/main.js', diff --git a/test/specs/device_manager/main.js b/test/specs/device_manager/main.js new file mode 100644 index 000000000..f169cf77d --- /dev/null +++ b/test/specs/device_manager/main.js @@ -0,0 +1,66 @@ +var modulePath = './../../../test/specs/device_manager'; + +define([ 'DeviceManager', + //modulePath + '/model/DeviceModels', + ], + function(DeviceManager) { + + describe('DeviceManager', function() { + + describe('Main', function() { + + var obj; + var testNameDevice; + var testWidthDevice; + + beforeEach(function () { + testNameDevice = 'Tablet'; + testWidthDevice = '100px'; + obj = new DeviceManager(); + }); + + afterEach(function () { + delete obj; + }); + + it('Object exists', function() { + obj.should.be.exist; + }); + + it('No device inside', function() { + var coll = obj.getAll(); + coll.length.should.equal(0); + }); + + it('Add new device', function() { + var model = obj.add(testNameDevice, testWidthDevice); + obj.getAll().length.should.equal(1); + }); + + it('Added device has correct data', function() { + var model = obj.add(testNameDevice, testWidthDevice); + model.get('name').should.equal(testNameDevice); + model.get('width').should.equal(testWidthDevice); + }); + + it('Add device width options', function() { + var model = obj.add(testNameDevice, testWidthDevice, {opt: 'value'}); + model.get('opt').should.equal('value'); + }); + + it('The name of the device is unique', function() { + var model = obj.add(testNameDevice, testWidthDevice); + var model2 = obj.add(testNameDevice, '2px'); + model.should.deep.equal(model2); + }); + + it('Get device by name', function() { + var model = obj.add(testNameDevice, testWidthDevice); + var model2 = obj.get(testNameDevice); + model.should.deep.equal(model2); + }); + + }); + + }); +}); \ No newline at end of file diff --git a/test/specs/grapesjs/main.js b/test/specs/grapesjs/main.js index 742846c97..4d5688886 100644 --- a/test/specs/grapesjs/main.js +++ b/test/specs/grapesjs/main.js @@ -169,6 +169,28 @@ define(['GrapesJS', 'PluginManager', 'chai'], editor.testVal.should.equal(htmlString + '5'); }); + it('Set default devices', function() { + config.deviceManager = {}; + config.deviceManager.devices = [ + {name:'1', width: '2'}, + {name:'3', width: '4'}, + ]; + var editor = obj.init(config); + editor.DeviceManager.getAll().length.should.equal(2); + }); + + it('There is no active device', function() { + var editor = obj.init(config); + editor.getDevice().should.be.empty; + }); + + it('Active another device', function() { + var editor = obj.init(config); + editor.setDevice('Tablet'); + editor.getDevice().should.equal('Tablet'); + }); + + }); });