OpenHAB
/
openhab-webui
mirror of https://github.com/openhab/openhab-webui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Access screen info in expressions context (#1510) 

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
Also-by: Yannick Schaus <github@schaus.net>
pull/1525/head
Florian Hotze 2022-10-09 14:45:16 +02:00 committed by GitHub
parent e0b95d6764
commit bf59452a6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
bundles/org.openhab.ui/web/src/components/config/editor/hint-components.js
View File

@ -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`,

17
bundles/org.openhab.ui/web/src/components/widgets/widget-mixin.js
View File

@ -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,