Extend also nested properties in Style Manager

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() {
 
 	});
 });
-

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'],
 			},
 
     });
-	});
+	});

src/style_manager/model/Sector.js

@@ -28,13 +28,16 @@ define(['backbone', './Properties', './PropertyFactory'],
       /**
        * Extend properties
        * @param {Array<Object>} props Start properties
+       * @param {Array<Object>} moProps Model props
+       * @param {Boolean} ex Returns the same amount of passed model props
        * @return {Array<Object>} 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'],
       },
 
     });
-});
+});

src/style_manager/view/PropertyCompositeView.js

@@ -33,9 +33,7 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyComposite.html
 					this.$input = $('<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){

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',
       }
     };
 
-});
+});