From 7eb5a38aef727fc3780561ca920b7404ccf8300f Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 8 Jul 2018 23:44:23 +0200 Subject: [PATCH] Add CssComposer API in docs --- docs/.vuepress/config.js | 1 + docs/api.js | 3 +- docs/api/css_composer.md | 109 ++++++++++++++++++++++++-------------- src/css_composer/index.js | 34 ++++++++---- 4 files changed, 96 insertions(+), 51 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 0203678fd..cd5072c04 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -63,6 +63,7 @@ module.exports = { ['/api/storage_manager', 'Storage Manager'], ['/api/device_manager', 'Device Manager'], ['/api/selector_manager', 'Selector Manager'], + ['/api/css_composer', 'CSS Composer'], ], '/': [ '', diff --git a/docs/api.js b/docs/api.js index 35ca181af..528f2d1a5 100644 --- a/docs/api.js +++ b/docs/api.js @@ -14,7 +14,8 @@ const cmds = [ // ['style_manager/index.js', 'style_manager.md'], // ['storage_manager/index.js', 'storage_manager.md'], // ['device_manager/index.js', 'device_manager.md'], - ['selector_manager/index.js', 'selector_manager.md'], + // ['selector_manager/index.js', 'selector_manager.md'], + ['css_composer/index.js', 'css_composer.md'], /* ['css_composer/index.js', 'css_composer.md'], ['modal_dialog/index.js', 'modal_dialog.md'], diff --git a/docs/api/css_composer.md b/docs/api/css_composer.md index 1993f9784..75e3f447e 100644 --- a/docs/api/css_composer.md +++ b/docs/api/css_composer.md @@ -2,27 +2,34 @@ ## CssComposer -This module contains and manage CSS rules for the template inside the canvas -Before using the methods you should get first the module from the editor instance, in this way: +This module contains and manage CSS rules for the template inside the canvas. +You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1] ```js -var cssComposer = editor.CssComposer; +const editor = grapesjs.init({ + cssComposer: { + // options + } +}) ``` -### Parameters - -- `config` **[Object][1]** Configurations - - `config.rules` **([string][2] \| [Array][3]<[Object][1]>)** CSS string or an array of rule objects (optional, default `[]`) +Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance -### Examples - -```javascript -... -CssComposer: { - rules: '.myClass{ color: red}', -} +```js +const cssComposer = editor.CssComposer; ``` +- [load][2] +- [store][3] +- [add][4] +- [get][5] +- [getAll][6] +- [clear][7] +- [setIdRule][8] +- [getIdRule][9] +- [setClassRule][10] +- [getClassRule][11] + ## load Load data from the passed object, if the object is empty will try to fetch them @@ -31,9 +38,9 @@ The fetched data will be added to the collection ### Parameters -- `data` **[Object][1]** Object of data to load +- `data` **[Object][12]** Object of data to load -Returns **[Object][1]** Loaded rules +Returns **[Object][12]** Loaded rules ## store @@ -41,9 +48,9 @@ Store data to the selected storage ### Parameters -- `noStore` **[Boolean][4]** If true, won't store +- `noStore` **[Boolean][13]** If true, won't store -Returns **[Object][1]** Data to store +Returns **[Object][12]** Data to store ## add @@ -51,10 +58,10 @@ Add new rule to the collection, if not yet exists with the same selectors ### Parameters -- `selectors` **[Array][3]<Selector>** Array of selectors -- `state` **[String][2]** Css rule state -- `width` **[String][2]** For which device this style is oriented -- `opts` **[Object][1]** Other options for the rule (optional, default `{}`) +- `selectors` **[Array][14]<Selector>** Array of selectors +- `state` **[String][15]** Css rule state +- `width` **[String][15]** For which device this style is oriented +- `opts` **[Object][12]** Other options for the rule (optional, default `{}`) ### Examples @@ -77,10 +84,10 @@ Get the rule ### Parameters -- `selectors` **[Array][3]<Selector>** Array of selectors -- `state` **[String][2]** Css rule state -- `width` **[String][2]** For which device this style is oriented -- `ruleProps` **[Object][1]** Other rule props +- `selectors` **[Array][14]<Selector>** Array of selectors +- `state` **[String][15]** Css rule state +- `width` **[String][15]** For which device this style is oriented +- `ruleProps` **[Object][12]** Other rule props ### Examples @@ -116,9 +123,9 @@ Add/update the CSS rule with id selector ### Parameters -- `name` **[string][2]** Id selector name, eg. 'my-id' -- `style` **[Object][1]** Style properties and values (optional, default `{}`) -- `opts` **[Object][1]** Custom options, like `state` and `mediaText` (optional, default `{}`) +- `name` **[string][15]** Id selector name, eg. 'my-id' +- `style` **[Object][12]** Style properties and values (optional, default `{}`) +- `opts` **[Object][12]** Custom options, like `state` and `mediaText` (optional, default `{}`) ### Examples @@ -138,8 +145,8 @@ Get the CSS rule by id selector ### Parameters -- `name` **[string][2]** Id selector name, eg. 'my-id' -- `opts` **[Object][1]** Custom options, like `state` and `mediaText` (optional, default `{}`) +- `name` **[string][15]** Id selector name, eg. 'my-id' +- `opts` **[Object][12]** Custom options, like `state` and `mediaText` (optional, default `{}`) ### Examples @@ -156,9 +163,9 @@ Add/update the CSS rule with class selector ### Parameters -- `name` **[string][2]** Class selector name, eg. 'my-class' -- `style` **[Object][1]** Style properties and values (optional, default `{}`) -- `opts` **[Object][1]** Custom options, like `state` and `mediaText` (optional, default `{}`) +- `name` **[string][15]** Class selector name, eg. 'my-class' +- `style` **[Object][12]** Style properties and values (optional, default `{}`) +- `opts` **[Object][12]** Custom options, like `state` and `mediaText` (optional, default `{}`) ### Examples @@ -178,8 +185,8 @@ Get the CSS rule by class selector ### Parameters -- `name` **[string][2]** Class selector name, eg. 'my-class' -- `opts` **[Object][1]** Custom options, like `state` and `mediaText` (optional, default `{}`) +- `name` **[string][15]** Class selector name, eg. 'my-class' +- `opts` **[Object][12]** Custom options, like `state` and `mediaText` (optional, default `{}`) ### Examples @@ -190,10 +197,32 @@ const ruleHover = cc.getClassRule('myclass', { state: 'hover' }); Returns **CssRule** -[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object +[1]: https://github.com/artf/grapesjs/blob/master/src/css_composer/config/config.js + +[2]: #load + +[3]: #store + +[4]: #add + +[5]: #get + +[6]: #getall + +[7]: #clear + +[8]: #setidrule + +[9]: #getidrule + +[10]: #setclassrule + +[11]: #getclassrule + +[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object -[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String +[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean -[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array +[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array -[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean +[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String diff --git a/src/css_composer/index.js b/src/css_composer/index.js index c78d681c7..59daaee49 100644 --- a/src/css_composer/index.js +++ b/src/css_composer/index.js @@ -1,20 +1,34 @@ /** - * This module contains and manage CSS rules for the template inside the canvas - * Before using the methods you should get first the module from the editor instance, in this way: + * This module contains and manage CSS rules for the template inside the canvas. + * 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/css_composer/config/config.js) + * ```js + * const editor = grapesjs.init({ + * cssComposer: { + * // 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 cssComposer = editor.CssComposer; + * const cssComposer = editor.CssComposer; * ``` * + * * [load](#load) + * * [store](#store) + * * [add](#add) + * * [get](#get) + * * [getAll](#getall) + * * [clear](#clear) + * * [setIdRule](#setidrule) + * * [getIdRule](#getidrule) + * * [setClassRule](#setclassrule) + * * [getClassRule](#getclassrule) + * * @module CssComposer - * @param {Object} config Configurations - * @param {string|Array} [config.rules=[]] CSS string or an array of rule objects - * @example - * ... - * CssComposer: { - * rules: '.myClass{ color: red}', - * } */ + import { isArray } from 'underscore'; module.exports = () => {