Widget expressions: Fix screen object not properly initialized & upda…

…ted (#2933) Fixes #2929. Signed-off-by: Florian Hotze <[email protected]> (cherry picked from commit 0ead7b8)
openhab · Dec 22, 2024 · ebbebb7 · ebbebb7
1 parent ae1dbf9
commit ebbebb7
Showing 1 changed file with 30 additions and 18 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/widget-expression-mixin.js b/bundles/org.openhab.ui/web/src/components/widgets/widget-expression-mixin.js
@@ -40,7 +40,35 @@ dayjs.extend(isTomorrow)
 export default {
   data () {
     return {
-      exprAst: {}
+      exprAst: {},
+      recalculateScreenInfo: false
+    }
+  },
+  computed: {
+    screenInfo () {
+      const pageContent = document.querySelector('.page-current > .page-content')
+      const pageContentStyle = window.getComputedStyle(pageContent)
+
+      // recalculate screen info if clientHeight is not available yet
+      if (this.recalculateScreenInfo === false && pageContent.clientHeight === 0) {
+        this.$nextTick(() => {
+          this.recalculateScreenInfo = true
+          this.recalculateScreenInfo = false
+        })
+      }
+
+      return {
+        width: window.screen.width,
+        height: window.screen.height,
+        availWidth: window.screen.availWidth,
+        availHeight: window.screen.availHeight,
+        colorDepth: window.screen.colorDepth,
+        pixelDepth: window.screen.pixelDepth,
+        viewAreaWidth: pageContent.clientWidth - parseFloat(pageContentStyle.paddingLeft) - parseFloat(pageContentStyle.paddingRight),
+        viewAreaHeight: pageContent.clientHeight - parseFloat(pageContentStyle.paddingTop) - parseFloat(pageContentStyle.paddingBottom),
+        appWidth: this.$f7.width,
+        appHeight: this.$f7.height
+      }
     }
   },
   methods: {
@@ -77,7 +105,7 @@ export default {
             theme: this.$theme,
             themeOptions: this.$f7.data.themeOptions,
             device: this.$device,
-            screen: this.getScreenInfo(),
+            screen: this.screenInfo,
             JSON,
             dayjs,
             user: this.$store.getters.user
@@ -101,22 +129,6 @@ export default {
         return value
       }
     },
-    getScreenInfo () {
-      const pageCurrent = document.getElementsByClassName('page-current').item(0)
-      const pageContent = pageCurrent.getElementsByClassName('page-content').item(0)
-      const pageContentStyle = window.getComputedStyle(pageContent)
-
-      return {
-        width: window.screen.width,
-        height: window.screen.height,
-        availWidth: window.screen.availWidth,
-        availHeight: window.screen.availHeight,
-        colorDepth: window.screen.colorDepth,
-        pixelDepth: window.screen.pixelDepth,
-        viewAreaWidth: pageContent.clientWidth - parseFloat(pageContentStyle.paddingLeft) - parseFloat(pageContentStyle.paddingRight),
-        viewAreaHeight: pageContent.clientHeight - parseFloat(pageContentStyle.paddingTop) - parseFloat(pageContentStyle.paddingBottom)
-      }
-    },
     getAllVars (context) {
       const vars = {}
       if (context.vars) {