forks/miniflux
1
0
Fork 0
Code Releases Activity

refactor handleEntryStatus / goToNextListItem / goToPrevListItem

Browse source
This commit is contained in:
Thiago Perrotta 2022-01-31 22:57:14 -05:00 • committed by Frédéric Guillot
parent 824fc310a9
commit 3243d88c9b
2 changed files with 32 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
ui/static/js/app.js
View file

@ -127,9 +127,14 @@ function markPageAsRead() {
} }
} }
// Handle entry status changes from the list view and entry view. /**
// Focus the previous entry if it exists. * Handle entry status changes from the list view and entry view.
function handleEntryStatus(element, setToRead) { * Focus the next or the previous entry if it exists.
* @param {string} item Item to focus: "previous" or "next".
* @param {Element} element
* @param {boolean} setToRead
*/
function handleEntryStatus(item, element, setToRead) {
let toasting = !element; let toasting = !element;
let currentEntry = findEntry(element); let currentEntry = findEntry(element);
if (currentEntry) { if (currentEntry) {
@ -137,22 +142,14 @@ function handleEntryStatus(element, setToRead) {
toggleEntryStatus(currentEntry, toasting); toggleEntryStatus(currentEntry, toasting);
} }
if (isListView() && currentEntry.classList.contains('current-item')) { if (isListView() && currentEntry.classList.contains('current-item')) {
goToNextListItem(); switch (item) {
} case "previous":
} goToListItem(-1);
} break;
case "next":
// Handle entry status changes from the list view and entry view. goToListItem(1);
// Focus the next entry if it exists. break;
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();
} }
} }
} }
@ -363,7 +360,7 @@ function openOriginalLink(openLinkInCurrentTab) {
let currentItem = document.querySelector(".current-item"); let currentItem = document.querySelector(".current-item");
// If we are not on the list of starred items, move to the next item // If we are not on the list of starred items, move to the next item
if (document.location.href != document.querySelector('a[data-page=starred]').href) { if (document.location.href != document.querySelector('a[data-page=starred]').href) {
goToNextListItem(); goToListItem(1);
} }
markEntryAsRead(currentItem); markEntryAsRead(currentItem);
} }
@ -428,7 +425,7 @@ function goToPage(page, fallbackSelf) {
function goToPrevious() { function goToPrevious() {
if (isListView()) { if (isListView()) {
goToPreviousListItem(); goToListItem(-1);
} else { } else {
goToPage("previous"); goToPage("previous");
} }
@ -436,7 +433,7 @@ function goToPrevious() {
function goToNext() { function goToNext() {
if (isListView()) { if (isListView()) {
goToNextListItem(); goToListItem(1);
} else { } else {
goToPage("next"); goToPage("next");
} }
@ -464,7 +461,10 @@ function goToFeed() {
} }
} }
function goToPreviousListItem() { /**
* @param {number} offset How many items to jump for focus.
*/
function goToListItem(offset) {
let items = DomHelper.getVisibleElements(".items .item"); let items = DomHelper.getVisibleElements(".items .item");
if (items.length === 0) { if (items.length === 0) {
return; return;
@ -480,80 +480,11 @@ function goToPreviousListItem() {
if (items[i].classList.contains("current-item")) { if (items[i].classList.contains("current-item")) {
items[i].classList.remove("current-item"); items[i].classList.remove("current-item");
let nextItem; let item = items[(i + offset + items.length) % items.length];
if (i - 1 >= 0) {
nextItem = items[i - 1];
} else {
nextItem = items[items.length - 1];
}
nextItem.classList.add("current-item"); item.classList.add("current-item");
DomHelper.scrollPageTo(nextItem); DomHelper.scrollPageTo(item);
nextItem.querySelector('.item-header a').focus(); item.querySelector('.item-header a').focus();
break;
}
}
}
function goToNextListItem() {
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 nextItem;
if (i + 1 < items.length) {
nextItem = items[i + 1];
} else {
nextItem = items[0];
}
nextItem.classList.add("current-item");
DomHelper.scrollPageTo(nextItem);
nextItem.querySelector('.item-header a').focus();
break;
}
}
}
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; break;
} }

10
ui/static/js/bootstrap.js vendored
View file

@ -23,8 +23,8 @@ document.addEventListener("DOMContentLoaded", function () {
keyboardHandler.on("V", () => openOriginalLink(true)); keyboardHandler.on("V", () => openOriginalLink(true));
keyboardHandler.on("c", () => openCommentLink()); keyboardHandler.on("c", () => openCommentLink());
keyboardHandler.on("C", () => openCommentLink(true)); keyboardHandler.on("C", () => openCommentLink(true));
keyboardHandler.on("m", () => handleEntryStatus()); keyboardHandler.on("m", () => handleEntryStatus("next"));
keyboardHandler.on("M", () => handleEntryStatusNext()); keyboardHandler.on("M", () => handleEntryStatus("previous"));
keyboardHandler.on("A", () => markPageAsRead()); keyboardHandler.on("A", () => markPageAsRead());
keyboardHandler.on("s", () => handleSaveEntry()); keyboardHandler.on("s", () => handleSaveEntry());
keyboardHandler.on("d", () => handleFetchOriginalContent()); keyboardHandler.on("d", () => handleFetchOriginalContent());
@ -46,7 +46,7 @@ document.addEventListener("DOMContentLoaded", function () {
onClick("a[data-fetch-content-entry]", () => handleFetchOriginalContent()); onClick("a[data-fetch-content-entry]", () => handleFetchOriginalContent());
onClick("a[data-action=search]", (event) => setFocusToSearchInput(event)); onClick("a[data-action=search]", (event) => setFocusToSearchInput(event));
onClick("a[data-action=markPageAsRead]", (event) => handleConfirmationMessage(event.target, () => markPageAsRead())); onClick("a[data-action=markPageAsRead]", (event) => handleConfirmationMessage(event.target, () => markPageAsRead()));
onClick("a[data-toggle-status]", (event) => handleEntryStatus(event.target)); onClick("a[data-toggle-status]", (event) => handleEntryStatus("next", event.target));
onClick("a[data-confirm]", (event) => handleConfirmationMessage(event.target, (url, redirectURL) => { onClick("a[data-confirm]", (event) => handleConfirmationMessage(event.target, (url, redirectURL) => {
let request = new RequestBuilder(url); let request = new RequestBuilder(url);
@ -63,11 +63,11 @@ document.addEventListener("DOMContentLoaded", function () {
})); }));
onClick("a[data-original-link]", (event) => { onClick("a[data-original-link]", (event) => {
handleEntryStatus(event.target, true); handleEntryStatus("next", event.target, true);
}, true); }, true);
onAuxClick("a[data-original-link]", (event) => { onAuxClick("a[data-original-link]", (event) => {
if (event.button == 1) { if (event.button == 1) {
handleEntryStatus(event.target, true); handleEntryStatus("next", event.target, true);
} }
}, true); }, true);