From 179480f6284e68676ec0c7d0a651063030f0a7e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jendrik=20J=C3=A4ger?= <admin@jendrik.tech>
Date: Tue, 5 Sep 2023 13:11:45 +0200
Subject: [PATCH] Rework button group to allow for touch inputs

---
 button-group.js | 81 +++++++++++++++++++++++++++++++------------------
 1 file changed, 52 insertions(+), 29 deletions(-)

diff --git a/button-group.js b/button-group.js
index 5e92669..a03f947 100644
--- a/button-group.js
+++ b/button-group.js
@@ -1,5 +1,8 @@
 module.exports = function (RED) {
+    var counter = 0;
+
     function ButtonGroupNode(config) {
+        const iid = ++counter;
         var ui = undefined;
         try {
             var node = this;
@@ -8,15 +11,9 @@ module.exports = function (RED) {
             }
             RED.nodes.createNode(this, config);
 
-            var sizes = ui.getSizes();
-
-            var widthPx = config.buttonwidth * sizes.sx - sizes.gx;
-
-            var heightPx = config.buttonheight * sizes.sy - sizes.gy;
-
-            var html = `<div style="width=100%; height=100%; display: flex; flex-wrap: wrap; justify-content: center;">
-                    <md-button id="{{$index}}" style="width:${widthPx}px; height:${heightPx}px; margin: ${sizes.gx}px ${sizes.gy}px; background-color: {{button.color}}; white-space: pre-wrap; word-break: break-word;" ng-click="buttonClick($event)" ng-mousedown="buttonDown($event)" ng-mouseup="buttonUp($event)" ng-repeat="button in msg.buttons">{{button.label}}</md-button>
-                </div>`;
+            var html = `
+            <div id="buttons-${iid}" style="width=100%; height=100%; display: flex; flex-wrap: wrap; justify-content: center;"></div>
+            `;
 
             var done = ui.addWidget({
                 node: node,
@@ -33,7 +30,7 @@ module.exports = function (RED) {
                     return value;
                 },
                 beforeEmit: function (msg, value) {
-                    return { msg: { buttons: value, socketid: msg.socketid } };
+                    return { msg: { iid: iid, width: config.buttonwidth, height: config.buttonheight, sizes: ui.getSizes(), buttons: value, socketid: msg.socketid } };
                 },
                 beforeSend: function (msg, orig) {
                     if (orig) {
@@ -42,27 +39,53 @@ module.exports = function (RED) {
                     }
                 },
                 initController: function ($scope, events) {
-                    $scope.buttonClick = function (e) {
-                        e.preventDefault();
-                        var buttonId = e.target.id;
-                        if ($scope.msg.buttons[buttonId].click) {
-                            $scope.send($scope.msg.buttons[buttonId].click);
+                    $scope.$watch('msg', function (msg) {
+                        if (!msg) {
+                            return;
                         }
-                    };
-                    $scope.buttonDown = function (e) {
-                        e.preventDefault();
-                        var buttonId = e.target.id;
-                        if ($scope.msg.buttons[buttonId].down) {
-                            $scope.send($scope.msg.buttons[buttonId].down);
+                        const iid = msg.iid;
+
+
+                        var root = $(`#buttons-${iid}`);
+
+                        root.children().remove();
+
+                        const widthPx = (msg.width * msg.sizes.sx) - (msg.sizes.gx * 2);
+                        const heightPx = (msg.height * msg.sizes.sy) - (msg.sizes.gy * 2);
+
+                        console.log(root, widthPx, heightPx);
+
+                        for (const button of msg.buttons) {
+                            const buttonElement = $(`<button class="md-raised md-button md-ink-ripple" type="button" style="white-space: pre-wrap; word-break: break-word;"></button>`);
+
+                            buttonElement.css("width", `${widthPx}px`);
+                            buttonElement.css("height", `${heightPx}px`);
+                            buttonElement.css("margin", `${sizes.gx}px ${sizes.gy}px`);
+                            buttonElement.css("background-color", button.color ? button.color : "");
+
+                            buttonElement.text(button.label);
+
+                            if (button.click) {
+                                buttonElement.on('click', function (e) {
+                                    $scope.send(button.click);
+                                });
+                            }
+
+                            if (button.down) {
+                                buttonElement.on('touchstart mousedown', function (e) {
+                                    $scope.send(button.down);
+                                });
+                            }
+
+                            if (button.up) {
+                                buttonElement.on('touchend mouseup', function (e) {
+                                    $scope.send(button.up);
+                                });
+                            }
+
+                            root.append(buttonElement);
                         }
-                    };
-                    $scope.buttonUp = function (e) {
-                        e.preventDefault();
-                        var buttonId = e.target.id;
-                        if ($scope.msg.buttons[buttonId].up) {
-                            $scope.send($scope.msg.buttons[buttonId].up);
-                        }
-                    };
+                    });
                 }
             });
         } catch (e) {