From 9b768aa7ecfbc3370847709e87dc9b9f30092bad Mon Sep 17 00:00:00 2001
From: Sinan Ascioglu <sinan@openprocessing.org>
Date: Fri, 8 Apr 2022 13:41:05 +0100
Subject: [PATCH] all OPC variables are made reactive through "set"

- Also, added the documentation for "expand" and "collapse functions
---
 README.md | 21 ++++++++++++++
 opc.js    | 82 ++++++++++++++++++-------------------------------------
 2 files changed, 47 insertions(+), 56 deletions(-)

diff --git a/README.md b/README.md
index fa3d065..0eabc09 100644
--- a/README.md
+++ b/README.md
@@ -111,6 +111,7 @@ OPC.palette('palette',
 ## Events
 
 ### parameterChanged(variableName, value)
+
 To get an alert everytime a variable changes, you can create "parameterChanged" function in your sketch. For example, if your sketch requires resizing when user changes a variable, you can use this function to get the alert and make necessary changes.
 
 **Example**
@@ -123,3 +124,23 @@ function parameterChanged(variableName, value) {
     }
 }
 ```
+
+## Utilities
+
+### collapse()
+
+Collapses the OPC configurator panel.
+**Example**
+
+```javascript
+OPC.collapse();
+```
+
+### expand()
+
+Expands the OPC configurator panel.
+**Example**
+
+```javascript
+OPC.expand();
+```
diff --git a/opc.js b/opc.js
index e14b118..24624b1 100644
--- a/opc.js
+++ b/opc.js
@@ -1,12 +1,8 @@
 class OPC {
 	static options = {};
-	static variables = [];
-	constructor(container = null) {
-		this.container = container;
+	constructor() {
 		this.options = {};
-		this.existingOptions = {};
-		this.variables = [];
-		this.minimized = false;
+		this.collapsed = false;
 	}
 
 	static slider(variableName, value, min = 0, max = null, step = null){
@@ -29,15 +25,7 @@ class OPC {
 			max: max,
 			step: step
 		}
-		this.callParentFunction('OPC', this.options[variableName] );
-		//delete existing
-		Object.defineProperty(window, variableName, {
-			get: function () {
-				return OPC.options[variableName].value;
-			}
-		});
-		this.callParentFunction('OPC', this.options[variableName]);
-		return true;
+		return this.initVariable(this.options[variableName]);
 	} 
 
 	static toggle(variableName, value = true) {
@@ -53,15 +41,7 @@ class OPC {
 			type: 'toggle',
 			value: value
 		}
-		this.callParentFunction('OPC', this.options[variableName]);
-		//delete existing
-		Object.defineProperty(window, variableName, {
-			get: function () {
-				return OPC.options[variableName].value;
-			}
-		});
-		this.callParentFunction('OPC', this.options[variableName]);
-		return true;
+		return this.initVariable(this.options[variableName]);
 	} 
 
 	static palette(variableName, value, options) {
@@ -78,15 +58,7 @@ class OPC {
 			value: value,
 			options: options
 		}
-		this.callParentFunction('OPC', this.options[variableName]);
-		//delete existing
-		Object.defineProperty(window, variableName, {
-			get: function () {
-				return OPC.options[variableName].value;
-			}
-		});
-		this.callParentFunction('OPC', this.options[variableName]);
-		return true;
+		return this.initVariable(this.options[variableName]);
 	} 
 	static color(variableName, value = '#333333') {
 		//check existing params
@@ -101,15 +73,7 @@ class OPC {
 			type: 'color',
 			value: value
 		}
-		this.callParentFunction('OPC', this.options[variableName]);
-		//delete existing
-		Object.defineProperty(window, variableName, {
-			get: function () {
-				return OPC.options[variableName].value;
-			}
-		});
-		this.callParentFunction('OPC', this.options[variableName]);
-		return true;
+		return this.initVariable(this.options[variableName]);
 	} 
 
 	static text(variableName, value, placeholder = null, maxChars = 1000) {
@@ -127,32 +91,38 @@ class OPC {
 			placeholder: placeholder,
 			max: maxChars
 		}
-		this.callParentFunction('OPC', this.options[variableName]);
-		//delete existing
-		Object.defineProperty(window, variableName, {
+		return this.initVariable(this.options[variableName]);
+	} 
+
+	static initVariable = function(option){
+		Object.defineProperty(window, option.name, {
 			get: function () {
-				return OPC.options[variableName].value;
+				return OPC.options[option.name].value;
+			},
+			set: function (value) {
+				OPC.options[option.name].value = value;
+				OPC.callParentFunction('OPC', OPC.options[option.name]);
+				if (typeof window.parameterChanged == 'function') {
+					window.parameterChanged(option.name, value);
+				}
 			}
 		});
-		this.callParentFunction('OPC', this.options[variableName]);
+		this.callParentFunction('OPC', option);
 		return true;
 	} 
 	
 
 	static set = function (variableName, value){
-		OPC.options[variableName].value = value;
-		if (typeof window.parameterChanged == 'function') {
-			window.parameterChanged(variableName, value);
-		}
+		window[variableName] = value;
 	}
 
-	static minimize = function (){
-		OPC.minimized = true;
-		this.callParentFunction('OPC_minimized', OPC.minimized);
+	static collapse = function (){
+		OPC.collapsed = true;
+		OPC.callParentFunction('OPC_collapsed', OPC.collapsed);
 	}
 	static expand = function (){
-		OPC.minimized = false;
-		this.callParentFunction('OPC_minimized', OPC.minimized);
+		OPC.collapsed = false;
+		OPC.callParentFunction('OPC_collapsed', OPC.collapsed);
 	}
 
 	static callParentFunction = function (functionName, arg = {}) {