iobroker.mywebui 1.37.72 → 1.37.74

package/io-package.json

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

package/package.json

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

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

@@ -866,18 +866,39 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             const block = document.createElement('div');
             block.style.cssText = 'border:2px solid #c8d6e0;border-radius:5px;padding:8px;margin-bottom:10px;background:#f7fafc;';
 
-            // Header: "Animation #N" + delete button
+            // Collapsible body — collapsed by default
+            const body = document.createElement('div');
+            body.style.display = 'none';
+
+            // Header: toggle arrow + "Animation #N (effect)" + delete button
             const hdr = document.createElement('div');
-            hdr.style.cssText = 'display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;';
+            hdr.style.cssText = 'display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;';
+            const hdrLeft = document.createElement('div');
+            hdrLeft.style.cssText = 'display:flex;align-items:center;gap:5px;';
+            const arrow = document.createElement('span');
+            arrow.textContent = '▶';
+            arrow.style.cssText = 'font-size:9px;color:#3a6a8a;transition:transform 0.15s;';
             const hdrTitle = document.createElement('span');
-            hdrTitle.textContent = `Animation #${index + 1}`;
+            const effectLabel = cfg.effect || 'none';
+            hdrTitle.textContent = `#${index + 1} — ${effectLabel}`;
             hdrTitle.style.cssText = 'font-size:12px;font-weight:700;color:#3a6a8a;';
+            hdrLeft.appendChild(arrow); hdrLeft.appendChild(hdrTitle);
             const delBtn = document.createElement('button');
-            delBtn.textContent = '✕ Remove';
-            delBtn.style.cssText = 'font-size:10px;padding:2px 6px;cursor:pointer;border:1px solid #c66;border-radius:3px;background:#fff;color:#c33;';
-            delBtn.onclick = () => { cfgList.splice(index, 1); saveAndRefresh(); };
-            hdr.appendChild(hdrTitle); hdr.appendChild(delBtn);
+            delBtn.textContent = '✕';
+            delBtn.title = 'Remove animation';
+            delBtn.style.cssText = 'font-size:10px;padding:1px 5px;cursor:pointer;border:1px solid #c66;border-radius:3px;background:#fff;color:#c33;';
+            delBtn.onclick = (e) => { e.stopPropagation(); cfgList.splice(index, 1); saveAndRefresh(); };
+            hdr.appendChild(hdrLeft); hdr.appendChild(delBtn);
+
+            hdr.onclick = () => {
+                const collapsed = body.style.display === 'none';
+                body.style.display = collapsed ? '' : 'none';
+                arrow.style.transform = collapsed ? 'rotate(90deg)' : '';
+                hdr.style.marginBottom = collapsed ? '8px' : '0';
+            };
+
             block.appendChild(hdr);
+            block.appendChild(body);
 
             const sec = (title) => {
                 const d = document.createElement('div');
@@ -966,24 +987,24 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
                 return out;
             };
 
-            // Build block DOM
-            block.appendChild(sec('Effect'));
-            block.appendChild(mkField('Type', 'effect', effectSel, cfg));
+            // ── All content goes into collapsible body ──
+            body.appendChild(sec('Effect'));
+            body.appendChild(mkField('Type', 'effect', effectSel, cfg));
 
             const svgAttrRow = mkField('SVG Attr', 'svgAttr', svgAttrSel, cfg);
             svgAttrRow.style.display = cfg.effect === 'svg' ? '' : 'none';
-            block.appendChild(svgAttrRow);
+            body.appendChild(svgAttrRow);
             effectSel.addEventListener('change', () => { svgAttrRow.style.display = effectSel.value === 'svg' ? '' : 'none'; });
 
-            block.appendChild(mkField('Value From', 'valueFrom', valueFromInp, cfg));
-            block.appendChild(mkField('Value To', 'valueTo', valueToInp, cfg));
+            body.appendChild(mkField('Value From', 'valueFrom', valueFromInp, cfg));
+            body.appendChild(mkField('Value To', 'valueTo', valueToInp, cfg));
 
             const colorRows = document.createElement('div');
             const isColorEffect = e => ['fill','color','backgroundColor','svg'].includes(e);
             colorRows.style.display = isColorEffect(cfg.effect) ? '' : 'none';
             colorRows.appendChild(mkField('Color From', 'fillColorFrom', fillFromInp, cfg));
             colorRows.appendChild(mkField('Color To', 'fillColorTo', fillToInp, cfg));
-            block.appendChild(colorRows);
+            body.appendChild(colorRows);
             effectSel.addEventListener('change', () => { colorRows.style.display = isColorEffect(effectSel.value) ? '' : 'none'; });
 
             const motionRows = document.createElement('div');
@@ -991,27 +1012,27 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
             motionRows.appendChild(mkField('Path ID', 'pathId', pathIdInp, cfg));
             motionRows.appendChild(alignToPathChk);
             motionRows.appendChild(orientToPathChk);
-            block.appendChild(motionRows);
+            body.appendChild(motionRows);
             effectSel.addEventListener('change', () => { motionRows.style.display = effectSel.value === 'motionPath' ? '' : 'none'; });
 
-            block.appendChild(sec('Timing'));
-            block.appendChild(mkField('Duration (s)', 'duration', durationInp, cfg));
-            block.appendChild(mkField('Ease', 'ease', easeSel, cfg));
-            block.appendChild(mkField('Repeat', 'repeat', repeatInp, cfg));
-            block.appendChild(yoyoChk);
+            body.appendChild(sec('Timing'));
+            body.appendChild(mkField('Duration (s)', 'duration', durationInp, cfg));
+            body.appendChild(mkField('Ease', 'ease', easeSel, cfg));
+            body.appendChild(mkField('Repeat', 'repeat', repeatInp, cfg));
+            body.appendChild(yoyoChk);
 
             const originRows = document.createElement('div');
             originRows.style.display = (cfg.effect === 'rotation' || cfg.effect === 'scale') ? '' : 'none';
             originRows.appendChild(sec('Transform Origin'));
             originRows.appendChild(mkField('Origin X (%)', 'transformOriginX', originXInp, cfg));
             originRows.appendChild(mkField('Origin Y (%)', 'transformOriginY', originYInp, cfg));
-            block.appendChild(originRows);
+            body.appendChild(originRows);
             effectSel.addEventListener('change', () => { originRows.style.display = (effectSel.value === 'rotation' || effectSel.value === 'scale') ? '' : 'none'; });
 
-            block.appendChild(sec('Controls (OID triggers)'));
-            block.appendChild(playCtrl); block.appendChild(pauseCtrl);
-            block.appendChild(resumeCtrl); block.appendChild(stopCtrl);
-            block.appendChild(reverseCtrl);
+            body.appendChild(sec('Controls (OID triggers)'));
+            body.appendChild(playCtrl); body.appendChild(pauseCtrl);
+            body.appendChild(resumeCtrl); body.appendChild(stopCtrl);
+            body.appendChild(reverseCtrl);
 
             return block;
         };

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

@@ -2,6 +2,7 @@ import { BaseCustomWebComponentConstructorAppend, css, cssFromString } from "@go
 import { iobrokerHandler } from "../common/IobrokerHandler.js";
 import { PropertiesHelper } from "@gokturk413/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";
 import { visibilityService } from "./VisibilityService.js";
+import { scanAndApplyAnimations, scanAndApplyEffects, cleanupAnimations, cleanupEffects } from "./AnimationService.js";
 export const webuiCustomControlPrefix = 'webui-';
 export const webuiCustomControlSymbol = Symbol('webuiCustomControlSymbol');
 export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
@@ -80,6 +81,9 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
         
         // Scan and apply visibility to all elements inside the custom control
         await visibilityService.scanAndApply(this.shadowRoot);
+        // Scan and apply animations/effects to all elements inside the custom control
+        scanAndApplyAnimations(this.shadowRoot).catch(() => {});
+        scanAndApplyEffects(this.shadowRoot).catch(() => {});
     }
     disconnectedCallback() {
         for (let e of this.#eventListeners) {
@@ -98,6 +102,9 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
         // Remove visibility control from all elements inside the custom control
         const controlledElements = this.shadowRoot.querySelectorAll('[data-visibility-controlled="true"]');
         controlledElements.forEach(el => visibilityService.removeVisibility(el));
+        // Cleanup animations and effects
+        cleanupAnimations(this.shadowRoot);
+        cleanupEffects(this.shadowRoot);
     }
     _assignEvent(event, callback) {
         const arrayEl = [event, callback];