Merge archived.js and home.js into todos.js

diff --git a/app/archived.html b/app/archived.html
index ed69325ebfad2bab13ba441408f05ab929d85a79..de976587c862224914979a3d713f5d430ab635cc 100644 (file)
--- a/app/archived.html
+++ b/app/archived.html
@@ -4,7 +4,7 @@
     <title>todo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
     <link rel="stylesheet" type="text/css" href="./style.css">
-    <script src="./archived.js" defer></script>
+    <script src="./todos.js" defer></script>
   </head>
   <body class="default">
     <header>

diff --git a/app/index.html b/app/index.html
index 06d115f7d655f53365de937b5c4a2664ac2d64b8..38a55776a891108327cea5a83ba3ac1f94beeffa 100644 (file)
--- a/app/index.html
+++ b/app/index.html
@@ -4,7 +4,7 @@
     <title>todo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
     <link rel="stylesheet" type="text/css" href="./style.css">
-    <script src="./index.js" defer></script>
+    <script src="./todos.js" defer></script>
   </head>
   <body class="default">
     <header>

diff --git a/app/index.js b/app/todos.js
similarity index 70%
rename from app/index.js
rename to app/todos.js
index 9a1eaa8cef115f5eba640bae6d729eff759baffe..efe7fcb9d484263a3c20ac1c4053b0b8fc5234e9 100644 (file)
--- a/app/index.js
+++ b/app/todos.js
@@ -46,7 +46,13 @@ if (window.location.hash.length > 0) {
   }
 }
 
-document.getElementById("createTodo").addEventListener("click", () => {
+const archivedElement = document.getElementById("archived");
+const todosElement = document.getElementById("todos");
+const completedElement = document.getElementById("todos-completed");
+
+const page = (archivedElement) ? "archived" : "home";
+
+if (page == "home") document.getElementById("createTodo").addEventListener("click", () => {
 
   document.documentElement.scrollTop = 0;
 
@@ -62,47 +68,42 @@ document.getElementById("createTodo").addEventListener("click", () => {
   backupData();
 });
 
-const todosCompleted = document.getElementById("todos-completed");
-
 const doShowCompleted = (backup = false) => {
 
   if (theme.showCompleted) {
 
-    todosCompleted.classList.remove("hidden");
+    completedElement.classList.remove("hidden");
   } else {
 
-    todosCompleted.classList.add("hidden");
+    completedElement.classList.add("hidden");
   }
 
   if (backup) backupData();
 }
 
-doShowCompleted()
+if (page == "home") doShowCompleted();
 
-document.getElementById("showCompleted").addEventListener("click", () => {
+if (page == "home") document.getElementById("showCompleted").addEventListener("click", () => {
 
   theme.showCompleted = !theme.showCompleted;
   doShowCompleted(true);
   resizeTextHeights();
 });
 
-const todosElement = document.getElementById("todos");
-const completedElement = document.getElementById("todos-completed");
-
-const todoElement = (item, index, isCompleted) => {
+const todoElement = (item, index, isCompleted = false) => {
 
-  let completedText = (isCompleted) ? "completed" : "uncompleted";
+  let targetText = (isCompleted) ? "completed" : (page == "archived") ? "archived" : "uncompleted";
 
   return `
-    <todo id="todo-${completedText}-${index}">
-      <div id="todo-${completedText}-${index}-completion" class="completion">
+    <todo id="todo-${targetText}-${index}">
+      <div id="todo-${targetText}-${index}-completion" class="completion ${(page == 'archived') ? 'hidden' : ''}">
         ${(isCompleted) ? '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'currentColor\' d=\'m10.6 13.8l-2.15-2.15q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22\' /></svg>' : '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><path fill=\'currentColor\' d=\'M12 20a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2\' /></svg>'}
       </div>
       <div class="data">
-        <textarea id="todo-${completedText}-${index}-description">${item.description}</textarea>
+        <textarea id="todo-${targetText}-${index}-description">${item.description}</textarea>
         <div>
-          <p id="todo-${completedText}-${index}-archive">archive</p>
-          <p id="todo-${completedText}-${index}-delete">delete</p>
+          <p id="todo-${targetText}-${index}-${(page == 'home') ? 'archive' : 'restore'}">${(page == 'home') ? 'archive' : 'restore'}</p>
+          <p id="todo-${targetText}-${index}-delete">delete</p>
         </div>
       </div>
     </todo>
@@ -122,7 +123,41 @@ const applyListeners = () => {
 
   resizeTextHeights();
 
-  for (var i = 0; i < todos.uncompleted.length; i++) {
+  if (page == "archived") 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();
+    });
+  }
+  
+  if (page == "home") for (var i = 0; i < todos.uncompleted.length; i++) {
 
     let index = i; // fixes scoping issue - what a disaster
 
@@ -167,7 +202,7 @@ const applyListeners = () => {
     });
   }
   
-  for (var i = 0; i < todos.completed.length; i++) {
+  if (page == "home") for (var i = 0; i < todos.completed.length; i++) {
 
     let index = i; // fixes scoping issue - what a disaster
 
@@ -210,6 +245,14 @@ const applyListeners = () => {
   }
 }
 
+const hydrateArchived = () => {
+
+  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>";
+};
+
 const hydrateUncompleted = () => {
 
   todosElement.innerHTML = todos.uncompleted
@@ -226,14 +269,19 @@ const hydrateCompleted = () => {
 
 const hydrateTodos = () => {
 
-  hydrateUncompleted();
-  hydrateCompleted();
+  if (page == "archived") hydrateArchived();
+  if (page == "home") {
+    
+    hydrateUncompleted();
+    hydrateCompleted();
+  }
 
   applyListeners();
 };
 
 hydrateTodos();
 
+
 const updateTheme = (force = false) => {
 
   if (theme.colorScheme != "default") {