diff --git a/src/demo.js b/src/demo.js index a688c2bd9..279d27780 100644 --- a/src/demo.js +++ b/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, diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index b226a9233..255227622 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/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); } diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js index fdaf25f92..c0932a014 100644 --- a/test/specs/style_manager/model/Models.js +++ b/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]); + }); + }); }