iobroker.mywebui 1.37.84 → 1.37.85

package/io-package.json

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

package/package.json

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

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

@@ -49,6 +49,7 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
     npmState;
     scriptSystem;
     bindingsHelper;
+    _editorAnimationsEnabled = false;
     static style = css `
     :host {
       display: block;
@@ -707,10 +708,17 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         panel.id = 'anim-panel-container';
         panel.style.cssText = 'padding:12px;';
         panel.innerHTML = `
+            <label id="editor-anim-label" style="display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:12px;cursor:pointer;user-select:none;border-bottom:1px solid #ddd;padding-bottom:8px;">
+                <input type="checkbox" id="editor-anim-cb" ${this._editorAnimationsEnabled ? 'checked' : ''}>
+                disable in editor mode
+            </label>
             <h3 style="margin:0 0 12px 0;font-size:14px;font-weight:bold;color:#333;">🎬 Animation</h3>
             <div id="anim-panel-content" style="font-size:12px;"><p style="color:#999;font-style:italic;">Select an element...</p></div>
         `;
         dock.appendChild(panel);
+        panel.querySelector('#editor-anim-cb').addEventListener('change', (e) => {
+            this._setEditorAnimationsEnabled(e.target.checked);
+        });
 
         let lastEl = null;
         const poll = () => {
@@ -1062,10 +1070,17 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         panel.id = 'effects-panel-container';
         panel.style.cssText = 'padding:12px;';
         panel.innerHTML = `
+            <label id="editor-fx-label" style="display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:12px;cursor:pointer;user-select:none;border-bottom:1px solid #ddd;padding-bottom:8px;">
+                <input type="checkbox" id="editor-fx-cb" ${this._editorAnimationsEnabled ? 'checked' : ''}>
+                disable in editor mode
+            </label>
             <h3 style="margin:0 0 12px 0;font-size:14px;font-weight:bold;color:#333;">✨ Effect</h3>
             <div id="effects-panel-content" style="font-size:12px;"><p style="color:#999;font-style:italic;">Select an element...</p></div>
         `;
         dock.appendChild(panel);
+        panel.querySelector('#editor-fx-cb').addEventListener('change', (e) => {
+            this._setEditorAnimationsEnabled(e.target.checked);
+        });
 
         let lastEl = null;
         const poll = () => {
@@ -1078,6 +1093,20 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         setInterval(poll, 500);
     }
 
+    _setEditorAnimationsEnabled(value) {
+        this._editorAnimationsEnabled = value;
+        // Sync both checkboxes
+        const animCb = this._getDomElement('animationsDock')?.querySelector('#editor-anim-cb');
+        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
+        for (const ed of this._dock.querySelectorAll('iobroker-webui-screen-editor')) {
+            const canvas = ed.documentContainer?.designerView?.designerCanvas;
+            if (canvas) canvas.pauseAnimations = !value;
+        }
+    }
+
     _updateEffectsPanel() {
         const dock = this._getDomElement('effectsDock');
         if (!dock) return;

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

@@ -627,6 +627,9 @@ export class IobrokerWebuiScreenEditor extends BaseCustomWebComponentConstructor
         this._settingsChanged = window.appShell.settingsEditor.propertyChanged.on(() => {
             this.handlePropertyChanges();
         });
+        // Apply current editor animations state (set by the checkbox in Animations/Effects panels)
+        const canvas = this.documentContainer.designerView.designerCanvas;
+        if (canvas) canvas.pauseAnimations = !window.appShell._editorAnimationsEnabled;
     }
     _controlDefaultWidth = '800px';
     _controlDefaultHeight = '600px';