From 4e819d511db49f2865a27b12d6cf2195610c4d8e Mon Sep 17 00:00:00 2001
From: msawired <sinan@openprocessing.org>
Date: Thu, 6 Apr 2023 19:15:27 +0200
Subject: [PATCH] Color Palette argument order updated. Readme improvements.

---
 README.md | 34 +++++++++++++---------------------
 opc.js    |  4 ++--
 2 files changed, 15 insertions(+), 23 deletions(-)

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]);