source tweaks

assets/main.js

@@ -96,7 +96,7 @@ class LineEditor extends Button {
       return;
     }
     this.setAttribute("title", "edit line text");
-    this.span = this.closest(".line").querySelector("span.linetext");
+    this.linetext = this.closest(".line").querySelector(".linetext");
     this.f = $("#line-editor-tmpl").content.firstElementChild.cloneNode(true);
     this.i = this.f.querySelector("input[type=text]");
     this.f.addEventListener("submit", (e) => {
@@ -108,10 +108,11 @@ class LineEditor extends Button {
   done() {
     this.setAttribute("title", "edit line text");
     this.editing = false;
-    this.innerText = "✎";
+    //this.innerText = "✎";
-    this.span.innerText = this.i.value;
+    this.innerText = "E";
+    this.linetext.innerText = this.i.value;
     this.f.remove();
-    this.span.setAttribute("style", "display:inline");
+    this.linetext.style.display = "block";
     this.dispatchEvent(edited);
   }
   click() {
@@ -122,8 +123,9 @@ class LineEditor extends Button {
     this.editing = true;
     this.setAttribute("title", "finish editing");
     this.innerHTML = "<strong>✓</strong>";
-    this.span.setAttribute("style", "display:none");
+    this.linetext.style.display = "none";
-    this.i.value = this.span.innerText;
+    //this.linetext.setAttribute("style", "display:none");
+    this.i.value = this.linetext.innerText;
     this.parentElement.appendChild(this.f);
     this.i.focus();
   }
@@ -188,7 +190,7 @@ class PoemLine extends HTMLDivElement {
     this.ltp = $("#linetmpl");
     this.addEventListener("edited", (e) => {
       e.preventDefault();
-      this.querySelector("p[is=source-text]").edited();
+      this.querySelector("div[is=source-text]").edited();
     });
   }
 
@@ -264,26 +266,15 @@ class PoemLines extends HTMLDivElement {
   }
 }
 
-class SourceText extends HTMLParagraphElement {
+class SourceText extends HTMLDivElement {
   constructor() {
     super();
   }
 
-  connectedCallback() {
-    this.setAttribute("style", `display: none;`);
-  }
-
-  toggle() {
-    if (this.style.display == "none") {
-      this.style.display = "block";
-    } else {
-      this.style.display = "none";
-    }
-  }
-
   edited() {
     const line = this.parentElement;
-    const text = line.querySelector("span.linetext").innerText;
+    const text = line.querySelector(".linetext").innerText;
+    console.log(text);
     const orig = line.originalText;
     if (text == "" || (text != orig && !orig.includes(text))) {
       this.update({"Name": "original"});
@@ -292,14 +283,10 @@ class SourceText extends HTMLParagraphElement {
 
   update(source) {
     if (source.Name.startsWith("pg")) {
-      const fullGutID = source.Name.split(" ", 2)[0];
       const sourceName = source.Name.slice(source.Name.indexOf(' '));
-      const gutID = fullGutID.match(/^pg(.+).txt$/)[1];
+      this.innerText = sourceName;
-      const url = `https://www.gutenberg.org/cache/epub/${gutID}/pg${gutID}.txt`;
-      this.innerHTML = `
-      <span>${sourceName}</span> (<a href="${url}">${fullGutID}</a>)`
     } else {
-      this.innerHTML = `<span>${source.Name}</span>`;
+      this.innerText = source.Name;
     }
   }
 }
@@ -437,7 +424,7 @@ 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-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" });

templates/index.tmpl

@@ -22,17 +22,6 @@ a {
   color: white;
 }
 
-div.line:not(.unpinned) > .linetext {
-  font-weight: bold;
-}
-
-button.pinned {
-  font-weight:bold;
-}
-
-span.linetext {
-  background-color: black;
-}
 .controls {
   margin: 0;
   margin-bottom:4px;
@@ -65,61 +54,45 @@ span.linetext {
         div.linetext {
           font-size: 100%;
         }
-        div.rightside {
-        }
         div.source {
           font-size: 50%;
           font-style: oblique;
           padding-left: 10px;
           text-align: right;
         }
-        div.cont:hover {
+        div.linetext:hover {
-          background-color: rgba(255,255,255,.05);
+          background-color: rgba(255,255,255,.10);
         }
-        .linectrl button {
+        div.linectrl {
+          text-align: right;
+        }
+        div.linectrl button {
           width: 30px;
           height: 30px;
         }
+        div.line:not(.unpinned) .linetext {
+          font-weight: bold;
+        }
+        
+        button.pinned {
+          font-weight:bold;
+        }
+        
+        span.linetext {
+          background-color: black;
+        }
       </style>
-      <div style="display: grid; grid-template-columns: 80% 20%">
+      <div class="cont" style="display: grid; grid-template-columns: 80% 20%">
         <div>
           <div class="linetext"></div>
-          <div class="source"></div>
         </div>
         <div class="linectrl">
           <button is="line-pinner">P</button><button is="line-editor">E</button><button>M</button><button is="line-remover">X</button>
         </div>
       </div>
-
+      <div is="source-text" class="source"></div>
-
-      <!-- 
-      <div class="cont" style="display: grid; grid-template-columns: 80% 20%">
-        <div class="linetext"></div>
-        <div class="rightside">
-          <div style="display: grid; grid-template-columns: 50% 50%">
-            <div class="linectrl">
-              <div style="display: grid; grid-template-columns: 2em 2em">
-                <div>
-                  <button is="line-pinner">pin</button><button is="line-editor">✎</button>
-                </div>
-                <div>
-                  <button>M</button><button is="line-remover">X</button>
-                </div>
-              </div>
-            </div>
-            <div class="source"></div>
-          </div>
-        </div>
-      </div>
-      -->
-        <!--
-      <span class="linectrl">
-        <button is="line-pinner">pin</button><button is="line-editor">✎</button><button is="line-upper">↑</button><button is="line-downer">↓</button><button is="source-shower"></button><button is="line-remover">X</button>
-      </span>
-      <span class="linetext"></span>
-      <p is="source-text"></p>
-        -->
     </template>
+
     <h1 style="display:block;margin:0">Trunkless</h1>
     <p style="margin-top:0;font-size:80%">
         <a href="/about">about</a>