121 lines
3.0 KiB
JavaScript
121 lines
3.0 KiB
JavaScript
// nostalgia for a simpler, more complicated time
|
|
const $ = document.querySelector.bind(document);
|
|
const $$ = document.querySelectorAll.bind(document);
|
|
|
|
class Button extends HTMLButtonElement {
|
|
constructor() {
|
|
super();
|
|
this.addEventListener("click", this.click);
|
|
}
|
|
}
|
|
|
|
class LineRemover extends Button {
|
|
click() {
|
|
this.closest("div.linecontainer").parentElement.remove();
|
|
}
|
|
}
|
|
|
|
class LinePinner extends Button {
|
|
click() {
|
|
this.closest("div.linecontainer").classList.toggle("unpinned");
|
|
}
|
|
}
|
|
|
|
class LineUpper extends Button {
|
|
click() {
|
|
const l = this.closest("div.linecontainer").parentElement;
|
|
const s = l.previousElementSibling;
|
|
if (s == null) {
|
|
return;
|
|
}
|
|
s.before(l);
|
|
}
|
|
// TODO connectedCallback to disable this if first in list
|
|
// TODO change callback (i forget what it's called but i think i saw it) to enable if not first in list
|
|
}
|
|
|
|
class LineDowner extends Button {
|
|
click() {
|
|
const l = this.closest("div.linecontainer").parentElement;
|
|
const s = l.nextElementSibling;
|
|
if (s == null) return;
|
|
s.after(l);
|
|
}
|
|
// TODO connectedCallback to disable this if last in list
|
|
// TODO change callback (i forget what it's called but i think i saw it) to enable if not last in list
|
|
}
|
|
|
|
class LineAdder extends Button {
|
|
click() {
|
|
$("div[is=lines-div]").add()
|
|
}
|
|
}
|
|
|
|
class PoemRegenner extends Button {
|
|
click() {
|
|
$$(".unpinned").forEach((e) => {
|
|
e.parentElement.regen();
|
|
});
|
|
}
|
|
}
|
|
|
|
class PoemLine extends HTMLDivElement {
|
|
constructor() {
|
|
super();
|
|
this.ltp = $("#linetmpl");
|
|
this.connected = false;
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (this.connected) {
|
|
return;
|
|
}
|
|
this.appendChild(this.ltp.content.cloneNode(true));
|
|
this.connected = true;
|
|
}
|
|
|
|
regen() {
|
|
fetch(new Request("/line")).then((resp) => {
|
|
if (!resp.ok) {
|
|
throw new Error(`sadness stalks the land in ${resp.status} ways`);
|
|
}
|
|
return resp.json();
|
|
}).then((payload) => {
|
|
this.querySelector(".linetext").innerText = payload.Text;
|
|
this.querySelector(".linetext").setAttribute("data-source", payload.Source.Name);
|
|
});
|
|
}
|
|
}
|
|
|
|
class Lines extends HTMLDivElement {
|
|
constructor() {
|
|
super();
|
|
this.connected = false;
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (this.connected) {
|
|
return;
|
|
}
|
|
for (var i = 0; i < 10; i++) {
|
|
this.add();
|
|
}
|
|
this.connected = true
|
|
}
|
|
|
|
add() {
|
|
var ld = document.createElement("div", {is: "poem-line"});
|
|
this.append(ld);
|
|
ld.regen();
|
|
}
|
|
}
|
|
|
|
customElements.define("line-remover", LineRemover, { extends: "button" });
|
|
customElements.define("line-pinner", LinePinner, { extends: "button" });
|
|
customElements.define("line-upper", LineUpper, { extends: "button" });
|
|
customElements.define("line-downer", LineDowner, { extends: "button" });
|
|
customElements.define("line-adder", LineAdder, { extends: "button" });
|
|
customElements.define("poem-regenner", PoemRegenner, {extends: "button"});
|
|
customElements.define("poem-line", PoemLine, {extends: "div"});
|
|
customElements.define("lines-div", Lines, {extends: "div"});
|