diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 40d0f489d..0203678fd 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -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'], ], '/': [ '', diff --git a/docs/api.js b/docs/api.js index 5190be280..35ca181af 100644 --- a/docs/api.js +++ b/docs/api.js @@ -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'], diff --git a/docs/api/selector_manager.md b/docs/api/selector_manager.md index 73425838d..c550d841e 100644 --- a/docs/api/selector_manager.md +++ b/docs/api/selector_manager.md @@ -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 diff --git a/src/selector_manager/index.js b/src/selector_manager/index.js index 69635c23c..d524eef33 100644 --- a/src/selector_manager/index.js +++ b/src/selector_manager/index.js @@ -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} [config.selectors=[]] Default selectors - * @param {Array} [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