Merged support for textarea length

src/sdtools.common.js

@@ -1,12 +1,14 @@
 // ****************************************************************
-// * EasyPI v1.3.2
+// * EasyPI v1.3.3
 // * Author: BarRaider
 // *
 // * JS library to simplify the communication between the 
 // * Stream Deck's Property Inspector and the plugin.
 // *
 // * Project page: https://github.com/BarRaider/streamdeck-easypi
 // * Support: http://discord.barraider.com
+// *
+// * Initially forked from Elgato's common.js file
 // ****************************************************************
 
 var websocket = null,
@@ -35,6 +37,7 @@ function connectElgatoStreamDeckSocket(inPort, inUUID, inRegisterEvent, inInfo,
     document.dispatchEvent(event);
 
     loadConfiguration(actionInfo.payload.settings);
+    initPropertyInspector();
 }
 
 function websocketOnOpen() {
@@ -57,7 +60,7 @@ function websocketOnMessage(evt) {
         loadConfiguration(payload.settings);
     }
     else {
-        console.log("Unhandled websocketOnMessage: " + jsonObj.event);
+        console.log("Ignored websocketOnMessage: " + jsonObj.event);
     }
 }
 
@@ -212,8 +215,31 @@ window.addEventListener('beforeunload', function (e) {
     // Don't set a returnValue to the event, otherwise Chromium with throw an error.
 });
 
+function prepareDOMElements(baseElement) {
+    baseElement = baseElement || document;
+
+    /**
+     * You could add a 'label' to a textares, e.g. to show the number of charactes already typed
+     * or contained in the textarea. This helper updates this label for you.
+     */
+    baseElement.querySelectorAll('textarea').forEach((e) => {
+        const maxl = e.getAttribute('maxlength');
+        e.targets = baseElement.querySelectorAll(`[for='${e.id}']`);
+        if (e.targets.length) {
+            let fn = () => {
+                for (let x of e.targets) {
+                    x.textContent = maxl ? `${e.value.length}/${maxl}` : `${e.value.length}`;
+                }
+            };
+            fn();
+            e.onkeyup = fn;
+        }
+    });
+}
+
 function initPropertyInspector() {
     // Place to add functions
+	prepareDOMElements(document);
 }