MaashkinoozheandClaude Opus 5.5
5497e8bfbc
The save sheet gets "+ Previous page" / "+ Next page" (right to left for rtl in Page/Book) for a picture that runs over several pages. Moments store a layout (row | column); pages the selected region does not touch are dropped. Crops, viewer and gallery draw both layouts. Dialogs now clean up directly instead of waiting for the "close" event, which a backgrounded page can deliver late (a closed sheet stayed in the page and M stopped working). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
303 lines
18 KiB
JavaScript
303 lines
18 KiB
JavaScript
'use strict';
|
||
/*
|
||
* Moments (BL-0055): a page, or a region of one or two facing pages, saved with exactly one category.
|
||
* Shared by the reader (save sheet) and the manga page (gallery and viewer). Crops are drawn by positioning the
|
||
* full page images inside a clipping box, so no thumbnails are generated on the server.
|
||
*/
|
||
const MOMENT_CATS = [
|
||
{ id: 'twist', label: 'Twist', color: '#a29bf2', svg: '<path d="M12 1.5L13.8 4.6L17.3 3.2L17.4 6.8L21 7.6L19.2 10.8L22 13.2L18.8 14.9L19.6 18.5L16 18.2L14.6 21.6L12 19.2L9.4 21.6L8 18.2L4.4 18.5L5.2 14.9L2 13.2L4.8 10.8L3 7.6L6.6 6.8L6.7 3.2L10.2 4.6Z"/><path d="M9.3 8.3v4.4"/><path d="M12.6 9.2a1.9 1.9 0 1 1 2.6 1.8c-.6.3-.8.7-.8 1.5"/><circle cx="9.3" cy="15.3" r=".5" fill="currentColor"/><circle cx="14.4" cy="15.3" r=".5" fill="currentColor"/>' },
|
||
{ id: 'hot', label: 'Hot', color: '#f0845c', svg: '<path d="M12 2.5c.5 3 3 4.5 4.5 7a6.5 6.5 0 1 1-11 1.5c.8 1.2 1.8 1.8 2.8 1.8C7.5 9 9.5 5.5 12 2.5z"/><path d="M12 21a3 3 0 0 1-3-3c0-1.8 1.5-3 3-5c1.5 2 3 3.2 3 5a3 3 0 0 1-3 3z"/><path d="M19.5 3l-1 1.6M21.5 5.5l-1.6.8"/>' },
|
||
{ id: 'awesome', label: 'Awesome', color: '#f2b443', svg: '<path d="M12 5.5L13.5 10.5L18.5 12L13.5 13.5L12 18.5L10.5 13.5L5.5 12L10.5 10.5Z"/><path d="M3 3l2.6 2.6M21 3l-2.6 2.6M3 21l2.6-2.6M21 21l-2.6-2.6M12 1.5v1.8M12 20.7v1.8M1.5 12h1.8M20.7 12h1.8"/>' },
|
||
{ id: 'cute', label: 'Cute', color: '#f07aa5', svg: '<path d="M11 21.5s-7-4.4-7-9.5a4 4 0 0 1 7-2.6a4 4 0 0 1 7 2.6c0 5.1-7 9.5-7 9.5z"/><path d="M8 13.5l1 1M13 13.5l1 1"/><path d="M19.5 2v4M17.5 4h4"/><path d="M4 3.5v2.4M2.8 4.7h2.4"/>' },
|
||
{ id: 'funny', label: 'Funny', color: '#4fcfa0', svg: '<circle cx="11" cy="13" r="8"/><path d="M6.8 11.6l1.6-1.6l1.6 1.6M12 11.6l1.6-1.6l1.6 1.6"/><path d="M7.3 14.5h7.4a3.7 3.7 0 0 1-7.4 0z"/><path d="M20.2 2.5c-1 1.6-1.6 2.6-1.6 3.4a1.6 1.6 0 0 0 3.2 0c0-.8-.6-1.8-1.6-3.4z"/>' },
|
||
{ id: 'feels', label: 'Feels', color: '#6aa8ec', svg: '<path d="M2.5 10c2.5-4 6-5.5 9.5-5.5S19 6 21.5 10"/><path d="M5 11.5a7 7 0 0 0 14 0"/><circle cx="12" cy="11" r="4"/><circle cx="13.5" cy="9.5" r="1" fill="currentColor"/><path d="M18 16.5c-1 1.5-1.5 2.4-1.5 3.1a1.5 1.5 0 0 0 3 0c0-.7-.5-1.6-1.5-3.1z"/>' },
|
||
];
|
||
const momentCat = id => MOMENT_CATS.find(c => c.id === id) || MOMENT_CATS[0];
|
||
function momentIcon(id, size = 18) {
|
||
const el = icon(`<svg viewBox="0 0 24 24" width="${size}" height="${size}" fill="none" stroke="currentColor" stroke-width="${size < 20 ? 2 : 1.6}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${momentCat(id).svg}</svg>`);
|
||
el.style.color = momentCat(id).color;
|
||
return el;
|
||
}
|
||
const momentPageLabel = pages => {
|
||
const ns = pages.map(p => p.i + 1).sort((a, b) => a - b);
|
||
return 'p. ' + (ns.length > 1 ? ns[0] + '–' + ns[ns.length - 1] : ns[0]);
|
||
};
|
||
|
||
// Displayed size after rotation, as in the reader.
|
||
const shapeOf = p => {
|
||
const turned = (p.r || 0) % 180, w = (turned ? p.h : p.w) || 1000, hh = (turned ? p.w : p.h) || 1414;
|
||
return { ...p, a: w / hh };
|
||
};
|
||
const FULL = { x: 0, y: 0, w: 1, h: 1 };
|
||
|
||
// Each page's box in units: side by side ("row", Page/Book) pages share a height of 1,
|
||
// stacked ("column", Flow) pages share a width of 1.
|
||
function arrange(pages, layout) {
|
||
const column = layout === 'column';
|
||
let at = 0;
|
||
const boxes = pages.map(shapeOf).map((p, k) => {
|
||
const b = column ? { k, p, x: 0, y: at, w: 1, h: 1 / p.a } : { k, p, x: at, y: 0, w: p.a, h: 1 };
|
||
at += column ? b.h : b.w;
|
||
return b;
|
||
});
|
||
return { boxes, w: column ? 1 : at, h: column ? at : 1 };
|
||
}
|
||
|
||
// The pages put together at `scale` px per unit.
|
||
function composite(pages, layout, scale) {
|
||
const { boxes, w, h: hh } = arrange(pages, layout), el = h('div', { class: 'moment-composite' });
|
||
for (const b of boxes) {
|
||
const W = b.w * scale, H = b.h * scale, r = b.p.r || 0;
|
||
const img = h('img', { src: b.p.u, alt: '', draggable: 'false', decoding: 'async', loading: 'lazy' });
|
||
if (r) img.style.cssText = `position:absolute;left:50%;top:50%;max-width:none;width:${r % 180 ? H : W}px;height:${r % 180 ? W : H}px;transform:translate(-50%,-50%) rotate(${r}deg)`;
|
||
el.append(h('div', { class: 'moment-page', style: `left:${b.x * scale}px;top:${b.y * scale}px;width:${W}px;height:${H}px` }, img));
|
||
}
|
||
el.style.width = w * scale + 'px';
|
||
el.style.height = hh * scale + 'px';
|
||
return el;
|
||
}
|
||
|
||
// A box of at most maxW × maxH showing `region` (or everything) of the pages.
|
||
function momentCrop(pages, region, maxW, maxH, layout = 'row') {
|
||
if (!pages.length) return h('div', { class: 'moment-crop missing', style: `width:${Math.round(maxH * 0.7)}px;height:${maxH}px` }, 'Page moved');
|
||
const r = region || FULL, { w: TW, h: TH } = arrange(pages, layout), aspect = (r.w * TW) / (r.h * TH);
|
||
const boxW = Math.min(maxW, maxH * aspect), boxH = boxW / aspect, scale = boxW / (r.w * TW);
|
||
const inner = composite(pages, layout, scale);
|
||
inner.style.transform = `translate(${-r.x * TW * scale}px, ${-r.y * TH * scale}px)`;
|
||
return h('div', { class: 'moment-crop', style: `width:${Math.round(boxW)}px;height:${Math.round(boxH)}px` }, inner);
|
||
}
|
||
|
||
// Drag a rectangle over `target` (position: relative). Coordinates are fractions of the target box.
|
||
function regionPicker(target, initial, onChange) {
|
||
let region = initial || null, start = null;
|
||
const box = h('div', { class: 'region-box', hidden: true });
|
||
const layer = h('div', { class: 'region-layer' }, box);
|
||
const draw = () => {
|
||
box.hidden = !region;
|
||
if (region) Object.assign(box.style, { left: region.x * 100 + '%', top: region.y * 100 + '%', width: region.w * 100 + '%', height: region.h * 100 + '%' });
|
||
layer.classList.toggle('has-region', !!region);
|
||
};
|
||
const at = e => {
|
||
const rect = layer.getBoundingClientRect();
|
||
return { x: Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width)), y: Math.min(1, Math.max(0, (e.clientY - rect.top) / rect.height)) };
|
||
};
|
||
layer.addEventListener('pointerdown', e => { e.preventDefault(); layer.setPointerCapture(e.pointerId); start = at(e); });
|
||
layer.addEventListener('pointermove', e => {
|
||
if (!start) return;
|
||
const p = at(e);
|
||
region = { x: Math.min(start.x, p.x), y: Math.min(start.y, p.y), w: Math.abs(p.x - start.x), h: Math.abs(p.y - start.y) };
|
||
draw();
|
||
});
|
||
const end = () => {
|
||
if (!start) return;
|
||
start = null;
|
||
if (region && (region.w < 0.03 || region.h < 0.03)) region = null; // a tap, not a selection
|
||
draw();
|
||
onChange(region);
|
||
};
|
||
layer.addEventListener('pointerup', end);
|
||
layer.addEventListener('pointercancel', end);
|
||
target.append(layer);
|
||
draw();
|
||
return { get: () => region, clear() { region = null; draw(); onChange(null); } };
|
||
}
|
||
|
||
// Pages the region does not touch are dropped and the region is mapped onto the pages that remain,
|
||
// so a selection inside one page of a spread or a stack saves that page alone.
|
||
function trimPages(pages, region, layout = 'row') {
|
||
if (pages.length < 2 || !region) return { pages, region };
|
||
const column = layout === 'column', { boxes, w: TW, h: TH } = arrange(pages, layout), total = column ? TH : TW;
|
||
const from = (column ? region.y : region.x) * total, to = from + (column ? region.h : region.w) * total, eps = 0.002 * total;
|
||
const startOf = b => (column ? b.y : b.x), endOf = b => startOf(b) + (column ? b.h : b.w);
|
||
const keep = boxes.filter(b => endOf(b) > from + eps && startOf(b) < to - eps);
|
||
if (!keep.length || keep.length === boxes.length) return { pages, region };
|
||
const s0 = startOf(keep[0]), len = endOf(keep[keep.length - 1]) - s0;
|
||
const a = Math.max(0, (from - s0) / len), b = Math.min(1, (to - s0) / len);
|
||
return { pages: keep.map(x => pages[x.k]), region: column ? { ...region, y: a, h: b - a } : { ...region, x: a, w: b - a } };
|
||
}
|
||
|
||
// `dialog.done()` closes and cleans up at once. The "close" event (Esc) does the same, but it is a queued task
|
||
// that a backgrounded page may run late, so the app never waits for it.
|
||
function openDialog(className, onClose) {
|
||
const dialog = h('dialog', { class: 'moment-dialog ' + className });
|
||
let finished = false;
|
||
dialog.done = () => {
|
||
if (finished) return;
|
||
finished = true;
|
||
if (dialog.open) dialog.close();
|
||
dialog.remove();
|
||
if (onClose) onClose();
|
||
};
|
||
dialog.addEventListener('close', dialog.done);
|
||
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.done(); }); // click on the backdrop
|
||
document.body.append(dialog);
|
||
return dialog;
|
||
}
|
||
|
||
/*
|
||
* The save / edit sheet. `context` [manga title, chapter text]; `initial` {region, cat, note}.
|
||
* Pages come either fixed (`pages` in displayed order, for an edit) or from `sequence` (pages in reading order)
|
||
* with the shown `range` [first, last], which "+ Previous page" / "+ Next page" widen up to four pages.
|
||
* `layout` "row" puts them side by side (right to left when `rtl`), "column" stacks them as in Flow.
|
||
* `save({pages, layout, region, cat, note})` returns a promise. Resolves with its result, or null when cancelled.
|
||
*/
|
||
function momentSheet({ heading, context, pages: fixed, sequence, range, layout = 'row', rtl = false, initial = {}, save }) {
|
||
return new Promise(resolve => {
|
||
let result = null, cat = initial.cat || null, region = initial.region || null, picker = null;
|
||
let [lo, hi] = range || [0, 0];
|
||
const start = [lo, hi], MAX = 4;
|
||
const dialog = openDialog('moment-sheet', () => resolve(result));
|
||
const pagesNow = () => {
|
||
if (fixed) return fixed;
|
||
const run = sequence.slice(lo, hi + 1);
|
||
return layout === 'row' && rtl ? run.reverse() : run;
|
||
};
|
||
const wrap = h('div', { class: 'moment-preview-wrap' });
|
||
const where = h('div', { class: 'muted small' });
|
||
const whole = h('button', { class: 'btn small', type: 'button', hidden: true, onclick: () => picker.clear() }, 'Whole selection');
|
||
const help = h('span', { class: 'muted small' });
|
||
const earlier = h('button', { class: 'btn small', type: 'button', onclick: () => { lo--; drawPreview(); } }, '+ Previous page');
|
||
const later = h('button', { class: 'btn small', type: 'button', onclick: () => { hi++; drawPreview(); } }, '+ Next page');
|
||
const reset = h('button', { class: 'btn small', type: 'button', onclick: () => { [lo, hi] = start; drawPreview(); } }, 'Reset pages');
|
||
const extend = h('div', { class: 'moment-extend', hidden: !sequence },
|
||
layout === 'row' && rtl ? [later, reset, earlier] : [earlier, reset, later]);
|
||
// Changing the pages changes the geometry, so a selection starts over.
|
||
function drawPreview() {
|
||
const pages = pagesNow(), { w: TW, h: TH } = arrange(pages, layout);
|
||
const maxW = Math.min(560, innerWidth - 48);
|
||
const maxH = Math.min(innerHeight * (layout === 'column' ? 0.62 : innerWidth < 600 ? 0.42 : 0.5), layout === 'column' ? 900 : 520);
|
||
const preview = h('div', { class: 'moment-preview' }, composite(pages, layout, Math.min(maxW / TW, maxH / TH)));
|
||
if (picker) region = null;
|
||
picker = regionPicker(preview, region, r => { region = r; whole.hidden = !r; });
|
||
whole.hidden = !region;
|
||
wrap.replaceChildren(preview);
|
||
where.textContent = `${context[1]} · ${momentPageLabel(pages)}`;
|
||
help.textContent = 'Drag over the picture to keep just a part; pages it does not touch are left out. Without a selection everything shown is saved.';
|
||
if (sequence) {
|
||
const count = hi - lo + 1;
|
||
earlier.disabled = lo === 0 || count >= MAX;
|
||
later.disabled = hi === sequence.length - 1 || count >= MAX;
|
||
reset.hidden = lo === start[0] && hi === start[1];
|
||
}
|
||
}
|
||
const hint = h('span', { class: 'muted small moment-hint' });
|
||
const saveBtn = h('button', { class: 'btn primary', type: 'submit' }, 'Save moment');
|
||
const chips = MOMENT_CATS.map(c => {
|
||
const chip = h('button', { class: 'moment-chip', type: 'button', role: 'radio', 'data-cat': c.id, style: `--cat:${c.color}` }, momentIcon(c.id, 18), c.label);
|
||
chip.onclick = () => { cat = c.id; drawChips(); };
|
||
return chip;
|
||
});
|
||
const drawChips = () => {
|
||
for (const chip of chips) chip.setAttribute('aria-checked', String(chip.dataset.cat === cat));
|
||
saveBtn.disabled = !cat;
|
||
hint.textContent = cat ? '' : 'Pick a category to save';
|
||
};
|
||
const note = h('input', { type: 'text', maxlength: '200', placeholder: 'Optional note', 'aria-label': 'Note', value: initial.note || '' });
|
||
const error = h('p', { class: 'error small', hidden: true });
|
||
const form = h('form', { method: 'dialog' },
|
||
h('div', { class: 'moment-head' }, h('h2', {}, heading),
|
||
h('button', { class: 'btn icon', type: 'button', 'aria-label': 'Close', onclick: () => dialog.done() }, '×')),
|
||
h('div', { class: 'moment-context' }, context[0]), where,
|
||
wrap, extend,
|
||
h('div', { class: 'moment-region-row' }, help, whole),
|
||
h('div', { class: 'moment-chips', role: 'radiogroup', 'aria-label': 'Category' }, chips),
|
||
note, error,
|
||
h('div', { class: 'moment-actions' }, hint, h('div', { class: 'grow' }),
|
||
h('button', { class: 'btn', type: 'button', onclick: () => dialog.done() }, 'Cancel'), saveBtn));
|
||
form.addEventListener('submit', async e => {
|
||
e.preventDefault();
|
||
if (!cat) return;
|
||
saveBtn.disabled = true; error.hidden = true;
|
||
try {
|
||
const kept = fixed ? { pages: fixed, region } : trimPages(pagesNow(), region, layout);
|
||
result = await save({ pages: kept.pages, layout, region: kept.region, cat, note: note.value });
|
||
dialog.done();
|
||
} catch (err) { error.textContent = err.message; error.hidden = false; saveBtn.disabled = false; }
|
||
});
|
||
dialog.append(form);
|
||
drawPreview();
|
||
drawChips();
|
||
dialog.showModal();
|
||
});
|
||
}
|
||
|
||
const momentReadUrl = (mangaId, m) => 'read.html?' + qsa({ m: mangaId, c: m.c, v: m.v, p: m.pages.length ? Math.min(...m.pages.map(p => p.i)) : null });
|
||
|
||
/*
|
||
* The large viewer: `list` of moment views, starting at `index`. `onChange(list)` after an edit or a delete.
|
||
*/
|
||
function momentViewer({ mangaId, mangaTitle, list, index, onChange }) {
|
||
let k = index, full = false;
|
||
const dialog = openDialog('moment-viewer', () => removeEventListener('resize', draw));
|
||
const stage = h('div', { class: 'moment-viewer-stage' });
|
||
const info = h('div', { class: 'moment-viewer-info' });
|
||
const prevBtn = h('button', { class: 'btn icon moment-nav prev', type: 'button', 'aria-label': 'Previous moment', onclick: () => step(-1) }, '‹');
|
||
const nextBtn = h('button', { class: 'btn icon moment-nav next', type: 'button', 'aria-label': 'Next moment', onclick: () => step(1) }, '›');
|
||
const counter = h('span', { class: 'muted small' });
|
||
const fullBtn = h('button', { class: 'btn small', type: 'button', onclick: () => { full = !full; draw(); } });
|
||
const readLink = h('a', { class: 'btn primary small' }, 'Open in reader');
|
||
const actions = h('div', { class: 'moment-actions' }, fullBtn,
|
||
h('button', { class: 'btn small', type: 'button', onclick: edit }, 'Edit'),
|
||
h('button', { class: 'btn small danger', type: 'button', onclick: remove }, 'Delete'),
|
||
h('div', { class: 'grow' }), readLink);
|
||
dialog.append(
|
||
h('div', { class: 'moment-head' }, info, counter, h('button', { class: 'btn icon', type: 'button', 'aria-label': 'Close', onclick: () => dialog.done() }, '×')),
|
||
h('div', { class: 'moment-viewer-body' }, prevBtn, stage, nextBtn), actions);
|
||
|
||
function step(d) {
|
||
if (!list.length) return;
|
||
k = (k + d + list.length) % list.length; full = false; draw();
|
||
}
|
||
function draw() {
|
||
if (!list.length) return dialog.done();
|
||
const m = list[k], c = momentCat(m.cat);
|
||
const maxW = Math.min(1100, innerWidth - (innerWidth < 600 ? 32 : 140)), maxH = innerHeight - (innerWidth < 600 ? 230 : 200);
|
||
stage.replaceChildren(momentCrop(m.pages, full ? null : m.region, maxW, maxH, m.layout));
|
||
info.replaceChildren(h('span', { class: 'moment-tag', style: `--cat:${c.color}` }, momentIcon(m.cat, 16), c.label),
|
||
h('span', {}, `${m.chapter.label}${m.chapter.title ? ' · ' + m.chapter.title : ''} · ${m.missing ? 'page moved' : momentPageLabel(m.pages)}`),
|
||
h('span', { class: 'muted small' }, ago(m.t)),
|
||
...(m.note ? [h('span', { class: 'moment-note' }, m.note)] : []));
|
||
counter.textContent = `${k + 1} / ${list.length}`;
|
||
prevBtn.hidden = nextBtn.hidden = list.length < 2;
|
||
fullBtn.hidden = !m.region || m.missing;
|
||
fullBtn.textContent = full ? 'Show selection' : (m.pages.length > 1 ? 'Show all pages' : 'Show full page');
|
||
readLink.href = momentReadUrl(mangaId, m); // a moved page still opens its chapter
|
||
}
|
||
async function edit() {
|
||
const m = list[k];
|
||
if (m.missing) return;
|
||
const saved = await momentSheet({ heading: 'Edit moment', context: [mangaTitle, `${m.chapter.label}${m.chapter.title ? ' · ' + m.chapter.title : ''}`],
|
||
pages: m.pages, layout: m.layout, initial: m,
|
||
save: async ({ region, cat, note }) => (await api('api/moments/update', { id: m.id, region, cat, note })).moment });
|
||
if (!saved) return;
|
||
list[k] = saved; draw(); onChange(list);
|
||
}
|
||
async function remove() {
|
||
if (!confirm('Delete this moment?')) return;
|
||
await api('api/moments/delete', { id: list[k].id });
|
||
list.splice(k, 1);
|
||
k = Math.min(k, list.length - 1);
|
||
onChange(list);
|
||
draw();
|
||
}
|
||
|
||
dialog.addEventListener('keydown', e => {
|
||
if (e.target.closest('input, textarea') || dialog.querySelector('dialog[open]')) return;
|
||
const action = keyAction(MOMENT_VIEWER_KEYS, e.key);
|
||
if (action === 'step') { e.preventDefault(); step(e.key === 'ArrowRight' ? 1 : -1); }
|
||
});
|
||
let swipe = null;
|
||
stage.addEventListener('pointerdown', e => { swipe = { x: e.clientX, y: e.clientY, t: Date.now() }; });
|
||
stage.addEventListener('pointerup', e => {
|
||
const s = swipe; swipe = null;
|
||
if (!s || Date.now() - s.t > 800) return;
|
||
const dx = e.clientX - s.x, dy = e.clientY - s.y;
|
||
if (Math.abs(dx) >= 50 && Math.abs(dx) > 2 * Math.abs(dy)) step(dx < 0 ? 1 : -1);
|
||
});
|
||
addEventListener('resize', draw);
|
||
draw();
|
||
dialog.showModal();
|
||
}
|
||
|
||
if (typeof module !== 'undefined') module.exports = { MOMENT_CATS, trimPages, arrange, momentPageLabel };
|