Update traits

src/trait_manager/main.js

@@ -3,8 +3,8 @@ define(function(require) {
 	return function(){
 		var c = {},
 		defaults = require('./config/config'),
-		Sectors = require('./model/Traits'),
-		SectorsView = require('./view/SectorsView');
+		Traits = require('./model/Traits'),
+		TraitsView = require('./view/TraitsView');
 		var sectors, SectView;
 
 	  return {
@@ -31,7 +31,7 @@ define(function(require) {
 				if(ppfx)
 					c.stylePrefix = ppfx + c.stylePrefix;
 
-				sectors = new Sectors(c.sectors);
+				sectors = new Traits(c.traits);
 	  		SectView 	= new SectorsView({
 					collection: sectors,
 					target: c.em,
@@ -40,133 +40,6 @@ define(function(require) {
         return this;
       },
 
-	  	/**
-			 * Add new sector to the collection. If the sector with the same id already exists,
-			 * that one will be returned
-			 * @param {string} id Sector id
-			 * @param	{Object} sector	Object representing sector
-			 * @param	{string} [sector.name='']	Sector's label
-			 * @param	{Boolean} [sector.open=true] Indicates if the sector should be opened
-			 * @param	{Array<Object>} [sector.properties=[]] Array of properties
-			 * @return {Sector} Added Sector
-			 * @example
-			 * var sector = styleManager.addSector('mySector',{
-			 * 	name: 'My sector',
-			 * 	open: true,
-			 * 	properties: [{ name: 'My property'}]
-			 * });
-			 * */
-			addSector: function(id, sector){
-				var result = this.getSector(id);
-				if(!result){
-					sector.id = id;
-					result = sectors.add(sector);
-				}
-				return result;
-			},
-
-			/**
-			 * Get sector by id
-			 * @param {string} id	Sector id
-			 * @return {Sector|null}
-			 * @example
-			 * var sector = styleManager.getSector('mySector');
-			 * */
-			getSector: function(id){
-				var res	= sectors.where({id: id});
-				return res.length ? res[0] : null;
-			},
-
-			/**
-			 * Get all sectors
-			 * @return {Sectors} Collection of sectors
-			 * */
-			getSectors: function(){
-				return sectors;
-			},
-
-			/**
-			 * Add property to the sector identified by id
-			 * @param {string} sectorId Sector id
-			 * @param {Object} property Property object
-			 * @param {string} [property.name=''] Name of the property
-			 * @param {string} [property.property=''] CSS property, eg. `min-height`
-			 * @param {string} [property.type=''] Type of the property: integer | radio | select | color | file | composite | stack
-			 * @param {Array<string>} [property.units=[]] Unit of measure available, eg. ['px','%','em']. Only for integer type
-			 * @param {string} [property.unit=''] Default selected unit from `units`. Only for integer type
-			 * @param {number} [property.min=null] Min possible value. Only for integer type
-			 * @param {number} [property.max=null] Max possible value. Only for integer type
-			 * @param {string} [property.defaults=''] Default value
-			 * @param {string} [property.info=''] Some description
-			 * @param {string} [property.icon=''] Class name. If exists no text will be displayed
-			 * @param {Boolean} [property.preview=false] Show layers preview. Only for stack type
-			 * @param {string} [property.functionName=''] Indicates if value need to be wrapped in some function, for istance `transform: rotate(90deg)`
-			 * @param {Array<Object>} [property.properties=[]] Nested properties for composite and stack type
-			 * @param {Array<Object>} [property.layers=[]] Layers for stack properties
-			 * @param {Array<Object>} [property.list=[]] List of possible options for radio and select types
-			 * @return {Property|null} Added Property or `null` in case sector doesn't exist
-			 * @example
-			 * var property = styleManager.addProperty('mySector',{
-			 * 	name: 'Minimum height',
-			 * 	property: 'min-height',
-			 * 	type: 'select',
-			 * 	defaults: '100px',
-			 * 	list: [{
-			 * 		value: '100px',
-			 * 		name: '100',
-			 * 	 },{
-			 * 	 	value: '200px',
-			 * 	 	name: '200',
-			 * 	 }],
-			 * });
-			 */
-			addProperty: function(sectorId, property){
-				var prop = null;
-				var sector = this.getSector(sectorId);
-
-				if(sector)
-					prop = sector.get('properties').add(property);
-
-				return prop;
-			},
-
-			/**
-			 * Get property by its CSS name and sector id
-			 * @param  {string} sectorId Sector id
-			 * @param  {string} name CSS property name, eg. 'min-height'
-			 * @return {Property|null}
-			 * @example
-			 * var property = styleManager.getProperty('mySector','min-height');
-			 */
-			getProperty: function(sectorId, name){
-				var prop = null;
-				var sector = this.getSector(sectorId);
-
-				if(sector){
-					prop = sector.get('properties').where({property: name});
-					prop = prop.length == 1 ? prop[0] : prop;
-				}
-
-				return prop;
-			},
-
-			/**
-			 * Get properties of the sector
-			 * @param  {string} sectorId Sector id
-			 * @return {Properties} Collection of properties
-			 * @example
-			 * var properties = styleManager.getProperties('mySector');
-			 */
-			getProperties: function(sectorId){
-				var props = null;
-				var sector = this.getSector(sectorId);
-
-				if(sector)
-					props = sector.get('properties');
-
-				return props;
-			},
-
 			/**
 			 * Render sectors and properties
 			 * @return	{HTMLElement}

src/trait_manager/view/TraitView.js

@@ -3,10 +3,12 @@ define(['backbone'], function (Backbone) {
 	return Backbone.View.extend({
 
 		events:{
-			'change': 'change'
+			'change': 'onChange'
 		},
 
 		initialize: function(o) {
+			this.config = o.config || {};
+			this.pfx = this.config.stylePrefix || '';
 		},
 
 		/**
@@ -21,7 +23,23 @@ define(['backbone'], function (Backbone) {
 			elView.model.set('attributes', attrs);
 		},
 
+		/**
+		 * Render label
+		 * @private
+		 */
+		renderLabel: function() {
+			this.$el.html(this.templateLabel({
+				pfx		: this.pfx,
+				ppfx	: this.ppfx,
+				icon	: this.model.get('icon'),
+				info	: this.model.get('info'),
+				label	: this.model.get('name'),
+			}));
+		},
+
 		render : function() {
+			this.renderLabel();
+			this.renderField();
 			return this;
 		},