diff --git a/docs/api.js b/docs/api.js index a2cc6bdb9..63886d7a3 100644 --- a/docs/api.js +++ b/docs/api.js @@ -56,6 +56,7 @@ async function generateDocs () { .replace(/<\\\[/g, '<[') .replace(/<\(\\\[/g, '<([') .replace(/\| \\\[/g, '| [') + .replace(/\\n```js/g, "```js") .replace('**Extends Model**', ''); fs.writeFileSync(`${docRoot}/api/${file[1]}`, res); log('Created', file[1]); diff --git a/docs/api/property_stack.md b/docs/api/property_stack.md index 3e13419ae..887790f57 100644 --- a/docs/api/property_stack.md +++ b/docs/api/property_stack.md @@ -8,9 +8,20 @@ ### Properties -* `layerSeparator` **([String][1] | [RegExp][2])?** The separator used to split layer values. -* `layerJoin` **[String][1]?** Value used to join layer values. -* `layerLabel` **[Function][3]?** Custom logic for creating the layer label. +* `preview` **[Boolean][1]?** Indicate if the layer should display a preview. +* `layerSeparator` **([String][2] | [RegExp][3])?** The separator used to split layer values. +* `layerJoin` **[String][2]?** Value used to join layer values. + ```js + layerJoin: (layer, { values }) => { + return `A: ${values['prop-a']} B: ${values['prop-b']}`; + } + ``` +* `layerLabel` **[Function][4]?** Custom logic for creating layer labels. + ```js + layerLabel: (layer, { values }) => { + return `A: ${values['prop-a']} B: ${values['prop-b']}`; + } + ``` ### getLayers @@ -24,7 +35,7 @@ Get layer by index. #### Parameters -* `index` **[Number][4]** Layer index position. (optional, default `0`) +* `index` **[Number][5]** Layer index position. (optional, default `0`) #### Examples @@ -66,7 +77,7 @@ Select layer by index. #### Parameters -* `index` **[Number][4]** Index of the layer to select. (optional, default `0`) +* `index` **[Number][5]** Index of the layer to select. (optional, default `0`) #### Examples @@ -80,10 +91,10 @@ Add new layer to the stack. #### Parameters -* `props` **[Object][5]** Custom property values to use in a new layer. (optional, default `{}`) -* `opts` **[Object][5]** Options (optional, default `{}`) +* `props` **[Object][6]** Custom property values to use in a new layer. (optional, default `{}`) +* `opts` **[Object][6]** Options (optional, default `{}`) - * `opts.at` **[Number][4]?** Position index (by default the layer will be appended at the end). + * `opts.at` **[Number][5]?** Position index (by default the layer will be appended at the end). #### Examples @@ -117,7 +128,7 @@ Remove layer by index. #### Parameters -* `index` **[Number][4]** Index of the layer to remove (optional, default `0`) +* `index` **[Number][5]** Index of the layer to remove (optional, default `0`) #### Examples @@ -142,7 +153,7 @@ const layer = this.getLayer(1); const label = this.getLayerLabel(layer); ``` -Returns **[String][1]** +Returns **[String][2]** ### getStyleFromLayer @@ -151,26 +162,26 @@ Get style object from the layer. #### Parameters * `layer` **[Layer]** -* `opts` **[Object][5]** Options (optional, default `{}`) +* `opts` **[Object][6]** Options (optional, default `{}`) - * `opts.camelCase` **[Boolean][6]?** Return property names in camelCase. + * `opts.camelCase` **[Boolean][1]?** Return property names in camelCase. -Returns **[Object][5]** Style object +Returns **[Object][6]** Style object ### getLayerSeparator Get layer separator. -Returns **[RegExp][2]** +Returns **[RegExp][3]** -[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String +[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean -[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp +[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String -[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function +[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp -[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number +[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function -[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object +[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number -[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean +[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index 4579e5fec..5b42ad22e 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -305,6 +305,13 @@ export default class PropertyFactory { 'box-shadow', { preview: true, + layerLabel: (l, { values }) => { + const x = values['box-shadow-h']; + const y = values['box-shadow-v']; + const blur = values['box-shadow-blur']; + const spread = values['box-shadow-spread']; + return `${x} ${y} ${blur} ${spread}`; + }, properties: this.__sub([ 'box-shadow-h', 'box-shadow-v', @@ -320,6 +327,12 @@ export default class PropertyFactory { 'text-shadow', { default: 'none', + layerLabel: (l, { values }) => { + const x = values['text-shadow-h']; + const y = values['text-shadow-v']; + const blur = values['text-shadow-blur']; + return `${x} ${y} ${blur}`; + }, properties: this.__sub(['text-shadow-h', 'text-shadow-v', 'text-shadow-blur', 'text-shadow-color']), }, 'box-shadow', diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js index be4cdb15c..ebda0a675 100644 --- a/src/style_manager/model/PropertyStack.js +++ b/src/style_manager/model/PropertyStack.js @@ -16,7 +16,14 @@ const PARTS_REG = /\s(?![^(]*\))/; * @property {Boolean} [preview=false] Indicate if the layer should display a preview. * @property {String|RegExp} [layerSeparator=', '] The separator used to split layer values. * @property {String} [layerJoin=', '] Value used to join layer values. - * @property {Function} [layerLabel] Custom logic for creating the layer label. + * @property {Function} [layerLabel] Custom logic for creating layer labels. + * \n + * ```js + * layerLabel: (layer) => { + * const values = layer.getValues(); + * return `A: ${values['prop-a']} B: ${values['prop-b']}`; + * } + * ``` * */ export default class PropertyStack extends PropertyComposite { diff --git a/test/specs/style_manager/model/PropertyFactory.js b/test/specs/style_manager/model/PropertyFactory.js index 773d9db77..55ae99295 100644 --- a/test/specs/style_manager/model/PropertyFactory.js +++ b/test/specs/style_manager/model/PropertyFactory.js @@ -448,7 +448,9 @@ describe('PropertyFactory', () => { ], }; res.property = 'text-shadow'; - expect(obj.build('text-shadow')).toEqual([res]); + const result = obj.build('text-shadow'); + delete result[0].layerLabel; + expect(result).toEqual([res]); }); test('Build border-radius-c', () => { @@ -602,7 +604,9 @@ describe('PropertyFactory', () => { }, ], }; - expect(obj.build('box-shadow')).toEqual([res]); + const result = obj.build('box-shadow'); + delete result[0].layerLabel; + expect(result).toEqual([res]); }); test('Build background', () => { @@ -658,7 +662,9 @@ describe('PropertyFactory', () => { }, ], }; - expect(obj.build('background')).toEqual([res]); + const result = obj.build('background'); + delete result[0].layerLabel; + expect(result).toEqual([res]); }); test('Build transition', () => { @@ -686,7 +692,7 @@ describe('PropertyFactory', () => { id: 'transition-duration-sub', type: 'integer', units: obj.unitsTime, - default: '2', + default: '2s', min: 0, }, {