]> git.scottworley.com Git - vopamoi/commitdiff
Use CSS for filtering the view
authorScott Worley <scottworley@scottworley.com>
Thu, 27 Jan 2022 07:19:31 +0000 (23:19 -0800)
committerScott Worley <scottworley@scottworley.com>
Thu, 27 Jan 2022 20:21:55 +0000 (12:21 -0800)
index.html
vopamoi.ts

index 55c3b35b0acbd6343387663c435f14105f03719f..845300711280e786ea81280896edbb2f2a321406 100644 (file)
@@ -3,6 +3,7 @@
   <head>
     <script src="vopamoi.js" defer="true"></script>
     <link rel="stylesheet" href="vopamoi.css"/>
+    <style id="viewStyle">.task:not([data-state=todo]) { display: none }</style>
   </head>
   <body onload="browserInit();">
     <input id="taskName" name="taskName">
index b16bc703b2ee1ca8432c0f3c2bab782fed502421..f93c51c45a134826c034626377e62457dfbfc3bb 100644 (file)
@@ -100,9 +100,6 @@ const Model = {
     const task = this.getTask(createTimestamp);
     if (task) {
       task.setAttribute("data-state", state);
-      if (task instanceof HTMLElement) {
-        task.style.display = state == "todo" ? "block" : "none"; // Until view filtering
-      }
     }
   },
 };
@@ -225,7 +222,7 @@ const BrowserUI = {
 
   firstVisibleTask: function () {
     for (const task of document.getElementsByClassName("task")) {
-      if (task instanceof HTMLElement && task.style.display !== "none") {
+      if (task instanceof HTMLElement && task.getAttribute("data-state")! === "todo") {
         return task;
       }
     }
@@ -243,7 +240,7 @@ const BrowserUI = {
     while (true) {
       cursor = increment > 0 ? cursor.nextElementSibling : cursor.previousElementSibling;
       if (!cursor || !(cursor instanceof HTMLElement)) break;
-      if (cursor.style.display !== "none") {
+      if (cursor.getAttribute("data-state")! === "todo") {
         offset -= increment;
         valid_cursor = cursor;
       }
@@ -294,7 +291,7 @@ const BrowserUI = {
   setState: function (newState: string) {
     const task = document.activeElement;
     if (!task) return;
-    const oldState = task.getAttribute("data-state");
+    const oldState = task.getAttribute("data-state")!;
     if (newState === oldState) return;
     const createTimestamp = task.getAttribute("data-created")!;
     this.moveCursor(1) || this.moveCursor(-1);