Add mark as read/unread link on list items

1 files changed, 35 insertions, 7 deletions

diff --git a/ui/static/js/app.js b/ui/static/js/app.js
index 4ec82e4..c5aff81 100644
--- a/ui/static/js/app.js
+++ b/ui/static/js/app.js
@@ -35,6 +35,16 @@ class DomHelper {
 
         return result;
     }
+
+    static findParent(element, selector) {
+        for (; element && element !== document; element = element.parentNode) {
+            if (element.classList.contains(selector)) {
+                return element;
+            }
+        }
+
+        return null;
+    }
 }
 
 class TouchHandler {
@@ -68,13 +78,7 @@ class TouchHandler {
             return element;
         }
 
-        for (; element && element !== document; element = element.parentNode) {
-            if (element.classList.contains("touch-item")) {
-                return element;
-            }
-        }
-
-        return null;
+        return DomHelper.findParent(element, "touch-item");
     }
 
     onTouchStart(event) {
@@ -324,11 +328,26 @@ class EntryHandler {
                     UnreadCounterHandler.increment(1);
                 }
 
+                let link = element.querySelector("a[data-toggle-status]");
+                if (link) {
+                    this.toggleLinkStatus(link);
+                }
+
                 break;
             }
         }
     }
 
+    static toggleLinkStatus(link) {
+        if (link.dataset.value === "read") {
+            link.innerHTML = link.dataset.labelRead;
+            link.dataset.value = "unread";
+        } else {
+            link.innerHTML = link.dataset.labelUnread;
+            link.dataset.value = "read";
+        }
+    }
+
     static toggleBookmark(element) {
         element.innerHTML = element.dataset.labelLoading;
 
@@ -728,6 +747,15 @@ document.addEventListener("DOMContentLoaded", function() {
         EntryHandler.toggleBookmark(event.target);
     });
 
+    mouseHandler.onClick("a[data-toggle-status]", (event) => {
+        event.preventDefault();
+
+        let currentItem = DomHelper.findParent(event.target, "item");
+        if (currentItem) {
+            EntryHandler.toggleEntryStatus(currentItem);
+        }
+    });
+
     mouseHandler.onClick("a[data-fetch-content-entry]", (event) => {
         event.preventDefault();
         EntryHandler.fetchOriginalContent(event.target);