support stateOn/OffAsStyleClass, allow multiple class settings

Signed-off-by: Stefan Höhn <mail@stefanhoehn.com>
openhab · Oct 9, 2024 · 14b5f2d · 14b5f2d
1 parent ebbd192
commit 14b5f2d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-embedded-svg-mixin.js b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-embedded-svg-mixin.js
@@ -54,7 +54,8 @@ export default {
               pb('stateAsOpacity', 'Use State as Opacity', 'Use the state from 0 - 100 as element opacity').a(),
               pt('stateMinOpacity', 'Minimum Opacity applied', 'This allows an opacity to be kept above this value.').a(),
               pb('invertStateOpacity', 'Invert State opacity', '1 - opacity').a(),
-              pt('stateAsStyleClass', 'Set Style Class based on OnOff State ', 'Provide element-id:classname. ON sets the class, OFF removes the class of given element').a()
+              pt('stateOnAsStyleClass', 'Set Style Class based on On State ', 'Provide element-id:classname, separate multiple entries with comma. ON sets the class, if OFF is not provided, OFF removes the class of given element').a(),
+              pt('stateOffAsStyleClass', 'Set Style Class based on Off State ', 'Provide element-id:classname, separate multiple entries with comma. OFF sets the class').a()
             ])
             .paramGroup(actionGroup(), actionParams()),
           component: {

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-canvas-layout.vue
@@ -364,9 +364,19 @@ export default {
               element.oldFill = element.style.fill
               element.style.fill = (itemConfig.stateOnColor) ? stateOnColorRgbStyle : 'rgb(0, 255, 0)'
             }
-            if (itemConfig.stateAsStyleClass) {
-              const elementClassInfo = itemConfig.stateAsStyleClass.split(':')
-              document.getElementById(elementClassInfo[0]).classList.add(elementClassInfo[1])
+            if (itemConfig.stateOnAsStyleClass) {
+              if (itemConfig.stateOffAsStyleClass) { // if offStates are provided add OffStates
+                let offStatesArray = itemConfig.stateOffAsStyleClass.split(',')
+                for (const offState of offStatesArray) {
+                  const elementClassInfo = offState.split(':')
+                  document.getElementById(elementClassInfo[0].trim()).classList.remove(elementClassInfo[1].trim())
+                }
+              }
+              let onStatesArray = itemConfig.stateOnAsStyleClass.split(',')
+              for (const onState of onStatesArray) {
+                const elementClassInfo = onState.split(':')
+                document.getElementById(elementClassInfo[0].trim()).classList.add(elementClassInfo[1].trim())
+              }
             }
           } else if (state === 'OFF') {
             const updateColor = (itemConfig.stateOffColor) ? itemConfig.stateOffColor : (element?.oldFill !== 'undefined') ? element?.oldFill : 'undefined'
@@ -378,9 +388,20 @@ export default {
               opacity = (opacity < itemConfig.stateMinOpacity) ? itemConfig.stateMinOpacity : opacity
               element.style.opacity = opacity
             }
-            if (itemConfig.stateAsStyleClass) {
-              let elementClassInfo = itemConfig.stateAsStyleClass.split(':')
-              document.getElementById(elementClassInfo[0]).classList.remove(elementClassInfo[1])
+            if (itemConfig.stateOnAsStyleClass) {
+              // remove OnState-Styles first
+              let onStatesArray = itemConfig.stateOnAsStyleClass.split(',')
+              for (const onState of onStatesArray) {
+                const elementClassInfo = onState.split(':')
+                document.getElementById(elementClassInfo[0].trim()).classList.remove(elementClassInfo[1].trim())
+              }
+              if (itemConfig.stateOffAsStyleClass) { // if offStates are provided add OffStates
+                let offStatesArray = itemConfig.stateOffAsStyleClass.split(',')
+                for (const offState of offStatesArray) {
+                  const elementClassInfo = offState.split(':')
+                  document.getElementById(elementClassInfo[0].trim()).classList.add(elementClassInfo[1].trim())
+                }
+              }
             }
           } else { // Percent, OpenClosed
             if (itemConfig.stateAsOpacity && state) {