Mercurial

comparison mrjunejune/src/public/pwa-register.js @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 30c2196d03d4
children e02e2036ef84
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
55 if (document.getElementById('pwa-install-btn')) return; 55 if (document.getElementById('pwa-install-btn')) return;
56 56
57 const installBtn = document.createElement('button'); 57 const installBtn = document.createElement('button');
58 installBtn.classList.add('with-icon'); 58 installBtn.classList.add('with-icon');
59 installBtn.id = 'pwa-install-btn'; 59 installBtn.id = 'pwa-install-btn';
60 installBtn.textContent = 'Install as App'; 60 const installIcon = document.createElement('zen-icon');
61 installIcon.setAttribute('name', 'download');
62 const installLabel = document.createElement('span');
63 installLabel.textContent = 'Install as App';
64 installBtn.append(installIcon, installLabel);
61 65
62 installBtn.addEventListener('click', async () => { 66 installBtn.addEventListener('click', async () => {
63 if (!deferredPrompt) return; 67 if (!deferredPrompt) return;
64 68
65 deferredPrompt.prompt(); 69 deferredPrompt.prompt();
68 72
69 deferredPrompt = null; 73 deferredPrompt = null;
70 installBtn.remove(); 74 installBtn.remove();
71 }); 75 });
72 76
73 document.body.appendChild(installBtn); 77 const wrapper = document.createElement('zen-button');
78 wrapper.setAttribute('appearance', 'plain');
79 wrapper.setAttribute('size', 'md');
80 wrapper.append(installBtn);
81 document.body.appendChild(wrapper);
74 82
75 setTimeout(() => { 83 setTimeout(() => {
76 installBtn.style.opacity = '0'; 84 installBtn.style.opacity = '0';
77 installBtn.style.transition = 'opacity 0.3s'; 85 installBtn.style.transition = 'opacity 0.3s';
78 setTimeout(() => installBtn.remove(), 300); 86 setTimeout(() => wrapper.remove(), 300);
79 }, 5000); 87 }, 5000);
80 } 88 }
81 89
82 window.addEventListener('appinstalled', () => { 90 window.addEventListener('appinstalled', () => {
83 console.log('[PWA] App installed successfully!'); 91 console.log('[PWA] App installed successfully!');
84 deferredPrompt = null; 92 deferredPrompt = null;
85 93
86 const installBtn = document.getElementById('pwa-install-btn'); 94 const installBtn = document.getElementById('pwa-install-btn');
87 if (installBtn) installBtn.remove(); 95 if (installBtn) installBtn.closest('zen-button')?.remove();
88 }); 96 });