tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Hide not stylable properties

pull/79/merge
Artur Arseniev 10 years ago
parent
65c2734a61
commit
0bfbd7b8fc
2 changed files with 198 additions and 197 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 374
      src/style_manager/main.js
  2. 21
      src/style_manager/view/PropertyView.js

374
src/style_manager/main.js
View File

@ -14,9 +14,9 @@
* *
* ```js * ```js
* var editor = grapesjs.init({ * var editor = grapesjs.init({
* ... * ...
* styleManager: {...} // Check below for the possible properties * styleManager: {...} // Check below for the possible properties
* ... * ...
* }); * });
* ``` * ```
* *
@ -32,45 +32,45 @@
* @example * @example
* ... * ...
* styleManager: { * styleManager: {
* sectors: [{ * sectors: [{
* id: 'dim', * id: 'dim',
* name: 'Dimension', * name: 'Dimension',
* properties: [{ * properties: [{
* name: 'Width', * name: 'Width',
* property: 'width', * property: 'width',
* type: 'integer', * type: 'integer',
* units: ['px', '%'], * units: ['px', '%'],
* defaults: 'auto', * defaults: 'auto',
* min: 0, * min: 0,
}], }],
* }], * }],
* } * }
* ... * ...
*/ */
define(function(require) { define(function(require) {
return function(){ return function(){
var c = {}, var c = {},
defaults = require('./config/config'), defaults = require('./config/config'),
Sectors = require('./model/Sectors'), Sectors = require('./model/Sectors'),
SectorsView = require('./view/SectorsView'); SectorsView = require('./view/SectorsView');
var sectors, SectView; var sectors, SectView;
return { return {
/** /**
* Name of the module * Name of the module
* @type {String} * @type {String}
* @private * @private
*/ */
name: 'StyleManager', name: 'StyleManager',
/** /**
* Get configuration object * Get configuration object
* @return {Object} * @return {Object}
* @private * @private
*/ */
getConfig: function(){ getConfig: function(){
return c; return c;
}, },
@ -81,190 +81,190 @@ define(function(require) {
init: function(config) { init: function(config) {
c = config || {}; c = config || {};
for (var name in defaults) { for (var name in defaults) {
if (!(name in c)) if (!(name in c))
c[name] = defaults[name]; c[name] = defaults[name];
} }
var ppfx = c.pStylePrefix; var ppfx = c.pStylePrefix;
if(ppfx) if(ppfx)
c.stylePrefix = ppfx + c.stylePrefix; c.stylePrefix = ppfx + c.stylePrefix;
sectors = new Sectors(c.sectors); sectors = new Sectors(c.sectors);
SectView = new SectorsView({ SectView = new SectorsView({
collection: sectors, collection: sectors,
target: c.em, target: c.em,
config: c, config: c,
}); });
return this; return this;
}, },
/** /**
* Add new sector to the collection. If the sector with the same id already exists, * Add new sector to the collection. If the sector with the same id already exists,
* that one will be returned * that one will be returned
* @param {string} id Sector id * @param {string} id Sector id
* @param {Object} sector Object representing sector * @param {Object} sector Object representing sector
* @param {string} [sector.name=''] Sector's label * @param {string} [sector.name=''] Sector's label
* @param {Boolean} [sector.open=true] Indicates if the sector should be opened * @param {Boolean} [sector.open=true] Indicates if the sector should be opened
* @param {Array<Object>} [sector.properties=[]] Array of properties * @param {Array<Object>} [sector.properties=[]] Array of properties
* @return {Sector} Added Sector * @return {Sector} Added Sector
* @example * @example
* var sector = styleManager.addSector('mySector',{ * var sector = styleManager.addSector('mySector',{
* name: 'My sector', * name: 'My sector',
* open: true, * open: true,
* properties: [{ name: 'My property'}] * properties: [{ name: 'My property'}]
* }); * });
* */ * */
addSector: function(id, sector){ addSector: function(id, sector){
var result = this.getSector(id); var result = this.getSector(id);
if(!result){ if(!result){
sector.id = id; sector.id = id;
result = sectors.add(sector); result = sectors.add(sector);
} }
return result; return result;
}, },
/** /**
* Get sector by id * Get sector by id
* @param {string} id Sector id * @param {string} id Sector id
* @return {Sector|null} * @return {Sector|null}
* @example * @example
* var sector = styleManager.getSector('mySector'); * var sector = styleManager.getSector('mySector');
* */ * */
getSector: function(id){ getSector: function(id){
var res = sectors.where({id: id}); var res = sectors.where({id: id});
return res.length ? res[0] : null; return res.length ? res[0] : null;
}, },
/** /**
* Get all sectors * Get all sectors
* @return {Sectors} Collection of sectors * @return {Sectors} Collection of sectors
* */ * */
getSectors: function(){ getSectors: function(){
return sectors; return sectors;
}, },
/** /**
* Add property to the sector identified by id * Add property to the sector identified by id
* @param {string} sectorId Sector id * @param {string} sectorId Sector id
* @param {Object} property Property object * @param {Object} property Property object
* @param {string} [property.name=''] Name of the property * @param {string} [property.name=''] Name of the property
* @param {string} [property.property=''] CSS property, eg. `min-height` * @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 {string} [property.type=''] Type of the property: integer | radio | select | color | file | composite | stack
* @param {Array<string>} [property.units=[]] Unit of measure available, eg. ['px','%','em']. Only for integer type * @param {Array<string>} [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.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.min=null] Min possible value. Only for integer type
* @param {number} [property.max=null] Max 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.defaults=''] Default value
* @param {string} [property.info=''] Some description * @param {string} [property.info=''] Some description
* @param {string} [property.icon=''] Class name. If exists no text will be displayed * @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 {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 {string} [property.functionName=''] Indicates if value need to be wrapped in some function, for istance `transform: rotate(90deg)`
* @param {Array<Object>} [property.properties=[]] Nested properties for composite and stack type * @param {Array<Object>} [property.properties=[]] Nested properties for composite and stack type
* @param {Array<Object>} [property.layers=[]] Layers for stack properties * @param {Array<Object>} [property.layers=[]] Layers for stack properties
* @param {Array<Object>} [property.list=[]] List of possible options for radio and select types * @param {Array<Object>} [property.list=[]] List of possible options for radio and select types
* @return {Property|null} Added Property or `null` in case sector doesn't exist * @return {Property|null} Added Property or `null` in case sector doesn't exist
* @example * @example
* var property = styleManager.addProperty('mySector',{ * var property = styleManager.addProperty('mySector',{
* name: 'Minimum height', * name: 'Minimum height',
* property: 'min-height', * property: 'min-height',
* type: 'select', * type: 'select',
* defaults: '100px', * defaults: '100px',
* list: [{ * list: [{
* value: '100px', * value: '100px',
* name: '100', * name: '100',
* },{ * },{
* value: '200px', * value: '200px',
* name: '200', * name: '200',
* }], * }],
* }); * });
*/ */
addProperty: function(sectorId, property){ addProperty: function(sectorId, property){
var prop = null; var prop = null;
var sector = this.getSector(sectorId); var sector = this.getSector(sectorId);
if(sector) if(sector)
prop = sector.get('properties').add(property); prop = sector.get('properties').add(property);
return prop; return prop;
}, },
/** /**
* Get property by its CSS name and sector id * Get property by its CSS name and sector id
* @param {string} sectorId Sector id * @param {string} sectorId Sector id
* @param {string} name CSS property name, eg. 'min-height' * @param {string} name CSS property name, eg. 'min-height'
* @return {Property|null} * @return {Property|null}
* @example * @example
* var property = styleManager.getProperty('mySector','min-height'); * var property = styleManager.getProperty('mySector','min-height');
*/ */
getProperty: function(sectorId, name){ getProperty: function(sectorId, name){
var prop = null; var prop = null;
var sector = this.getSector(sectorId); var sector = this.getSector(sectorId);
if(sector){ if(sector){
prop = sector.get('properties').where({property: name}); prop = sector.get('properties').where({property: name});
prop = prop.length == 1 ? prop[0] : prop; prop = prop.length == 1 ? prop[0] : prop;
} }
return prop; return prop;
}, },
/** /**
* Get properties of the sector * Get properties of the sector
* @param {string} sectorId Sector id * @param {string} sectorId Sector id
* @return {Properties} Collection of properties * @return {Properties} Collection of properties
* @example * @example
* var properties = styleManager.getProperties('mySector'); * var properties = styleManager.getProperties('mySector');
*/ */
getProperties: function(sectorId){ getProperties: function(sectorId){
var props = null; var props = null;
var sector = this.getSector(sectorId); var sector = this.getSector(sectorId);
if(sector) if(sector)
props = sector.get('properties'); props = sector.get('properties');
return props; return props;
}, },
/** /**
* Get what to style inside Style Manager. If you select the component * Get what to style inside Style Manager. If you select the component
* without classes the entity is the Component itself and all changes will * without classes the entity is the Component itself and all changes will
* go inside its 'style' property. Otherwise, if the selected component has * go inside its 'style' property. Otherwise, if the selected component has
* one or more classes, the function will return the corresponding CSS Rule * one or more classes, the function will return the corresponding CSS Rule
* @param {Model} model * @param {Model} model
* @return {Model} * @return {Model}
*/ */
getModelToStyle: function (model) { getModelToStyle: function (model) {
var classes = model.get('classes'); var classes = model.get('classes');
if(c.em && classes && classes.length) { if(c.em && classes && classes.length) {
var previewMode = c.em.get('Config').devicePreviewMode; var previewMode = c.em.get('Config').devicePreviewMode;
var device = c.em.getDeviceModel(); var device = c.em.getDeviceModel();
var state = !previewMode ? model.get('state') : ''; var state = !previewMode ? model.get('state') : '';
var deviceW = device && !previewMode ? device.get('width') : ''; var deviceW = device && !previewMode ? device.get('width') : '';
var cssC = c.em.get('CssComposer'); var cssC = c.em.get('CssComposer');
var valid = _.filter(classes.models, function(item) { var valid = _.filter(classes.models, function(item) {
return item.get('active'); return item.get('active');
}); });
var CssRule = cssC.get(valid, state, deviceW); var CssRule = cssC.get(valid, state, deviceW);
if(CssRule) { if(CssRule) {
return CssRule; return CssRule;
} }
} }
return model; return model;
}, },
/** /**
* Render sectors and properties * Render sectors and properties
* @return {HTMLElement} * @return {HTMLElement}
* */ * */
render: function(){ render: function(){
return SectView.render().el; return SectView.render().el;
}, },
}; };
}; };
}); });

21
src/style_manager/view/PropertyView.js
View File

@ -59,6 +59,16 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
targetUpdated: function(){ targetUpdated: function(){
this.selectedComponent = this.propTarget.model; this.selectedComponent = this.propTarget.model;
this.helperComponent = this.propTarget.helper; 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.getTarget()){
if(!this.sameValue()){ if(!this.sameValue()){
this.renderInputRequest(); this.renderInputRequest();
@ -82,7 +92,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
* *
* @return {String} * @return {String}
* */ * */
getComponentValue: function(){ getComponentValue: function() {
var target = this.getTarget(); var target = this.getTarget();
if(!target) if(!target)
@ -157,16 +167,8 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
return; return;
// Check if component is allowed to be styled // Check if component is allowed to be styled
var hideNoStyle = this.config.hideNotStylable;
if (!this.isTargetStylable() || !this.isComponentStylable()) { if (!this.isTargetStylable() || !this.isComponentStylable()) {
console.log('not stylable ', this.property);
if (hideNoStyle) {
this.hide();
}
return; return;
} else {
console.log('stylable ', this.property);
this.show();
} }
value = this.getValueForTarget(); 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 // Stylable could also be an array indicating with which property
// the target could be styled // the target could be styled
if(stylable instanceof Array){ if(stylable instanceof Array){
console.log(this.property, stylable, _.indexOf(stylable, this.property));
stylable = _.indexOf(stylable, this.property) >= 0; stylable = _.indexOf(stylable, this.property) >= 0;
} }

Write Preview
Loading…
Cancel
Save