From d4421109bc1dff87b8d9ce9a92097ecd14881673 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 5 Jan 2019 01:17:11 +0100 Subject: [PATCH] Update docs --- docs/api/component.md | 30 ++++++++++++- docs/api/components.md | 90 ++++++++++++++++++++++++++++----------- docs/api/editor.md | 4 +- docs/api/style_manager.md | 1 - 4 files changed, 95 insertions(+), 30 deletions(-) diff --git a/docs/api/component.md b/docs/api/component.md index e3bc370c0..ef1831532 100644 --- a/docs/api/component.md +++ b/docs/api/component.md @@ -57,6 +57,24 @@ component.get('tagName'); By default, when `toolbar` property is falsy the editor will add automatically commands like `move`, `delete`, etc. based on its properties. - `components` **Collection<[Component][9]>?** Children components. Default: `null` +## init + +Hook method, called once the model is created + +## updated + +Hook method, called when the model has been updated (eg. updated some model's property) + +### Parameters + +- `property` **[String][1]** Property name, if triggered after some property update +- `value` **any** Property value, if triggered after some property update +- `previous` **any** Property previous value, if triggered after some property update + +## removed + +Hook method, called once the model has been removed + ## is Check component's type @@ -74,6 +92,12 @@ component.is('image') Returns **[Boolean][3]** +## index + +Get the index of the component in the parent collection. + +Returns **[Number][10]** + ## find Find inner components by query string. @@ -397,7 +421,7 @@ Returns **this** Get the DOM element of the component. This works only if the component is already rendered -Returns **[HTMLElement][10]** +Returns **[HTMLElement][11]** ## getView @@ -448,4 +472,6 @@ Returns **this** [9]: #component -[10]: https://developer.mozilla.org/docs/Web/HTML/Element +[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number + +[11]: https://developer.mozilla.org/docs/Web/HTML/Element diff --git a/docs/api/components.md b/docs/api/components.md index 6c15b0385..f333bfa5f 100644 --- a/docs/api/components.md +++ b/docs/api/components.md @@ -24,7 +24,10 @@ const domComponents = editor.DomComponents; - [clear][5] - [load][6] - [store][7] -- [render][8] +- [addType][8] +- [getType][9] +- [getTypes][10] +- [render][11] ## load @@ -34,9 +37,9 @@ The fetched data will be added to the collection ### Parameters -- `data` **[Object][9]** Object of data to load (optional, default `''`) +- `data` **[Object][12]** Object of data to load (optional, default `''`) -Returns **[Object][9]** Loaded data +Returns **[Object][12]** Loaded data ## store @@ -44,9 +47,9 @@ Store components on the selected storage ### Parameters -- `noStore` **[Boolean][10]** If true, won't store +- `noStore` **[Boolean][13]** If true, won't store -Returns **[Object][9]** Data to store +Returns **[Object][12]** Data to store ## getWrapper @@ -104,18 +107,18 @@ as 'domComponents.getComponents().add(...)' ### Parameters -- `component` **([Object][9] | Component | [Array][11]<[Object][9]>)** Component/s to add - - `component.tagName` **[string][12]** Tag name (optional, default `'div'`) - - `component.type` **[string][12]** Type of the component. Available: ''(default), 'text', 'image' (optional, default `''`) - - `component.removable` **[boolean][10]** If component is removable (optional, default `true`) - - `component.draggable` **[boolean][10]** If is possible to move the component around the structure (optional, default `true`) - - `component.droppable` **[boolean][10]** If is possible to drop inside other components (optional, default `true`) - - `component.badgable` **[boolean][10]** If the badge is visible when the component is selected (optional, default `true`) - - `component.stylable` **[boolean][10]** If is possible to style component (optional, default `true`) - - `component.copyable` **[boolean][10]** If is possible to copy&paste the component (optional, default `true`) - - `component.content` **[string][12]** String inside component (optional, default `''`) - - `component.style` **[Object][9]** Style object (optional, default `{}`) - - `component.attributes` **[Object][9]** Attribute object (optional, default `{}`) +- `component` **([Object][12] | Component | [Array][14]<[Object][12]>)** Component/s to add + - `component.tagName` **[string][15]** Tag name (optional, default `'div'`) + - `component.type` **[string][15]** Type of the component. Available: ''(default), 'text', 'image' (optional, default `''`) + - `component.removable` **[boolean][13]** If component is removable (optional, default `true`) + - `component.draggable` **[boolean][13]** If is possible to move the component around the structure (optional, default `true`) + - `component.droppable` **[boolean][13]** If is possible to drop inside other components (optional, default `true`) + - `component.badgable` **[boolean][13]** If the badge is visible when the component is selected (optional, default `true`) + - `component.stylable` **[boolean][13]** If is possible to style component (optional, default `true`) + - `component.copyable` **[boolean][13]** If is possible to copy&paste the component (optional, default `true`) + - `component.content` **[string][15]** String inside component (optional, default `''`) + - `component.style` **[Object][12]** Style object (optional, default `{}`) + - `component.attributes` **[Object][12]** Attribute object (optional, default `{}`) ### Examples @@ -132,7 +135,7 @@ var comp1 = domComponents.addComponent({ }); ``` -Returns **(Component | [Array][11]<Component>)** Component/s added +Returns **(Component | [Array][14]<Component>)** Component/s added ## render @@ -141,7 +144,7 @@ Once the wrapper is rendered, and it's what happens when you init the editor, the all new components will be added automatically and property changes are all updated immediately -Returns **[HTMLElement][13]** +Returns **[HTMLElement][16]** ## clear @@ -149,6 +152,35 @@ Remove all components Returns **this** +## addType + +Add new component type. +Read more about this in [Define New Component][17] + +### Parameters + +- `type` **[string][15]** Component ID +- `methods` **[Object][12]** Component methods + +Returns **this** + +## getType + +Get component type. +Read more about this in [Define New Component][17] + +### Parameters + +- `type` **[string][15]** Component ID + +Returns **[Object][12]** Component type defintion, eg. `{ model: ..., view: ... }` + +## getTypes + +Return the array of all types + +Returns **[Array][14]** + [1]: https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js [2]: #getwrapper @@ -163,14 +195,22 @@ Returns **this** [7]: #store -[8]: #render +[8]: #addtype + +[9]: #gettype + +[10]: #gettypes + +[11]: #render + +[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object -[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object +[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean -[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean +[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array -[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array +[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String -[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String +[16]: https://developer.mozilla.org/docs/Web/HTML/Element -[13]: https://developer.mozilla.org/docs/Web/HTML/Element +[17]: https://grapesjs.com/docs/modules/Components.html#define-new-component diff --git a/docs/api/editor.md b/docs/api/editor.md index f5e58b14b..043d46168 100644 --- a/docs/api/editor.md +++ b/docs/api/editor.md @@ -23,11 +23,11 @@ editor.on('EVENT-NAME', (some, argument) => { ### Components -- `component:create` - Component is created (only the model, is not yet mounted in the canvas) +- `component:create` - Component is created (only the model, is not yet mounted in the canvas), called after the init() method - `component:mount` - Component is monted to an element and rendered in canvas - `component:add` - Triggered when a new component is added to the editor, the model is passed as an argument to the callback - `component:remove` - Triggered when a component is removed, the model is passed as an argument to the callback -- `component:clone` - Triggered when a new component is added by a clone command, the model is passed as an argument to the callback +- `component:clone` - Triggered when a component is cloned, the new model is passed as an argument to the callback - `component:update` - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback - `component:update:{propertyName}` - Listen any property change, the model is passed as an argument to the callback - `component:styleUpdate` - Triggered when the style of the component is updated, the model is passed as an argument to the callback diff --git a/docs/api/style_manager.md b/docs/api/style_manager.md index d00efa649..a811cde23 100644 --- a/docs/api/style_manager.md +++ b/docs/api/style_manager.md @@ -29,7 +29,6 @@ const styleManager = editor.StyleManager; - [removeProperty][9] - [getProperties][10] - [getModelToStyle][11] -- [getModelToStyle][11] - [addType][12] - [getType][13] - [getTypes][14]