diff --git a/index.html b/index.html index 354c290d7..6b5aa1640 100755 --- a/index.html +++ b/index.html @@ -15,6 +15,18 @@
+
diff --git a/src/demo.js b/src/demo.js index 11c5836c0..08f79d058 100644 --- a/src/demo.js +++ b/src/demo.js @@ -10,7 +10,7 @@ require(['config/require-config'], function() { container : '#gjs', height: '100%', fromElement: true, - //storageManager:{ autoload: 0}, + storageManager:{ autoload: 0}, commands: { defaults : [{ diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index dfa8926b3..f26f3fa67 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -20,6 +20,7 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors'], content: '', style: {}, attributes: {}, + traits: [], }, initialize: function(o, opt) { diff --git a/src/dom_components/model/ComponentImage.js b/src/dom_components/model/ComponentImage.js index 35e72a654..f2cb65ffe 100644 --- a/src/dom_components/model/ComponentImage.js +++ b/src/dom_components/model/ComponentImage.js @@ -4,8 +4,9 @@ define(['./Component'], return Component.extend({ defaults: _.extend({}, Component.prototype.defaults, { - src : '', - droppable : false, + src: '', + droppable: false, + traits: ['alt'], }), }); diff --git a/src/dom_components/model/ComponentLink.js b/src/dom_components/model/ComponentLink.js new file mode 100644 index 000000000..035777b4c --- /dev/null +++ b/src/dom_components/model/ComponentLink.js @@ -0,0 +1,12 @@ +define(['./Component'], + function (Component) { + + return Component.extend({ + + defaults: _.extend({}, Component.prototype.defaults, { + droppable: false, + traits: ['href'], + }), + + }); +}); diff --git a/src/trait_manager/config/config.js b/src/trait_manager/config/config.js new file mode 100644 index 000000000..549912b86 --- /dev/null +++ b/src/trait_manager/config/config.js @@ -0,0 +1,9 @@ +define(function () { + return { + stylePrefix: 'trt-', + + // Text to show in case no element selected + textNoElement: 'Select an element before using Style Manager', + + }; +}); diff --git a/src/trait_manager/main.js b/src/trait_manager/main.js new file mode 100644 index 000000000..aeb11ece5 --- /dev/null +++ b/src/trait_manager/main.js @@ -0,0 +1,180 @@ +define(function(require) { + + return function(){ + var c = {}, + defaults = require('./config/config'), + Sectors = require('./model/Traits'), + SectorsView = require('./view/SectorsView'); + var sectors, SectView; + + return { + + /** + * Name of the module + * @type {String} + * @private + */ + name: 'TraitManager', + + /** + * Initialize module. Automatically called with a new instance of the editor + * @param {Object} config Configurations + */ + init: function(config) { + c = config || {}; + for (var name in defaults) { + if (!(name in c)) + c[name] = defaults[name]; + } + + var ppfx = c.pStylePrefix; + if(ppfx) + c.stylePrefix = ppfx + c.stylePrefix; + + sectors = new Sectors(c.sectors); + SectView = new SectorsView({ + collection: sectors, + target: c.em, + config: c, + }); + 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} + * */ + render: function(){ + return SectView.render().el; + }, + + }; + }; +}); diff --git a/src/trait_manager/model/Trait.js b/src/trait_manager/model/Trait.js new file mode 100644 index 000000000..d0dd04270 --- /dev/null +++ b/src/trait_manager/model/Trait.js @@ -0,0 +1,19 @@ +define(['backbone'], + function(Backbone) { + + return Backbone.Model.extend({ + + defaults: { + type: 'text', // text, number, range, select + label: '', + name: '', + value: '', + options: [], + }, + + initialize: function(){ + + }, + + }); + }); diff --git a/src/trait_manager/model/Traits.js b/src/trait_manager/model/Traits.js new file mode 100644 index 000000000..07de326bd --- /dev/null +++ b/src/trait_manager/model/Traits.js @@ -0,0 +1,17 @@ +define(['backbone','./Trait'], + function (Backbone, Trait) { + + return Backbone.Collection.extend({ + + model: Trait, + + add: function(models, opt){ + if(typeof models === 'string'){ + //TraitFactory('href') + } + + return Backbone.Collection.prototype.add.apply(this, [models, opt]); + }, + + }); +}); diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js new file mode 100644 index 000000000..58ca65b46 --- /dev/null +++ b/src/trait_manager/view/TraitView.js @@ -0,0 +1,30 @@ +define(['backbone'], function (Backbone) { + + return Backbone.View.extend({ + + events:{ + 'change': 'change' + }, + + initialize: function(o) { + }, + + /** + * On change callback + * @param {Object} el Test + * @private + */ + onChange: function(elView) { + var m = this.model; + var attrs = elView.model.get('attributes'); + attrs[m.get('name')] = m.get('value'); + elView.model.set('attributes', attrs); + }, + + render : function() { + return this; + }, + + }); + +});