diff --git a/assets/bg_dark.gif b/assets/bg_dark.gif index d89c674..f1b54f9 100644 Binary files a/assets/bg_dark.gif and b/assets/bg_dark.gif differ diff --git a/assets/bg_light.gif b/assets/bg_light.gif index 4142118..820769e 100644 Binary files a/assets/bg_light.gif and b/assets/bg_light.gif differ diff --git a/assets/main.js b/assets/main.js index 1150920..89639e1 100644 --- a/assets/main.js +++ b/assets/main.js @@ -19,24 +19,6 @@ class Button extends HTMLButtonElement { } } -class SourceShower extends Button { - connectedCallback() { - this.innerText = "?" - this.setAttribute("title", "show source"); - } - - click() { - this.closest("div.line").querySelector("p[is=source-text]").toggle() - if (this.innerHTML.includes("strong")) { - this.innerHTML = "?"; - this.setAttribute("title", "show source"); - } else { - this.innerHTML = "?"; - this.setAttribute("title", "hide source"); - } - } -} - class LineRemover extends Button { connectedCallback() { this.setAttribute("title", "remove line"); @@ -68,27 +50,6 @@ class LinePinner extends Button { } } -class LineUpper extends Button { - connectedCallback() { - this.setAttribute("title", "move line up"); - } - click() { - const l = this.closest("div.line"); - const s = l.previousElementSibling; - s.before(l); - this.dispatchEvent(reorder); - } - - checkDisabled() { - const l = this.closest("div.line"); - if (l.previousElementSibling == null) { - this.setAttribute("disabled", "yeah"); - } else { - this.removeAttribute("disabled"); - } - } -} - class LineEditor extends Button { connected = false connectedCallback() { @@ -110,7 +71,7 @@ class LineEditor extends Button { this.editing = false; this.linetext.innerText = this.i.value; this.f.remove(); - this.linetext.style.display = "block"; + this.linetext.style.display = "inline"; this.style['font-weight'] = ""; this.dispatchEvent(edited); } @@ -137,27 +98,6 @@ class LineInput extends HTMLInputElement { } } -class LineDowner extends Button { - connectedCallback() { - this.setAttribute("title", "move line down"); - } - click() { - const l = this.closest("div.line"); - const s = l.nextElementSibling; - s.after(l); - this.dispatchEvent(reorder); - } - - checkDisabled() { - const l = this.closest("div.line"); - if (l.nextElementSibling == null) { - this.setAttribute("disabled", "yeah"); - } else { - this.removeAttribute("disabled"); - } - } -} - class LineAdder extends Button { click() { $("div[is=poem-lines]").add() @@ -197,13 +137,10 @@ class PoemLine extends HTMLDivElement { if (this.connected) { return; } + this.setAttribute("draggable", true); + const lid = Math.floor(Math.random()*100); this.setAttribute("id", `line-${lid}`); - this.setAttribute("draggable", true); - this.addEventListener("dragstart", (e) => { - e.dataTransfer.dropEffect = "move"; - e.dataTransfer.setData("text/plain", e.target.id); - }); this.addEventListener("dragover", (e) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; @@ -213,12 +150,23 @@ class PoemLine extends HTMLDivElement { const lid = e.dataTransfer.getData("text/plain"); this.closest(".line").before(document.getElementById(lid)); }); + this.addEventListener("dragstart", (e) => { + e.dataTransfer.dropEffect = "move"; + e.dataTransfer.setData("text/plain", this.getAttribute("id")); + }); this.appendChild(this.ltp.content.cloneNode(true)); + const lt = this.querySelector(".linetext"); + lt.addEventListener("mousedown", (e) => { + this.setAttribute("draggable", false); + }); + lt.addEventListener("mouseleave", (e) => { + this.setAttribute("draggable", true); + }); this.connected = true; } get source() { - return this.querySelector("span.linetext").dataset.source; + return this.querySelector(".linetext").dataset.source; } regen() { @@ -241,10 +189,6 @@ class PoemLine extends HTMLDivElement { class PoemLines extends HTMLDivElement { constructor() { super(); - this.addEventListener("reorder", () => { - this.querySelectorAll("button[is=line-downer]").forEach(invoker("checkDisabled")); - this.querySelectorAll("button[is=line-upper]").forEach(invoker("checkDisabled")); - }); } connectedCallback() { @@ -315,21 +259,26 @@ class ThemeToggler extends HTMLAnchorElement { this.setAttribute("aria-hidden", "true"); this.style.cursor = "pointer"; } + click() { if (this.theme == "light") { this.theme = "dark"; $("body").style.backgroundColor = "black"; $("body").style.backgroundImage = 'url("/bg_dark.gif")'; $("body").style.color = "white"; + $(".main").style.backgroundColor = "black"; + $("h1").style.backgroundColor = "black"; + $(".controls form").style.backgroundColor = "black"; $$("a").forEach((e) => { e.style.color = "white" }); - $$("span.linetext").forEach((e) => { e.style.backgroundColor = "black" }); } else { this.theme = "light"; $("body").style.backgroundColor = "white"; $("body").style.backgroundImage = 'url("/bg_light.gif")'; $("body").style.color = "black"; + $(".main").style.backgroundColor = "white"; + $(".controls form").style.backgroundColor = "white"; + $("h1").style.backgroundColor = "white"; $$("a").forEach((e) => { e.style.color = "black" }); - $$("span.linetext").forEach((e) => { e.style.backgroundColor = "white" }); } } } @@ -434,18 +383,14 @@ class PoemSaver extends HTMLFormElement { } } - 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: "div" }); -customElements.define("source-shower", SourceShower, { extends: "button" }); customElements.define("line-remover", LineRemover, { extends: "button" }); customElements.define("line-pinner", LinePinner, { extends: "button" }); customElements.define("line-editor", LineEditor, { extends: "button" }); -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"}); diff --git a/templates/index.tmpl b/templates/index.tmpl index d672c7e..da9bf7e 100644 --- a/templates/index.tmpl +++ b/templates/index.tmpl @@ -15,9 +15,20 @@ body { font-size:125%; background-color: black; color: white; - /* background-image: url("/bg_dark.gif");*/ + background-image: url("/bg_dark.gif"); } +.main { + background-color: black; + border: 1px solid grey; + padding: 5px +} + +h1 { + background-color: black; +} + + a { color: white; } @@ -28,6 +39,10 @@ a { font-size:80%; } +.controls form { + background-color: black; +} + .rainbow { animation-name: rainbow; animation-duration: 1s; @@ -51,7 +66,7 @@ a {