From b4966c26da5310e275dfb5bc4d8dd6b46c31ca82 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 14 Jun 2016 00:24:18 +0200 Subject: [PATCH] Improve sector init --- src/commands/view/OpenLayers.js | 18 ++-- src/commands/view/SelectComponent.js | 2 +- src/demo.js | 4 +- src/style_manager/model/Property.js | 5 + src/style_manager/model/PropertyFactory.js | 48 +++++++++- src/style_manager/model/Sector.js | 67 +++++++++++++- test/specs/style_manager/model/Models.js | 101 ++++++++++++++++++++- 7 files changed, 221 insertions(+), 24 deletions(-) diff --git a/src/commands/view/OpenLayers.js b/src/commands/view/OpenLayers.js index f72c1c40b..f2779ddb0 100644 --- a/src/commands/view/OpenLayers.js +++ b/src/commands/view/OpenLayers.js @@ -8,21 +8,21 @@ define(['Navigator'], function(Layers) { run: function(em, sender) { if(!this.$layers){ - var collection = em.get('Components').getComponent().get('components'), - config = em.get('Config'), - panels = em.get('Panels'), - lyStylePfx = config.layers.stylePrefix || 'nv-'; + var collection = em.DomComponents.getComponent().get('components'), + config = em.getConfig(), + panels = em.Panels, + lyStylePfx = config.layers.stylePrefix || 'nv-'; config.layers.stylePrefix = config.stylePrefix + lyStylePfx; - config.layers.em = em; - var layers = new Layers(collection, config.layers); - this.$layers = layers.render(); + config.layers.em = em.editor; + var layers = new Layers(collection, config.layers); + this.$layers = layers.render(); // Check if panel exists otherwise crate it if(!panels.getPanel('views-container')) - this.panel = panels.addPanel({ id: 'views-container'}); + this.panel = panels.addPanel({id: 'views-container'}); else - this.panel = panels.getPanel('views-container'); + this.panel = panels.getPanel('views-container'); this.panel.set('appendContent', this.$layers).trigger('change:appendContent'); } diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 43dd36e76..f1f5cf53b 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -74,8 +74,8 @@ define(function() { this.removeBadge(); this.clean(); this.editorModel.set('selectedComponent',null); + e.preventDefault(); } - e.preventDefault(); }, /** diff --git a/src/demo.js b/src/demo.js index 59b24e72c..a688c2bd9 100644 --- a/src/demo.js +++ b/src/demo.js @@ -144,8 +144,8 @@ require(['config/require-config'], function() { styleManager : { sectors: [{ - name: 'General555', - buildProps: ['float', 'block', 'position', 'top', 'right', 'left', 'bottom'], + name: 'Dimension555', + buildProps: ['width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', 'margin', 'padding'], extendBuilded: 1, },{ name: 'General', diff --git a/src/style_manager/model/Property.js b/src/style_manager/model/Property.js index a4e4b9392..0a5b97272 100644 --- a/src/style_manager/model/Property.js +++ b/src/style_manager/model/Property.js @@ -24,6 +24,11 @@ define(['backbone', './Layers'], initialize: function(opt) { var o = opt || {}; var type = this.get('type'); + var name = this.get('name'); + var prop = this.get('property'); + + if(!name) + this.set('name', prop.charAt(0).toUpperCase() + prop.slice(1)); switch(type){ case 'stack': diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index a49d49afd..b226a9233 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -6,22 +6,31 @@ define(['backbone'], return { /** * Build props object by their name - * @param {Array} props Array of properties name + * @param {Array|string} props Array of properties name * @return {Array} */ build: function(props){ var objs = []; + + if(typeof props === 'string') + props = [props]; + for (var i = 0, len = props.length; i < len; i++) { var obj = {}; var prop = props[i]; obj.property = prop; - //obj.name = prop.charAt(0).toUpperCase() + prop.slice(1); //Decide type switch(prop){ - case 'float': + case 'float': case 'position': obj.type = 'radio'; break; + case 'display': + obj.type = 'select'; + break; + case 'top': case 'right': case 'bottom': case 'left': + obj.type = 'integer'; + break; } //Default @@ -29,6 +38,22 @@ define(['backbone'], case 'float': obj.defaults = 'none'; break; + case 'display': + obj.defaults = 'block'; + break; + case 'position': + obj.defaults = 'static'; + break; + case 'top': case 'right': case 'bottom': case 'left': + obj.defaults = '0'; + break; + } + + //Units + switch(prop){ + case 'top': case 'right': case 'bottom': case 'left': + obj.units = ['px','%']; + break; } //Options @@ -40,9 +65,24 @@ define(['backbone'], {value: 'right'}, ]; break; + case 'display': + obj.list = [ + {value: 'block'}, + {value: 'inline'}, + {value: 'inline-block'}, + {value: 'none'}, + ]; + break; + case 'position': + obj.list = [ + {value: 'static'}, + {value: 'relative'}, + {value: 'absolute'}, + {value: 'fixed'}, + ]; + break; } - console.log(obj); objs.push(obj); } diff --git a/src/style_manager/model/Sector.js b/src/style_manager/model/Sector.js index a213aa9cb..9385ac16f 100644 --- a/src/style_manager/model/Sector.js +++ b/src/style_manager/model/Sector.js @@ -1,5 +1,5 @@ -define(['backbone', './Properties'], - function(Backbone, Properties) { +define(['backbone', './Properties', './PropertyFactory'], + function(Backbone, Properties, PropertyFactory) { return Backbone.Model.extend({ @@ -7,14 +7,75 @@ define(['backbone', './Properties'], id: '', name: '', open: true, + buildProps: '', + extendBuilded: 1, properties : [], }, initialize: function(opts) { var o = opts || {}; - var props = o.properties || this.get('properties'); + var props = []; + var builded = this.buildProperties(o.buildProps); + + if(!builded) + props = this.get('properties'); + else + props = this.extendProperties(builded); + this.set('properties', new Properties(props)); }, + /** + * Extend properties + * @param {Array} props Start properties + * @return {Array} Final props + * @private + */ + extendProperties: function(props){ + var pLen = props.length; + var mProps = this.get('properties'); + var ext = this.get('extendBuilded'); + + for (var i = 0, len = mProps.length; i < len; i++){ + var mProp = mProps[i]; + var found = 0; + + for(var j = 0; j < pLen; j++){ + var prop = props[j]; + if(mProp.property == prop.property){ + props[j] = ext ? _.extend(prop, mProp) : mProp; + found = 1; + continue; + } + } + + if(!found) + props.push(mProp); + } + + return props; + }, + + /** + * Build properties + * @param {Array} propr Array of props as sting + * @return {Array} + * @private + */ + buildProperties: function(props){ + var r; + var buildP = props || []; + + if(!buildP.length) + return; + + if(!this.propFactory) + this.propFactory = new PropertyFactory(); + + r = this.propFactory.build(buildP); + + return r; + }, + }); }); \ No newline at end of file diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js index 9f153d016..fdaf25f92 100644 --- a/test/specs/style_manager/model/Models.js +++ b/test/specs/style_manager/model/Models.js @@ -20,8 +20,19 @@ define([path + 'Sector', describe('Sector', function() { var obj; + var confToExt; beforeEach(function () { + confToExt = { + buildProps: ['display', 'float'], + properties: [{ + property: 'display', + type: 'radio', + },{ + property: 'color', + type: 'color', + }] + }; obj = new Sector(); }); @@ -44,6 +55,41 @@ define([path + 'Sector', obj.get('properties').length.should.equal(2); }); + it('Build properties', function() { + var res = obj.buildProperties(['display', 'float']); + res.length.should.equal(2); + res[0].should.deep.equal({ + property: 'display', + type: 'select', + defaults: 'block', + list: [ + {value: 'block'}, + {value: 'inline'}, + {value: 'inline-block'}, + {value: 'none'}, + ], + }); + }); + + it('Extend properties', function() { + obj = new Sector(confToExt); + obj.get('properties').length.should.equal(3); + var prop0 = obj.get('properties').at(0); + prop0.get('type').should.equal('radio'); + prop0.get('defaults').should.equal('block'); + }); + + it('Do not extend properties', function() { + console.log('START'); + confToExt.extendBuilded = 0; + obj = new Sector(confToExt); + console.log('END'); + obj.get('properties').length.should.equal(3); + var prop0 = obj.get('properties').at(0); + prop0.get('type').should.equal('radio'); + prop0.get('defaults').should.equal(''); + }); + }); describe('Sectors', function() { @@ -191,17 +237,62 @@ define([path + 'Sector', }); it('Build single prop', function() { - obj.build(['float']).should.deep.equal([{ + obj.build('float').should.deep.equal([{ property: 'float', type: 'radio', defaults: 'none', list: [ - {value: 'none'}, - {value: 'left'}, - {value: 'right'}, - ], + {value: 'none'}, + {value: 'left'}, + {value: 'right'}, + ], + }]); + }); + + it('Build display', function() { + obj.build('display').should.deep.equal([{ + property: 'display', + type: 'select', + defaults: 'block', + list: [ + {value: 'block'}, + {value: 'inline'}, + {value: 'inline-block'}, + {value: 'none'}, + ], + }]); + }); + + it('Build position', function() { + obj.build('position').should.deep.equal([{ + property: 'position', + type: 'radio', + defaults: 'static', + list: [ + {value: 'static'}, + {value: 'relative'}, + {value: 'absolute'}, + {value: 'fixed'}, + ], }]); }); + + it('Build top, left, right, bottom', function() { + var res = { + type: 'integer', + units: ['px','%'], + defaults : '0', + } + res.property = 'top'; + obj.build('top').should.deep.equal([res]); + res.property = 'right'; + obj.build('right').should.deep.equal([res]); + res.property = 'bottom'; + obj.build('bottom').should.deep.equal([res]); + res.property = 'left'; + obj.build('left').should.deep.equal([res]); + }); + }); }