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

cosmetic work

Browse Source
This commit is contained in:
nate smith 2024-08-17 16:16:20 -05:00
parent cc15c24496
commit c8d83b7ab9
2 changed files with 38 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
templates/index.tmpl
View File

@ -101,15 +101,15 @@ a {
.line:hover { .line:hover {
background-color: rgba(125,125,125,.40); background-color: rgba(125,125,125,.40);
} }
.cont:hover { .cont {
cursor: grab; cursor: grab;
} }
div.linectrl { div.linectrl {
text-align: right; text-align: right;
} }
div.linectrl button { div.linectrl button {
width: 60px; /*width: 60px;
height: 30px; height: 30px;*/
} }
div.line:not(.unpinned) .linetext { div.line:not(.unpinned) .linetext {
font-weight: bold; font-weight: bold;
@ -124,7 +124,7 @@ a {
<span class="linetext"></span> <span class="linetext"></span>
</div> </div>
<div class="linectrl"> <div class="linectrl">
<button is="line-pinner">PIN</button><button is="line-regenner">REGEN</button><button is="line-editor">EDIT</button><button is="line-remover">KILL</button> <button is="line-pinner">&#128274;</button><button is="line-regenner">&circlearrowright;</button><button is="line-editor">&#9998;</button><button is="line-remover">&#128465;</button>
</div> </div>
</div> </div>
<div is="source-text" class="source"></div> <div is="source-text" class="source"></div>
@ -177,7 +177,7 @@ a {
</div> </div>
<div class="main"> <div class="main">
<div style="margin-bottom: 5px"> <div style="margin-bottom: 5px">
<button is="poem-regenner">regenerate unpinned lines</button> <button is="poem-regenner">&circlearrowright; regenerate lines</button>
<button is="poem-resetter"></button> <button is="poem-resetter"></button>
<form is="poem-saver" style="border-right: 1px solid grey;border-bottom: 1px solid grey;border-left: 1px solid grey; display:inline; padding:4px;"> <form is="poem-saver" style="border-right: 1px solid grey;border-bottom: 1px solid grey;border-left: 1px solid grey; display:inline; padding:4px;">
<button class="copy" type="submit">copy</button> <button class="copy" type="submit">copy</button>

40
web/assets/main.js
View File

@ -25,25 +25,26 @@ class LineRemover extends Button {
} }
click() { click() {
const container = this.closest("div.line"); const container = this.closest("div.line");
const gp = container.parentElement;
container.remove(); container.remove();
gp.dispatchEvent(reorder);
} }
} }
class LinePinner extends Button { class LinePinner extends Button {
connectedCallback() { connectedCallback() {
this.setAttribute("title", "pin line in place"); this.setAttribute("title", "lock line, preventing edits or regeneration");
} }
click() { click() {
const container = this.closest("div.line");
const l = this.closest("div.line"); const l = this.closest("div.line");
l.classList.toggle("unpinned"); l.classList.toggle("unpinned");
if (l.classList.contains("unpinned")) { if (l.classList.contains("unpinned")) {
this.classList.remove("pinned"); this.classList.remove("pinned");
this.setAttribute("title", "lock line in place"); this.setAttribute("title", "lock line, preventing edits or regeneration");
container.dispatchEvent(unpinned);
} else { } else {
this.classList.add("pinned"); this.classList.add("pinned");
this.setAttribute("title", "unlock line"); this.setAttribute("title", "unlock line");
container.dispatchEvent(pinned);
} }
} }
} }
@ -130,7 +131,7 @@ class PoemRegenner extends Button {
class PoemResetter extends Button { class PoemResetter extends Button {
connectedCallback() { connectedCallback() {
// TODO set title // TODO set title
this.innerText = "reset"; this.innerText = "reset all";
} }
click() { click() {
$("div[is=poem-lines]").reset(); $("div[is=poem-lines]").reset();
@ -145,6 +146,31 @@ class PoemLine extends HTMLDivElement {
e.preventDefault(); e.preventDefault();
this.querySelector("div[is=source-text]").edited(); this.querySelector("div[is=source-text]").edited();
}); });
this.addEventListener("pinned", (e) => {
this.querySelectorAll("button").forEach((el) => {
if (el.getAttribute("is") == "line-pinner") {
return;
}
el.setAttribute("disabled", "lol");
});
this.setAttribute("draggable", false);
this.style.cursor = "not-allowed";
this.querySelector(".cont").style.cursor = "not-allowed";
});
this.addEventListener("unpinned", (e) => {
this.querySelectorAll("button").forEach((el) => {
if (el.getAttribute("is") == "line-pinner") {
return;
}
el.removeAttribute("disabled");
});
this.setAttribute("draggable", true);
this.style.cursor = "grab";
this.querySelector(".cont").style.cursor = "grab";
});
} }
connectedCallback() { connectedCallback() {
@ -253,7 +279,6 @@ class PoemLines extends HTMLDivElement {
ld.classList.add("unpinned"); ld.classList.add("unpinned");
this.append(ld); this.append(ld);
ld.regen(); ld.regen();
this.dispatchEvent(reorder);
} }
regenerate() { regenerate() {
@ -447,7 +472,8 @@ class PoemSaver extends HTMLFormElement {
} }
} }
const reorder = new CustomEvent("reorder", {bubbles: true}); const pinned = new CustomEvent("pinned", {bubbles: true});
const unpinned = new CustomEvent("unpinned", {bubbles: true});
const edited = new CustomEvent("edited", {bubbles: true}); const edited = new CustomEvent("edited", {bubbles: true});
customElements.define("about-toggler", AboutToggler, { extends: "a" }); customElements.define("about-toggler", AboutToggler, { extends: "a" });
customElements.define("poem-saver", PoemSaver, { extends: "form" }); customElements.define("poem-saver", PoemSaver, { extends: "form" });