diff --git a/src/demo.js b/src/demo.js index da519fc2a..08f79d058 100644 --- a/src/demo.js +++ b/src/demo.js @@ -92,21 +92,39 @@ require(['config/require-config'], function() { open: false, buildProps: ['transition', 'perspective', 'transform'], },{ - name: 'Dimension', - open: false, - properties:[{ - name : 'Center block', - property : 'margin', - type : 'select', - defaults : '0', - list : [{ - value : '0', - name : 'Normal', - },{ - value : '0 auto', - name : 'Center', - }], - }], + name: 'Dimension', + open: false, + buildProps: ['margin'], + properties:[{ + name: 'Marginnnn', + property: 'margin', + type: 'composite', + properties:[{ + name: 'Top', + property: 'margin-top', + },{ + name: 'Right', + property: 'margin-right', + },{ + name: 'Bottom', + property: 'margin-bottom', + },{ + name: 'Left', + property: 'margin-left', + },], + }/*{ + name : 'Center blocksss', + property : 'margins', + type : 'select', + defaults : '0', + list : [{ + value : '0', + name : 'Normal', + },{ + value : '0 auto', + name : 'Center', + }], + }*/], },{ name: 'Flex', open: false, @@ -287,4 +305,3 @@ require(['config/require-config'], function() { }); }); - diff --git a/src/style_manager/model/Property.js b/src/style_manager/model/Property.js index f800fe51e..161d0c094 100644 --- a/src/style_manager/model/Property.js +++ b/src/style_manager/model/Property.js @@ -1,5 +1,5 @@ -define(['backbone', './Layers'], - function(Backbone, Layers) { +define(['backbone', './Layers', 'require'], + function(Backbone, Layers, require) { return Backbone.Model.extend({ @@ -26,10 +26,16 @@ define(['backbone', './Layers'], var type = this.get('type'); var name = this.get('name'); var prop = this.get('property'); + var props = this.get('properties'); if(!name) this.set('name', prop.charAt(0).toUpperCase() + prop.slice(1).replace(/-/g,' ')); + if(props.length){ + var Properties = require('./Properties'); + this.set('properties', new Properties(props)); + } + switch(type){ case 'stack': this.set('layers', new Layers()); @@ -59,4 +65,4 @@ define(['backbone', './Layers'], }, }); - }); \ No newline at end of file + }); diff --git a/src/style_manager/model/Sector.js b/src/style_manager/model/Sector.js index 9385ac16f..5b720fa13 100644 --- a/src/style_manager/model/Sector.js +++ b/src/style_manager/model/Sector.js @@ -28,13 +28,16 @@ define(['backbone', './Properties', './PropertyFactory'], /** * Extend properties * @param {Array} props Start properties + * @param {Array} moProps Model props + * @param {Boolean} ex Returns the same amount of passed model props * @return {Array} Final props * @private */ - extendProperties: function(props){ + extendProperties: function(props, moProps, ex){ var pLen = props.length; - var mProps = this.get('properties'); + var mProps = moProps || this.get('properties'); var ext = this.get('extendBuilded'); + var isolated = []; for (var i = 0, len = mProps.length; i < len; i++){ var mProp = mProps[i]; @@ -43,17 +46,25 @@ define(['backbone', './Properties', './PropertyFactory'], for(var j = 0; j < pLen; j++){ var prop = props[j]; if(mProp.property == prop.property){ + // Check for nested properties + var mPProps = mProp.properties; + if(mPProps && mPProps.length){ + mProp.properties = this.extendProperties(prop.properties, mPProps, 1); + } props[j] = ext ? _.extend(prop, mProp) : mProp; + isolated[j] = props[j]; found = 1; continue; } } - if(!found) + if(!found){ props.push(mProp); + isolated.push(mProp); + } } - return props; + return ex ? isolated : props; }, /** @@ -78,4 +89,4 @@ define(['backbone', './Properties', './PropertyFactory'], }, }); -}); \ No newline at end of file +}); diff --git a/src/style_manager/view/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js index 6deacea16..dd363bdd4 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/src/style_manager/view/PropertyCompositeView.js @@ -33,9 +33,7 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyComposite.html this.$input = $('', {value: 0, type: 'hidden' }); if(!this.props){ - var Properties = require('./../model/Properties'); - this.props = new Properties(props); - this.model.set('properties', this.props); + this.props = this.model.get('properties'); } if(!this.$props){ diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js index 74466019f..3538da36e 100644 --- a/test/specs/style_manager/model/Models.js +++ b/test/specs/style_manager/model/Models.js @@ -88,6 +88,30 @@ define([path + 'Sector', prop0.get('defaults').should.equal(''); }); + it('Extend composed properties', function() { + obj = new Sector({ + buildProps: ['margin', 'float'], + properties: [{ + property: 'margin', + properties:[{ + name: 'Top', + property: 'margin-top', + },{ + property: 'margin-right', + }] + }] + }); + var sectProps = obj.get('properties'); + sectProps.length.should.equal(2); + var prop0 = obj.get('properties').at(0); + var propProps = prop0.get('properties'); + + propProps.length.should.equal(2); + var propTop = propProps.at(0); + propTop.get('name').should.equal('Top'); + propTop.get('type').should.equal('integer'); + }); + }); describe('Sectors', function() { @@ -802,4 +826,4 @@ define([path + 'Sector', } }; -}); \ No newline at end of file +});