diff --git a/docs/api/css_composer.md b/docs/api/css_composer.md index df08d05bf..be54998ea 100644 --- a/docs/api/css_composer.md +++ b/docs/api/css_composer.md @@ -131,6 +131,7 @@ Remove rule, by CssRule or matching selector (eg. the selector will match also a ### Parameters * `rule` **([String][8] | [CssRule] | [Array][9]<[CssRule]>)** CssRule or matching selector. +* `opts` ### Examples diff --git a/docs/api/layer.md b/docs/api/layer.md index f682d2226..22f5dda98 100644 --- a/docs/api/layer.md +++ b/docs/api/layer.md @@ -1,10 +1,16 @@ +## getId + +Get layer id. + +Returns **[String][1]** + ## getIndex Get layer index. -Returns **[Number][1]** +Returns **[Number][2]** ## getValues @@ -12,14 +18,60 @@ Get layer values. ### Parameters -* `opts` **[Object][2]** Options (optional, default `{}`) +* `opts` **[Object][3]** Options (optional, default `{}`) + + * `opts.camelCase` **[Boolean][4]?** Return property names in camelCase. + +Returns **[Object][3]** + +## getLabel + +Get layer label. + +Returns **[String][1]** + +## isSelected + +Check if the layer is selected. + +Returns **[Boolean][4]** + +## select + +Select the layer. + +## remove + +Remove the layer. + +## move + +Move layer to a new index. + +### Parameters + +* `index` **[Number][2]** New index + +## getStylePreview + +Get style object for the preview. + +### Parameters + +* `opts` **[Object][3]** Options. Same of `PropertyStack.getStyleFromLayer` (optional, default `{}`) + +Returns **[Object][3]** Style object + +## hasPreview + +Check if the property has the preview enabled for this layer. - * `opts.camelCase` **[Boolean][3]?** Return property names in camelCase. +Returns **[Boolean][4]** -Returns **[Object][2]** +[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String -[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number +[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number -[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object +[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object -[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean +[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean diff --git a/docs/api/property.md b/docs/api/property.md index 9cc628e10..95102c53d 100644 --- a/docs/api/property.md +++ b/docs/api/property.md @@ -67,6 +67,12 @@ Check if the property has value. Returns **[Boolean][3]** +### hasValueParent + +Indicates if the current value is coming from a parent target (eg. another CSSRule). + +Returns **[Boolean][3]** + ### getStyle Get the CSS style object of the property. @@ -123,8 +129,28 @@ The change is also propagated to the selected targets (eg. the css property is c * `opts.noTarget` **[Boolean][3]** If `true` the change won't be propagated to selected targets. (optional, default `false`) +### canClear + +Indicates if the current value comes directly from the selected target and so can be cleared. + +Returns **[Boolean][3]** + +### getParent + +If the current property is a sub-property, this will return the parent Property. + +Returns **([[Property][4]] | null)** + +### isFull + +Indicates if the property is full-width in UI. + +Returns **[Boolean][3]** + [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean + +[4]: #property diff --git a/docs/api/property_composite.md b/docs/api/property_composite.md index ec40bf11d..e1426a8de 100644 --- a/docs/api/property_composite.md +++ b/docs/api/property_composite.md @@ -4,6 +4,8 @@ **Extends Property** +[Property]: property.html + ### Properties * `properties` **[Array][1]<[Object][2]>** Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]` @@ -96,10 +98,6 @@ Get the join value. Returns **[String][4]** -## - -[Property]: property.html - [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object diff --git a/docs/api/property_select.md b/docs/api/property_select.md index 8849488ea..a437f58a4 100644 --- a/docs/api/property_select.md +++ b/docs/api/property_select.md @@ -62,7 +62,7 @@ Get option label. #### Parameters -* `id` **[String][3]** Option id +* `id` **([String][3] | [Object][2])** Option id or the option object * `opts` **[Object][2]** Options (optional, default `{}`) * `opts.locale` **[Boolean][4]** Use the locale string from i18n module (optional, default `true`) diff --git a/docs/api/property_stack.md b/docs/api/property_stack.md index 4c1b560af..efd4925a7 100644 --- a/docs/api/property_stack.md +++ b/docs/api/property_stack.md @@ -23,7 +23,7 @@ Get all available layers. -Returns **Collection<[Layer]>** +Returns **[Array][5]<[Layer]>** ### getLayer @@ -31,7 +31,7 @@ Get layer by index. #### Parameters -* `index` **[Number][5]** Layer index position. (optional, default `0`) +* `index` **[Number][6]** Layer index position. (optional, default `0`) #### Examples @@ -73,7 +73,7 @@ Select layer by index. #### Parameters -* `index` **[Number][5]** Index of the layer to select. (optional, default `0`) +* `index` **[Number][6]** Index of the layer to select. (optional, default `0`) #### Examples @@ -81,16 +81,32 @@ Select layer by index. property.selectLayerAt(1); ``` +### moveLayer + +Move layer by index. + +#### Parameters + +* `layer` **[Layer]** Layer to move. +* `index` **[Number][6]** New layer index. (optional, default `0`) + +#### Examples + +```javascript +const layer = property.getLayer(1); +property.moveLayer(layer, 0); +``` + ### addLayer Add new layer to the stack. #### Parameters -* `props` **[Object][6]** Custom property values to use in a new layer. (optional, default `{}`) -* `opts` **[Object][6]** Options (optional, default `{}`) +* `props` **[Object][7]** Custom property values to use in a new layer. (optional, default `{}`) +* `opts` **[Object][7]** Options (optional, default `{}`) - * `opts.at` **[Number][5]?** Position index (by default the layer will be appended at the end). + * `opts.at` **[Number][6]?** Position index (by default the layer will be appended at the end). #### Examples @@ -124,7 +140,7 @@ Remove layer by index. #### Parameters -* `index` **[Number][5]** Index of the layer to remove (optional, default `0`) +* `index` **[Number][6]** Index of the layer to remove (optional, default `0`) #### Examples @@ -158,11 +174,24 @@ Get style object from the layer. #### Parameters * `layer` **[Layer]** -* `opts` **[Object][6]** Options (optional, default `{}`) +* `opts` **[Object][7]** Options (optional, default `{}`) * `opts.camelCase` **[Boolean][1]?** Return property names in camelCase. + * `opts.number` **[Object][7]?** Limit the result of the number types, eg. `number: { min: -3, max: 3 }` + +Returns **[Object][7]** Style object + +### getStylePreview -Returns **[Object][6]** Style object +Get preview style object from the layer. +If the property has `preview: false` the returned object will be empty. + +#### Parameters + +* `layer` **[Layer]** +* `opts` **[Object][7]** Options. Same of `getStyleFromLayer` (optional, default `{}`) + +Returns **[Object][7]** Style object ### getLayerSeparator @@ -178,6 +207,8 @@ Returns **[RegExp][3]** [4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function -[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number +[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array + +[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number -[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object +[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object diff --git a/docs/api/sector.md b/docs/api/sector.md index 95309b98a..2451236aa 100644 --- a/docs/api/sector.md +++ b/docs/api/sector.md @@ -4,6 +4,8 @@ +[Property]: property.html + ### Properties * `id` **[String][1]** Sector id, eg. `typography` @@ -64,10 +66,6 @@ Get sector properties. Returns **[Array][3]<[Property]>** -## - -[Property]: property.html - [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean diff --git a/docs/api/style_manager.md b/docs/api/style_manager.md index 6e428effa..5f9dfd000 100644 --- a/docs/api/style_manager.md +++ b/docs/api/style_manager.md @@ -27,10 +27,18 @@ styleManager.addSector(...); ## Available Events * `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback. +* `style:sector:remove` - Sector removed. The [Sector] is passed as an argument to the callback. +* `style:sector:update` - Sector updated. The [Sector] and the object containing changes are passed as arguments to the callback. +* `style:property:add` - Property added. The [Property] is passed as an argument to the callback. +* `style:property:remove` - Property removed. The [Property] is passed as an argument to the callback. +* `style:property:update` - Property updated. The [Property] and the object containing changes are passed as arguments to the callback. * `style:target` - Target selection changed. The target (or `null` in case the target is deselected) is passed as an argument to the callback. -* `styleManager:update:target` - The target (Component or CSSRule) is changed -* `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback -* `styleManager:change:{propertyName}` - As above but for a specific style property + + ## Methods @@ -45,7 +53,7 @@ styleManager.addSector(...); * [removeProperty][10] * [select][11] * [getSelected][12] -* [getLastSelected][13] +* [getSelectedAll][13] * [getSelectedParents][14] * [addStyleTargets][15] * [getBuiltIn][16] @@ -118,7 +126,9 @@ Get all sectors. ### Parameters -* `opts` (optional, default `{}`) +* `opts` **[Object][23]** Options (optional, default `{}`) + + * `opts.visible` **[Boolean][27]?** Returns only visible sectors ### Examples @@ -126,7 +136,7 @@ Get all sectors. const sectors = styleManager.getSectors(); ``` -Returns **Collection<[Sector]>** Collection of sectors +Returns **[Array][28]<[Sector]>** ## removeSector @@ -151,7 +161,7 @@ Add new property to the sector. ### Parameters * `sectorId` **[String][24]** Sector id. -* `property` **[Object][23]** Property definition. Check the [base available properties][27] + others based on the `type` of your property. +* `property` **[Object][23]** Property definition. Check the [base available properties][29] + others based on the `type` of your property. * `opts` **[Object][23]** Options (optional, default `{}`) * `opts.at` **[Number][26]?** Position index (by default, will be appended at the end). @@ -249,17 +259,17 @@ Returns **[Array][28]<([Component] | [CSSRule])>** Array containing selected Com ## getSelected -Get the array of selected targets. - -Returns **[Array][28]<([Component] | [CSSRule])>** - -## getLastSelected - Get the last selected target. By default, the Style Manager shows styles of the last selected target. Returns **([Component] | [CSSRule] | null)** +## getSelectedAll + +Get the array of selected targets. + +Returns **[Array][28]<([Component] | [CSSRule])>** + ## getSelectedParents Get parent rules of the last selected target. @@ -377,31 +387,6 @@ Get all types Returns **[Array][28]** -## createType - -Create new property from type - -### Parameters - -* `id` **[string][24]** Type ID -* `options` **[Object][23]** Options (optional, default `{}`) - - * `options.model` **[Object][23]** Custom model object (optional, default `{}`) - * `options.view` **[Object][23]** Custom view object (optional, default `{}`) - -### Examples - -```javascript -const propView = styleManager.createType('integer', { - model: {units: ['px', 'rem']} -}); -propView.render(); -propView.model.on('change:value', ...); -someContainer.appendChild(propView.el); -``` - -Returns **PropertyView** - [1]: https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js [2]: #getconfig @@ -426,7 +411,7 @@ Returns **PropertyView** [12]: #getselected -[13]: #getlastselected +[13]: #getselectedall [14]: #getselectedparents @@ -454,6 +439,8 @@ Returns **PropertyView** [26]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number -[27]: property.html#properties +[27]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean [28]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array + +[29]: property.html#properties diff --git a/docs/modules/Style-manager.md b/docs/modules/Style-manager.md index d6ac9bbb4..2dc7971ef 100644 --- a/docs/modules/Style-manager.md +++ b/docs/modules/Style-manager.md @@ -575,11 +575,14 @@ const wrapperCmp = editor.Pages.getSelected().getMainComponent(); const btnCmp = wrapperCmp.find('button')[0]; btnCmp && sm.select(btnCmp); -// You can also select as a target some CSS query +// You can also select CSS query as a target sm.select('.btn > span'); -// Once the target is selected, you can check its current style object. +// Once the target is selected, you can check its current style object +console.log(sm.getSelected()?.getStyle()); +// and update all selected target styles when necessary +sm.addStyleTargets({ color: 'red' }); ```