From 8e91a18ee2db4b5595192f9772c5d375d4619efc Mon Sep 17 00:00:00 2001
From: Scott Worley <scottworley@scottworley.com>
Date: Wed, 26 Jan 2022 23:19:31 -0800
Subject: [PATCH] Use CSS for filtering the view

---
 index.html | 1 +
 vopamoi.ts | 9 +++------
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 55c3b35..8453007 100644
--- a/index.html
+++ b/index.html
@@ -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">
diff --git a/vopamoi.ts b/vopamoi.ts
index b16bc70..f93c51c 100644
--- a/vopamoi.ts
+++ b/vopamoi.ts
@@ -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);
-- 
2.47.2