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 {
background-color: rgba(125,125,125,.40);
}
.cont:hover {
.cont {
cursor: grab;
}
div.linectrl {
text-align: right;
}
div.linectrl button {
width: 60px;
height: 30px;
/*width: 60px;
height: 30px;*/
}
div.line:not(.unpinned) .linetext {
font-weight: bold;
@ -124,7 +124,7 @@ a {
<span class="linetext"></span>
</div>
<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 is="source-text" class="source"></div>
@ -177,7 +177,7 @@ a {
</div>
<div class="main">
<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>
<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>

40
web/assets/main.js
View File

@ -25,25 +25,26 @@ class LineRemover extends Button {
}
click() {
const container = this.closest("div.line");
const gp = container.parentElement;
container.remove();
gp.dispatchEvent(reorder);
}
}
class LinePinner extends Button {
connectedCallback() {
this.setAttribute("title", "pin line in place");
this.setAttribute("title", "lock line, preventing edits or regeneration");
}
click() {
const container = this.closest("div.line");
const l = this.closest("div.line");
l.classList.toggle("unpinned");
if (l.classList.contains("unpinned")) {
this.classList.remove("pinned");
this.setAttribute("title", "lock line in place");
this.setAttribute("title", "lock line, preventing edits or regeneration");
container.dispatchEvent(unpinned);
} else {
this.classList.add("pinned");
this.setAttribute("title", "unlock line");
container.dispatchEvent(pinned);
}
}
}
@ -130,7 +131,7 @@ class PoemRegenner extends Button {
class PoemResetter extends Button {
connectedCallback() {
// TODO set title
this.innerText = "reset";
this.innerText = "reset all";
}
click() {
$("div[is=poem-lines]").reset();
@ -145,6 +146,31 @@ class PoemLine extends HTMLDivElement {
e.preventDefault();
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() {
@ -253,7 +279,6 @@ class PoemLines extends HTMLDivElement {
ld.classList.add("unpinned");
this.append(ld);
ld.regen();
this.dispatchEvent(reorder);
}
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});
customElements.define("about-toggler", AboutToggler, { extends: "a" });
customElements.define("poem-saver", PoemSaver, { extends: "form" });