From bf59452a6a6562e4f760c79f1d691fbe47ca6032 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 9 Oct 2022 14:45:16 +0200
Subject: [PATCH] Access screen info in expressions context (#1510)

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
Also-by: Yannick Schaus <github@schaus.net>
---
 .../components/config/editor/hint-components.js |  5 +++--
 .../web/src/components/widgets/widget-mixin.js  | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/components/config/editor/hint-components.js b/bundles/org.openhab.ui/web/src/components/config/editor/hint-components.js
index a70cb177b..d19cbd9ff 100644
--- a/bundles/org.openhab.ui/web/src/components/config/editor/hint-components.js
+++ b/bundles/org.openhab.ui/web/src/components/config/editor/hint-components.js
@@ -110,6 +110,7 @@ function hintExpression (cm, line) {
         { text: 'theme', displayText: 'theme', description: 'The current theme: aurora, ios, or md' },
         { text: 'themeOptions', displayText: 'themeOptions', description: 'Object with current theme options' },
         { text: 'device', displayText: 'device', description: 'Object with information about the current device & browser' },
+        { text: 'screen', displayText: 'screen', description: 'Object with information about the screen and available view area' },
         { text: 'dayjs', displayText: 'dayjs', description: 'Access to the Day.js object for date manipulation & formatting' }
       ]
     }
@@ -243,8 +244,8 @@ function hintSlots (cm, line, parentLineNr) {
   let completions = definitions.map((c) => {
     return {
       text: ' '.repeat(indent + 2) + `- component: ${c.name}\n` +
-        // ' '.repeat(indent + 4) + 'config:\n' +
-        ' '.repeat(indent + 4),
+// ' '.repeat(indent + 4) + 'config:\n' +
+' '.repeat(indent + 4),
       displayText: c.name,
       componentName: c.name,
       className: `${cls}completion ${cls}completion-unknown`,
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/widget-mixin.js b/bundles/org.openhab.ui/web/src/components/widgets/widget-mixin.js
index ca18f94a5..2f232e16e 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/widget-mixin.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/widget-mixin.js
@@ -122,6 +122,7 @@ export default {
             theme: this.$theme,
             themeOptions: this.$f7.data.themeOptions,
             device: this.$device,
+            screen: this.getScreenInfo(),
             JSON: JSON,
             dayjs: dayjs
           })
@@ -144,6 +145,22 @@ 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)
+      }
+    },
     childContext (component) {
       return {
         component: component,