From 42d136e8a6247f1b3f665a94308dbb19df89198a Mon Sep 17 00:00:00 2001 From: nate smith Date: Sat, 17 Feb 2024 01:55:23 -0800 Subject: [PATCH] use a template --- assets/main.js | 24 ++++++++---------------- templates/index.tmpl | 6 ++++++ 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/assets/main.js b/assets/main.js index aa612f4..a0da685 100644 --- a/assets/main.js +++ b/assets/main.js @@ -61,27 +61,19 @@ 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 = $("#line-editor-tmpl").content.firstElementChild.cloneNode(true); + this.i = this.f.querySelector("input[type=text]"); this.f.addEventListener("submit", (e) => { e.preventDefault(); - this.done() + this.done(); }) } done() { - this.editing = false; - this.innerText = "edit"; - this.span.innerText = this.i.value; - this.f.remove(); - this.span.setAttribute("style", "display:inline"); + this.editing = false; + this.innerText = "edit"; + this.span.innerText = this.i.value; + this.f.remove(); + this.span.setAttribute("style", "display:inline"); } click() { if (this.editing) { diff --git a/templates/index.tmpl b/templates/index.tmpl index 2010c34..175fe70 100644 --- a/templates/index.tmpl +++ b/templates/index.tmpl @@ -9,6 +9,12 @@ +