Improve sector init

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

src/commands/view/SelectComponent.js

@@ -74,8 +74,8 @@ define(function() {
 					this.removeBadge();
 					this.clean();
 					this.editorModel.set('selectedComponent',null);
+					e.preventDefault();
 				}
-				e.preventDefault();
 			},
 
 			/**

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',

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':

src/style_manager/model/PropertyFactory.js

@@ -6,22 +6,31 @@ define(['backbone'],
       return {
         /**
          * Build props object by their name
-         * @param  {Array<string>} props Array of properties name
+         * @param  {Array<string>|string} props Array of properties name
          * @return {Array<Object>}
          */
         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);
           }
 

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<Object>} props Start properties
+       * @return {Array<Object>} 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<string>} propr Array of props as sting
+       * @return {Array<Object>}
+       * @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;
+      },
+
     });
 });

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