iobroker.mywebui 1.37.90 → 1.37.92

package/io-package.json

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

package/package.json

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

package/www/dist/frontend/config/IobrokerWebuiAppShell.js

@@ -1101,11 +1101,13 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         const fxCb   = this._getDomElement('effectsDock')?.querySelector('#editor-fx-cb');
         if (animCb) animCb.checked = value;
         if (fxCb)   fxCb.checked   = value;
-        // Apply to all open screen editors
+        // Apply to all open screen editors (designer canvas level)
         for (const ed of this._dock.querySelectorAll('iobroker-webui-screen-editor')) {
             const canvas = ed.documentContainer?.designerView?.designerCanvas;
             if (canvas) canvas.pauseAnimations = value;
         }
+        // Notify all ScreenViewer instances (including nested ones inside webcomponents)
+        window.dispatchEvent(new CustomEvent('webui-editor-animations-changed', { detail: { disabled: value } }));
     }
 
     _updateEffectsPanel() {

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

@@ -330,9 +330,12 @@ let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorA
         
         // Group visibility is now handled before applyAllBindings (SSR-style, above)
 
-        // Apply GSAP animations and effects
-        scanAndApplyAnimations(this._rootShadow).catch(() => {});
-        scanAndApplyEffects(this._rootShadow).catch(() => {});
+        // Apply GSAP animations and effects — skip in editor mode when disabled
+        if (!this._isEditorAnimationsPaused()) {
+            scanAndApplyAnimations(this._rootShadow).catch(() => {});
+            scanAndApplyEffects(this._rootShadow).catch(() => {});
+        }
+        this._applyEditorAnimationState();
     }
     _stretchView(settings) {
         const stretch = this.stretch ?? settings?.stretch;
@@ -377,7 +380,38 @@ let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorA
     _getRelativeSignalsPath() {
         return this._relativeSignalsPath;
     }
+    _isEditorAnimationsPaused() {
+        return !window.location.href.includes('runtime.html') && window.appShell?._editorAnimationsEnabled === true;
+    }
+    _editorPauseSheet = null;
+    _applyEditorAnimationState() {
+        if (window.location.href.includes('runtime.html')) return;
+        const shouldPause = window.appShell?._editorAnimationsEnabled === true;
+        if (shouldPause) {
+            // Stop GSAP-driven animations and effects (background-color, effects, etc.)
+            cleanupAnimations(this._rootShadow);
+            cleanupEffects(this._rootShadow);
+            // Also pause any remaining CSS @keyframes animations
+            if (!this._editorPauseSheet) {
+                this._editorPauseSheet = new CSSStyleSheet();
+                this._editorPauseSheet.replaceSync('*, ::before, ::after { animation-play-state: paused !important; transition: none !important; }');
+            }
+            if (!this._rootShadow.adoptedStyleSheets.includes(this._editorPauseSheet))
+                this._rootShadow.adoptedStyleSheets = [...this._rootShadow.adoptedStyleSheets, this._editorPauseSheet];
+        } else {
+            // Remove CSS pause sheet
+            if (this._editorPauseSheet)
+                this._rootShadow.adoptedStyleSheets = this._rootShadow.adoptedStyleSheets.filter(s => s !== this._editorPauseSheet);
+            // Restart GSAP animations if screen content is present
+            if (this._rootShadow.childElementCount > 0) {
+                scanAndApplyAnimations(this._rootShadow).catch(() => {});
+                scanAndApplyEffects(this._rootShadow).catch(() => {});
+            }
+        }
+    }
+    _onEditorAnimationsChanged = (e) => this._applyEditorAnimationState();
     connectedCallback() {
+        window.addEventListener('webui-editor-animations-changed', this._onEditorAnimationsChanged);
         this._refreshViewSubscription = iobrokerHandler.refreshView.on(() => this._loadScreen());
         this._screensChangedSubscription = iobrokerHandler.objectsChanged.on(d => {
             if (this._screenName && d.type == 'screen' && d.name === this._screenName)
@@ -395,6 +429,7 @@ let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorA
             this._resizeObserver.observe(this);
     }
     disconnectedCallback() {
+        window.removeEventListener('webui-editor-animations-changed', this._onEditorAnimationsChanged);
         for (let e of this.#eventListeners) {
             this.removeEventListener(e[0], e[1]);
         }