Add toggle status button to entry page

3 files changed, 20 insertions, 21 deletions

diff --git a/ui/static/js/bootstrap.js b/ui/static/js/bootstrap.js
index 3e9004f..fe6e87c 100644
--- a/ui/static/js/bootstrap.js
+++ b/ui/static/js/bootstrap.js
@@ -46,7 +46,11 @@ document.addEventListener("DOMContentLoaded", function() {
     mouseHandler.onClick("a[data-toggle-status]", (event) => {
         event.preventDefault();
 
-        let currentItem = DomHelper.findParent(event.target, "item");
+        let currentItem = DomHelper.findParent(event.target, "entry");
+        if (! currentItem) {
+            currentItem = DomHelper.findParent(event.target, "item");
+        }
+
         if (currentItem) {
             EntryHandler.toggleEntryStatus(currentItem);
         }
diff --git a/ui/static/js/entry_handler.js b/ui/static/js/entry_handler.js
index 25d45c7..6392aef 100644
--- a/ui/static/js/entry_handler.js
+++ b/ui/static/js/entry_handler.js
@@ -15,35 +15,25 @@ class EntryHandler {
 
     static toggleEntryStatus(element) {
         let entryID = parseInt(element.dataset.id, 10);
-        let statuses = {read: "unread", unread: "read"};
+        let link = element.querySelector("a[data-toggle-status]");
 
-        for (let currentStatus in statuses) {
-            let newStatus = statuses[currentStatus];
+        let currentStatus = link.dataset.value;
+        let newStatus = currentStatus === "read" ? "unread" : "read";
 
-            if (element.classList.contains("item-status-" + currentStatus)) {
-                element.classList.remove("item-status-" + currentStatus);
-                element.classList.add("item-status-" + newStatus);
+        this.updateEntriesStatus([entryID], newStatus);
 
-                this.updateEntriesStatus([entryID], newStatus);
-
-                let link = element.querySelector("a[data-toggle-status]");
-                if (link) {
-                    this.toggleLinkStatus(link);
-                }
-
-                break;
-            }
-        }
-    }
-
-    static toggleLinkStatus(link) {
-        if (link.dataset.value === "read") {
+        if (currentStatus === "read") {
             link.innerHTML = link.dataset.labelRead;
             link.dataset.value = "unread";
         } else {
             link.innerHTML = link.dataset.labelUnread;
             link.dataset.value = "read";
         }
+
+        if (element.classList.contains("item-status-" + currentStatus)) {
+            element.classList.remove("item-status-" + currentStatus);
+            element.classList.add("item-status-" + newStatus);
+        }
     }
 
     static toggleBookmark(element) {
diff --git a/ui/static/js/nav_handler.js b/ui/static/js/nav_handler.js
index c316507..bd9c681 100644
--- a/ui/static/js/nav_handler.js
+++ b/ui/static/js/nav_handler.js
@@ -71,6 +71,11 @@ class NavHandler {
     }
 
     toggleEntryStatus() {
+        if (! this.isListView()) {
+            EntryHandler.toggleEntryStatus(document.querySelector(".entry"));
+            return;
+        }
+
         let currentItem = document.querySelector(".current-item");
         if (currentItem !== null) {
             // The order is important here,