From 8cb2d07121366593e0c28dc7e8aab44c2d800138 Mon Sep 17 00:00:00 2001
From: BarRaider <nospam+gh@blachshma.com>
Date: Mon, 27 May 2019 16:42:26 -0700
Subject: [PATCH] v1.0 - Added support to dropdown lists

---
 README.md             | 13 +++++++++++++
 src/sdtools.common.js | 37 +++++++++++++++++++++++++++++++++++--
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f8e7f61..4807771 100644
--- a/README.md
+++ b/README.md
@@ -53,6 +53,19 @@ To support filepickers, as recommended in the SDK follow the following guideline
 1. On the input class, add an additional class named **sdFile** _in addition_ to the sdProperty indicated above.
 2. Add a label, as indicated above. Make sure the Id of the label has a ***Filename*** suffix (If the input is called userImage than the label is named userImageFilename)
 
+### NEW! Dropdown lists
+v1.0 now supports passing a dynamic list to be shown in a dropdown. In addition, you can choose the name of the field that will hold value selected by the user.
+To support dynamic dropdown lists, follow the following guidelines:
+
+```
+<select class="sdpi-item-value select sdProperty sdList" id="sounds" oninput="setSettings()" sdListTextProperty="soundName" sdListValueProperty="soundIndex" sdValueField="soundTitle"></select>
+```
+
+1. On the select class, add an additional class named **sdList** _in addition_ to the sdProperty indicated above.
+2. Add an attribute named **sdListTextProperty** which is the name of the *property* for each item in the list that holds the text you want to show in the dropdown
+3. Add an attribute named **sdListValueProperty** which is the name of the *property* for each item in the list that holds the value you want to return when an item is selected
+4. Add an attribute named **sdValueField** which is the name of a property in the payload which will be used to both retreive the selected value and store it back if the user chooses another option in the dropdown.
+
 ## Events
 The library currently sends out two events
 ### websocketCreate
diff --git a/src/sdtools.common.js b/src/sdtools.common.js
index 6f08855..a7b5b8a 100644
--- a/src/sdtools.common.js
+++ b/src/sdtools.common.js
@@ -1,4 +1,4 @@
-// sdtools.common.js v0.8
+// sdtools.common.js v1.0
 var websocket = null,
     uuid = null,
     registerEventName = null,
@@ -71,6 +71,22 @@ function loadConfiguration(payload) {
                     elemFile.innerText = "No file...";
                 }
             }
+            else if (elem.classList.contains("sdList")) { // Dynamic dropdown
+                var textProperty = elem.getAttribute("sdListTextProperty");
+                var valueProperty = elem.getAttribute("sdListValueProperty");
+                var valueField = elem.getAttribute("sdValueField");
+
+                var items = payload[key];
+                elem.options.length = 0;
+
+                for (var idx = 0; idx < items.length; idx++) {
+                    var opt = document.createElement('option');
+                    opt.value = items[idx][valueProperty];
+                    opt.text = items[idx][textProperty];
+                    elem.appendChild(opt);
+                }
+                elem.value = payload[valueField];
+            }
             else { // Normal value
                 elem.value = payload[key];
             }
@@ -103,6 +119,10 @@ function setSettings() {
                 elemFile.innerText = elem.value;
             }
         }
+        else if (elem.classList.contains("sdList")) { // Dynamic dropdown
+            var valueField = elem.getAttribute("sdValueField");
+            payload[valueField] = elem.value;
+        }
         else { // Normal value
             payload[key] = elem.value;
         }
@@ -124,7 +144,20 @@ function setSettingsToPlugin(payload) {
     }
 }
 
-// our method to pass values to the plugin
+// Sends an entire payload to the sendToPlugin method
+function sendPayloadToPlugin(payload) {
+    if (websocket && (websocket.readyState === 1)) {
+        const json = {
+            'action': actionInfo['action'],
+            'event': 'sendToPlugin',
+            'context': uuid,
+            'payload': payload
+        };
+        websocket.send(JSON.stringify(json));
+    }
+}
+
+// Sends one value to the sendToPlugin method
 function sendValueToPlugin(value, param) {
     if (websocket && (websocket.readyState === 1)) {
         const json = {