rename lines-div to be more consistent, add new button

assets/main.js

@@ -70,7 +70,7 @@ class LineDowner extends Button {
 
 class LineAdder extends Button {
   click() {
-    $("div[is=lines-div]").add()
+    $("div[is=poem-lines]").add()
   }
 }
 
@@ -82,6 +82,12 @@ class PoemRegenner extends Button {
   }
 }
 
+class PoemResetter extends Button {
+  click() {
+    $("div[is=poem-lines]").reset();
+  }
+}
+
 class PoemLine extends HTMLDivElement {
   constructor() {
     super();
@@ -109,7 +115,7 @@ class PoemLine extends HTMLDivElement {
   }
 }
 
-class Lines extends HTMLDivElement {
+class PoemLines extends HTMLDivElement {
   constructor() {
     super();
     this.addEventListener("reorder", () => {
@@ -123,9 +129,7 @@ class Lines extends HTMLDivElement {
   }
 
   connectedCallback() {
-    for (var i = 0; i < initialLines; i++) {
+    this.init();
-      this.add();
-    }
     addEventListener("beforeunload", (e) => {
       if ($$("div.linecontainer:not(.unpinned)").length > 0) {
         e.preventDefault();
@@ -133,6 +137,19 @@ class Lines extends HTMLDivElement {
     });
   }
 
+  init() {
+    for (var i = 0; i < initialLines; i++) {
+      this.add();
+    }
+  }
+
+  reset() {
+    this.querySelectorAll("div.linecontainer").forEach((e) => {
+      e.parentElement.remove();
+    });
+    this.init()
+  }
+
   add() {
     var ld = document.createElement("div", {is: "poem-line"});
     this.append(ld);
@@ -148,5 +165,6 @@ customElements.define("line-upper", LineUpper, { extends: "button" });
 customElements.define("line-downer", LineDowner, { extends: "button" });
 customElements.define("line-adder", LineAdder, { extends: "button" });
 customElements.define("poem-regenner", PoemRegenner, {extends: "button"});
+customElements.define("poem-resetter", PoemResetter, {extends: "button"});
 customElements.define("poem-line", PoemLine, {extends: "div"});
-customElements.define("lines-div", Lines, {extends: "div"});
+customElements.define("poem-lines", PoemLines, {extends: "div"});

templates/index.tmpl

@@ -35,13 +35,13 @@
     </div>
     <p id="poemcontrols">
       <button is="poem-regenner">regen</button>
-      <button id="new">new</button>
+      <button is="poem-resetter">new</button>
       <button id="save">save</button>
     </p>
     <p id="dna">
       todo, dna display
     </p>
-    <div is="lines-div"></div>
+    <div is="poem-lines"></div>
     <div>
       <button is="line-adder">add</button>
     </div>