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

regen button

Browse Source
This commit is contained in:
nate smith 2024-02-13 00:32:53 -08:00
parent 9793211d54
commit 6fda65bdc4
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
assets/main.js
View File

@ -31,13 +31,25 @@ class LineAdder extends HTMLButtonElement {
customElements.define("line-adder", LineAdder, { extends: "button" });
class PoemRegenner extends HTMLButtonElement {
constructor() {
super();
this.addEventListener("click", () => {
document.querySelectorAll(".unpinned").forEach((e) => {
e.parentElement.regen();
});
});
}
}
customElements.define("poem-regenner", PoemRegenner, {extends: "button"});
class PoemLine extends HTMLDivElement {
constructor() {
super();
const ltp = document.querySelector("#linetmpl");
var l = ltp.content.cloneNode(true);
this.appendChild(l);
this.addEventListener("regen", this.regen); // TODO will this be bound?
}
regen() {
@ -53,9 +65,7 @@ class PoemLine extends HTMLDivElement {
}
}
customElements.define("poem-line", PoemLine, { extends: "div" });
const regen = new Event("regen");
customElements.define("poem-line", PoemLine, {extends: "div"});
class Lines extends HTMLDivElement {
constructor() {
@ -66,10 +76,10 @@ class Lines extends HTMLDivElement {
}
add() {
var ld = document.createElement("div", { is: "poem-line" });
var ld = document.createElement("div", {is: "poem-line"});
this.append(ld);
ld.regen();
}
}
customElements.define("lines-div", Lines, { extends: "div" });
customElements.define("lines-div", Lines, {extends: "div"});

4
templates/index.tmpl
View File

@ -10,7 +10,7 @@
</head>
<body>
<template id="linetmpl">
<div class="linecontainer unpinned" hx-trigger="regen from:body" hx-swap="outerHTML" hx-get="/line">
<div class="linecontainer unpinned">
<span class="linecontrols">
<button is="line-pinner">pin</button>
<button >edit</button>
@ -28,7 +28,7 @@
<a id="togglescheme" href="/#togglescheme">light|dark</a>
</div>
<p id="poemcontrols">
<button id="regen">regen</button>
<button is="poem-regenner">regen</button>
<button id="new">new</button>
<button id="save">save</button>
</p>