iobroker.mywebui 1.55.0 → 1.56.0

package/default-controls/controls/navigation/app-bar.control

@@ -0,0 +1 @@
+{"properties": {"caption": {"type": "string", "default": ""}, "icon": {"type": "string", "default": ""}, "bgColor": {"type": "color", "default": "#222222"}}, "settings": {"width": "100%", "height": "48px"}, "html": "<div id=\"bar\" class=\"bar\"><img id=\"barIcon\" class=\"bar-icon\" alt=\"\"/><span id=\"barCap\" class=\"bar-cap\"></span></div>", "style": ":host{display:block;width:100%;height:100%;}\n.bar{display:flex;align-items:center;gap:12px;height:100%;padding:0 12px 0 56px;color:#fff;box-sizing:border-box;}\n.bar-icon{height:30px;width:auto;}\n.bar-cap{font-size:16px;font-weight:600;}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const cfg = (window.IOB && window.IOB.config && window.IOB.config.appBar) || {};\n    const upd = () => {\n        const bar = instance._getDomElement('bar');\n        const ic  = instance._getDomElement('barIcon');\n        const cap = instance._getDomElement('barCap');\n        if (bar) bar.style.background = instance.bgColor || cfg.bgColor || '#222222';\n        const icon = instance.icon || cfg.icon;\n        if (ic){ if(icon){ ic.src=icon; ic.style.display=''; } else ic.style.display='none'; }\n        if (cap) cap.textContent = instance.caption || cfg.caption || '';\n    };\n    instance._assignEvent('caption-changed', upd);\n    instance._assignEvent('icon-changed', upd);\n    instance._assignEvent('bg-color-changed', upd);\n    upd();\n}"}

package/default-controls/controls/navigation/menu-item.control

@@ -0,0 +1 @@
+{"properties": {"screenName": {"type": "string", "default": ""}, "title": {"type": "string", "default": "Item"}, "image": {"type": "string", "default": ""}, "selected": {"type": "boolean", "default": "false"}, "compact": {"type": "boolean", "default": "false"}}, "settings": {"width": "220px", "height": "44px"}, "html": "<div id=\"mi\" class=\"mi\"><img id=\"miImg\" class=\"mi-img\" alt=\"\"/><span id=\"miLabel\" class=\"mi-label\"></span></div>", "style": ":host{display:block;color:inherit;}\n.mi{display:flex;align-items:center;gap:12px;padding:11px 12px;cursor:pointer;white-space:nowrap;overflow:hidden;transition:background .12s;box-sizing:border-box;}\n.mi:hover{background:rgba(255,255,255,.08);}\n.mi.selected{background:var(--nav-selected-bg,rgba(255,255,255,.16));}\n.mi-img{width:24px;height:24px;object-fit:contain;flex-shrink:0;}\n.mi-label{overflow:hidden;text-overflow:ellipsis;}\n.mi.compact .mi-label{display:none;}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const upd = () => {\n        const img = instance._getDomElement('miImg');\n        const lbl = instance._getDomElement('miLabel');\n        const mi  = instance._getDomElement('mi');\n        if (img){ if(instance.image){ img.src=instance.image; img.style.display=''; } else { img.style.display='none'; } }\n        if (lbl) lbl.textContent = instance.title || instance.screenName || '';\n        if (mi){ mi.classList.toggle('selected', instance.selected===true || instance.selected==='true'); mi.classList.toggle('compact', instance.compact===true || instance.compact==='true'); }\n    };\n    instance._assignEvent('title-changed', upd);\n    instance._assignEvent('image-changed', upd);\n    instance._assignEvent('screen-name-changed', upd);\n    instance._assignEvent('selected-changed', upd);\n    instance._assignEvent('compact-changed', upd);\n    const mi = instance._getDomElement('mi');\n    if (mi) mi.addEventListener('click', () => {\n        if (instance.screenName && window.IOB && window.IOB.changeView) window.IOB.changeView.emit(instance.screenName);\n        instance.dispatchEvent(new CustomEvent('menuitemclick',{bubbles:true,composed:true,detail:{screenName:instance.screenName}}));\n    });\n    upd();\n}"}

package/default-controls/controls/navigation/sidebar.control

@@ -0,0 +1 @@
+{"properties": {}, "settings": {"width": "220px", "height": "100%"}, "html": "<div id=\"sb\" class=\"sb\"><div id=\"sbHdr\" class=\"sb-hdr\"></div><div id=\"sbItems\" class=\"sb-items\"></div></div>", "style": ":host{display:block;width:100%;height:100%;background:var(--nav-bg,#1b1b1b);color:var(--nav-fg,#ddd);box-sizing:border-box;}\n.sb{display:flex;flex-direction:column;height:100%;width:100%;}\n.sb-hdr{padding:12px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1);white-space:nowrap;overflow:hidden;}\n.sb-items{flex:1;overflow:auto;}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const IOB = window.IOB;\n    const cfg = (IOB && IOB.config && IOB.config.navigation) || {};\n    const isDesigner = !!document.querySelector('iobroker-webui-app-shell');\n    const sb=instance._getDomElement('sb'), hdr=instance._getDomElement('sbHdr'), items=instance._getDomElement('sbItems');\n    if (hdr){ hdr.textContent=cfg.menuHeaderText||''; hdr.style.display=cfg.menuHeaderText?'':'none'; if(cfg.menuHeaderTextColor) hdr.style.color=cfg.menuHeaderTextColor; }\n    if (sb){ if(cfg.bgColor) instance.style.setProperty('--nav-bg',cfg.bgColor); if(cfg.textColor) instance.style.setProperty('--nav-fg',cfg.textColor); }\n\n    let state='expanded'; const ICONS_W=56; let burger=null; let hasItems=false;\n    const navWidth = cfg.menuWidth ? (/^\\d+$/.test(String(cfg.menuWidth))?cfg.menuWidth+'px':String(cfg.menuWidth)) : '220px';\n    const setActive=(name)=>{ if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>{ mi.selected=(mi.screenName===name); }); };\n    const navTo=(name)=>{ if(IOB&&IOB.changeView) IOB.changeView.emit(name); setActive(name); if(cfg.hideAfterSelection) setState('hidden'); };\n\n    async function loadEntries(){\n        if(!IOB||!IOB.getAllNames) return [];\n        const names=await IOB.getAllNames('screen').catch(()=>[]);\n        const list=[];\n        for(const n of names){ const o=await IOB.getWebuiObject('screen',n).catch(()=>null); const nv=o&&o.settings&&o.settings.navigation; if(nv&&nv.show) list.push({name:n,title:nv.title||n,order:parseFloat(nv.order)||0,image:nv.image||''}); }\n        list.sort((a,b)=>a.order-b.order); return list;\n    }\n    async function render(){\n        const list=await loadEntries(); hasItems=list.length>0;\n        if(items){ items.innerHTML='';\n            for(const e of list){ const mi=document.createElement('webui-navigation-menu-item'); mi.screenName=e.name; mi.title=e.title; mi.image=e.image; mi.addEventListener('menuitemclick',()=>navTo(e.name)); items.appendChild(mi); }\n        }\n        if(!isDesigner && hasItems && !cfg.hideMenu) applyRuntimeLayout(); else if(!isDesigner) { const v=document.getElementById('viewer'); if(v){ v.style.left='0'; v.style.width='100%'; } instance.style.display='none'; }\n    }\n    function applyRuntimeLayout(){\n        const ab=document.getElementById('__nav-appbar-host'); const top=ab?ab.offsetHeight:0;\n        instance.style.cssText=`position:fixed;left:0;bottom:0;top:${top}px;z-index:99999;overflow:hidden;transition:width .2s,transform .2s;background:${cfg.bgColor||'#1b1b1b'};color:${cfg.textColor||'#ddd'};`;\n        if(!burger){ burger=document.createElement('div'); burger.textContent='☰'; const inBar=top>0; burger.style.cssText=`position:fixed;top:${inBar?0:8}px;left:${inBar?0:8}px;z-index:100002;width:${inBar?top:40}px;height:${inBar?top:40}px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;${inBar?'':'border-radius:6px;'}background:${cfg.showButtonBg||(inBar?'transparent':'rgba(0,0,0,.45)')};color:${cfg.showButtonColor||'#fff'};`; burger.onclick=cycle; document.body.appendChild(burger); }\n        setState(state);\n    }\n    function setState(s){\n        state=s; const v=document.getElementById('viewer'); const top=parseInt(instance.style.top)||0; let left='0px';\n        const compact=(state==='icons');\n        if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>mi.compact=compact);\n        if(state==='expanded'){ instance.style.width=navWidth; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display=cfg.menuHeaderText?'':'none'; left=navWidth; }\n        else if(state==='icons'){ instance.style.width=ICONS_W+'px'; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display='none'; left=ICONS_W+'px'; }\n        else { instance.style.transform='translateX(-110%)'; left='0px'; }\n        if(v){ v.style.left=left; v.style.width=`calc(100% - ${left})`; v.style.top=top+'px'; v.style.height=`calc(100% - ${top}px)`; }\n    }\n    function cycle(){ const o=['expanded','icons','hidden']; let n=o[(o.indexOf(state)+1)%o.length]; if(n==='hidden'&&cfg.doNotHideCompletely)n='icons'; setState(n); }\n\n    render();\n    if(IOB&&IOB.changeView) IOB.changeView.on(v=>setActive(v));\n    const sv=document.getElementById('viewer'); if(sv&&sv.screenName) setActive(sv.screenName);\n}"}