`
+ ``
+ ``
+ ``
+ `
`;
document.body.appendChild(panel);
panel.querySelector('.as-setup-hidefoot').onchange = e => { SETTINGS.hideMbFooter = e.target.checked; save(); applyHideFooter(); };
panel.querySelector('.as-setup-autotype').onchange = e => { SETTINGS.autoType = e.target.checked; save(); };
panel.querySelector('.as-setup-autocomment').onchange = e => { SETTINGS.autoComment = e.target.checked; save(); };
panel.querySelector('.as-setup-autofront').onchange = e => { SETTINGS.autoFront = e.target.checked; save(); };
panel.querySelector('.as-setup-autofront-mode').onchange = e => { SETTINGS.autoFrontMode = e.target.value; save(); };
panel.querySelector('.as-setup-clearsel').onchange = e => { SETTINGS.clearSelAfterOp = e.target.checked; save(); };
const off = e => { if (!panel.contains(e.target) && e.target.id !== 'as-setup-btn') { panel.remove(); document.removeEventListener('mousedown', off); } };
setTimeout(() => document.addEventListener('mousedown', off), 0);
}
// at big tile sizes the selection outline alone is plenty obvious, so drop the
// per-card ✓ badge — keeps large artwork uncluttered. #234
function applyZoomClass() { root.classList.toggle('as-zoomed', SETTINGS.tile >= 280); }
function render() {
mount();
const y = window.scrollY; // keep the viewport put — rebuilding innerHTML must not jump the page
const n = opsCount();
const groups = grouped();
// #238 Detailed view: a flat list, image left + all type checkboxes & the full
// comment beside it (read long comments / see every type without the popover).
const body = SETTINGS.detailed
? ``
+ `
`
+ ``
+ `${MODEL.filter(it => !it._del).slice().sort(sortFn).map(detailRow).join('')}
`
: SETTINGS.group
? groups.map(g => groupRow(g.type, g.items)).join('') // compact: label column + cards beside it
: groups.map(g => section(g.type, g.items)).join('');
root.innerHTML = bar(n) + commentPresets() + dropZone() + newSection() + body + deletedSection();
wire();
hydrateImgs(); // re-attach cached ${esc(label)}
${items.length}${items.map(card).join('')}
`;
}
// compact group: type label in a left column, cards flow beside it (no full-width waste)
function groupRow(type, items) {
const label = type === NO_TYPE ? 'No type' : type;
return `${esc(label)}${items.length}
${items.map(card).join('')}
⬇ Drop ${ENT.noun} files hereor click to browse · new ${ITEMS} go first
New uploads
${news.length}${news.map(card).join('')}
`;
}
function deletedSection() {
const dels = MODEL.filter(it => it._del);
if (!dels.length) return '';
const body = SETTINGS.detailed // match the current view — detail rows, not grid cards
? `${dels.map(detailRow).join('')}
`
: `${dels.map(card).join('')}
`;
return `Marked for removal
${dels.length}`
+ `
`;
return `${esc(it._srcLabel || 'Sourcing…')}
${thumbImg(it, SETTINGS.tile > 260 ? 500 : 250)}
${it._new ? 'NEW' : ''}
${it._pdf ? 'PDF' : ''}
${provBadge(it)}
${it._del ? '' : ''}
${foot(it)}
✓
${typePill}
`;
const dim = `${dimHtml(it)}`;
if (it._del) return `${dim}
${typeRow}${cmt}${dim}
${typeRow}
✕
`;
const types = ALL_TYPES.map(t => ``).join('');
return `${it._new ? 'NEW' : ''}${thumbImg(it, 250)}${it._pdf ? 'PDF' : ''}
${esc(dimText(it))}
${it._new ? '' : `#${esc(it.id)}
`}
${it._new ? 'NEW' : ''}${thumbImg(it, 250)}${provBadge(it)}${it._pdf ? 'PDF' : ''}
${esc(dimText(it))}
${it._new ? '' : `#${esc(it.id)}
`}
Sort
`
+ sorts.map(([v, l]) => ``).join('')
+ `View
`
+ [['grid', 'Grid', ''], ['detailed', 'Detailed view', '(list + all types & comment)'], ['group', 'Group by type', '(view-only)']]
.map(([v, l, note]) => ``).join('');
document.body.appendChild(pop);
placePop(pop, btn.getBoundingClientRect());
pop.querySelectorAll('input[name="as-vsort"]').forEach(r => r.onchange = () => { SETTINGS.sort = r.value; save(); render(); });
// #234: the view modes are mutually exclusive — Grid / Detailed / Group.
pop.querySelectorAll('input[name="as-vmode"]').forEach(r => r.onchange = () => {
SETTINGS.detailed = r.value === 'detailed'; SETTINGS.group = r.value === 'group';
save(); render();
});
const off = e => { if (!pop.contains(e.target) && e.target !== btn) { pop.remove(); document.removeEventListener('mousedown', off); } };
setTimeout(() => document.addEventListener('mousedown', off), 0);
}
// position a popover next to an anchor, flipping up / clamping so it stays on-screen
function placePop(pop, r) {
const ph = pop.offsetHeight, pw = pop.offsetWidth, vh = innerHeight, vw = innerWidth, M = 8;
let top = r.bottom + 3;
if (top + ph > vh - M && r.top - ph - 3 >= M) top = r.top - ph - 3; // flip above the anchor
top = Math.max(M, Math.min(top, vh - ph - M));
let left = Math.max(M, Math.min(r.left, vw - pw - M));
pop.style.top = (top + scrollY) + 'px';
pop.style.left = (left + scrollX) + 'px';
}
function openTypePop(chip) {
const it = byId(cardId(chip)); if (!it) return;
openTypePopFor(it, chip, () => render());
}
// shared single-cover type picker — anchored to `anchor`, mutating `it.types`,
// calling `onChange` after each toggle. Used by the grid pills AND the lightbox.
function openTypePopFor(it, anchor, onChange) {
document.querySelectorAll('.as-pop').forEach(p => p.remove());
const pop = document.createElement('div'); pop.className = 'as-pop';
pop.innerHTML = `${ALL_TYPES.map(t => ``).join('')}
`;
document.body.appendChild(pop);
placePop(pop, anchor.getBoundingClientRect());
pop.querySelectorAll('input').forEach(cb => cb.onchange = () => {
it.types = ALL_TYPES.filter(t => pop.querySelector(`input[value="${CSS.escape(t)}"]`).checked);
onChange && onChange();
});
const off = e => { if (!pop.contains(e.target)) { pop.remove(); document.removeEventListener('mousedown', off); _popJustClosed = true; setTimeout(() => { _popJustClosed = false; }, 0); } };
setTimeout(() => document.addEventListener('mousedown', off), 0);
return pop;
}
let _popJustClosed = false; // bridges the mousedown-dismiss → click gap so a pop dismissal doesn't also close the lightbox
let _drag = null;
// the block being dragged: the whole selection if the grabbed card is selected, else just it
const dragBlock = () => (_drag && _drag._sel) ? MODEL.filter(it => it._sel && !it._del).sort((a, b) => a.order - b.order) : (_drag ? [_drag] : []);
function wireDrag() {
root.querySelectorAll('.as-card[draggable="true"]').forEach(card => {
card.ondragstart = e => { _drag = byId(card.dataset.id); dragBlock().forEach(g => cardEl(g)?.classList.add('as-dragging')); e.dataTransfer.effectAllowed = 'move'; };
card.ondragend = () => { root.querySelectorAll('.as-dragging').forEach(c => c.classList.remove('as-dragging')); _drag = null; root.querySelectorAll('.as-drop').forEach(c => c.classList.remove('as-drop')); };
card.ondragover = e => {
const tgt = byId(card.dataset.id);
if (!_drag || dragBlock().includes(tgt)) return; // not onto a member of the moving block
e.preventDefault(); root.querySelectorAll('.as-drop').forEach(c => c.classList.remove('as-drop')); card.classList.add('as-drop');
};
card.ondrop = e => {
e.preventDefault(); const tgt = byId(card.dataset.id); const block = dragBlock();
if (!_drag || !tgt || block.includes(tgt)) return;
reorder(block, tgt); render();
};
});
}
const cardEl = it => root.querySelector(`.as-card[data-id="${CSS.escape(String(it.id))}"]`);
function reorder(block, tgt) {
// move the block (one card, or the whole selection) next to tgt, preserving the
// block's relative order. Drop on the side you came from: forward → after tgt.
const seq = MODEL.filter(it => !it._del).slice().sort((a, b) => a.order - b.order);
const set = new Set(block);
const fromFirst = Math.min(...block.map(b => seq.indexOf(b)));
const forward = fromFirst < seq.indexOf(tgt);
const rest = seq.filter(it => !set.has(it));
const to = rest.indexOf(tgt) + (forward ? 1 : 0);
rest.splice(to, 0, ...block);
rest.forEach((it, i) => it.order = i);
}
// ── actions ───────────────────────────────────────────────────────────────────
// #244 a download name that round-trips the type back via #243:
// "Source ${ENT.noun}
`
+ `Looking for linked platforms…
`
+ ``
+ `or paste any URL
`
+ ``
+ ``
+ `Powered by ROpdebee's Enhanced Cover Art Uploads (must be installed).
`;
document.body.appendChild(pop); placePop(pop, btn.getBoundingClientRect());
// #250 custom providers registered by other userscripts — one stacked "Import from …"
// button each, but only for providers whose declared `match` hits a link on this release.
const cbox = pop.querySelector('.as-src-custom');
if (cbox && _customProviders.length) {
matchedCustomProviders().then(matched => {
if (!cbox.isConnected || !matched.length) return;
cbox.innerHTML = matched.map((x, i) => ``).join('');
cbox.querySelectorAll('.as-src-prov-b').forEach(b => b.onclick = () => { const x = matched[+b.dataset.ci]; pop.remove(); sourceFromProvider(x.p, x.urls); });
cbox.querySelectorAll('.as-src-ic').forEach(img => img.onerror = () => { img.style.visibility = 'hidden'; });
placePop(pop, btn.getBoundingClientRect());
});
}
const inp = pop.querySelector('.as-src-inp'); inp.focus();
const go = () => { const v = inp.value; pop.remove(); sourceFromUrl(v); };
pop.querySelector('.as-src-go').onclick = go;
inp.onkeydown = e => { if (e.key === 'Enter') { e.preventDefault(); go(); } else if (e.key === 'Escape') { e.preventDefault(); pop.remove(); } };
// paste a URL → fetch immediately (no need to click Fetch). Read after the paste
// lands; only auto-go when the whole field is a URL (typing-then-pasting won't fire).
inp.onpaste = () => setTimeout(() => { if (/^https?:\/\//i.test(inp.value.trim())) go(); }, 0);
// populate "Import from Apply ${plan.length} change${plan.length===1?'':'s'} as MusicBrainz edits🕓 My ${ENT.Noun} edits
${plan.map((o, i) => ``).join('')}
○ ${esc(o.label)}${o.id ? ` #${esc(o.id)}` : ''}${o.skip ? `${esc(o.skip)}` : ''}
${esc(it.comment)}
`;
area.querySelector('.as-lb-cmt-text').onclick = () => { _lbEditCmt = true; paintCmtArea(ov, byId(_lb)); };
} else {
area.innerHTML = ``;
area.querySelector('.as-lb-cmtadd').onclick = () => { _lbEditCmt = true; paintCmtArea(ov, byId(_lb)); };
}
}
let _lbDirty = false;
function closeLightbox() {
stopPlay(); resetZoom(); _lb = null;
const ov = document.getElementById('as-lb'); if (ov) ov.style.display = 'none';
if (_lbDirty) { _lbDirty = false; render(); } // reflect comment edits in the grid
}
let _play = null;
function updatePlayBtn() { const b = document.querySelector('.as-lb-play'); if (b) b.textContent = _play ? '⏸ Pause' : '▶ Play'; }
function stopPlay() { if (_play) { clearInterval(_play); _play = null; updatePlayBtn(); } }
function togglePlay() { if (_play) stopPlay(); else { _play = setInterval(() => lbNav(1), 3000); updatePlayBtn(); } }
function lbNav(d, keepEdit) {
document.querySelectorAll('.as-pop').forEach(p => p.remove()); // a dangling type pop must not survive a cover change (incl. slideshow)
const seq = visible().filter(it => !it._pdf); // PDFs open in a tab, not the lightbox
if (!seq.length) return;
let i = seq.findIndex(it => String(it.id) === String(_lb));
if (i < 0) i = 0;
i = (i + d + seq.length) % seq.length;
// keepEdit (Enter in the comment field) carries edit-mode to the next image
_lb = seq[i].id; _cursorId = _lb; _lbEditCmt = !!keepEdit; paintLightbox(); markCursor(true); preloadNeighbors();
}
// Del in full-screen view → mark the current cover for removal (same as the grid's
// delete: _del moves it to "Marked for removal", undoable there), then advance to
// the next cover — or close the lightbox if that was the last one.
function deleteLbCover() {
const it = byId(_lb); if (!it) return;
const seq = visible().filter(x => !x._pdf);
const i = seq.findIndex(x => String(x.id) === String(_lb));
it._del = true; it._sel = false; _lbDirty = true;
toast(`“${(it.types && it.types[0]) || ITEM}” marked for removal — undo in the grid`);
const rest = visible().filter(x => !x._pdf); // recomputed without the just-deleted cover
if (!rest.length) { closeLightbox(); return; }
const nx = rest[Math.min(i, rest.length - 1)];
resetZoom();
_lb = nx.id; _cursorId = nx.id; _lbEditCmt = false; paintLightbox(); markCursor(true); preloadNeighbors();
}
// ── keyboard cursor (arrows select / move; Enter opens lightbox) ──────────────
let _cursorId = null;
function markCursor(scroll) {
root.querySelectorAll('.as-card.as-cursor').forEach(c => c.classList.remove('as-cursor'));
if (!_cursorId) return;
const c = root.querySelector(`.as-card[data-id="${CSS.escape(String(_cursorId))}"]`);
if (c) { c.classList.add('as-cursor'); if (scroll) c.scrollIntoView({ block: 'nearest' }); }
}
function moveCursor(dx, dy) {
const cards = [...root.querySelectorAll('.as-card:not(.del)')];
if (!cards.length) return;
let cur = cards.find(c => c.dataset.id === String(_cursorId)) || cards[0];
if (!_cursorId) { _cursorId = cur.dataset.id; markCursor(true); return; }
const r0 = cur.getBoundingClientRect();
let best = null, bestD = Infinity;
for (const c of cards) {
if (c === cur) continue;
const r = c.getBoundingClientRect();
const ddx = (r.left + r.width / 2) - (r0.left + r0.width / 2);
const ddy = (r.top + r.height / 2) - (r0.top + r0.height / 2);
if (dx > 0 && ddx <= 4) continue; if (dx < 0 && ddx >= -4) continue;
if (dy > 0 && ddy <= 4) continue; if (dy < 0 && ddy >= -4) continue;
// penalise off-axis drift so motion stays mostly in the requested direction
const d = (dx ? Math.abs(ddx) + Math.abs(ddy) * 3 : Math.abs(ddy) + Math.abs(ddx) * 3);
if (d < bestD) { bestD = d; best = c; }
}
if (best) { _cursorId = best.dataset.id; markCursor(true); }
}
document.addEventListener('keydown', e => {
const t = e.target;
// a popover (type picker / bulk pop) is open → Escape dismisses IT first
// (wherever focus is), and other keys are swallowed so navigation/zoom/delete
// don't act behind it. Mirrors the backdrop-click behaviour.
if (document.querySelector('.as-pop')) {
if (e.key === 'Escape') { e.preventDefault(); document.querySelectorAll('.as-pop').forEach(p => p.remove()); }
else if (!(t && /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) e.preventDefault();
return;
}
if (t && /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName)) return;
if (_lb) {
if (e.key === 'Escape') { e.preventDefault(); closeLightbox(); }
else if (e.key === 'ArrowLeft') { e.preventDefault(); lbNav(-1); }
else if (e.key === 'ArrowRight') { e.preventDefault(); lbNav(1); }
else if (e.key === 'ArrowUp') { e.preventDefault(); zoomKey(1); } // ↑ zoom in
else if (e.key === 'ArrowDown') { e.preventDefault(); zoomKey(-1); } // ↓ zoom out
else if (e.key === 'p' || e.key === 'P') { e.preventDefault(); togglePlay(); }
else if (e.key === 'Delete' || e.key === 'Backspace') { e.preventDefault(); deleteLbCover(); }
else if (e.key === 'Enter') { e.preventDefault(); _lbEditCmt = true; paintCmtArea(document.getElementById('as-lb'), byId(_lb)); } // start editing the comment
else if (e.key === 'd' || e.key === 'D') { e.preventDefault(); const it = byId(_lb); if (it) dlOne(it); } // download original
return;
}
if (!root.isConnected || !root.querySelector('.as-card')) return;
const map = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
if (map[e.key]) { e.preventDefault(); moveCursor(map[e.key][0], map[e.key][1]); }
else if (e.key === 'Enter' && _cursorId) { e.preventDefault(); openLightbox(_cursorId); }
else if (e.key === ' ' && _cursorId) { e.preventDefault(); const it = byId(_cursorId); if (it && !it._del) { it._sel = !it._sel; render(); } }
else if ((e.key === 'Delete' || e.key === 'Backspace') && _cursorId) { // mark the focused cover for removal (mirrors the viewer's Del)
e.preventDefault();
const it = byId(_cursorId); if (!it || it._del) return;
const cards = [...root.querySelectorAll('.as-card:not(.del)')];
const i = cards.findIndex(c => c.dataset.id === String(_cursorId));
it._del = true; it._sel = false;
// advance the cursor to the next remaining cover so Del can be pressed repeatedly
const rest = cards.filter(c => c.dataset.id !== String(_cursorId));
_cursorId = rest.length ? rest[Math.min(i, rest.length - 1)].dataset.id : null;
render();
}
});
function openBulkTypePop(btn) {
document.querySelectorAll('.as-pop').forEach(p => p.remove());
const sel = MODEL.filter(it => it._sel && !it._del); if (!sel.length) return;
const pop = document.createElement('div'); pop.className = 'as-pop';
pop.innerHTML = `Set type on ${sel.length} ${ITEM}${sel.length===1?'':'s'}
`
+ `${ALL_TYPES.map(t => ``).join('')}
`
+ ``;
document.body.appendChild(pop);
placePop(pop, btn.getBoundingClientRect());
const picked = () => ALL_TYPES.filter(t => pop.querySelector(`input[value="${CSS.escape(t)}"]`).checked);
pop.querySelector('.as-pop-apply').onclick = () => { const ts = picked(); sel.forEach(it => it.types = ts.slice()); if (SETTINGS.clearSelAfterOp) sel.forEach(it => it._sel = false); pop.remove(); render(); }; // #277
pop.querySelector('.as-pop-add').onclick = () => { const ts = picked(); sel.forEach(it => it.types = [...new Set([...it.types, ...ts])]); if (SETTINGS.clearSelAfterOp) sel.forEach(it => it._sel = false); pop.remove(); render(); }; // #277
const off = e => { if (!pop.contains(e.target)) { pop.remove(); document.removeEventListener('mousedown', off); } };
setTimeout(() => document.addEventListener('mousedown', off), 0);
}
// #236: set one comment on every selected cover at once. Pre-fills the shared
// comment if they already agree; Apply writes it, Clear blanks them all.
function openBulkCommentPop(btn) {
document.querySelectorAll('.as-pop').forEach(p => p.remove());
const sel = MODEL.filter(it => it._sel && !it._del); if (!sel.length) return;
const common = sel.every(it => it.comment === sel[0].comment) ? sel[0].comment : '';
const pop = document.createElement('div'); pop.className = 'as-pop as-cmt-pop';
pop.innerHTML = `Comment on ${sel.length} ${ITEM}${sel.length===1?'':'s'}
`
+ ``
+ ``;
document.body.appendChild(pop);
placePop(pop, btn.getBoundingClientRect());
const inp = pop.querySelector('.as-bulk-cmt'); inp.focus(); inp.select();
const apply = v => { sel.forEach(it => it.comment = v); if (SETTINGS.clearSelAfterOp) sel.forEach(it => it._sel = false); pop.remove(); render(); }; // #277
pop.querySelector('.as-pop-apply').onclick = () => apply(inp.value);
pop.querySelector('.as-bulk-cmt-clr').onclick = () => apply('');
inp.onkeydown = e => { if (e.key === 'Enter') { e.preventDefault(); apply(inp.value); } else if (e.key === 'Escape') { e.preventDefault(); pop.remove(); } };
const off = e => { if (!pop.contains(e.target) && e.target !== btn) { pop.remove(); document.removeEventListener('mousedown', off); } };
setTimeout(() => document.addEventListener('mousedown', off), 0);
}
// ── #239 postable report (Markdown / HTML) of the selected covers ─────────────
// release artist(s) + title, linked, parsed from the page header
function releaseInfo() {
const title = (document.querySelector('h1 bdi') || document.querySelector('h1'))?.textContent?.trim() || 'release';
const sub = document.querySelector('p.subheader') || document.querySelector('.subheader');
const artists = sub ? [...sub.querySelectorAll('a[href*="/artist/"]')]
.filter(a => !/\/create(\?|$)/.test(a.getAttribute('href')))
.map(a => ({ name: a.textContent.trim(), url: 'https://musicbrainz.org' + a.getAttribute('href').split(/[?#]/)[0] })) : [];
return { title, url: `https://musicbrainz.org${ENT.base}`, artists };
}
const pad2 = n => String(n).padStart(2, '0');
// the logged-in MB user, for the export manifest ("Exported by"). Read the name from
// the /user/${artists} - ${esc(info.title)}
`, `Export date: ${date}${by ? `
Exported by: ${esc(by)}` : ''}
| Position | Cover | Resolution | Size |
|---|---|---|---|
| ${r.pos} | ${esc(r.name)} | ${esc(r.res)} | ${esc(r.size)} |
Report created with Art Station${_gm ? ' v' + esc(_gm.version) : ''}
`); return out.join('\n'); } // ensure resolution (loads originals) + byte sizes are known before a manifest is built async function ensureMeasured(sel) { await loadSizes(); await pool(sel.filter(it => !it.w && !it._pdf), 4, it => new Promise(res => { const src = it._new ? it._file : imgUrl(it.id); if (!src) return res(); const img = new Image(); img.onload = () => { it.w = img.naturalWidth; it.h = img.naturalHeight; res(); }; img.onerror = () => res(); img.src = src; })); } function buildReport(opts) { const info = releaseInfo(); const sel = MODEL.filter(it => it._sel && !it._del && !it._new).slice().sort(sortFn); if (opts.layout === 'detailed') return opts.format === 'html' ? manifestHtml(sel) : manifestMd(sel); // #244 table w/ position, type-name, resolution, size const sz = opts.size, W = sz === 'original' ? null : sz; const url = it => `${CAA}/${it.id}${sz === 'original' ? '' : '-' + sz}.jpg`; const alt = it => (it.types[0] || (IS_EVENT ? 'event art' : ITEM)).toLowerCase(); const cap = it => [it.types.join(', ') || 'no type', it.comment].filter(Boolean).join(' — '); const out = []; if (opts.format === 'html') { const artists = info.artists.length ? info.artists.map(a => `${esc(a.name)}`).join(', ') : 'Unknown artist'; out.push(`${artists} - ${esc(info.title)}
`, ''); if (opts.layout === 'captioned') sel.forEach(it => out.push(`
${esc(cap(it))}
Report — ${sel.length} ${ITEM}${sel.length===1?'':'s'}
${omitted ? `${omitted} unsaved upload${omitted===1?'':'s'} omitted (no CAA URL yet)` : ''}