/* dx4-ui.js · Portal DX4 v1.00 · biblioteca comum dos painéis (NOC, Backup, ServiceDesk, Base) * Aditiva: só cria o que o painel ainda não tem. Tudo em window.DX4_UI. * - DX4_UI.tema(valor?) lê/aplica 'auto' | 'light' | 'dark' em , guarda em localStorage 'dx4:tema' e segue a sessão do Portal. * - DX4_UI.toast(msg, ms?) aviso curto no rodapé (usa o toast do painel se existir). * - DX4_UI.confirma(msg, ok?, perigo?) -> Promise janela própria (confirm() do navegador é bloqueado nos artifacts). * - DX4_UI.pede(titulo, label, valor?, tipo?) -> Promise * - DX4_UI.dicaToque() no celular, segurar o dedo em um botão com title mostra a dica (não existe "passar o mouse"). * - DX4_UI.semTitle() lista botões visíveis sem title (regra fixa da DX4: todo botão com explicação). * - DX4_UI.tokens cores do Design System DX4 (claro/escuro), iguais às dos quatro painéis. */ (function () { if (window.DX4_UI) return; const T = { light: { paper: '#F4F6F5', card: '#FFFFFF', ink: '#101D24', muted: '#5C6B70', line: '#D9E0DF', line2: '#B9C4C4', teal: '#0E7C86', red: '#d93025', green: '#16a765', amber: '#C9822A', info: '#1F6FD1', purple: '#7B5CC9' }, dark: { paper: '#0F171B', card: '#16222A', ink: '#E6ECEA', muted: '#93A3A8', line: '#26343B', line2: '#3A4B53', teal: '#3FB2BC', red: '#E07A66', green: '#5FB77A', amber: '#E0A050', info: '#5B9BE6', purple: '#A68BE8' } }; const $ = s => document.querySelector(s); const esc = s => String(s == null ? '' : s).replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c])); function css() { if ($('#dx4ui-css')) return; const st = document.createElement('style'); st.id = 'dx4ui-css'; st.textContent = `.dx4ui-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink,#101D24);color:var(--paper,#F4F6F5);padding:9px 14px;border-radius:10px;font-size:13.5px;z-index:4000;opacity:0;transition:opacity .2s;pointer-events:none;max-width:92vw}.dx4ui-toast.on{opacity:1} .dx4ui-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:3900;display:flex;align-items:center;justify-content:center;padding:16px}.dx4ui-dlg{background:var(--card,#fff);color:var(--ink,#101D24);border-radius:14px;padding:18px;width:min(460px,100%);max-height:88dvh;overflow:auto;font-family:inherit}.dx4ui-dlg h3{margin:0 0 8px;font-size:17px}.dx4ui-dlg p{font-size:13.5px;margin:0 0 10px}.dx4ui-dlg input{width:100%;border:1px solid var(--line2,#B9C4C4);border-radius:10px;padding:9px 11px;font:inherit;background:var(--card,#fff);color:inherit;margin:4px 0 8px}.dx4ui-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.dx4ui-btn{border:1px solid var(--line2,#B9C4C4);background:var(--card,#fff);color:inherit;border-radius:8px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer}.dx4ui-btn.pri{background:var(--ink,#101D24);color:var(--paper,#F4F6F5);border-color:var(--ink,#101D24)}.dx4ui-btn.danger{color:var(--red,#d93025);border-color:var(--red,#d93025)}`; document.head.appendChild(st); } function tema(v) { if (v !== undefined) { try { localStorage.setItem('dx4:tema', JSON.stringify(v)); } catch (e) {} } let t = v; if (t === undefined) { try { t = JSON.parse(localStorage.getItem('dx4:tema') || '"auto"'); } catch (e) { t = 'auto'; } } if (t === 'auto') document.documentElement.removeAttribute('data-theme'); else document.documentElement.setAttribute('data-theme', t); return t; } function toast(msg, ms) { if (typeof window.toast === 'function' && window.toast !== toast) { try { return window.toast(msg, ms); } catch (e) {} } css(); let t = $('.dx4ui-toast'); if (!t) { t = document.createElement('div'); t.className = 'dx4ui-toast'; document.body.appendChild(t); } t.textContent = msg; t.classList.add('on'); clearTimeout(t._t); t._t = setTimeout(() => t.classList.remove('on'), ms || 2600); } function janela(html) { css(); const bg = document.createElement('div'); bg.className = 'dx4ui-bg'; bg.innerHTML = ``; document.body.appendChild(bg); const f = bg.querySelector('input,button'); if (f) setTimeout(() => f.focus(), 30); return bg; } function confirma(msg, ok, perigo) { return new Promise(res => { const bg = janela(`

Confirmar

${msg}

`); bg.onclick = e => { const b = e.target.closest('[data-r]'); if (b) { bg.remove(); res(b.dataset.r === '1'); } else if (e.target === bg) { bg.remove(); res(false); } }; }); } function pede(titulo, label, valor, tipo) { return new Promise(res => { const bg = janela(`

${esc(titulo)}

${esc(label)}

`); const i = bg.querySelector('input'); i.onkeydown = e => { if (e.key === 'Enter') bg.querySelector('[data-r="1"]').click(); }; bg.onclick = e => { const b = e.target.closest('[data-r]'); if (b) { const v = i.value; bg.remove(); res(b.dataset.r === '1' ? v : null); } }; }); } let ligado = false; function dicaToque() { if (ligado) return; ligado = true; let lp = null; document.addEventListener('touchstart', e => { const b = e.target.closest('button[title],a[title],[role="button"][title]'); if (!b) return; lp = setTimeout(() => toast(b.getAttribute('title'), 3000), 550); }, { passive: true }); ['touchend', 'touchmove', 'touchcancel'].forEach(ev => document.addEventListener(ev, () => clearTimeout(lp), { passive: true })); document.addEventListener('contextmenu', e => { if (e.target.closest('button[title],a[title]') && matchMedia('(pointer:coarse)').matches) e.preventDefault(); }); } function semTitle() { return [...document.querySelectorAll('button')].filter(b => !b.title && b.offsetParent !== null && !b.closest('[data-sem-dica]')).map(b => (b.textContent || b.getAttribute('aria-label') || '').trim().slice(0, 30)); } window.DX4_UI = { versao: '1.00', tokens: T, tema, toast, confirma, pede, dicaToque, semTitle, esc }; // liga sozinho o que não tem efeito colateral const inicio = () => { dicaToque(); try { const s = JSON.parse(localStorage.getItem('dx4:sessao') || 'null'); if (s && s.tema && !localStorage.getItem('dx4:tema')) tema(s.tema); } catch (e) {} }; if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', inicio); else inicio(); })();