From e4c97bf01986f129682a7856e41baaa6873fee19 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 30 Sep 2016 14:59:59 +0200 Subject: [PATCH] Update traits --- src/trait_manager/main.js | 133 +--------------------------- src/trait_manager/view/TraitView.js | 20 ++++- 2 files changed, 22 insertions(+), 131 deletions(-) diff --git a/src/trait_manager/main.js b/src/trait_manager/main.js index aeb11ece5..b8ea3b439 100644 --- a/src/trait_manager/main.js +++ b/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} [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} [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} [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 = 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} diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js index 58ca65b46..e4bed5058 100644 --- a/src/trait_manager/view/TraitView.js +++ b/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; },