Browse Source

Update docs

drag-rules
Artur Arseniev 7 years ago
parent
commit
27777a87e0
  1. 60
      docs/api/canvas.md
  2. 22
      docs/api/component.md
  3. 7
      docs/api/editor.md
  4. 1
      docs/api/keymaps.md

60
docs/api/canvas.md

@ -28,30 +28,32 @@ const canvas = editor.Canvas;
- [setCustomBadgeLabel][9] - [setCustomBadgeLabel][9]
- [hasFocus][10] - [hasFocus][10]
- [scrollTo][11] - [scrollTo][11]
- [setZoom][12]
- [getZoom][13]
## getConfig ## getConfig
Get the configuration object Get the configuration object
Returns **[Object][12]** Returns **[Object][14]**
## getElement ## getElement
Get the canvas element Get the canvas element
Returns **[HTMLElement][13]** Returns **[HTMLElement][15]**
## getFrameEl ## getFrameEl
Get the iframe element of the canvas Get the iframe element of the canvas
Returns **[HTMLIFrameElement][14]** Returns **[HTMLIFrameElement][16]**
## getWindow ## getWindow
Get the window instance of the iframe element Get the window instance of the iframe element
Returns **[Window][15]** Returns **[Window][17]**
## getDocument ## getDocument
@ -63,13 +65,13 @@ Returns **HTMLDocument**
Get the body of the iframe element Get the body of the iframe element
Returns **[HTMLBodyElement][16]** Returns **[HTMLBodyElement][18]**
## getWrapperEl ## getWrapperEl
Get the wrapper element containing all the components Get the wrapper element containing all the components
Returns **[HTMLElement][13]** Returns **[HTMLElement][15]**
## setCustomBadgeLabel ## setCustomBadgeLabel
@ -77,7 +79,7 @@ Set custom badge naming strategy
### Parameters ### Parameters
- `f` **[Function][17]** - `f` **[Function][19]**
### Examples ### Examples
@ -91,7 +93,7 @@ canvas.setCustomBadgeLabel(function(component){
Check if the canvas is focused Check if the canvas is focused
Returns **[Boolean][18]** Returns **[Boolean][20]**
## scrollTo ## scrollTo
@ -102,9 +104,9 @@ passed to it. For instance, you can scroll smoothly by using
### Parameters ### Parameters
- `el` **([HTMLElement][13] | Component)** - `el` **([HTMLElement][15] | Component)**
- `opts` **[Object][12]** Options, same as options for `scrollIntoView` (optional, default `{}`) - `opts` **[Object][14]** Options, same as options for `scrollIntoView` (optional, default `{}`)
- `opts.force` **[Boolean][18]** Force the scroll, even if the element is already visible (optional, default `false`) - `opts.force` **[Boolean][20]** Force the scroll, even if the element is already visible (optional, default `false`)
### Examples ### Examples
@ -116,6 +118,22 @@ canvas.scrollTo(selected, { behavior: 'smooth' });
canvas.scrollTo(selected, { force: true }); canvas.scrollTo(selected, { force: true });
``` ```
## setZoom
Set zoom value
### Parameters
- `value` **[Number][21]** The zoom value, from 0 to 100
Returns **this**
## getZoom
Get zoom value
Returns **[Number][21]**
[1]: https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js [1]: https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js
[2]: #getconfig [2]: #getconfig
@ -138,16 +156,22 @@ canvas.scrollTo(selected, { force: true });
[11]: #scrollto [11]: #scrollto
[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [12]: #setzoom
[13]: #getzoom
[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[15]: https://developer.mozilla.org/docs/Web/HTML/Element
[13]: https://developer.mozilla.org/docs/Web/HTML/Element [16]: https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement
[14]: https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement [17]: https://developer.mozilla.org/docs/Web/API/Window
[15]: https://developer.mozilla.org/docs/Web/API/Window [18]: https://developer.mozilla.org/docs/Web/HTML/Element/body
[16]: https://developer.mozilla.org/docs/Web/HTML/Element/body [19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function [20]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [21]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

22
docs/api/component.md

@ -454,6 +454,28 @@ Remove the component
Returns **this** Returns **this**
## getList
The list of components is taken from the Components module.
Initially, the list, was set statically on the Component object but it was
not ok, as it was shared between multiple editor instances
### Parameters
- `model`
## checkId
This method checks, for each parsed component and style object
(are not Components/CSSRules yet), for duplicated id and fixes them
This method is used in Components.js just after the parsing
### Parameters
- `components`
- `styles` (optional, default `[]`)
- `list` (optional, default `{}`)
[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

7
docs/api/editor.md

@ -35,6 +35,8 @@ editor.on('EVENT-NAME', (some, argument) => {
- `component:selected` - New component selected, the selected model is passed as an argument to the callback - `component:selected` - New component selected, the selected model is passed as an argument to the callback
- `component:deselected` - Component deselected, the deselected model is passed as an argument to the callback - `component:deselected` - Component deselected, the deselected model is passed as an argument to the callback
- `component:toggled` - Component selection changed, toggled model is passed as an argument to the callback - `component:toggled` - Component selection changed, toggled model is passed as an argument to the callback
- `component:type:add` - New component type added, the new type is passed as an argument to the callback
- `component:type:update` - Component type updated, the updated type is passed as an argument to the callback
### Blocks ### Blocks
@ -113,10 +115,11 @@ editor.on('EVENT-NAME', (some, argument) => {
### General ### General
- `canvasScroll` - Triggered when the canvas is scrolle - `canvasScroll` - Canvas is scrolled
- `update` - The structure of the template is updated (its HTML/CSS)
- `undo` - Undo executed - `undo` - Undo executed
- `redo` - Redo executed - `redo` - Redo executed
- `load` - When the editor is loaded - `load` - Editor is loaded
## getConfig ## getConfig

1
docs/api/keymaps.md

@ -47,6 +47,7 @@ Add new keymap
- `id` **[string][8]** Keymap id - `id` **[string][8]** Keymap id
- `keys` **[string][8]** Keymap keys, eg. `ctrl+a`, `⌘+z, ctrl+z` - `keys` **[string][8]** Keymap keys, eg. `ctrl+a`, `⌘+z, ctrl+z`
- `handler` **([Function][9] \| [string][8])** Keymap handler, might be a function - `handler` **([Function][9] \| [string][8])** Keymap handler, might be a function
- `opts` **[Object][7]** Options (optional, default `{}`)
### Examples ### Examples

Loading…
Cancel
Save