diff --git a/src/style_manager/main.js b/src/style_manager/main.js index ea1663f7b..4059f2d5a 100644 --- a/src/style_manager/main.js +++ b/src/style_manager/main.js @@ -1,9 +1,52 @@ /** - * @class StyleManager - * @param {Object} Configurations * - * @return {Object} - * */ + * - [addSector](#addsector) + * - [getSector](#getsector) + * - [getSectors](#getsectors) + * - [addProperty](#addproperty) + * - [getProperty](#getproperty) + * - [getProperties](#getproperties) + * - [render](#render) + * + * With Style Manager you basically build categories (called sectors) of CSS properties which could + * be used to custom components and classes. + * You can init the editor with all sectors and properties via configuration + * + * ```js + * var editor = new GrapesJS({ + * ... + * styleManager: {...} // Check below for the possible properties + * ... + * }); + * ``` + * + * Before using methods you should get first the module from the editor instance, in this way: + * + * ```js + * var styleManager = editor.get('StyleManager'); + * ``` + * + * @module StyleManager + * @param {Object} config Configurations + * @param {Array} [config.sectors=[]] Array of possible sectors + * @example + * ... + * styleManager: { + * sectors: [{ + * id: 'dim', + * name: 'Dimension', + * properties: [{ + * name: 'Width', + * property: 'width', + * type: 'integer', + * units: ['px', '%'], + * defaults: 'auto', + * min: 0, + }], + * }], + * } + * ... + */ define(function(require) { var StyleManager = function(config){ @@ -82,6 +125,8 @@ define(function(require) { * @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 diff --git a/src/style_manager/model/Sectors.js b/src/style_manager/model/Sectors.js index a6f090ce9..29b0324be 100644 --- a/src/style_manager/model/Sectors.js +++ b/src/style_manager/model/Sectors.js @@ -1,23 +1,21 @@ define([ 'backbone','./Sector','./Properties'], function (Backbone,Sector, Properties) { - /** - * @class Sectors - * */ + return Backbone.Collection.extend({ - + model: Sector, - + initialize: function(collection) { - + _.each(collection, function(obj){ - + if(obj.properties instanceof Array){ obj.properties = new Properties(obj.properties); } - + },this); - + }, - + }); }); diff --git a/src/style_manager/view/SectorsView.js b/src/style_manager/view/SectorsView.js index 79db81e05..2b4505e0e 100644 --- a/src/style_manager/view/SectorsView.js +++ b/src/style_manager/view/SectorsView.js @@ -1,8 +1,6 @@ define(['backbone','./SectorView'], function (Backbone, SectorView) { - /** - * @class sectorsView - * */ + return Backbone.View.extend({ initialize: function(o) { @@ -20,6 +18,7 @@ define(['backbone','./SectorView'], /** * Fired when target is updated + * @private */ targetUpdated: function() { var el = this.target.get('selectedComponent');