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

Update StyleManager API docs

up-style-manager
Artur Arseniev 5 years ago
parent
760b1d9620
commit
a415f9be0e
2 changed files with 83 additions and 75 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. 79
      docs/api/style_manager.md
  2. 79
      src/style_manager/index.js

79
docs/api/style_manager.md
View File

@ -19,15 +19,21 @@ Once the editor is instantiated you can use its API. Before using these methods
const styleManager = editor.StyleManager;
```
## Available Events
* `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback.
## Methods
* [getConfig][2]
* [addSector][3]
* [getSector][4]
* [removeSector][5]
* [getSectors][6]
* [getSectors][5]
* [removeSector][6]
* [addProperty][7]
* [getProperty][8]
* [removeProperty][9]
* [getProperties][10]
* [getProperties][9]
* [removeProperty][10]
* [getModelToStyle][11]
* [addType][12]
* [getType][13]
@ -90,37 +96,37 @@ const sector = styleManager.getSector('mySector');
Returns **([Sector] | null)**
## removeSector
## getSectors
Remove sector by id.
Get all sectors.
### Parameters
* `id` **[String][17]** Sector id
* `opts` (optional, default `{}`)
### Examples
```javascript
const removed = styleManager.removeSector('mySector');
const sectors = styleManager.getSectors();
```
Returns **[Sector]** Removed sector
Returns **Collection<[Sector]>** Collection of sectors
## getSectors
## removeSector
Get all sectors.
Remove sector by id.
### Parameters
* `opts` (optional, default `{}`)
* `id` **[String][17]** Sector id
### Examples
```javascript
const sectors = styleManager.getSectors();
const removed = styleManager.removeSector('mySector');
```
Returns **Collection<[Sector]>** Collection of sectors
Returns **[Sector]** Removed sector
## addProperty
@ -130,10 +136,9 @@ Add new property to the sector.
* `sectorId` **[String][17]** Sector id.
* `property` **[Object][16]** Property definition. Check the [base available properties][20] + others based on the `type` of your property.
* `opts` (optional, default `{}`)
* `options` **[Object][16]** Options (optional, default `{}`)
* `opts` **[Object][16]** Options (optional, default `{}`)
* `options.at` **[Number][19]?** Position index (by default, will be appended at the end).
* `opts.at` **[Number][19]?** Position index (by default, will be appended at the end).
### Examples
@ -154,53 +159,53 @@ Returns **([Property] | null)** Added property or `null` in case the sector does
## getProperty
Get property by its CSS name and sector id
Get the property.
### Parameters
* `sectorId` **[string][17]** Sector id
* `name` **[string][17]** CSS property name (or id), eg. 'min-height'
* `sectorId` **[String][17]** Sector id.
* `id` **[String][17]** Property id.
### Examples
```javascript
var property = styleManager.getProperty('mySector','min-height');
const property = styleManager.getProperty('mySector', 'min-height');
```
Returns **(Property | null)**
Returns **([Property] | null)**
## removeProperty
## getProperties
Remove a property from the sector
Get all properties of the sector.
### Parameters
* `sectorId` **[string][17]** Sector id
* `name` **[string][17]** CSS property name, eg. 'min-height'
* `sectorId` **[String][17]** Sector id.
### Examples
```javascript
const property = styleManager.removeProperty('mySector', 'min-height');
const properties = styleManager.getProperties('mySector');
```
Returns **Property** Removed property
Returns **(Collection<[Property]> | null)** Collection of properties
## getProperties
## removeProperty
Get properties of the sector
Remove the property.
### Parameters
* `sectorId` **[string][17]** Sector id
* `sectorId` **[String][17]** Sector id.
* `id` **[String][17]** Property id.
### Examples
```javascript
var properties = styleManager.getProperties('mySector');
const property = styleManager.removeProperty('mySector', 'min-height');
```
Returns **Properties** Collection of properties
Returns **([Property] | null)** Removed property
## getModelToStyle
@ -343,17 +348,17 @@ Returns **[Object][16]** Added property definition.
[4]: #getsector
[5]: #removesector
[5]: #getsectors
[6]: #getsectors
[6]: #removesector
[7]: #addproperty
[8]: #getproperty
[9]: #removeproperty
[9]: #getproperties
[10]: #getproperties
[10]: #removeproperty
[11]: #getmodeltostyle

79
src/style_manager/index.js
View File

@ -14,16 +14,19 @@
* ```js
* const styleManager = editor.StyleManager;
* ```
* ## Available Events
* * `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback.
*
* ## Methods
* * [getConfig](#getconfig)
* * [addSector](#addsector)
* * [getSector](#getsector)
* * [removeSector](#removesector)
* * [getSectors](#getsectors)
* * [removeSector](#removesector)
* * [addProperty](#addproperty)
* * [getProperty](#getproperty)
* * [removeProperty](#removeproperty)
* * [getProperties](#getproperties)
* * [removeProperty](#removeproperty)
* * [getModelToStyle](#getmodeltostyle)
* * [addType](#addtype)
* * [getType](#gettype)
@ -183,6 +186,16 @@ export default () => {
return res || null;
},
/**
* Get all sectors.
* @returns {Collection<[Sector]>} Collection of sectors
* @example
* const sectors = styleManager.getSectors();
* */
getSectors(opts = {}) {
return sectors && sectors.models ? (opts.array ? [...sectors.models] : sectors) : [];
},
/**
* Remove sector by id.
* @param {String} id Sector id
@ -194,22 +207,12 @@ export default () => {
return this.getSectors().remove(this.getSector(id, { warn: 1 }));
},
/**
* Get all sectors.
* @returns {Collection<[Sector]>} Collection of sectors
* @example
* const sectors = styleManager.getSectors();
* */
getSectors(opts = {}) {
return sectors && sectors.models ? (opts.array ? [...sectors.models] : sectors) : [];
},
/**
* Add new property to the sector.
* @param {String} sectorId Sector id.
* @param {Object} property Property definition. Check the [base available properties](property.html#properties) + others based on the `type` of your property.
* @param {Object} [options={}] Options
* @param {Number} [options.at] Position index (by default, will be appended at the end).
* @param {Object} [opts={}] Options
* @param {Number} [opts.at] Position index (by default, will be appended at the end).
* @returns {[Property]|null} Added property or `null` in case the sector doesn't exist.
* @example
* const property = styleManager.addProperty('mySector', {
@ -232,43 +235,30 @@ export default () => {
},
/**
* Get property by its CSS name and sector id
* @param {string} sectorId Sector id
* @param {string} name CSS property name (or id), eg. 'min-height'
* @return {Property|null}
* Get the property.
* @param {String} sectorId Sector id.
* @param {String} id Property id.
* @returns {[Property]|null}
* @example
* var property = styleManager.getProperty('mySector','min-height');
* const property = styleManager.getProperty('mySector', 'min-height');
*/
getProperty(sectorId, name) {
getProperty(sectorId, id) {
const sector = this.getSector(sectorId, { warn: 1 });
let prop;
if (sector) {
prop = sector.get('properties').filter(prop => prop.get('property') === name || prop.get('id') === name)[0];
prop = sector.get('properties').filter(prop => prop.get('property') === id || prop.get('id') === id)[0];
}
return prop || null;
},
/**
* Remove a property from the sector
* @param {string} sectorId Sector id
* @param {string} name CSS property name, eg. 'min-height'
* @return {Property} Removed property
* @example
* const property = styleManager.removeProperty('mySector', 'min-height');
*/
removeProperty(sectorId, name) {
const props = this.getProperties(sectorId);
return props && props.remove(this.getProperty(sectorId, name));
},
/**
* Get properties of the sector
* @param {string} sectorId Sector id
* @return {Properties} Collection of properties
* Get all properties of the sector.
* @param {String} sectorId Sector id.
* @returns {Collection<[Property]>|null} Collection of properties
* @example
* var properties = styleManager.getProperties('mySector');
* const properties = styleManager.getProperties('mySector');
*/
getProperties(sectorId) {
let props = null;
@ -278,6 +268,19 @@ export default () => {
return props;
},
/**
* Remove the property.
* @param {String} sectorId Sector id.
* @param {String} id Property id.
* @returns {[Property]|null} Removed property
* @example
* const property = styleManager.removeProperty('mySector', 'min-height');
*/
removeProperty(sectorId, id) {
const props = this.getProperties(sectorId);
return props ? props.remove(this.getProperty(sectorId, id)) : null;
},
/**
* Get what to style inside Style Manager. If you select the component
* without classes the entity is the Component itself and all changes will

Write Preview
Loading…
Cancel
Save