From b7470d8dfcc0c22219a3c4458ab57db597e76e6f Mon Sep 17 00:00:00 2001
From: nate smith <nateksmith@pm.me>
Date: Sat, 17 Feb 2024 00:07:02 -0800
Subject: [PATCH] line editing

---
 assets/main.js       | 47 +++++++++++++++++++++++++++++++++++++++-----
 templates/index.tmpl |  2 +-
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/assets/main.js b/assets/main.js
index fcefbcd..aa612f4 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -15,6 +15,7 @@ class Button extends HTMLButtonElement {
   constructor() {
     super();
     this.addEventListener("click", this.click);
+    this.setAttribute("style", "min-width:4em");
   }
 }
 
@@ -28,9 +29,6 @@ class LineRemover extends Button {
 }
 
 class LinePinner extends Button {
-  connectedCallback() {
-    this.setAttribute("style", "min-width:4em");
-  }
   click() {
     const l = this.closest("div.line");
     l.classList.toggle("unpinned");
@@ -61,9 +59,48 @@ class LineUpper extends Button {
 }
 
 class LineEditor extends Button {
+  connectedCallback() {
+    this.span = this.closest(".line").querySelector("span.linetext");
+    this.f = document.createElement("form");
+    this.i = document.createElement("input");
+    const b = document.createElement("input");
+    this.f.setAttribute("style", "display: inline");
+    this.i.setAttribute("name", "editedLine");
+    this.i.setAttribute("style", "min-width: 50em");
+    b.setAttribute("type", "submit");
+    b.setAttribute("style", "display: none");
+    this.f.appendChild(this.i);
+    this.f.appendChild(b);
+    this.f.addEventListener("submit", (e) => {
+      e.preventDefault();
+      this.done()
+    })
+  }
+  done() {
+      this.editing = false;
+      this.innerText = "edit";
+      this.span.innerText = this.i.value;
+      this.f.remove();
+      this.span.setAttribute("style", "display:inline");
+  }
   click() {
-    // TODO replace linetext with input
-    // TODO update button text to "done"
+    if (this.editing) {
+      this.done();
+      return;
+    }
+    this.editing = true;
+    this.innerText = "done";
+    this.span.setAttribute("style", "display:none");
+    this.i.value = this.span.innerText;
+    this.parentElement.appendChild(this.f);
+    this.i.focus();
+  }
+}
+
+class LineInput extends HTMLInputElement {
+  constructor() {
+    super();
+    this.setAttribute("type", "text");
   }
 }
 
diff --git a/templates/index.tmpl b/templates/index.tmpl
index 9b01fac..2010c34 100644
--- a/templates/index.tmpl
+++ b/templates/index.tmpl
@@ -26,7 +26,7 @@
       <a id="togglescheme" href="/#togglescheme">light|dark</a>
     </div>
     <p id="poemcontrols">
-      <button is="poem-regenner">regen</button>
+      <button is="poem-regenner">regenerate unpinned lines</button>
       <button is="poem-resetter">new</button>
       <button id="save">save</button>
     </p>