Add StyleManager JSDoc

src/style_manager/main.js

@@ -1,79 +1,165 @@
+/**
+ * @class 	StyleManager
+ * @param 	{Object} Configurations
+ *
+ * @return	{Object}
+ * */
 define(function(require) {
-	/**
+
-	 * @class 	StyleManager
+	var StyleManager = function(config){
-	 * @param 	{Object} Configurations
+		var c = config || {},
-	 *
+			defaults = require('./config/config'),
-	 * @return	{Object}
+			Sectors = require('./model/Sectors'),
- 	 * */
+			SectorsView = require('./view/SectorsView');
-	function StyleManager(config)
-	{
-		var c				= config || {},
-			defaults		= require('./config/config'),
-			Sectors			= require('./model/Sectors'),
-			SectorsView		= require('./view/SectorsView');
 
 		for (var name in defaults) {
 			if (!(name in c))
 				c[name] = defaults[name];
 		}
 
-		this.sectors		= new Sectors(c.sectors);
+		var sectors = new Sectors(c.sectors);
-		var obj				= {
+		var obj = {
-				collection	: this.sectors,
+				collection: sectors,
-				target		: c.target,
+				target: c.target,
-		    config		: c,
+		    config: c,
 		};
 
-	  this.SectorsView 	= new SectorsView(obj);
+	  var SectView 	= new SectorsView(obj);
-	}
 
-	StyleManager.prototype	= {
+	  return {
 
-			/**
+	  	/**
-			 * Get all sectors
+			 * Add new sector to the collection. If the sector with the same id already exists,
-			 *
+			 * that one will be returned
-			 * @return	{Sectors}
+			 * @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'}]
+			 * });
 			 * */
-			getSectors	: function()
+			addSector: function(id, sector){
-			{
+				var result = this.getSector(id);
-				return this.sectors;
+				if(!result){
+					sector.id = id;
+					result = sectors.add(sector);
+				}
+				return result;
 			},
 
 			/**
 			 * Get sector by id
-			 * @param	{String}	id	Object id
+			 * @param {string} id	Sector id
-			 *
+			 * @return {Sector|null}
-			 * @return	{Sector}|{null}
+			 * @example
+			 * var sector = styleManager.getSector('mySector');
 			 * */
-			getSector	: function(id)
+			getSector: function(id){
-			{
+				var res	= sectors.where({id: id});
-				var res	= this.sectors.where({id: id});
 				return res.length ? res[0] : null;
 			},
 
 			/**
-			 * Add new Sector
+			 * Get all sectors
-			 * @param	{String}	id	Object id
+			 * @return {Sectors} Collection of sectors
-			 * @param	{Object}	obj	Object data
-			 *
-			 * @return	{Sector}
 			 * */
-			addSector	: function(id, obj)
+			getSectors: function(){
-			{
+				return sectors;
-				if(!this.getSector(id)){
-					obj.id	= id;
-					return this.sectors.add(obj);
-				}
 			},
 
 			/**
-			 * Render sectors
+			 * Add property to the sector identified by id
-			 *
+			 * @param {string} sectorId Sector id
-			 * @return	{String}
+			 * @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 {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 = sectors.get('properties').where({property: name});
+
+				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 = sectors.get('properties');
+
+				return props;
+			},
+
+			/**
+			 * Render sectors and properties
+			 * @return	{HTMLElement}
 			 * */
-			render		: function(){
+			render: function(){
-				return this.SectorsView.render().$el;
+				return SectView.render().el;
 			},
+
+		};
 	};
 
 	return StyleManager;

src/style_manager/model/Property.js

@@ -1,32 +1,24 @@
 define(['backbone'],
 	function(Backbone) {
-		/** 
+
-		 * @class Property
-		 * */
 		return Backbone.Model.extend({
-			
+
 			defaults: {
-				name : 			'', 			//Name of the property
+				name : '',
-				property: 		'',				//CSS property, eg. min-height
+				property: '',
-				type: 			'',				//Type of the property: integer | radio | select | color | file | composite | stack
+				type: '',
-				units: 			[],				//Unit of measure available, eg. ['px','%','em']
+				units: [],
-				unit: 			'',				//Unit selected
+				unit: '',
-				defaults: 		'',				//Default value
+				defaults: '',
-				info: 			'',				//Description HTML
+				info: '',
-				value: 			'',				//Selected value of the property
+				value: '', //Selected value of the property (?)
-				icon: 			'',				//If exists, a custom class will be attached and no text will be displayed
+				icon: '',
-				preview:		false,			//Show layers preview. Available only for stack property
+				preview: false,
-				functionName:	'',				//Indicates if value need to be wrapped in some function, for istance: transform: rotate(90deg)
+				functionName:	'',
-				properties : 	{}, 			//For composite properties
+				properties: {},
-				layers : 		{}, 			//For stack properties
+				layers: {},
-				list: 			[],				//If exits, ignore type attribute ad display as multi-optional property
+				list: [],
-												//Any element could be as: 
-												//	value : 'auto', 
-												//	icon: 'auto', 
-												//	defaults : true, 
-												//  style:	'',			//custom style to the value of propriety
-												//	name:''				//alternative view to value
 			}
-		
+
-        });
+    });
 	});

src/style_manager/model/Sector.js

@@ -1,15 +1,14 @@
 define(['backbone'],
 	function(Backbone) {
-		/** 
+
-		 * @class Sector
-		 * */
 		return Backbone.Model.extend({
-			
+
 			defaults: {
-				name : '', 			
+				id: '',
-				open: true,		
+				name: '',
-				properties : {},
+				open: true,
+				properties : [],
 			}
-		
+
-        });
+    });
-	});
+});

test/specs/dom_components/main.js

@@ -3,7 +3,7 @@ var modulePath = './../../../test/specs/dom_components';
 define([
 				'DomComponents',
 				 modulePath + '/model/Component',
-				 modulePath + '/view/ComponentView',
+				 modulePath + '/view/ComponentV',
 				 modulePath + '/view/ComponentsView',
 				 modulePath + '/view/ComponentTextView',
 				 modulePath + '/view/ComponentImageView'