diff --git a/assets/main.js b/assets/main.js index 0487805..5d7bc50 100644 --- a/assets/main.js +++ b/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" }); diff --git a/templates/index.tmpl b/templates/index.tmpl index ac1a454..c6cd6f0 100644 --- a/templates/index.tmpl +++ b/templates/index.tmpl @@ -32,10 +32,7 @@ span.linetext { .controls { margin: 0; margin-bottom:4px; -} - -.controls span { - font-size: 80%; + font-size:80%; } @@ -59,19 +56,24 @@ span.linetext { about

-

+

- - save:include sources -

+ +
+ as text + as image + include sources + +
+
-
- -
-
-
- -
+
+ +
+
+
+ +