214 lines
12 KiB
JavaScript
214 lines
12 KiB
JavaScript
|
/*
|
||
|
|
* Folders, the same everywhere (docs/library.md): like tags (a thing may be in several),
|
||
|
|
* shown as a row of filter chips; assigned with a sheet of checkboxes; managed in another
|
||
|
|
* (rename = merge onto an existing name, delete = the things stay, order by ↑ ↓). Each area
|
||
|
|
* keeps its folders where it keeps them and calls these for the look and the dialogs:
|
||
|
|
*
|
||
|
|
* DioraFolders.chips(el, {folders: [{name, count}], active, none, lead, onPick, onManage})
|
||
|
|
* DioraFolders.assign({title, folders: [names], selected: [names], onDone(names)})
|
||
|
|
* DioraFolders.manage({title, folders: [names], onRename(old, new), onDelete(name), onOrder(names)})
|
||
|
|
*
|
||
|
|
* Runs everywhere (web, desktop, both Android apps). Chrome-61-safe: no ?. / ??.
|
||
|
|
*/
|
||
|
|
(function () {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
function esc(s) {
|
||
|
|
return String(s == null ? '' : s).replace(/[&<>"']/g, c =>
|
||
|
|
({'&': '&', '<': '<', '>': '>', '"': '"', "'": '''}[c]));
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---- the chip row ----------------------------------------------------------------------
|
||
|
|
// lead: chips before the folders (the library's Angefangen/Ungelesen …): [{id, label, count, on}],
|
||
|
|
// picked with onPick({lead: id}). active: null = all, '' = without a folder, else a name.
|
||
|
|
|
||
|
|
function chips(el, o) {
|
||
|
|
const lead = o.lead || [];
|
||
|
|
const leadOn = lead.some(c => c.on);
|
||
|
|
let h = '<div class="dfo-row" role="toolbar">';
|
||
|
|
if (!lead.length) h += chip('dfo-all', 'Alle', null, o.active == null && !leadOn, 'data-dfo-all="1"');
|
||
|
|
lead.forEach(c => { h += chip('', c.label, c.count, !!c.on, 'data-dfo-lead="' + esc(c.id) + '"'); });
|
||
|
|
if (lead.length && (o.folders || []).length) h += '<span class="dfo-sep" aria-hidden="true"></span>';
|
||
|
|
(o.folders || []).forEach(f => {
|
||
|
|
h += chip('', f.name, f.count, o.active === f.name, 'data-dfo-folder="' + esc(f.name) + '"');
|
||
|
|
});
|
||
|
|
if (o.none) h += chip('dfo-none', 'Ohne Ordner', o.none, o.active === '', 'data-dfo-folder=""');
|
||
|
|
if (o.onManage) h += '<button type="button" class="dfo-chip dfo-manage" data-dfo-manage="1" title="Ordner verwalten" aria-label="Ordner verwalten">⋯</button>';
|
||
|
|
el.innerHTML = h + '</div>';
|
||
|
|
el.onclick = e => {
|
||
|
|
const b = e.target.closest('button');
|
||
|
|
if (!b) return;
|
||
|
|
if (b.dataset.dfoManage) { o.onManage(); return; }
|
||
|
|
if (b.dataset.dfoAll) { o.onPick(null); return; }
|
||
|
|
if (b.dataset.dfoLead != null) { o.onPick({lead: b.dataset.dfoLead}); return; }
|
||
|
|
if (b.dataset.dfoFolder != null) {
|
||
|
|
const name = b.dataset.dfoFolder;
|
||
|
|
o.onPick(o.active === name ? null : name); // a second tap shows everything again
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function chip(cls, label, count, on, attrs) {
|
||
|
|
return '<button type="button" class="dfo-chip ' + cls + (on ? ' on' : '') + '" ' + attrs + '>' + esc(label) +
|
||
|
|
(count != null ? ' <span class="dfo-count">' + count + '</span>' : '') + '</button>';
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---- a sheet (above the page and the book views, below the page's dialogs) -------------------
|
||
|
|
|
||
|
|
let open = null;
|
||
|
|
function sheet(title, body, onClose) {
|
||
|
|
close();
|
||
|
|
const wrap = document.createElement('div');
|
||
|
|
wrap.className = 'dfo-scrim';
|
||
|
|
wrap.innerHTML = '<div class="dfo-sheet" role="dialog" aria-label="' + esc(title) + '">' +
|
||
|
|
'<div class="dfo-head"><strong>' + esc(title) + '</strong>' +
|
||
|
|
'<button type="button" class="dfo-x" data-dfo-close="1" aria-label="Schließen">✕</button></div>' +
|
||
|
|
'<div class="dfo-body"></div></div>';
|
||
|
|
wrap.querySelector('.dfo-body').appendChild(body);
|
||
|
|
wrap.addEventListener('click', e => {
|
||
|
|
if (e.target === wrap || e.target.closest('[data-dfo-close]')) close();
|
||
|
|
});
|
||
|
|
document.body.appendChild(wrap);
|
||
|
|
open = {wrap, onClose};
|
||
|
|
return wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
function close() {
|
||
|
|
if (!open) return;
|
||
|
|
const o = open;
|
||
|
|
open = null;
|
||
|
|
o.wrap.remove();
|
||
|
|
if (o.onClose) o.onClose();
|
||
|
|
}
|
||
|
|
|
||
|
|
const back = window.__dioraBack;
|
||
|
|
window.__dioraBack = function () {
|
||
|
|
if (open) { close(); return true; }
|
||
|
|
return back ? back() : false;
|
||
|
|
};
|
||
|
|
document.addEventListener('keydown', e => { if (e.key === 'Escape' && open) close(); });
|
||
|
|
|
||
|
|
// ---- "In Ordner …" ---------------------------------------------------------------------------
|
||
|
|
|
||
|
|
function assign(o) {
|
||
|
|
const chosen = new Set(o.selected || []);
|
||
|
|
const names = (o.folders || []).slice();
|
||
|
|
const body = document.createElement('div');
|
||
|
|
const draw = () => {
|
||
|
|
body.innerHTML = '<div class="dfo-list">' + (names.length ? names.map(n =>
|
||
|
|
'<label class="dfo-check"><input type="checkbox" value="' + esc(n) + '"' + (chosen.has(n) ? ' checked' : '') + '> ' +
|
||
|
|
esc(n) + '</label>').join('') : '<p class="dfo-note">Noch keine Ordner.</p>') + '</div>' +
|
||
|
|
'<form class="dfo-new"><input class="dfo-input" name="n" maxlength="100" placeholder="Neuer Ordner" autocomplete="off">' +
|
||
|
|
'<button type="submit" class="dfo-btn">Anlegen</button></form>' +
|
||
|
|
'<div class="dfo-actions"><button type="button" class="dfo-btn" data-dfo-close="1">Abbrechen</button>' +
|
||
|
|
'<button type="button" class="dfo-btn dfo-primary" data-dfo-ok="1">Übernehmen</button></div>';
|
||
|
|
};
|
||
|
|
draw();
|
||
|
|
body.addEventListener('change', e => {
|
||
|
|
if (e.target.type !== 'checkbox') return;
|
||
|
|
if (e.target.checked) chosen.add(e.target.value); else chosen.delete(e.target.value);
|
||
|
|
});
|
||
|
|
body.addEventListener('submit', e => {
|
||
|
|
e.preventDefault();
|
||
|
|
const n = ' '.concat(e.target.n.value).split(/\s+/).filter(Boolean).join(' ').slice(0, 100);
|
||
|
|
if (!n) return;
|
||
|
|
const same = names.filter(x => x.toLowerCase() === n.toLowerCase())[0];
|
||
|
|
if (!same) names.push(n);
|
||
|
|
chosen.add(same || n);
|
||
|
|
draw();
|
||
|
|
});
|
||
|
|
body.addEventListener('click', e => {
|
||
|
|
if (!e.target.closest('[data-dfo-ok]')) return;
|
||
|
|
const picked = names.filter(n => chosen.has(n));
|
||
|
|
close();
|
||
|
|
o.onDone(picked);
|
||
|
|
});
|
||
|
|
sheet(o.title || 'In Ordner', body);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---- "Ordner verwalten" ---------------------------------------------------------------------------
|
||
|
|
|
||
|
|
function manage(o) {
|
||
|
|
let names = (o.folders || []).slice();
|
||
|
|
const body = document.createElement('div');
|
||
|
|
const draw = () => {
|
||
|
|
body.innerHTML = names.length ? '<div class="dfo-list">' + names.map((n, i) =>
|
||
|
|
'<div class="dfo-mrow"><span class="dfo-mname">' + esc(n) + '</span>' +
|
||
|
|
'<button type="button" class="dfo-icon" data-up="' + i + '" aria-label="Nach oben"' + (i ? '' : ' disabled') + '>↑</button>' +
|
||
|
|
'<button type="button" class="dfo-icon" data-down="' + i + '" aria-label="Nach unten"' + (i < names.length - 1 ? '' : ' disabled') + '>↓</button>' +
|
||
|
|
'<button type="button" class="dfo-icon" data-rename="' + i + '" aria-label="Umbenennen">✎</button>' +
|
||
|
|
'<button type="button" class="dfo-icon" data-delete="' + i + '" aria-label="Löschen">✕</button></div>').join('') + '</div>' +
|
||
|
|
'<p class="dfo-note">Umbenennen auf einen vorhandenen Namen legt beide zusammen. Löschen entfernt nur den Ordner, nicht seinen Inhalt.</p>'
|
||
|
|
: '<p class="dfo-note">Noch keine Ordner. Sie entstehen beim Einordnen („In Ordner …“).</p>';
|
||
|
|
};
|
||
|
|
draw();
|
||
|
|
body.addEventListener('click', async e => {
|
||
|
|
const b = e.target.closest('button');
|
||
|
|
if (!b) return;
|
||
|
|
const ask = (msg, value) => typeof customPrompt === 'function' ? customPrompt(msg, value) : Promise.resolve(window.prompt(msg, value));
|
||
|
|
const sure = msg => typeof customConfirm === 'function' ? customConfirm(msg, {danger: true}) : Promise.resolve(window.confirm(msg));
|
||
|
|
if (b.dataset.up != null || b.dataset.down != null) {
|
||
|
|
const i = Number(b.dataset.up != null ? b.dataset.up : b.dataset.down);
|
||
|
|
const j = b.dataset.up != null ? i - 1 : i + 1;
|
||
|
|
if (j < 0 || j >= names.length) return;
|
||
|
|
const t = names[i]; names[i] = names[j]; names[j] = t;
|
||
|
|
draw();
|
||
|
|
o.onOrder(names.slice());
|
||
|
|
} else if (b.dataset.rename != null) {
|
||
|
|
const old = names[Number(b.dataset.rename)];
|
||
|
|
const value = await ask('Neuer Name für „' + old + '“:', old);
|
||
|
|
const n = value == null ? '' : String(value).split(/\s+/).filter(Boolean).join(' ').slice(0, 100);
|
||
|
|
if (!n || n === old) return;
|
||
|
|
await o.onRename(old, n);
|
||
|
|
const merged = names.filter(x => x.toLowerCase() === n.toLowerCase())[0];
|
||
|
|
names = merged ? names.filter(x => x !== old) : names.map(x => (x === old ? n : x));
|
||
|
|
draw();
|
||
|
|
} else if (b.dataset.delete != null) {
|
||
|
|
const n = names[Number(b.dataset.delete)];
|
||
|
|
if (!(await sure('Ordner „' + n + '“ löschen? Was darin liegt, bleibt.'))) return;
|
||
|
|
await o.onDelete(n);
|
||
|
|
names = names.filter(x => x !== n);
|
||
|
|
draw();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
sheet(o.title || 'Ordner verwalten', body);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.DioraFolders = {chips, assign, manage, close};
|
||
|
|
|
||
|
|
// ---- styles ----------------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
const style = document.createElement('style');
|
||
|
|
style.textContent = [
|
||
|
|
'.dfo-row { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }',
|
||
|
|
'.dfo-row::-webkit-scrollbar { display: none; }',
|
||
|
|
'@media (min-width: 721px) { .dfo-row { flex-wrap: wrap; overflow: visible; } }',
|
||
|
|
'.dfo-chip { flex: none; min-height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--border-strong, #444); background: none; color: inherit; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }',
|
||
|
|
'.dfo-chip.on { background: var(--accent, #e63946); border-color: var(--accent, #e63946); color: var(--on-accent, #fff); }',
|
||
|
|
'.dfo-count { opacity: .7; font-size: 12px; }',
|
||
|
|
'.dfo-none { font-style: italic; }',
|
||
|
|
'.dfo-manage { min-width: 34px; padding: 0 8px; }',
|
||
|
|
'.dfo-sep { flex: none; width: 1px; height: 20px; background: var(--border-strong, #444); margin: 0 2px; }',
|
||
|
|
// Above the book view (900), below the page's dialogs (990): a name is asked for on top.
|
||
|
|
'.dfo-scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 950; background: var(--scrim, rgba(0,0,0,.5)); display: flex; align-items: flex-end; justify-content: center; }',
|
||
|
|
'@media (min-width: 721px) { .dfo-scrim { align-items: center; } }',
|
||
|
|
'.dfo-sheet { width: 100%; max-width: 480px; max-height: 80vh; overflow-y: auto; background: var(--panel, #161616); color: var(--fg, #eee); border-radius: 14px 14px 0 0; padding: 12px 16px 18px; box-sizing: border-box; }',
|
||
|
|
'@media (min-width: 721px) { .dfo-sheet { border-radius: 14px; } }',
|
||
|
|
'.dfo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }',
|
||
|
|
'.dfo-x, .dfo-icon { background: none; border: none; color: inherit; font: inherit; font-size: 17px; min-width: 38px; min-height: 38px; cursor: pointer; }',
|
||
|
|
'.dfo-icon[disabled] { opacity: .3; cursor: default; }',
|
||
|
|
'.dfo-check { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border, #2a2a2a); cursor: pointer; }',
|
||
|
|
'.dfo-check input { width: 18px; height: 18px; }',
|
||
|
|
'.dfo-mrow { display: flex; align-items: center; border-bottom: 1px solid var(--border, #2a2a2a); }',
|
||
|
|
'.dfo-mname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }',
|
||
|
|
'.dfo-new { display: flex; gap: 8px; margin: 12px 0 4px; }',
|
||
|
|
'.dfo-input { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--border, #2a2a2a); background: var(--bg, #000); color: inherit; font: inherit; }',
|
||
|
|
'.dfo-btn { min-height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid var(--border-strong, #444); background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }',
|
||
|
|
'.dfo-primary { background: var(--accent, #e63946); border-color: var(--accent, #e63946); color: var(--on-accent, #fff); }',
|
||
|
|
'.dfo-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }',
|
||
|
|
'.dfo-note { color: var(--muted, #9a9a9a); font-size: 13px; line-height: 1.45; }',
|
||
|
|
'body.eink .dfo-chip.on, body.eink .dfo-primary { background: #000; color: #fff; }',
|
||
|
|
].join('\n');
|
||
|
|
document.head.appendChild(style);
|
||
|
|
})();
|