Add open link

diff --git a/app/archived.js b/app/archived.js
deleted file mode 100644 (file)
index 71e8a11..0000000
--- a/app/archived.js
+++ /dev/null
@@ -1,128 +0,0 @@
-var todos = {
-  uncompleted: [],
-  completed: []
-};
-var archived = [];
-var theme = {
-  colorScheme: "default",
-  css: "",
-  showCompleted: false
-};
-
-if (localStorage.getItem("todos")) {
-
-  todos = JSON.parse(localStorage.getItem("todos"));
-}
-
-if (localStorage.getItem("archived")) {
-
-  archived = JSON.parse(localStorage.getItem("archived"));
-}
-
-if (localStorage.getItem("theme")) {
-
-  theme = JSON.parse(localStorage.getItem("theme"));
-}
-
-const backupData = () => {
-
-  localStorage.setItem("todos", JSON.stringify(todos));
-  localStorage.setItem("archived", JSON.stringify(archived));
-  localStorage.setItem("theme", JSON.stringify(theme));
-}
-
-const archivedElement = document.getElementById("archived");
-
-const todoElement = (item, index) => {
-
-  return `
-    <todo id="todo-archived-${index}">
-      <div class="data">
-        <textarea id="todo-archived-${index}-description">${item.description}</textarea>
-        <div>
-          <p id="todo-archived-${index}-restore">restore</p>
-          <p id="todo-archived-${index}-delete">delete</p>
-        </div>
-      </div>
-    </todo>
-  `;
-}
-
-const resizeTextHeights = () => {
-
-  for (const element of document.querySelectorAll("todo textarea")) {
-
-    element.style.height = "0";
-    element.style.height = element.scrollHeight + "px";
-  }
-}
-
-const applyListeners = () => {
-
-  resizeTextHeights();
-
-  for (var i = 0; i < archived.length; i++) {
-
-    let index = i; // fixes scoping issue - what a disaster
-
-    document.getElementById(`todo-archived-${i}-description`).addEventListener("input", (event) => {
-
-      event.target.style.height = "0";
-      event.target.style.height = event.target.scrollHeight + "px";
-
-      archived[index].description = event.target.value;
-
-      backupData();
-    });
-
-    document.getElementById(`todo-archived-${i}-restore`).addEventListener("click", (event) => {
-
-      todos.uncompleted = [
-        archived[index]
-      ].concat(todos.uncompleted);
-      archived.splice(index, 1);
-
-      hydrateTodos();
-      backupData();
-    });
-
-    document.getElementById(`todo-archived-${i}-delete`).addEventListener("click", (event) => {
-
-      archived.splice(index, 1);
-
-      hydrateTodos();
-      backupData();
-    });
-  }
-}
-
-const hydrateTodos = () => {
-
-  if (archived.length > 0) archivedElement.innerHTML = archived
-    .map((x, index) => todoElement(x, index))
-    .join("");
-  else archivedElement.innerHTML = "<p>no archived todos for now&#8230;</p>";
-
-  applyListeners();
-};
-
-hydrateTodos();
-
-const updateTheme = (force = false) => {
-
-  if (theme.colorScheme != "default") {
-
-    document.getElementsByTagName("body")[0].className = theme.colorScheme;
-  }
-
-  if (theme.css != "" || force) {
-
-    const cssOverride = document.createElement("style");
-    cssOverride.setAttribute("id", "styleOverride");
-    cssOverride.innerHTML = theme.css.replaceAll("<", "&lt;").replaceAll(">", "&gt;");
-    if (document.getElementById("styleOverride")) document.getElementById("styleOverride").remove();
-    document.getElementsByTagName("head")[0].appendChild(cssOverride);
-  }
-}
-
-updateTheme();

diff --git a/app/style.css b/app/style.css
index e6c5b46e660eab842d28bd66caa1e7f0d950733d..e0e0cf62b98628ee813acf846377205c2ed4256d 100644 (file)
--- a/app/style.css
+++ b/app/style.css
@@ -119,6 +119,16 @@ nav {
   border-bottom-right-radius: var(--border-radius-outer) !important;
 }
 
+a, a:visited, a:active {
+  color: var(--text-primary);
+  text-decoration: none;
+  &:not(.embedded) {
+    background-color: var(--background-secondary);
+    padding: 0.25rem;
+    border-radius: 0.5rem;
+  }
+}
+
 todo {
   background-color: var(--background-secondary);
   border-radius: var(--border-radius-inner);
@@ -147,7 +157,7 @@ todo {
       flex-wrap: wrap;
       justify-content: right;
       gap: 0.5rem;
-      & > p {
+      & > p, & > a {
         /* user-select: none; */
         font-size: 0.9rem;
         margin: 0;
@@ -236,14 +246,6 @@ div:has(> #createTodo) {
   background-color: var(--background-secondary);
 }
 
-a, a:visited, a:active {
-  color: var(--text-primary);
-  background-color: var(--background-secondary);
-  text-decoration: none;
-  padding: 0.25rem;
-  border-radius: 0.5rem;
-}
-
 button:active, a:hover {
   background-color: var(--background-tertiary);
 }
@@ -270,7 +272,7 @@ div:has(> #todos-completed.hidden),
   h3 {
     font-size: 1.5rem !important;
   }
-  p {
+  p, a {
     font-size: 1rem !important;
   }
   button {

diff --git a/app/todos.js b/app/todos.js
index efe7fcb9d484263a3c20ac1c4053b0b8fc5234e9..356bf96638c0bd18a6e28e811c76e4a85db34692 100644 (file)
--- a/app/todos.js
+++ b/app/todos.js
@@ -102,6 +102,7 @@ const todoElement = (item, index, isCompleted = false) => {
       <div class="data">
         <textarea id="todo-${targetText}-${index}-description">${item.description}</textarea>
         <div>
+          ${(item.description.match(/^https?:\/\/.*...*$/g)) ? "<a href='" + item.description + "' target='_blank' class='embedded'>open</a>" : ""}
           <p id="todo-${targetText}-${index}-${(page == 'home') ? 'archive' : 'restore'}">${(page == 'home') ? 'archive' : 'restore'}</p>
           <p id="todo-${targetText}-${index}-delete">delete</p>
         </div>