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 9 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
Split 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
* 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<Object>} [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<Object>} [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<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 {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<Object>} [property.properties=[]] Nested properties for composite and stack type
* @param {Array<Object>} [property.layers=[]] Layers for stack properties
* @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
* @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<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 {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<Object>} [property.properties=[]] Nested properties for composite and stack type
* @param {Array<Object>} [property.layers=[]] Layers for stack properties
* @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
* @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;
},
};
};
};
};
});

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

@ -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;
}

Write Preview
Loading…
Cancel
Save