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

Add SelectorManager API in docs

docs
Artur Arseniev 8 years ago
parent
026d3d0466
commit
917f7f03f2
4 changed files with 70 additions and 73 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. 1
      docs/.vuepress/config.js
  2. 5
      docs/api.js
  3. 85
      docs/api/selector_manager.md
  4. 52
      src/selector_manager/index.js

1
docs/.vuepress/config.js
View File

@ -62,6 +62,7 @@ module.exports = {
['/api/style_manager', 'Style Manager'],
['/api/storage_manager', 'Storage Manager'],
['/api/device_manager', 'Device Manager'],
['/api/selector_manager', 'Selector Manager'],
],
'/': [
'',

5
docs/api.js
View File

@ -13,10 +13,9 @@ const cmds = [
// ['panels/index.js', 'panels.md'],
// ['style_manager/index.js', 'style_manager.md'],
// ['storage_manager/index.js', 'storage_manager.md'],
['device_manager/index.js', 'device_manager.md'],
/*
['device_manager/index.js', 'device_manager.md'],
// ['device_manager/index.js', 'device_manager.md'],
['selector_manager/index.js', 'selector_manager.md'],
/*
['css_composer/index.js', 'css_composer.md'],
['modal_dialog/index.js', 'modal_dialog.md'],
['rich_text_editor/index.js', 'rich_text_editor.md'],

85
docs/api/selector_manager.md
View File

@ -18,45 +18,40 @@ span > #send-btn.btn{
```
In this scenario we get:
span -> selector of type `tag`
send-btn -> selector of type `id`
btn -> selector of type `class`
- span -> selector of type `tag`
- send-btn -> selector of type `id`
- btn -> selector of type `class`
So, for example, being `btn` the same class entity it'll be easier to refactor and track things.
Before using methods you should get first the module from the editor instance, in this way:
You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
```js
var selectorManager = editor.SelectorManager;
const editor = grapesjs.init({
selectorManager: {
// options
}
})
```
### Parameters
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
- `config` **[Object][1]** Configurations
- `config.selectors` **[Array][2]<[Object][1]>** Default selectors (optional, default `[]`)
- `config.states` **[Array][2]<[Object][1]>** Default states (optional, default `[]`)
- `config.label` **[String][3]** Classes label (optional, default `'Classes'`)
- `config.statesLabel` **[String][3]** The empty state label (optional, default `'- State -'`)
```js
const selectorManager = editor.SelectorManager;
```
### Examples
- [getConfig][2]
- [add][3]
- [addClass][4]
- [get][5]
- [getAll][6]
```javascript
...
{
selectors: [
{name:'myselector1'},
...
],
states: [{
name: 'hover', label: 'Hover'
},{
name: 'active', label: 'Click'
}],
statesLabel: '- Selecte State -',
}
```
## getConfig
Returns **this**
Get configuration object
Returns **[Object][7]**
## add
@ -64,10 +59,10 @@ Add a new selector to collection if it's not already exists. Class type is a def
### Parameters
- `name` **[String][3]** Selector name
- `opts` **[Object][1]** Selector options (optional, default `{}`)
- `opts.label` **[String][3]** Label for the selector, if it's not provided the label will be the same as the name (optional, default `''`)
- `opts.type` **[String][3]** Type of the selector. At the moment, only 'class' (1) is available (optional, default `1`)
- `name` **[String][8]** Selector name
- `opts` **[Object][7]** Selector options (optional, default `{}`)
- `opts.label` **[String][8]** Label for the selector, if it's not provided the label will be the same as the name (optional, default `''`)
- `opts.type` **[String][8]** Type of the selector. At the moment, only 'class' (1) is available (optional, default `1`)
### Examples
@ -88,7 +83,7 @@ Add class selectors
### Parameters
- `classes` **([Array][2] \| [string][3])** Array or string of classes
- `classes` **([Array][9] \| [string][8])** Array or string of classes
### Examples
@ -99,7 +94,7 @@ sm.addClass(['class1', 'class2']);
// -> [SelectorObject, ...]
```
Returns **[Array][2]** Array of added selectors
Returns **[Array][9]** Array of added selectors
## get
@ -107,9 +102,9 @@ Get the selector by its name
### Parameters
- `name` **[String][3]** Selector name
- `name` **[String][8]** Selector name
- `type` (optional, default `Selector.TYPE_CLASS`)
- `tyoe` **[String][3]** Selector type
- `tyoe` **[String][8]** Selector type
### Examples
@ -125,8 +120,20 @@ Get all selectors
Returns **Collection**
[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[1]: https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js
[2]: #getconfig
[3]: #add
[4]: #addclass
[5]: #get
[6]: #getAll
[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

52
src/selector_manager/index.js
View File

@ -14,39 +14,34 @@
* ```
*
* In this scenario we get:
* span -> selector of type `tag`
* send-btn -> selector of type `id`
* btn -> selector of type `class`
* * span -> selector of type `tag`
* * send-btn -> selector of type `id`
* * btn -> selector of type `class`
*
* So, for example, being `btn` the same class entity it'll be easier to refactor and track things.
*
* Before using methods you should get first the module from the editor instance, in this way:
* You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js)
* ```js
* const editor = grapesjs.init({
* selectorManager: {
* // options
* }
* })
* ```
*
* Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
*
* ```js
* var selectorManager = editor.SelectorManager;
* const selectorManager = editor.SelectorManager;
* ```
*
* * [getConfig](#getconfig)
* * [add](#add)
* * [addClass](#addclass)
* * [get](#get)
* * [getAll](#getAll)
*
* @module SelectorManager
* @param {Object} config Configurations
* @param {Array<Object>} [config.selectors=[]] Default selectors
* @param {Array<Object>} [config.states=[]] Default states
* @param {String} [config.label='Classes'] Classes label
* @param {String} [config.statesLabel='- State -'] The empty state label
* @return {this}
* @example
* ...
* {
* selectors: [
* {name:'myselector1'},
* ...
* ],
* states: [{
* name: 'hover', label: 'Hover'
* },{
* name: 'active', label: 'Click'
* }],
* statesLabel: '- Selecte State -',
* }
*/
import { isString, isElement, isObject } from 'underscore';
@ -73,20 +68,15 @@ module.exports = config => {
* @private
*/
name: 'SelectorManager',
/**
* Get configuration object
* @return {Object}
* @private
*/
getConfig() {
return c;
},
getConfig() {
return c;
},
/**
* Initialize module. Automatically called with a new instance of the editor
* @param {Object} config Configurations

Write Preview
Loading…
Cancel
Save