From edba4fc0dd1953a1ad0550bedd6860596ea608ee Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 28 Apr 2016 22:29:27 +0200 Subject: [PATCH] Add StyleManager JSDoc --- src/style_manager/main.js | 184 +++++++++++++----- src/style_manager/model/Property.js | 44 ++--- src/style_manager/model/Sector.js | 19 +- test/specs/dom_components/main.js | 2 +- .../view/{componentView.js => ComponentV.js} | 0 5 files changed, 163 insertions(+), 86 deletions(-) rename test/specs/dom_components/view/{componentView.js => ComponentV.js} (100%) diff --git a/src/style_manager/main.js b/src/style_manager/main.js index 3303b7c02..ea1663f7b 100644 --- a/src/style_manager/main.js +++ b/src/style_manager/main.js @@ -1,79 +1,165 @@ +/** + * @class StyleManager + * @param {Object} Configurations + * + * @return {Object} + * */ define(function(require) { - /** - * @class StyleManager - * @param {Object} Configurations - * - * @return {Object} - * */ - function StyleManager(config) - { - var c = config || {}, - defaults = require('./config/config'), - Sectors = require('./model/Sectors'), - SectorsView = require('./view/SectorsView'); + + var StyleManager = function(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 obj = { - collection : this.sectors, - target : c.target, - config : c, + var sectors = new Sectors(c.sectors); + var obj = { + collection: sectors, + target: c.target, + config: c, }; - this.SectorsView = new SectorsView(obj); - } + var SectView = new SectorsView(obj); - StyleManager.prototype = { + return { - /** - * Get all sectors - * - * @return {Sectors} + /** + * 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} [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() - { - return this.sectors; + 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 Object id - * - * @return {Sector}|{null} + * @param {string} id Sector id + * @return {Sector|null} + * @example + * var sector = styleManager.getSector('mySector'); * */ - getSector : function(id) - { - var res = this.sectors.where({id: id}); + getSector: function(id){ + var res = sectors.where({id: id}); return res.length ? res[0] : null; }, /** - * Add new Sector - * @param {String} id Object id - * @param {Object} obj Object data - * - * @return {Sector} + * Get all sectors + * @return {Sectors} Collection of sectors * */ - addSector : function(id, obj) - { - if(!this.getSector(id)){ - obj.id = id; - return this.sectors.add(obj); - } + getSectors: function(){ + return sectors; }, /** - * Render sectors - * - * @return {String} + * 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} [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} [property.properties=[]] Nested properties for composite and stack type + * @param {Array} [property.layers=[]] Layers for stack properties + * @param {Array} [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(){ - return this.SectorsView.render().$el; + render: function(){ + return SectView.render().el; }, + + }; }; return StyleManager; diff --git a/src/style_manager/model/Property.js b/src/style_manager/model/Property.js index 4152f3a8c..1b00a7226 100644 --- a/src/style_manager/model/Property.js +++ b/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 - property: '', //CSS property, eg. min-height - type: '', //Type of the property: integer | radio | select | color | file | composite | stack - units: [], //Unit of measure available, eg. ['px','%','em'] - unit: '', //Unit selected - defaults: '', //Default value - info: '', //Description HTML - value: '', //Selected value of the property - icon: '', //If exists, a custom class will be attached and no text will be displayed - preview: false, //Show layers preview. Available only for stack property - functionName: '', //Indicates if value need to be wrapped in some function, for istance: transform: rotate(90deg) - properties : {}, //For composite properties - layers : {}, //For stack properties - list: [], //If exits, ignore type attribute ad display as multi-optional property - //Any element could be as: - // value : 'auto', - // icon: 'auto', - // defaults : true, - // style: '', //custom style to the value of propriety - // name:'' //alternative view to value + name : '', + property: '', + type: '', + units: [], + unit: '', + defaults: '', + info: '', + value: '', //Selected value of the property (?) + icon: '', + preview: false, + functionName: '', + properties: {}, + layers: {}, + list: [], } - - }); + + }); }); \ No newline at end of file diff --git a/src/style_manager/model/Sector.js b/src/style_manager/model/Sector.js index 85cbf4fab..b800bd34c 100644 --- a/src/style_manager/model/Sector.js +++ b/src/style_manager/model/Sector.js @@ -1,15 +1,14 @@ define(['backbone'], function(Backbone) { - /** - * @class Sector - * */ + return Backbone.Model.extend({ - + defaults: { - name : '', - open: true, - properties : {}, + id: '', + name: '', + open: true, + properties : [], } - - }); - }); \ No newline at end of file + + }); +}); \ No newline at end of file diff --git a/test/specs/dom_components/main.js b/test/specs/dom_components/main.js index fef7a7636..074974f38 100644 --- a/test/specs/dom_components/main.js +++ b/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' diff --git a/test/specs/dom_components/view/componentView.js b/test/specs/dom_components/view/ComponentV.js similarity index 100% rename from test/specs/dom_components/view/componentView.js rename to test/specs/dom_components/view/ComponentV.js