iobroker.mywebui 1.37.93 → 1.37.95

package/io-package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.mywebui",
-  "version": "1.37.93",
+  "version": "1.37.95",
   "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,11 +440,11 @@ class AnimationInstance {
         const effect = this.cfg.effect;
 
         if (effect === 'motionPath' && this.cfg.pathId) {
-            // Search in shadow root first — document.getElementById doesn't see shadow DOM elements
-            const rootNode = this.element.getRootNode();
-            const pathEl = (rootNode instanceof ShadowRoot ? rootNode : document).getElementById(this.cfg.pathId)
-                        ?? document.getElementById(this.cfg.pathId);
+            let pathEl = findElementAcrossShadows(this.element, this.cfg.pathId);
             if (!pathEl) { console.warn('[AnimationService] motionPath: path element not found:', this.cfg.pathId); return; }
+            // If ID is on <svg> container, use the first <path> inside it
+            if (pathEl.tagName.toLowerCase() === 'svg')
+                pathEl = pathEl.querySelector('path') ?? pathEl;
             this.tween = gsap.to(this.element, {
                 duration: parseFloat(this.cfg.duration) || 1,
                 ease: this.cfg.ease || 'none',