From c8d83b7ab9f361d447d89a30aeb41aea2f9d044e Mon Sep 17 00:00:00 2001
From: nate smith <nateksmith@pm.me>
Date: Sat, 17 Aug 2024 16:16:20 -0500
Subject: [PATCH] cosmetic work

---
 templates/index.tmpl | 10 +++++-----
 web/assets/main.js   | 40 +++++++++++++++++++++++++++++++++-------
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/templates/index.tmpl b/templates/index.tmpl
index ab53a72..78f875b 100644
--- a/templates/index.tmpl
+++ b/templates/index.tmpl
@@ -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>
diff --git a/web/assets/main.js b/web/assets/main.js
index 89797bd..49da6ee 100644
--- a/web/assets/main.js
+++ b/web/assets/main.js
@@ -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" });