cyp/app/js/selection.js

79 lines
1.8 KiB
JavaScript
Raw Permalink Normal View History

2020-03-09 21:26:39 +08:00
import * as html from "./html.js";
2020-03-15 03:33:41 +08:00
const TAGS = ["cyp-song", "cyp-tag", "cyp-path"];
2020-03-09 21:26:39 +08:00
export default class Selection {
2020-03-10 17:07:30 +08:00
constructor(component, mode) {
2020-03-09 21:26:39 +08:00
this._component = component;
2020-03-10 17:07:30 +08:00
/** @type {"single" | "multi"} */
this._mode = mode;
2020-03-17 05:57:13 +08:00
this._items = [];
2020-03-09 21:26:39 +08:00
this._node = html.node("cyp-commands", {hidden:true});
}
2020-03-17 05:57:13 +08:00
appendTo(parent) { parent.appendChild(this._node); }
2020-03-09 21:26:39 +08:00
clear() {
2020-03-10 05:24:31 +08:00
while (this._items.length) { this.remove(this._items[0]); }
2020-03-09 21:26:39 +08:00
}
addCommand(cb, options) {
const button = html.button({icon:options.icon}, "", this._node);
html.node("span", {}, options.label, button);
2020-03-10 17:07:30 +08:00
button.addEventListener("click", _ => {
const arg = (this._mode == "single" ? this._items[0] : this._items);
cb(arg);
});
2020-03-09 21:26:39 +08:00
return button;
}
2020-03-10 17:07:30 +08:00
addCommandAll() {
2020-03-10 05:24:31 +08:00
this.addCommand(_ => {
2020-03-15 03:33:41 +08:00
Array.from(this._component.querySelectorAll(TAGS.join(", ")))
2020-03-14 06:01:16 +08:00
.forEach(node => this.add(node));
2020-03-12 05:46:28 +08:00
}, {label:"Select all", icon:"checkbox-marked-outline"});
2020-03-10 05:24:31 +08:00
}
2020-03-10 17:07:30 +08:00
addCommandCancel() {
const button = this.addCommand(_ => this.clear(), {icon:"cancel", label:"Cancel"});
2020-03-10 05:24:31 +08:00
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; }
2020-03-09 22:26:36 +08:00
const length = this._items.length;
this._items.push(node);
2020-03-09 21:26:39 +08:00
node.classList.add("selected");
2020-03-10 17:07:30 +08:00
if (this._mode == "single" && length > 0) { this.remove(this._items[0]); }
2020-03-09 22:26:36 +08:00
if (length == 0) { this._show(); }
2020-03-09 21:26:39 +08:00
}
2020-03-10 05:24:31 +08:00
remove(node) {
2020-03-09 22:26:36 +08:00
const index = this._items.indexOf(node);
this._items.splice(index, 1);
2020-03-09 21:26:39 +08:00
node.classList.remove("selected");
2020-03-09 22:26:36 +08:00
if (this._items.length == 0) { this._hide(); }
2020-03-09 21:26:39 +08:00
}
_show() {
this._node.hidden = false;
}
_hide() {
this._node.hidden = true;
}
}
2020-03-17 05:57:13 +08:00
customElements.define("cyp-commands", class extends HTMLElement {});