diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js index 992fd76d..4ed1682f 100644 --- a/internal/ui/static/js/app.js +++ b/internal/ui/static/js/app.js @@ -451,30 +451,23 @@ function showKeyboardShortcuts() { */ function markPageAsRead() { const items = getVisibleEntries(); - const entryIDs = []; + if (items.length === 0) return; - items.forEach((element) => { + const entryIDs = items.map((element) => { element.classList.add("item-status-read"); - entryIDs.push(parseInt(element.dataset.id, 10)); + return parseInt(element.dataset.id, 10); }); - if (entryIDs.length > 0) { - updateEntriesStatus(entryIDs, "read", () => { - // Make sure the Ajax request reach the server before we reload the page. + updateEntriesStatus(entryIDs, "read", () => { + const element = document.querySelector(":is(a, button)[data-action=markPageAsRead]"); + const showOnlyUnread = element?.dataset.showOnlyUnread || false; - const element = document.querySelector(":is(a, button)[data-action=markPageAsRead]"); - let showOnlyUnread = false; - if (element) { - showOnlyUnread = element.dataset.showOnlyUnread || false; - } - - if (showOnlyUnread) { - window.location.href = window.location.href; - } else { - goToPage("next", true); - } - }); - } + if (showOnlyUnread) { + window.location.reload(); + } else { + goToPage("next", true); + } + }); } /** @@ -600,9 +593,9 @@ function updateEntriesStatus(entryIDs, status, callback) { } if (status === "read") { - decrementUnreadCounter(count); + updateUnreadCounterValue(-count); } else { - incrementUnreadCounter(count); + updateUnreadCounterValue(count); } }); }); @@ -672,9 +665,7 @@ function handleBookmark(element) { */ function toggleBookmark(parentElement, toasting) { const buttonElement = parentElement.querySelector(":is(a, button)[data-toggle-bookmark]"); - if (!buttonElement) { - return; - } + if (!buttonElement) return; buttonElement.textContent = ""; insertIconLabelElement(buttonElement, buttonElement.dataset.labelLoading); @@ -683,20 +674,14 @@ function toggleBookmark(parentElement, toasting) { request.withCallback(() => { const currentStarStatus = buttonElement.dataset.value; const newStarStatus = currentStarStatus === "star" ? "unstar" : "star"; + const isStarred = currentStarStatus === "star"; - let iconElement, label; - if (currentStarStatus === "star") { - iconElement = document.querySelector("template#icon-star"); - label = buttonElement.dataset.labelStar; - if (toasting) { - showToast(buttonElement.dataset.toastUnstar, iconElement); - } - } else { - iconElement = document.querySelector("template#icon-unstar"); - label = buttonElement.dataset.labelUnstar; - if (toasting) { - showToast(buttonElement.dataset.toastStar, iconElement); - } + const iconElement = document.querySelector(isStarred ? "template#icon-star" : "template#icon-unstar"); + const label = isStarred ? buttonElement.dataset.labelStar : buttonElement.dataset.labelUnstar; + + if (toasting) { + const toastKey = isStarred ? "toastUnstar" : "toastStar"; + showToast(buttonElement.dataset[toastKey], iconElement); } buttonElement.replaceChildren(iconElement.content.cloneNode(true)); @@ -712,14 +697,10 @@ function toggleBookmark(parentElement, toasting) { * @returns {void} */ function handleFetchOriginalContent() { - if (isListView()) { - return; - } + if (isListView()) return; const buttonElement = document.querySelector(":is(a, button)[data-fetch-content-entry]"); - if (!buttonElement) { - return; - } + if (!buttonElement) return; const previousElement = buttonElement.cloneNode(true); @@ -732,7 +713,7 @@ function handleFetchOriginalContent() { buttonElement.appendChild(previousElement); response.json().then((data) => { - if (data.hasOwnProperty("content") && data.hasOwnProperty("reading_time")) { + if (data.content && data.reading_time) { document.querySelector(".entry-content").innerHTML = ttpolicy.createHTML(data.content); const entryReadingtimeElement = document.querySelector(".entry-reading-time"); if (entryReadingtimeElement) { @@ -752,7 +733,7 @@ function handleFetchOriginalContent() { */ function openOriginalLink(openLinkInCurrentTab) { const entryLink = document.querySelector(".entry h1 a"); - if (entryLink !== null) { + if (entryLink) { if (openLinkInCurrentTab) { window.location.href = entryLink.getAttribute("href"); } else { @@ -762,7 +743,7 @@ function openOriginalLink(openLinkInCurrentTab) { } const currentItemOriginalLink = document.querySelector(".current-item :is(a, button)[data-original-link]"); - if (currentItemOriginalLink !== null) { + if (currentItemOriginalLink) { openNewTab(currentItemOriginalLink.getAttribute("href")); const currentItem = document.querySelector(".current-item"); @@ -781,19 +762,13 @@ function openOriginalLink(openLinkInCurrentTab) { * @returns {void} */ function openCommentLink(openLinkInCurrentTab) { - if (!isListView()) { - const entryLink = document.querySelector(":is(a, button)[data-comments-link]"); - if (entryLink !== null) { - if (openLinkInCurrentTab) { - window.location.href = entryLink.getAttribute("href"); - } else { - openNewTab(entryLink.getAttribute("href")); - } - } - } else { - const currentItemCommentsLink = document.querySelector(".current-item :is(a, button)[data-comments-link]"); - if (currentItemCommentsLink !== null) { - openNewTab(currentItemCommentsLink.getAttribute("href")); + const entryLink = document.querySelector(isListView() ? ".current-item :is(a, button)[data-comments-link]" : ":is(a, button)[data-comments-link]"); + + if (entryLink) { + if (openLinkInCurrentTab) { + window.location.href = entryLink.getAttribute("href"); + } else { + openNewTab(entryLink.getAttribute("href")); } } } @@ -806,7 +781,7 @@ function openCommentLink(openLinkInCurrentTab) { */ function openSelectedItem() { const currentItemLink = document.querySelector(".current-item .item-title a"); - if (currentItemLink !== null) { + if (currentItemLink) { window.location.href = currentItemLink.getAttribute("href"); } } @@ -815,17 +790,11 @@ function openSelectedItem() { * Unsubscribe from the feed of the currently selected item. */ function unsubscribeFromFeed() { - const unsubscribeLinks = document.querySelectorAll("[data-action=remove-feed]"); - if (unsubscribeLinks.length === 1) { - const unsubscribeLink = unsubscribeLinks[0]; - + const unsubscribeLink = document.querySelector("[data-action=remove-feed]"); + if (unsubscribeLink) { const request = new RequestBuilder(unsubscribeLink.dataset.url); request.withCallback(() => { - if (unsubscribeLink.dataset.redirectUrl) { - window.location.href = unsubscribeLink.dataset.redirectUrl; - } else { - window.location.reload(); - } + window.location.href = unsubscribeLink.dataset.redirectUrl || window.location.href; }); request.execute(); } @@ -836,54 +805,26 @@ function unsubscribeFromFeed() { */ function scrollToCurrentItem() { const currentItem = document.querySelector(".current-item"); - if (currentItem !== null) { + if (currentItem) { scrollPageTo(currentItem, true); } } -/** - * Decrement the unread counter by a specified amount. - * - * @param {number} n - The amount to decrement the counter by. - */ -function decrementUnreadCounter(n) { - updateUnreadCounterValue((current) => { - return current - n; - }); -} - -/** - * Increment the unread counter by a specified amount. - * - * @param {number} n - The amount to increment the counter by. - */ -function incrementUnreadCounter(n) { - updateUnreadCounterValue((current) => { - return current + n; - }); -} - /** * Update the unread counter value. * - * @param {function} callback - The function to call with the old value. + * @param {number} delta - The amount to change the counter by. */ -function updateUnreadCounterValue(callback) { +function updateUnreadCounterValue(delta) { document.querySelectorAll("span.unread-counter").forEach((element) => { const oldValue = parseInt(element.textContent, 10); - element.textContent = callback(oldValue); + element.textContent = oldValue + delta; }); if (window.location.href.endsWith('/unread')) { const oldValue = parseInt(document.title.split('(')[1], 10); - const newValue = callback(oldValue); - - document.title = document.title.replace( - /(.*?)\(\d+\)(.*?)/, - function (match, prefix, suffix, offset, string) { - return prefix + '(' + newValue + ')' + suffix; - } - ); + const newValue = oldValue + delta; + document.title = document.title.replace(/(.*?)\(\d+\)(.*?)/, `$1(${newValue})$2`); } } @@ -970,9 +911,7 @@ function showToast(toastMessage, iconElement) { const toastElementWrapper = document.getElementById("toast-wrapper"); toastElementWrapper.classList.remove('toast-animate'); - setTimeout(() => { - toastElementWrapper.classList.add('toast-animate'); - }, 100); + setTimeout(() => toastElementWrapper.classList.add('toast-animate'), 100); } /**