[BasicUI] Implement press & release button

Related to openhab/openhab-core#3822 Depends on openhab/openhab-core#4183 Signed-off-by: Laurent Garnier <[email protected]>
openhab · Apr 20, 2024 · 3603f34 · 3603f34
1 parent 1232bf5
commit 3603f34
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 20 deletions.
diff --git a/...enhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ButtongridRenderer.java b/...enhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/ButtongridRenderer.java
@@ -186,6 +186,7 @@ private String buildButton(String item, @Nullable String lab, String cmd, @Nulla
 
         button = button.replace("%item%", item);
         button = button.replace("%cmd%", escapeHtml(cmd));
+        button = button.replace("%release_cmd%", "");
         String buttonClass = "buttongrid-button";
 
         button = button.replace("%label%", escapeHtml(label));

diff --git a/...org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/PageRenderer.java b/...org.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/PageRenderer.java
@@ -378,6 +378,7 @@ public CharSequence renderSettings() throws RenderException {
     private void buildButton(String label, String cmd, StringBuilder buttons) throws RenderException {
         buttons.append(getSnippet("button") //
                 .replace("%cmd%", escapeHtml(cmd)) //
+                .replace("%release_cmd%", "") //
                 .replace("%label%", escapeHtml(label)) //
                 .replace("%textclass%", "mdl-button-text") //
                 .replace("%icon_snippet%", "") //

diff --git a/...g.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/SwitchRenderer.java b/...g.openhab.ui.basic/src/main/java/org/openhab/ui/basic/internal/render/SwitchRenderer.java
@@ -134,13 +134,14 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
                 if (commandDescription != null) {
                     for (CommandOption option : commandDescription.getCommandOptions()) {
                         // Truncate the button label to MAX_LABEL_SIZE characters
-                        buildButton(s, option.getLabel(), option.getCommand(), null, MAX_LABEL_SIZE, item, state,
+                        buildButton(s, option.getLabel(), option.getCommand(), null, null, MAX_LABEL_SIZE, item, state,
                                 buttons);
                     }
                 }
             } else {
                 for (Mapping mapping : s.getMappings()) {
-                    buildButton(s, mapping.getLabel(), mapping.getCmd(), mapping.getIcon(), -1, item, state, buttons);
+                    buildButton(s, mapping.getLabel(), mapping.getCmd(), mapping.getReleaseCmd(), mapping.getIcon(), -1,
+                            item, state, buttons);
                 }
             }
             snippet = snippet.replace("%buttons%", buttons.toString());
@@ -153,17 +154,22 @@ public EList<Widget> renderWidget(Widget w, StringBuilder sb, String sitemap) th
         return ECollections.emptyEList();
     }
 
-    private void buildButton(Switch w, @Nullable String lab, String cmd, @Nullable String icon, int maxLabelSize,
-            @Nullable Item item, @Nullable State state, StringBuilder buttons) throws RenderException {
+    private void buildButton(Switch w, @Nullable String lab, String cmd, @Nullable String releaseCmd,
+            @Nullable String icon, int maxLabelSize, @Nullable Item item, @Nullable State state, StringBuilder buttons)
+            throws RenderException {
         String button = getSnippet("button");
 
         String command = cmd;
+        String releaseCommand = releaseCmd;
         String label = lab == null ? cmd : lab;
 
         if (item instanceof NumberItem && ((NumberItem) item).getDimension() != null) {
             String unit = getUnitForWidget(w);
             if (unit != null) {
                 command = command.replace(UnitUtils.UNIT_PLACEHOLDER, unit);
+                if (releaseCommand != null) {
+                    releaseCommand = releaseCommand.replace(UnitUtils.UNIT_PLACEHOLDER, unit);
+                }
                 label = label.replace(UnitUtils.UNIT_PLACEHOLDER, unit);
             }
         }
@@ -173,6 +179,7 @@ private void buildButton(Switch w, @Nullable String lab, String cmd, @Nullable S
         }
 
         button = button.replace("%cmd%", escapeHtml(command));
+        button = button.replace("%release_cmd%", releaseCommand == null ? "" : escapeHtml(releaseCommand));
         String buttonClass = "";
         button = button.replace("%label%", escapeHtml(label));
         if (icon == null) {

diff --git a/bundles/org.openhab.ui.basic/src/main/resources/snippets/button.html b/bundles/org.openhab.ui.basic/src/main/resources/snippets/button.html
@@ -1,5 +1,6 @@
 <button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect %class%" 
 	data-value="%cmd%"
+	data-release-value="%release_cmd%"
 >
 	<span class="%textclass%">%label%</span>
 	%icon_snippet%

diff --git a/bundles/org.openhab.ui.basic/web-src/smarthome.js b/bundles/org.openhab.ui.basic/web-src/smarthome.js
@@ -1156,15 +1156,23 @@
 		_t.ignoreState = _t.parentNode.getAttribute("data-ignore-state") === "true";
 		_t.hasValue = _t.parentNode.getAttribute("data-has-value") === "true";
 		_t.value = _t.parentNode.parentNode.querySelector(o.formValue);
-		_t.suppressUpdateButtons = false;
 
 		_t.reset = function() {
 			_t.buttons.forEach(function(button) {
 				button.classList.remove(o.buttonActiveClass);
 			});
 		};
 
-		_t.onclick = function() {
+		function emitEvent(value) {
+			window.console.log("send " + value);
+			_t.parentNode.dispatchEvent(createEvent(
+				"control-change", {
+					item: _t.item,
+					value: value
+			}));
+		}
+
+		_t.onClick = function() {
 			/* HTMLButtonElement this */
 			var
 				value = this.getAttribute("data-value") + "";
@@ -1174,12 +1182,14 @@
 				this.classList.add(o.buttonActiveClass);
 			}
 
-			_t.parentNode.dispatchEvent(createEvent(
-				"control-change", {
-					item: _t.item,
-					value: value
-			}));
-			_t.suppressUpdateButtons = true;
+			emitEvent(value);
+		};
+
+		_t.onRelease = function() {
+			var
+				value = this.getAttribute("data-release-value") + "";
+
+			emitEvent(value);
 		};
 
 		_t.valueMap = {};
@@ -1194,11 +1204,6 @@
 				_t.value.innerHTML = value;
 			}
 
-			if (_t.suppressUpdateButtons) {
-				_t.suppressUpdateButtons = false;
-				return;
-			}
-
 			_t.reset();
 			if (
 				(_t.valueMap !== undefined) &&
@@ -1288,10 +1293,18 @@
 		_t.buttons.forEach.call(_t.buttons, function(button) {
 			var
 				icon,
-				value = button.getAttribute("data-value") + "";
+				value = button.getAttribute("data-value") + "",
+				releaseValue = button.getAttribute("data-release-value") + "";
 
 			_t.valueMap[value] = button;
-			button.addEventListener("click", _t.onclick);
+			if (releaseValue !== "") {
+				button.addEventListener("touchstart", _t.onClick);
+				button.addEventListener("mousedown", _t.onClick);
+				button.addEventListener("touchend", _t.onRelease);
+				button.addEventListener("mouseup", _t.onRelease);
+			} else {
+				button.addEventListener("click", _t.onClick);
+			}
 
 			icon = button.querySelector("img");
 			if (icon !== null) {
@@ -1303,9 +1316,17 @@
 		_t.destroy = function() {
 			_t.buttons.forEach(function(button) {
 				var
+					releaseValue = button.getAttribute("data-release-value") + "",
 					icon;
 
-				button.removeEventListener("click", _t.onclick);
+				if (releaseValue !== "") {
+					button.removeEventListener("touchstart", _t.onClick);
+					button.removeEventListener("mousedown", _t.onClick);
+					button.removeEventListener("touchend", _t.onRelease);
+					button.removeEventListener("mouseup", _t.onRelease);
+				} else {
+					button.removeEventListener("click", _t.onClick);
+				}
 
 				icon = button.querySelector("img");
 				if (icon !== null) {