diff --git a/README.md b/README.md index 622eccc..266e361 100644 --- a/README.md +++ b/README.md @@ -30,12 +30,7 @@ Displays a range slider that user can change. ```js OPC.slider(variableName, defaultValue, [min], [max], [step]); -``` - -**Example** - -```js -OPC.slider('radius', 10, 1, 100, 1); +//example: OPC.slider('radius', 10, 1, 100, 1); ``` **Defaults** @@ -64,12 +59,7 @@ Displays a single-line text entry field. Optional placeholder text is displayed ```javascript OPC.text(variableName, defaultValue, [placeholder]); -``` - -**Example** - -```javascript -OPC.text('my_text', '', 'Enter Title'); +//example: OPC.text('my_text', '', 'Enter Title'); ``` ### Button @@ -83,7 +73,8 @@ OPC.button(variableName, buttonText); ``` **Default values** -defaultValue: #333333 + +None ### Color @@ -95,25 +86,21 @@ OPC.color(variableName, defaultValue); ``` **Default values** + defaultValue: #333333 ### Color Palette -Allows user to switch color palette used. Each pallete is an array of colors (HEX values). 'defaultValue' may be set to something else other that the ones provided in the array, however, is not recommended since user will not be able to use it again after changing the pallete. +Allows user to switch color palette used, by looping through the options given in 'palleteOptions'. Each pallete is an array of colors (HEX values). If 'defaultValue' is not provided, than first item of the array is used as default. 'defaultValue' may be set to something else other that the ones provided in the array, however, it is not recommended since user will not be able to use it again after changing the pallete. ```javascript -OPC.palette(variableName, defaultValue, palleteOptions); +OPC.palette(variableName, palleteOptions, [defaultValue]); ``` -**Defaults** - -None - **Example** ```javascript -OPC.palette('palette', - ["#eabfcb", "#c191a1", "#a4508b", "#5f0a87", "#2f004f"], +OPC.palette('currentPalette', [ ["#eabfcb", "#c191a1", "#a4508b", "#5f0a87", "#2f004f"], ["#c3dfe0", "#bcd979", "#9dad6f", "#7d6d61", "#5e574d"], @@ -121,6 +108,11 @@ OPC.palette('palette', ]); ``` +**Defaults** + +defaultValue: first option in paletteOptions array + + ## Events ### parameterChanged(variableName, value) diff --git a/opc.js b/opc.js index 977141c..0c1bb3c 100644 --- a/opc.js +++ b/opc.js @@ -44,7 +44,7 @@ class OPC { return this.initVariable(this.options[variableName]); } - static palette(variableName, value, options) { + static palette(variableName, options, value = null) { //check existing params let url = new URL(document.location.href); if (url && url.searchParams.has(variableName)) { @@ -55,7 +55,7 @@ class OPC { this.options[variableName] = { name: variableName, type: 'palette', - value: value, + value: value ?? options[0], options: options } return this.initVariable(this.options[variableName]);