79 lines
1.8 KiB
JavaScript
79 lines
1.8 KiB
JavaScript
import * as html from "./html.js";
|
|
|
|
|
|
const TAGS = ["cyp-song", "cyp-tag", "cyp-path"];
|
|
|
|
export default class Selection {
|
|
constructor(component, mode) {
|
|
this._component = component;
|
|
/** @type {"single" | "multi"} */
|
|
this._mode = mode;
|
|
this._items = [];
|
|
this._node = html.node("cyp-commands", {hidden:true});
|
|
}
|
|
|
|
appendTo(parent) { parent.appendChild(this._node); }
|
|
|
|
clear() {
|
|
while (this._items.length) { this.remove(this._items[0]); }
|
|
}
|
|
|
|
addCommand(cb, options) {
|
|
const button = html.button({icon:options.icon}, "", this._node);
|
|
html.node("span", {}, options.label, button);
|
|
button.addEventListener("click", _ => {
|
|
const arg = (this._mode == "single" ? this._items[0] : this._items);
|
|
cb(arg);
|
|
});
|
|
return button;
|
|
}
|
|
|
|
addCommandAll() {
|
|
this.addCommand(_ => {
|
|
Array.from(this._component.querySelectorAll(TAGS.join(", ")))
|
|
.forEach(node => this.add(node));
|
|
}, {label:"Select all", icon:"checkbox-marked-outline"});
|
|
}
|
|
|
|
addCommandCancel() {
|
|
const button = this.addCommand(_ => this.clear(), {icon:"cancel", label:"Cancel"});
|
|
button.classList.add("last");
|
|
return button;
|
|
}
|
|
|
|
toggle(node) {
|
|
if (this._items.includes(node)) {
|
|
this.remove(node);
|
|
} else {
|
|
this.add(node);
|
|
}
|
|
}
|
|
|
|
add(node) {
|
|
if (this._items.includes(node)) { return; }
|
|
const length = this._items.length;
|
|
this._items.push(node);
|
|
node.classList.add("selected");
|
|
|
|
if (this._mode == "single" && length > 0) { this.remove(this._items[0]); }
|
|
|
|
if (length == 0) { this._show(); }
|
|
}
|
|
|
|
remove(node) {
|
|
const index = this._items.indexOf(node);
|
|
this._items.splice(index, 1);
|
|
node.classList.remove("selected");
|
|
if (this._items.length == 0) { this._hide(); }
|
|
}
|
|
|
|
_show() {
|
|
this._node.hidden = false;
|
|
}
|
|
|
|
_hide() {
|
|
this._node.hidden = true;
|
|
}
|
|
}
|
|
|
|
customElements.define("cyp-commands", class extends HTMLElement {}); |