cyp/app/js/lib/selection.js

58 lines
1.4 KiB
JavaScript
Raw Normal View History

2020-03-09 21:26:39 +08:00
import * as html from "./html.js";
export default class Selection {
constructor(component) {
this._component = component;
2020-03-09 22:26:36 +08:00
this._items = []; // FIXME ukladat skutecne HTML? co kdyz nastane refresh?
2020-03-09 21:26:39 +08:00
this._node = html.node("cyp-commands", {hidden:true});
const button = this.addCommand(_ => this.clear(), {icon:"close", label:"Clear"});
button.classList.add("last");
}
clear() {
2020-03-09 22:26:36 +08:00
while (this._items.length) { this._remove(this._items[0]); }
2020-03-09 21:26:39 +08:00
}
toggle(node) {
2020-03-09 22:26:36 +08:00
if (this._items.includes(node)) {
2020-03-09 21:26:39 +08:00
this._remove(node);
} else {
this._add(node);
}
}
addCommand(cb, options) {
const button = html.button({icon:options.icon}, "", this._node);
html.node("span", {}, options.label, button);
button.addEventListener("click", _ => cb(this._items));
return button;
}
_add(node) {
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-09 22:26:36 +08:00
if (length == 0) { this._show(); }
2020-03-09 21:26:39 +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() {
const parent = this._component.closest("cyp-app").querySelector("footer");
parent.appendChild(this._node);
this._node.offsetWidth; // FIXME jde lepe?
this._node.hidden = false;
}
_hide() {
this._node.hidden = true;
this._node.remove();
}
}