From 2b91bcbedcbfc449a87d95562c02cfb29e5d7e2c Mon Sep 17 00:00:00 2001
From: Sinan Ascioglu <sinan@openprocessing.org>
Date: Wed, 11 May 2022 13:58:40 +0100
Subject: [PATCH] button option added

---
 README.md | 42 ++++++++++++++++++++++++++++++++++++++++++
 opc.js    | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+)

diff --git a/README.md b/README.md
index 0eabc09..a24fc37 100644
--- a/README.md
+++ b/README.md
@@ -72,6 +72,19 @@ OPC.text(variableName, defaultValue, [placeholder]);
 OPC.text('my_text', '', 'Enter Title');
 ```
 
+### Button
+
+Displays a button. You should use buttonPressed and/or buttonReleased events (see below) to detect user interaction. For simple interactions, using buttonReleased function should suffice.
+**buttonText** parameter is used in the button text, and it is also set as the default value for the button variable.
+
+```javascript
+OPC.button(variableName, buttonText);
+//example: OPC.button('myButton', 'Click Me!');
+```
+
+**Default values**
+defaultValue: #333333
+
 ### Color
 
 Displays a single color selector. Uses the native browser color picker, so the interface may vary. Hex values are recommended. Alpha values are not supported.
@@ -125,6 +138,35 @@ function parameterChanged(variableName, value) {
 }
 ```
 
+### buttonPressed([variableName], [value])
+
+To get an alert everytime user presses a button. If you are using multiple buttons, you can differentiate by looking up the variableName. 
+
+**Example**
+
+```javascript
+function buttonPressed(variableName, value) {
+	if (variableName === 'myButton') {
+		print('Button is pressed');
+	}
+}
+```
+
+### buttonReleased([variableName], [value])
+
+To get an alert everytime user releases a pressed a button. If you are using multiple buttons, you can differentiate by looking up the variableName. 
+
+**Example**
+
+```javascript
+function buttonPressed(variableName, value) {
+	if (variableName === 'myButton') {
+		print('Button is released');
+	}
+}
+```
+
+
 ## Utilities
 
 ### collapse()
diff --git a/opc.js b/opc.js
index a61d62a..b17c414 100644
--- a/opc.js
+++ b/opc.js
@@ -93,6 +93,21 @@ class OPC {
 		}
 		return this.initVariable(this.options[variableName]);
 	} 
+	static button(variableName, buttonText) {
+		//check existing params
+		let url = new URL(document.location.href);
+		if (url && url.searchParams.has(variableName)) {
+			//if found, ignore requested value, replace with URL param
+			value = url.searchParams.get(variableName);
+		}
+
+		this.options[variableName] = {
+			name: variableName,
+			type: 'button',
+			value: buttonText
+		}
+		return this.initVariable(this.options[variableName]);
+	} 
 
 	static initVariable = function(option){
 		Object.defineProperty(window, option.name, {
@@ -112,6 +127,23 @@ class OPC {
 	} 
 	
 
+	static set = function (variableName, value){
+		window[variableName] = value;
+	}
+	static buttonPressed = function (variableName, value){
+		OPC.options[variableName].value = value;
+		if (typeof window.buttonPressed == 'function') {
+			window.buttonPressed(variableName, value);
+		}
+		
+	}
+	static buttonReleased = function (variableName, value){
+		OPC.options[variableName].value = value;
+		if (typeof window.buttonReleased == 'function') {
+			window.buttonReleased(variableName, value);
+		}
+		
+	}
 	static set = function (variableName, value){
 		window[variableName] = value;
 	}