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

79
src/style_manager/index.js
View File

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

Write Preview
Loading…
Cancel
Save