Add more property defaults

src/demo.js

@@ -149,6 +149,7 @@ require(['config/require-config'], function() {
 					extendBuilded: 1,
 				},{
 					name: 'General',
+					open: false,
 					properties:[{
 							name		: 'Alignment',
 							property	: 'float',
@@ -284,7 +285,7 @@ require(['config/require-config'], function() {
 											defaults 	: 0,
 										},{
 											name		: 'Left',
-											property	: 'margin-Left',
+											property	: 'margin-left',
 											type		: 'integer',
 											units		: ['px','%'],
 											defaults 	: 0,

src/style_manager/model/PropertyFactory.js

@@ -20,7 +20,7 @@ define(['backbone'],
             var prop = props[i];
             obj.property = prop;
 
-            //Decide type
+            // Type
             switch(prop){
               case 'float': case 'position':
                 obj.type = 'radio';
@@ -29,11 +29,18 @@ define(['backbone'],
                 obj.type = 'select';
                 break;
               case 'top': case 'right': case 'bottom': case 'left':
+              case 'margin-top': case 'margin-right': case 'margin-bottom': case 'margin-left':
+              case 'padding-top': case 'padding-right': case 'padding-bottom': case 'padding-left':
+              case 'min-height': case 'min-width': case 'max-height': case 'max-width':
+              case 'width': case 'height':
                 obj.type = 'integer';
                 break;
+              case 'margin': case 'padding':
+                obj.type = 'composite';
+                break;
             }
 
-            //Default
+            // Default
             switch(prop){
               case 'float':
                 obj.defaults = 'none';
@@ -45,17 +52,35 @@ define(['backbone'],
                 obj.defaults = 'static';
                 break;
               case 'top': case 'right': case 'bottom': case 'left':
-                obj.defaults = '0';
+              case 'margin-top': case 'margin-right': case 'margin-bottom': case 'margin-left':
+              case 'padding-top': case 'padding-right': case 'padding-bottom': case 'padding-left':
+                obj.defaults = 0;
+                break;
+              case 'min-height': case 'min-width': case 'max-height': case 'max-width':
+              case 'width': case 'height':
+                obj.defaults = 'auto';
                 break;
             }
 
             //Units
             switch(prop){
               case 'top': case 'right': case 'bottom': case 'left':
+              case 'margin-top': case 'margin-right': case 'margin-bottom': case 'margin-left':
+              case 'padding-top': case 'padding-right': case 'padding-bottom': case 'padding-left':
+              case 'min-height': case 'min-width': case 'max-height': case 'max-width':
+              case 'width': case 'height':
                 obj.units = ['px','%'];
                 break;
             }
 
+            // Min/Max
+            switch(prop){
+              case 'min-height': case 'min-width': case 'max-height': case 'max-width':
+              case 'width': case 'height':
+                obj.min = 0;
+                break;
+            }
+
             //Options
             switch(prop){
               case 'float':
@@ -83,6 +108,16 @@ define(['backbone'],
                 break;
             }
 
+            // Properties
+            switch(prop){
+              case 'margin':
+                obj.properties = this.build(['margin-top', 'margin-right', 'margin-bottom', 'margin-left']);
+                break;
+              case 'padding':
+                obj.properties = this.build(['padding-top', 'padding-right', 'padding-bottom', 'padding-left']);
+                break;
+            }
+
             objs.push(obj);
           }
 

test/specs/style_manager/model/Models.js

@@ -80,10 +80,8 @@ define([path + 'Sector',
           });
 
           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');
@@ -281,7 +279,7 @@ define([path + 'Sector',
             var res = {
               type: 'integer',
               units: ['px','%'],
-              defaults : '0',
+              defaults : 0,
             }
             res.property = 'top';
             obj.build('top').should.deep.equal([res]);
@@ -293,6 +291,85 @@ define([path + 'Sector',
             obj.build('left').should.deep.equal([res]);
           });
 
+          it('Build width e height family', function() {
+            var res = {
+              type: 'integer',
+              units: ['px','%'],
+              defaults: 'auto',
+              min: 0,
+            }
+            res.property = 'width';
+            obj.build('width').should.deep.equal([res]);
+            res.property = 'height';
+            obj.build('height').should.deep.equal([res]);
+            res.property = 'min-height';
+            obj.build('min-height').should.deep.equal([res]);
+            res.property = 'max-height';
+            obj.build('max-height').should.deep.equal([res]);
+            res.property = 'min-width';
+            obj.build('min-width').should.deep.equal([res]);
+            res.property = 'max-width';
+            obj.build('max-width').should.deep.equal([res]);
+          });
+
+          it('Build margin', function() {
+            var res = {
+              property: 'margin',
+              type: 'composite',
+              properties:[{
+                      property  : 'margin-top',
+                      type    : 'integer',
+                      units   : ['px','%'],
+                      defaults  : 0,
+                    },{
+                      property  : 'margin-right',
+                      type    : 'integer',
+                      units   : ['px','%'],
+                      defaults  : 0,
+                    },{
+                      property  : 'margin-bottom',
+                      type    : 'integer',
+                      units   : ['px','%'],
+                      defaults  : 0,
+                    },{
+                      property  : 'margin-left',
+                      type    : 'integer',
+                      units   : ['px','%'],
+                      defaults  : 0,
+                    },],
+            };
+            obj.build('margin').should.deep.equal([res]);
+          });
+
+          it('Build padding', function() {
+            var res = {
+              property: 'padding',
+              type: 'composite',
+              properties:[{
+                      property  : 'padding-top',
+                      type    : 'integer',
+                      units   : ['px','%'],
+                      defaults  : 0,
+                    },{
+                      property  : 'padding-right',
+                      type    : 'integer',
+                      units   : ['px','%'],
+                      defaults  : 0,
+                    },{
+                      property  : 'padding-bottom',
+                      type    : 'integer',
+                      units   : ['px','%'],
+                      defaults  : 0,
+                    },{
+                      property  : 'padding-left',
+                      type    : 'integer',
+                      units   : ['px','%'],
+                      defaults  : 0,
+                    },],
+            };
+            obj.build('padding').should.deep.equal([res]);
+          });
+
         });
 
       }