improved styling, improved encoder

samolukadjo · Sep 11, 2024 · d4596c7 · d4596c7
1 parent f920232
commit d4596c7
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 17 deletions.
diff --git a/browserAction/index.html b/browserAction/index.html
@@ -7,9 +7,8 @@
   <body>
     <h1 id="wungleHeading">Wungle text encoder</h1>
     <textarea id="wungleTextArea"></textarea>
-    <br />
     <button id="wungleButton">Wungle</button>
-    <br />
+    <button id="clearButton">Clear</button>
     <p id="wungleResult"></p>
     <script src="../3y3/3y3.js"></script>
     <script src="script.js"></script>

diff --git a/browserAction/script.js b/browserAction/script.js
@@ -7,11 +7,24 @@ const result = document.getElementById("wungleResult");
 const development = true;
 
 button.addEventListener("click", () => {
-    const text = input.value;
-    const encodedText = encode(text + "{wungle text ends here}");
-    navigator.clipboard.writeText(encodedText);
-    result.textContent = `The encoded text has been copied to your clipboard!`;
-    if (development) {
-        console.log("[Wungle Text]: Encoded text ", encodedText);
+  const text = input.value;
+  const encodedText = encode(text + "{wungle text ends here}");
+  navigator.clipboard.writeText(encodedText);
+  result.textContent = `The encoded text has been copied to your clipboard! Paste it at the start of a paragraph to hide wungle text in that paragraph.`;
+  if (development) {
+    console.log("[Wungle Text]: Encoded text ", encodedText);
+  }
+});
+
+input.addEventListener("input", () => {
+  browser.storage.local.set({ textToBeWungled: input.value });
+  console.log("Your text has been saved");
+});
+
+window.addEventListener("DOMContentLoaded", () => {
+  browser.storage.local.get("textToBeWungled", (result) => {
+    if (result.textToBeWungled) {
+      input.value = result.textToBeWungled;
     }
-})
+  });
+});
diff --git a/browserAction/style.css b/browserAction/style.css
@@ -1,14 +1,62 @@
-h1 {
-  font-style: italic;
+:root {
+  --background-color: #fff;
+  --text-color: #333;
+  --primary-color: #007bff;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #222;
+    --text-color: #ddd;
+    --primary-color: #66f;
+  }
 }
 
 body {
+  margin: 0;
+  padding: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  min-height: 20rem;
-  background-color: #222;
-  color: #ddd;
+  justify-content: stretch;
+  min-width: 300px; /* minimum width */
+  min-height: 200px; /* minimum height */
+  background-color: var(--background-color);
+  color: var(--text-color);
   padding: 2em;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+}
+
+h1 {
+  font-style: italic;
+  color: var(--primary-color);
+}
+
+body > * {
+  margin-bottom: 1em;
+  width: 100%;
+  min-height: 3rem;
+}
+
+button {
+  border: 1px solid var(--primary-color);
+  background-color: transparent;
+  color: var(--primary-color);
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
+textarea {
+  width: 100%;
+  height: 15rem;
+  padding: 0.5rem;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  resize: none;
+  border: 1px solid var(--primary-color);
+  border-radius: 0.5rem;
 }
diff --git a/content_script.js b/content_script.js
@@ -89,7 +89,7 @@ function proccessPost(postToProccess) {
 
   console.log("[Wungle Text]: Last post content field ", lastPostContentField);
 
-  header.innerHTML += `<button class="wungle-text-button" style="margin-left: 0.2rem; border: 1px solid black; height: 1.5rem; padding: 0.5rem; border-radius: 0.5rem; min-width: 7rem;">Wungle Text</button>`;
+  header.innerHTML += `<button class="wungle-text-button" style="margin-left: 0.2rem; border: 1px solid ${window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "white" : "black"}; height: 1.5rem; padding: 0.5rem; border-radius: 0.5rem; min-width: 7rem; background-color: ${window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "#333" : "white"}; color: ${window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "white" : "black"};">Wungle Text</button>`;
   header.querySelector(".wungle-text-button").addEventListener("click", () => {
     lastPostContentField.querySelectorAll("p").forEach((p) => {
       if (development) {

diff --git a/manifest.json b/manifest.json
@@ -26,6 +26,7 @@
     "default_title": "Wungle Text for Tumblr"
   },
   "permissions": [
-    "clipboardWrite"
+    "clipboardWrite",
+    "storage"
   ]
 }