From 0bfbd7b8fcde133cf216dd929ecdd56bb98a48cd Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 6 May 2017 12:46:34 +0200 Subject: [PATCH] Hide not stylable properties --- src/style_manager/main.js | 374 ++++++++++++------------- src/style_manager/view/PropertyView.js | 21 +- 2 files changed, 198 insertions(+), 197 deletions(-) diff --git a/src/style_manager/main.js b/src/style_manager/main.js index b1591dd7c..382e1ad6f 100644 --- a/src/style_manager/main.js +++ b/src/style_manager/main.js @@ -14,9 +14,9 @@ * * ```js * var editor = grapesjs.init({ - * ... + * ... * styleManager: {...} // Check below for the possible properties - * ... + * ... * }); * ``` * @@ -32,45 +32,45 @@ * @example * ... * styleManager: { - * sectors: [{ - * id: 'dim', + * sectors: [{ + * id: 'dim', * name: 'Dimension', * properties: [{ - * name: 'Width', - * property: 'width', - * type: 'integer', - * units: ['px', '%'], - * defaults: 'auto', - * min: 0, + * name: 'Width', + * property: 'width', + * type: 'integer', + * units: ['px', '%'], + * defaults: 'auto', + * min: 0, }], - * }], + * }], * } * ... */ define(function(require) { - return function(){ - var c = {}, - defaults = require('./config/config'), - Sectors = require('./model/Sectors'), - SectorsView = require('./view/SectorsView'); - var sectors, SectView; + return function(){ + var c = {}, + defaults = require('./config/config'), + Sectors = require('./model/Sectors'), + SectorsView = require('./view/SectorsView'); + var sectors, SectView; - return { + return { - /** + /** * Name of the module * @type {String} * @private */ name: 'StyleManager', - /** - * Get configuration object - * @return {Object} - * @private - */ - getConfig: function(){ + /** + * Get configuration object + * @return {Object} + * @private + */ + getConfig: function(){ return c; }, @@ -81,190 +81,190 @@ define(function(require) { init: function(config) { c = config || {}; for (var name in defaults) { - if (!(name in c)) - c[name] = defaults[name]; - } + if (!(name in c)) + c[name] = defaults[name]; + } - var ppfx = c.pStylePrefix; - if(ppfx) - c.stylePrefix = ppfx + c.stylePrefix; + 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, - }); + 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; - }, + /** + * 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 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; - }, + /** + * 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); + /** + * 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); + if(sector) + prop = sector.get('properties').add(property); - return prop; - }, + 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); + /** + * 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; - } + if(sector){ + prop = sector.get('properties').where({property: name}); + prop = prop.length == 1 ? prop[0] : prop; + } - return 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); + /** + * 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'); + if(sector) + props = sector.get('properties'); - return props; - }, + return props; + }, - /** - * Get what to style inside Style Manager. If you select the component - * without classes the entity is the Component itself and all changes will - * go inside its 'style' property. Otherwise, if the selected component has - * one or more classes, the function will return the corresponding CSS Rule - * @param {Model} model - * @return {Model} - */ - getModelToStyle: function (model) { - var classes = model.get('classes'); + /** + * Get what to style inside Style Manager. If you select the component + * without classes the entity is the Component itself and all changes will + * go inside its 'style' property. Otherwise, if the selected component has + * one or more classes, the function will return the corresponding CSS Rule + * @param {Model} model + * @return {Model} + */ + getModelToStyle: function (model) { + var classes = model.get('classes'); - if(c.em && classes && classes.length) { - var previewMode = c.em.get('Config').devicePreviewMode; - var device = c.em.getDeviceModel(); - var state = !previewMode ? model.get('state') : ''; - var deviceW = device && !previewMode ? device.get('width') : ''; - var cssC = c.em.get('CssComposer'); + if(c.em && classes && classes.length) { + var previewMode = c.em.get('Config').devicePreviewMode; + var device = c.em.getDeviceModel(); + var state = !previewMode ? model.get('state') : ''; + var deviceW = device && !previewMode ? device.get('width') : ''; + var cssC = c.em.get('CssComposer'); - var valid = _.filter(classes.models, function(item) { - return item.get('active'); - }); + var valid = _.filter(classes.models, function(item) { + return item.get('active'); + }); - var CssRule = cssC.get(valid, state, deviceW); + var CssRule = cssC.get(valid, state, deviceW); - if(CssRule) { - return CssRule; - } - } + if(CssRule) { + return CssRule; + } + } - return model; - }, + return model; + }, - /** - * Render sectors and properties - * @return {HTMLElement} - * */ - render: function(){ - return SectView.render().el; - }, + /** + * Render sectors and properties + * @return {HTMLElement} + * */ + render: function(){ + return SectView.render().el; + }, - }; - }; + }; + }; }); diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index 83130a96b..ccf12e1dc 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -59,6 +59,16 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat targetUpdated: function(){ this.selectedComponent = this.propTarget.model; this.helperComponent = this.propTarget.helper; + + // Check if need to hide the property + if (this.config.hideNotStylable) { + if (!this.isTargetStylable() || !this.isComponentStylable()) { + this.hide(); + } else { + this.show(); + } + } + if(this.getTarget()){ if(!this.sameValue()){ this.renderInputRequest(); @@ -82,7 +92,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat * * @return {String} * */ - getComponentValue: function(){ + getComponentValue: function() { var target = this.getTarget(); if(!target) @@ -157,16 +167,8 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat return; // Check if component is allowed to be styled - var hideNoStyle = this.config.hideNotStylable; if (!this.isTargetStylable() || !this.isComponentStylable()) { - console.log('not stylable ', this.property); - if (hideNoStyle) { - this.hide(); - } return; - } else { - console.log('stylable ', this.property); - this.show(); } value = this.getValueForTarget(); @@ -245,7 +247,6 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat // Stylable could also be an array indicating with which property // the target could be styled if(stylable instanceof Array){ - console.log(this.property, stylable, _.indexOf(stylable, this.property)); stylable = _.indexOf(stylable, this.property) >= 0; }