vilmibm/trunkless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix up/down button stuff

Browse Source
This commit is contained in:
nate smith 2024-02-14 20:03:49 -08:00
parent aa172d097a
commit d1e0e51a4b
1 changed files with 16 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
assets/main.js
View File

@ -13,7 +13,10 @@ class Button extends HTMLButtonElement {
class LineRemover extends Button { class LineRemover extends Button {
click() { click() {
this.closest("div.linecontainer").parentElement.remove(); const container = this.closest("div.linecontainer").parentElement;
const gp = container.parentElement;
container.remove();
gp.dispatchEvent(reorder);
} }
} }
@ -31,16 +34,10 @@ class LinePinner extends Button {
class LineUpper extends Button { class LineUpper extends Button {
click() { click() {
// TODO debug why when I:
// - add a new line
// - move that line up
// the "down" button stays disabled
const l = this.closest("div.linecontainer").parentElement; const l = this.closest("div.linecontainer").parentElement;
const s = l.previousElementSibling; const s = l.previousElementSibling;
s.before(l); s.before(l);
this.checkDisabled(); this.dispatchEvent(reorder);
s.querySelector("button[is=line-upper]").checkDisabled()
s.querySelector("button[is=line-downer]").checkDisabled()
} }
checkDisabled() { checkDisabled() {
@ -51,10 +48,6 @@ class LineUpper extends Button {
this.removeAttribute("disabled"); this.removeAttribute("disabled");
} }
} }
connectedCallback() {
this.checkDisabled();
}
} }
class LineDowner extends Button { class LineDowner extends Button {
@ -62,9 +55,7 @@ class LineDowner extends Button {
const l = this.closest("div.linecontainer").parentElement; const l = this.closest("div.linecontainer").parentElement;
const s = l.nextElementSibling; const s = l.nextElementSibling;
s.after(l); s.after(l);
this.checkDisabled() this.dispatchEvent(reorder);
s.querySelector("button[is=line-downer]").checkDisabled()
s.querySelector("button[is=line-upper]").checkDisabled()
} }
checkDisabled() { checkDisabled() {
@ -75,18 +66,6 @@ class LineDowner extends Button {
this.removeAttribute("disabled"); this.removeAttribute("disabled");
} }
} }
connectedCallback() {
if (this.connected) {
return;
}
const count = $$("button[is=line-downer]").length;
if (count != initialLines) {
return;
}
this.checkDisabled();
this.connected = true;
}
} }
class LineAdder extends Button { class LineAdder extends Button {
@ -133,6 +112,14 @@ class PoemLine extends HTMLDivElement {
class Lines extends HTMLDivElement { class Lines extends HTMLDivElement {
constructor() { constructor() {
super(); super();
this.addEventListener("reorder", () => {
this.querySelectorAll("button[is=line-downer]").forEach((e) => {
e.checkDisabled();
});
this.querySelectorAll("button[is=line-upper]").forEach((e) => {
e.checkDisabled();
});
});
} }
connectedCallback() { connectedCallback() {
@ -150,12 +137,11 @@ class Lines extends HTMLDivElement {
var ld = document.createElement("div", {is: "poem-line"}); var ld = document.createElement("div", {is: "poem-line"});
this.append(ld); this.append(ld);
ld.regen(); ld.regen();
this.querySelectorAll("button[is=line-downer]").forEach((e) => { this.dispatchEvent(reorder);
e.checkDisabled();
})
} }
} }
const reorder = new CustomEvent("reorder", {bubbles: true});
customElements.define("line-remover", LineRemover, { extends: "button" }); customElements.define("line-remover", LineRemover, { extends: "button" });
customElements.define("line-pinner", LinePinner, { extends: "button" }); customElements.define("line-pinner", LinePinner, { extends: "button" });
customElements.define("line-upper", LineUpper, { extends: "button" }); customElements.define("line-upper", LineUpper, { extends: "button" });