/*
* 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.
// The folders fold away (a "Ordner" chip), per area (the list's element id), remembered on
// this device; folded, only the folder chosen stays in sight. Folded until opened.
function areaKey(el) {
const owner = el.id ? el : el.parentElement && el.parentElement.closest('[id]');
return 'diora_folders_folded_' + (owner ? owner.id : 'x');
}
function folded(el) {
try { return localStorage.getItem(areaKey(el)) !== '0'; } catch (e) { return true; }
}
function chips(el, o) {
const lead = o.lead || [];
const leadOn = lead.some(c => c.on);
const folders = o.folders || [];
const fold = folders.length > 0 && folded(el);
let h = '
';
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 && folders.length) h += '';
if (folders.length) {
h += '';
}
folders.forEach(f => {
if (fold && o.active !== f.name) return;
h += chip('', f.name, f.count, o.active === f.name, 'data-dfo-folder="' + esc(f.name) + '"');
});
if (o.none && (!fold || o.active === '')) h += chip('dfo-none', 'Ohne Ordner', o.none, o.active === '', 'data-dfo-folder=""');
if (o.onManage && !fold) h += '';
el.innerHTML = h + '
';
el.onclick = e => {
const b = e.target.closest('button');
if (!b) return;
if (b.dataset.dfoFold) {
try { localStorage.setItem(areaKey(el), fold ? '0' : '1'); } catch (err) {}
chips(el, o);
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 '';
}
// ---- 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 = '
' +
'
' + esc(title) + '' +
'
' +
'
';
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 = '