diff --git a/html/account-me.ejs b/html/account-me.ejs index 5cf39938..ccee6a10 100644 --- a/html/account-me.ejs +++ b/html/account-me.ejs @@ -298,203 +298,113 @@
+ - // Initial render into grid - renderGrid(managedCards); - - // Event wiring - searchInput.addEventListener('input', onFilter); - clearBtn.addEventListener('click', () => { searchInput.value=''; onFilter(); searchInput.focus(); }); - - btnAZ.addEventListener('click', ()=>setSort('az')); - btnZA.addEventListener('click', ()=>setSort('za')); - btnGrid.addEventListener('click', ()=>setView('grid')); - btnList.addEventListener('click', ()=>setView('list')); - - // Reveal UID for keyboards/touch: toggles blur programmatically - revealBtn.addEventListener('click', ()=>{ - const pressed = revealBtn.getAttribute('aria-pressed') === 'true'; - revealBtn.setAttribute('aria-pressed', String(!pressed)); - uidMask.style.filter = pressed ? 'blur(7px)' : 'blur(0)'; - revealBtn.textContent = pressed ? 'Reveal' : 'Hide'; - }); - - // Delegate confirm() on unsub clicks - app.addEventListener('click', (e)=>{ - const a = e.target.closest('a[data-unsub]'); - if(!a) return; - const card = e.target.closest('.card'); - const name = card ? card.querySelector('.name')?.textContent?.trim() : 'this channel'; - if(!confirm('Unsubscribe from "' + name + '"?')) e.preventDefault(); - }); - - // For browsers without native lazy-loading, manually warm cache - if (!('loading' in HTMLImageElement.prototype)) { - managedCards.forEach(({el})=>{ - const img = el.querySelector('img'); - if(img){ const i = new Image(); i.src = img.src; } - }); - } - - // ---------------- Functions ---------------- - let currentView = 'grid'; // 'grid' | 'list' - let currentSort = 'az'; // 'az' | 'za' - let currentTerm = ''; - - function setView(kind){ - currentView = kind; - btnGrid.setAttribute('aria-pressed', String(kind === 'grid')); - btnList.setAttribute('aria-pressed', String(kind === 'list')); - grid.style.display = (kind === 'grid') ? '' : 'none'; - list.style.display = (kind === 'list') ? '' : 'none'; - rerender(); - } - - function setSort(kind){ - currentSort = kind; - btnAZ.setAttribute('aria-pressed', String(kind === 'az')); - btnZA.setAttribute('aria-pressed', String(kind === 'za')); - rerender(); - } - - function onFilter(){ - currentTerm = (searchInput.value || '').trim().toLowerCase(); - rerender(); - } - - function sortCards(arr){ - const dir = currentSort === 'az' ? 1 : -1; - return arr.slice().sort((a,b)=> a.name.localeCompare(b.name,'en',{sensitivity:'base'}) * dir); - } - - function filterCards(arr){ - if(!currentTerm) return arr; - return arr.filter(c => c.name.includes(currentTerm)); - } - - function rerender(){ - const filtered = filterCards(managedCards); - const sorted = sortCards(filtered); - - updateCount(sorted.length); - - if(sorted.length === 0){ - emptyState.hidden = false; - grid.innerHTML = ''; - list.innerHTML = ''; - return; - } else { - emptyState.hidden = true; - } - - if(currentView === 'grid') renderGrid(sorted); - else renderList(sorted); - } - - function renderGrid(items){ - grid.innerHTML = ''; - const frag = document.createDocumentFragment(); - items.forEach(({el}) => frag.appendChild(el.cloneNode(true))); - grid.appendChild(frag); - list.innerHTML = ''; - } - - function renderList(items){ - list.innerHTML = ''; - const frag = document.createDocumentFragment(); - items.forEach(({el})=>{ - // Convert card to a compact row for list view - const row = document.createElement('div'); - row.className = 'card'; - row.style.flexDirection = 'row'; - row.style.alignItems = 'center'; - row.style.justifyContent = 'space-between'; - row.style.gap = '12px'; - - const left = document.createElement('div'); - left.style.display = 'flex'; - left.style.alignItems = 'center'; - left.style.gap = '10px'; - - const img = el.querySelector('img').cloneNode(true); - img.style.width = '40px'; img.style.height = '40px'; img.style.borderRadius = '8px'; - - const nm = document.createElement('div'); - nm.className = 'name'; - nm.textContent = el.querySelector('.name')?.textContent || ''; - - left.appendChild(img); - left.appendChild(nm); - - const actions = el.querySelector('.row').cloneNode(true); - row.appendChild(left); - row.appendChild(actions); - - frag.appendChild(row); - }); - list.appendChild(frag); - grid.innerHTML = ''; - } - - function updateCount(n){ - countBadge.textContent = n + (n === 1 ? ' subscription' : ' subscriptions'); - } - - // Initial state - setView('grid'); - setSort('az'); - })(); -