From 0ead7b8100c3df2679806a48e66b19bc3047ca37 Mon Sep 17 00:00:00 2001
From: Florian Hotze <dev@florianhotze.com>
Date: Sun, 22 Dec 2024 01:48:33 +0100
Subject: [PATCH] Widget expressions: Fix screen object not properly
 initialized & updated (#2933)

Fixes #2929.

Signed-off-by: Florian Hotze <dev@florianhotze.com>
---
 .../widgets/widget-expression-mixin.js        | 48 ++++++++++++-------
 1 file changed, 30 insertions(+), 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
index 95c0c46e8b..7b8ed19c52 100644
--- 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) {