app.views.ListFold = class ListFold extends app.View { static targetClass = "_list-dir"; static handleClass = "_list-arrow"; static activeClass = "open"; static events = { click: "onClick" }; static shortcuts = { left: "onLeft", right: "onRight", }; open(el) { if (el && !el.classList.contains(this.constructor.activeClass)) { el.classList.add(this.constructor.activeClass); $.trigger(el, "open"); } } close(el) { if (el && el.classList.contains(this.constructor.activeClass)) { el.classList.remove(this.constructor.activeClass); $.trigger(el, "close"); } } toggle(el) { if (el.classList.contains(this.constructor.activeClass)) { this.close(el); } else { this.open(el); } } reset() { let el; while ((el = this.findByClass(this.constructor.activeClass))) { this.close(el); } } getCursor() { return ( this.findByClass(app.views.ListFocus.activeClass) || this.findByClass(app.views.ListSelect.activeClass) ); } onLeft() { const cursor = this.getCursor(); if (cursor?.classList?.contains(this.constructor.activeClass)) { this.close(cursor); } } onRight() { const cursor = this.getCursor(); if ( cursor != null ? cursor.classList.contains(this.constructor.targetClass) : undefined ) { this.open(cursor); } } onClick(event) { if (event.which !== 1 || event.metaKey || event.ctrlKey) { return; } if (!event.pageY) { return; } // ignore fabricated clicks let el = $.eventTarget(event); if (el.parentNode.tagName.toUpperCase() === "SVG") { el = el.parentNode; } if (el.classList.contains(this.constructor.handleClass)) { $.stopEvent(event); this.toggle(el.parentNode); } else if (el.classList.contains(this.constructor.targetClass)) { if (el.hasAttribute("href")) { if (el.classList.contains(this.constructor.activeClass)) { if (el.classList.contains(app.views.ListSelect.activeClass)) { this.close(el); } } else { this.open(el); } } else { this.toggle(el); } } }};
app.views.ListFold = class ListFold extends app.View {
static targetClass = "_list-dir";
static handleClass = "_list-arrow";
static activeClass = "open";
static events = { click: "onClick" };
static shortcuts = {
left: "onLeft",
right: "onRight",
};
open(el) {
if (el && !el.classList.contains(this.constructor.activeClass)) {
el.classList.add(this.constructor.activeClass);
$.trigger(el, "open");
}
}
close(el) {
if (el && el.classList.contains(this.constructor.activeClass)) {
el.classList.remove(this.constructor.activeClass);
$.trigger(el, "close");
}
}
toggle(el) {
if (el.classList.contains(this.constructor.activeClass)) {
this.close(el);
} else {
this.open(el);
}
}
reset() {
let el;
while ((el = this.findByClass(this.constructor.activeClass))) {
this.close(el);
}
}
getCursor() {
return (
this.findByClass(app.views.ListFocus.activeClass) ||
this.findByClass(app.views.ListSelect.activeClass)
);
}
onLeft() {
const cursor = this.getCursor();
if (cursor?.classList?.contains(this.constructor.activeClass)) {
this.close(cursor);
}
}
onRight() {
const cursor = this.getCursor();
if (
cursor != null
? cursor.classList.contains(this.constructor.targetClass)
: undefined
) {
this.open(cursor);
}
}
onClick(event) {
if (event.which !== 1 || event.metaKey || event.ctrlKey) {
return;
}
if (!event.pageY) {
return;
} // ignore fabricated clicks
let el = $.eventTarget(event);
if (el.parentNode.tagName.toUpperCase() === "SVG") {
el = el.parentNode;
}
if (el.classList.contains(this.constructor.handleClass)) {
$.stopEvent(event);
this.toggle(el.parentNode);
} else if (el.classList.contains(this.constructor.targetClass)) {
if (el.hasAttribute("href")) {
if (el.classList.contains(this.constructor.activeClass)) {
if (el.classList.contains(app.views.ListSelect.activeClass)) {
this.close(el);
}
} else {
this.open(el);
}
} else {
this.toggle(el);
}
}
}
};