WIP on saving

assets/main.js

@@ -324,8 +324,34 @@ class ThemeToggler extends HTMLAnchorElement {
   }
 }
 
+
+class PoemSaver extends HTMLFormElement {
+  connectedCallback() {
+    this.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const saveType = this.querySelector("input[name=type]");
+      const includeSources = this.querySelector("input[name=sources]").checked;
+      if (saveType.value == "text") {
+        this.saveText(includeSources);
+      } else {
+        this.saveImage(includeSources);
+      }
+    });
+  }
+
+  saveText(includeSources) {
+    console.log(includeSources);
+  }
+
+  saveImage(includeSources) {
+    console.log(includeSources);
+  }
+}
+
+
 const reorder = new CustomEvent("reorder", {bubbles: true});
 const edited = new CustomEvent("edited", {bubbles: true});
+customElements.define("poem-saver", PoemSaver, { extends: "form" });
 customElements.define("theme-toggler", ThemeToggler, { extends: "a" });
 customElements.define("source-text", SourceText, { extends: "p" });
 customElements.define("source-shower", SourceShower, { extends: "button" });

templates/index.tmpl

@@ -32,10 +32,7 @@ span.linetext {
 .controls {
   margin: 0;
   margin-bottom:4px;
-}
+  font-size:80%;
-
-.controls span {
-  font-size: 80%;
 }
 </style>
   </head>
@@ -59,19 +56,24 @@ span.linetext {
         <a href="/about">about</a>
         <a is="theme-toggler"></a>
     </p>
-    <p class="controls">
+    <div class="controls">
       <button is="poem-resetter"></button>
-      <!--<span>source:</span><select><option>gutenberg</option></select>-->
+
-      <span>save:</span><button>as text</button><button>as image</button><input type="checkbox"/><span>include sources</span>
+      <form is="poem-saver" style="border: 1px solid grey; display:inline; padding:4px;">
-    </p>
+        <input name="type" value="text" type="radio" checked="true"/>as text
+        <input name="type" value="image" type="radio"/>as image
+        <input name="sources" type="checkbox"/>include sources
+        <button type="submit">save</button>
+      </form>
+    </div>
     <div style="border: 1px solid grey; padding: 5px">
-    <div style="margin-bottom: 5px">
+      <div style="margin-bottom: 5px">
-      <button is="poem-regenner">↺</button>
+        <button is="poem-regenner">↺</button>
-    </div>
+      </div>
-    <div is="poem-lines"></div>
+      <div is="poem-lines"></div>
-    <div>
+      <div>
-      <button is="line-adder" title="add line">+</button>
+        <button is="line-adder" title="add line">+</button>
-    </div>
+      </div>
     </div>
   </body>
 </html>