Add stylesheet configuration to widgets

Signed-off-by: Hubert Nusser <[email protected]>

bundles/org.openhab.ui/web/package.json

@@ -80,6 +80,7 @@
     "nearley": "^2.19.6",
     "pkce-challenge": "^2.1.0",
     "qrcode": "^1.0.0",
+    "scope-css": "^1.2.1",
     "sprintf-js": "^1.1.2",
     "template7": "^1.4.2",
     "tern": "^0.23.0",

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

@@ -9,6 +9,7 @@ import isoWeek from 'dayjs/plugin/isoWeek'
 import isToday from 'dayjs/plugin/isToday'
 import isYesterday from 'dayjs/plugin/isYesterday'
 import isTomorrow from 'dayjs/plugin/isTomorrow'
+import scope from 'scope-css'
 
 dayjs.extend(relativeTime)
 dayjs.extend(calendar)
@@ -68,6 +69,24 @@ export default {
       return true
     }
   },
+  mounted () {
+    if (this.config && this.config.stylesheet) {
+      this.css_uid = 'scoped-' + Math.random().toString(36).substr(2, 9)
+
+      this.$el.classList.add(this.css_uid)
+
+      let style = document.createElement('style')
+      style.id = this.css_uid
+      style.innerHTML = scope(this.config.stylesheet, '.' + this.css_uid)
+      document.head.appendChild(style)
+    }
+  },
+  beforeDestroy () {
+    if (this.css_uid) {
+      const scoped_stylesheet = document.getElementById(this.css_uid)
+      if (scoped_stylesheet) scoped_stylesheet.remove()
+    }
+  },
   methods: {
     evaluateExpression (key, value, context) {
       if (value === null) return null

bundles/org.openhab.ui/web/src/index.html

@@ -11,7 +11,7 @@
     * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
       * Enable inline JS: add 'unsafe-inline' to default-src
   -->
-  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: blob:">
+  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: blob:; style-src 'self' 'unsafe-inline';">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
 
   <meta name="theme-color" content="#e64a19">

bundles/org.openhab.ui/web/src/pages/page/page-view.vue

@@ -58,7 +58,6 @@ export default {
   data () {
     return {
       currentTab: 0,
-      loading: false,
       fullscreen: this.$fullscreen.getState()
     }
   },
@@ -115,7 +114,6 @@ export default {
   methods: {
     onPageAfterIn () {
       this.$store.dispatch('startTrackingStates')
-      this.load()
     },
     onPageBeforeOut () {
       this.$store.dispatch('stopTrackingStates')
@@ -127,8 +125,6 @@ export default {
     onCommand (itemName, command) {
       this.$store.dispatch('sendCommand', { itemName, command })
     },
-    load () {
-    },
     tabContext (tab) {
       const page = this.$store.getters.page(tab.config.page.replace('page:', ''))
       return {