iobroker.mywebui 1.37.92 → 1.37.94

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "mywebui",
-    "version": "1.37.92",
+    "version": "1.37.94",
     "titleLang": {
       "en": "mywebui",
       "de": "mywebui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.37.92",
+  "version": "1.37.94",
   "description": "ioBroker mywebui - Custom edited mywebui by gokturk413",
   "type": "module",
   "main": "dist/backend/main.js",

package/www/dist/frontend/runtime/AnimationService.js

@@ -2,6 +2,33 @@ import { iobrokerHandler } from '../common/IobrokerHandler.js';
 
 let _gsapLoadPromise = null;
 
+/**
+ * Find an element by ID across all shadow DOM boundaries.
+ * Starts from the shadow root of fromElement, walks UP through host shadow roots,
+ * and at each level searches DOWN through all nested shadow roots.
+ * Covers: same root, path inside nested custom control, path in parent screen, etc.
+ */
+function findElementAcrossShadows(fromElement, id) {
+    function searchDown(root) {
+        const found = root.getElementById ? root.getElementById(id) : root.querySelector('#' + id);
+        if (found) return found;
+        for (const el of root.querySelectorAll('*')) {
+            if (el.shadowRoot) {
+                const f = searchDown(el.shadowRoot);
+                if (f) return f;
+            }
+        }
+        return null;
+    }
+    let root = fromElement.getRootNode();
+    while (root instanceof ShadowRoot) {
+        const found = searchDown(root);
+        if (found) return found;
+        root = root.host.getRootNode();
+    }
+    return searchDown(document.body) ?? document.getElementById(id);
+}
+
 // AnimationService.js is at dist/frontend/runtime/ → ../../vendor/gsap/ = dist/vendor/gsap/
 const _gsapBase = new URL('../../vendor/gsap/', import.meta.url).href;
 
@@ -413,7 +440,7 @@ class AnimationInstance {
         const effect = this.cfg.effect;
 
         if (effect === 'motionPath' && this.cfg.pathId) {
-            const pathEl = document.getElementById(this.cfg.pathId);
+            const pathEl = findElementAcrossShadows(this.element, this.cfg.pathId);
             if (!pathEl) { console.warn('[AnimationService] motionPath: path element not found:', this.cfg.pathId); return; }
             this.tween = gsap.to(this.element, {
                 duration: parseFloat(this.cfg.duration) || 1,
@@ -422,8 +449,8 @@ class AnimationInstance {
                 yoyo: this.cfg.yoyo === true,
                 paused: true,
                 motionPath: {
-                    path: '#' + this.cfg.pathId,
-                    align: this.cfg.alignToPath ? '#' + this.cfg.pathId : false,
+                    path: pathEl,
+                    align: this.cfg.alignToPath ? pathEl : false,
                     autoRotate: this.cfg.orientToPath === true,
                     alignOrigin: [0.5, 0.5],
                     start: this.cfg.valueFrom ? parseFloat(this.cfg.valueFrom) / 100 : 0,