Add new keyboard shortcut: 'M' - toggle read/unread, go to prev item

Currently there is "Toggle read/unread = m", which toggles and
then goes to the next item.

Having the opposite operation available is handy, especially when adding
new feeds and going through them from oldest to newest posts.

It seems natural to map 'M' (= shift + 'm') for this action.

Closes https://github.com/miniflux/v2/issues/1352

2 files changed, 49 insertions, 0 deletions

diff --git a/ui/static/js/app.js b/ui/static/js/app.js
index 2864103e..a8c0bce0 100644
--- a/ui/static/js/app.js
+++ b/ui/static/js/app.js
@@ -128,6 +128,7 @@ function markPageAsRead() {
 }
 
 // Handle entry status changes from the list view and entry view.
+// Focus the previous entry if it exists.
 function handleEntryStatus(element, setToRead) {
     let toasting = !element;
     let currentEntry = findEntry(element);
@@ -141,6 +142,21 @@ function handleEntryStatus(element, setToRead) {
     }
 }
 
+// Handle entry status changes from the list view and entry view.
+// Focus the next entry if it exists.
+function handleEntryStatusNext(element, setToRead) {
+    let toasting = !element;
+    let currentEntry = findEntry(element);
+    if (currentEntry) {
+        if (!setToRead || currentEntry.querySelector("a[data-toggle-status]").dataset.value == "unread") {
+            toggleEntryStatus(currentEntry, toasting);
+        }
+        if (isListView() && currentEntry.classList.contains('current-item')) {
+            goToPrevListItem();
+        }
+    }
+}
+
 // Change the entry status to the opposite value.
 function toggleEntryStatus(element, toasting) {
     let entryID = parseInt(element.dataset.id, 10);
@@ -512,6 +528,38 @@ function goToNextListItem() {
     }
 }
 
+function goToPrevListItem() {
+    let items = DomHelper.getVisibleElements(".items .item");
+    if (items.length === 0) {
+        return;
+    }
+
+    if (document.querySelector(".current-item") === null) {
+        items[0].classList.add("current-item");
+        items[0].querySelector('.item-header a').focus();
+        return;
+    }
+
+    for (let i = 0; i < items.length; i++) {
+        if (items[i].classList.contains("current-item")) {
+            items[i].classList.remove("current-item");
+
+            let prevItem;
+            if (i - 1 >= 0) {
+                prevItem = items[i - 1];
+            } else {
+                prevItem = items[items.length - 1];
+            }
+
+            prevItem.classList.add("current-item");
+            DomHelper.scrollPageTo(prevItem);
+            prevItem.querySelector('.item-header a').focus();
+
+            break;
+        }
+    }
+}
+
 function scrollToCurrentItem() {
     let currentItem = document.querySelector(".current-item");
     if (currentItem !== null) {
diff --git a/ui/static/js/bootstrap.js b/ui/static/js/bootstrap.js
index 624ef17e..6c41003d 100644
--- a/ui/static/js/bootstrap.js
+++ b/ui/static/js/bootstrap.js
@@ -24,6 +24,7 @@ document.addEventListener("DOMContentLoaded", function () {
         keyboardHandler.on("c", () => openCommentLink());
         keyboardHandler.on("C", () => openCommentLink(true));
         keyboardHandler.on("m", () => handleEntryStatus());
+        keyboardHandler.on("M", () => handleEntryStatusNext());
         keyboardHandler.on("A", () => markPageAsRead());
         keyboardHandler.on("s", () => handleSaveEntry());
         keyboardHandler.on("d", () => handleFetchOriginalContent());