2 files changed, 32 insertions, 38 deletions

diff --git a/ui/static/js/app.js b/ui/static/js/app.js
index 91de712..f054cc0 100644
--- a/ui/static/js/app.js
+++ b/ui/static/js/app.js
@@ -115,17 +115,17 @@ function markPageAsRead() {
 }
 
 // Handle entry status changes from the list view and entry view.
-function handleEntryStatus() {
-    if (isListView()) {
-        let currentItem = document.querySelector(".current-item");
-        if (currentItem !== null) {
-            // The order is important here,
-            // On the unread page, the read item will be hidden.
+function handleEntryStatus(element) {
+    let currentEntry = findEntry(element);
+    if (currentEntry) {
+        // The order is important here,
+        // On the unread page, the read item will be hidden.
+        // If "goToNextListItem" first, it may go to an item about to hide:
+        // Imagine that user click 'mark as read' right below the '.current-item'
+        toggleEntryStatus(currentEntry);
+        if (isListView() && currentEntry.classList.contains('current-item')) {
             goToNextListItem();
-            toggleEntryStatus(currentItem);
         }
-    } else {
-        toggleEntryStatus(document.querySelector(".entry"));
     }
 }
 
@@ -180,14 +180,10 @@ function updateEntriesStatus(entryIDs, status, callback) {
 }
 
 // Handle save entry from list view and entry view.
-function handleSaveEntry() {
-    if (isListView()) {
-        let currentItem = document.querySelector(".current-item");
-        if (currentItem !== null) {
-            saveEntry(currentItem.querySelector("a[data-save-entry]"));
-        }
-    } else {
-        saveEntry(document.querySelector("a[data-save-entry]"));
+function handleSaveEntry(element) {
+    let currentEntry = findEntry(element);
+    if (currentEntry) {
+        saveEntry(currentEntry.querySelector("a[data-save-entry]"));
     }
 }
 
@@ -212,14 +208,10 @@ function saveEntry(element) {
 }
 
 // Handle bookmark from the list view and entry view.
-function handleBookmark() {
-    if (isListView()) {
-        let currentItem = document.querySelector(".current-item");
-        if (currentItem !== null) {
-            toggleBookmark(currentItem);
-        }
-    } else {
-        toggleBookmark(document.querySelector(".entry"));
+function handleBookmark(element) {
+    let currentEntry = findEntry(element);
+    if (currentEntry) {
+        toggleBookmark(currentEntry);
     }
 }
 
@@ -454,6 +446,18 @@ function isListView() {
     return document.querySelector(".items") !== null;
 }
 
+function findEntry(element) {
+    if (isListView()) {
+        if (element) {
+            return DomHelper.findParent(element, "item");
+        } else {
+            return document.querySelector(".current-item");
+        }
+    } else {
+        return document.querySelector(".entry");
+    }
+}
+
 function handleConfirmationMessage(linkElement, callback) {
     linkElement.style.display = "none";
 
diff --git a/ui/static/js/bootstrap.js b/ui/static/js/bootstrap.js
index 4120437..9aeb5d5 100644
--- a/ui/static/js/bootstrap.js
+++ b/ui/static/js/bootstrap.js
@@ -34,22 +34,12 @@ document.addEventListener("DOMContentLoaded", function () {
     let touchHandler = new TouchHandler();
     touchHandler.listen();
 
-    onClick("a[data-save-entry]", () => handleSaveEntry());
-    onClick("a[data-toggle-bookmark]", () => handleBookmark());
+    onClick("a[data-save-entry]", (event) => handleSaveEntry(event.target));
+    onClick("a[data-toggle-bookmark]", (event) => handleBookmark(event.target));
     onClick("a[data-fetch-content-entry]", () => handleFetchOriginalContent());
     onClick("a[data-action=search]", (event) => setFocusToSearchInput(event));
     onClick("a[data-action=markPageAsRead]", () => handleConfirmationMessage(event.target, () => markPageAsRead()));
-
-    onClick("a[data-toggle-status]", (event) => {
-        let currentItem = DomHelper.findParent(event.target, "entry");
-        if (!currentItem) {
-            currentItem = DomHelper.findParent(event.target, "item");
-        }
-
-        if (currentItem) {
-            toggleEntryStatus(currentItem);
-        }
-    });
+    onClick("a[data-toggle-status]", (event) => handleEntryStatus(event.target));
 
     onClick("a[data-confirm]", (event) => handleConfirmationMessage(event.target, (url, redirectURL) => {
         let request = new RequestBuilder(url);