diff options
Diffstat (limited to 'ui/static/js/app.js')
-rw-r--r-- | ui/static/js/app.js | 464 |
1 files changed, 464 insertions, 0 deletions
diff --git a/ui/static/js/app.js b/ui/static/js/app.js new file mode 100644 index 0000000..93fd661 --- /dev/null +++ b/ui/static/js/app.js @@ -0,0 +1,464 @@ +// OnClick attaches a listener to the elements that match the selector. +function onClick(selector, callback, noPreventDefault) { + let elements = document.querySelectorAll(selector); + elements.forEach((element) => { + element.onclick = (event) => { + if (!noPreventDefault) { + event.preventDefault(); + } + + callback(event); + }; + }); +} + +// Show and hide the main menu on mobile devices. +function toggleMainMenu() { + let menu = document.querySelector(".header nav ul"); + if (DomHelper.isVisible(menu)) { + menu.style.display = "none"; + } else { + menu.style.display = "block"; + } + + let searchElement = document.querySelector(".header .search"); + if (DomHelper.isVisible(searchElement)) { + searchElement.style.display = "none"; + } else { + searchElement.style.display = "block"; + } +} + +// Handle click events for the main menu (<li> and <a>). +function onClickMainMenuListItem(event) { + let element = event.target; + + if (element.tagName === "A") { + window.location.href = element.getAttribute("href"); + } else { + window.location.href = element.querySelector("a").getAttribute("href"); + } +} + +// Change the button label when the page is loading. +function handleSubmitButtons() { + let elements = document.querySelectorAll("form"); + elements.forEach((element) => { + element.onsubmit = () => { + let button = document.querySelector("button"); + + if (button) { + button.innerHTML = button.dataset.labelLoading; + button.disabled = true; + } + }; + }); +} + +// Set cursor focus to the search input. +function setFocusToSearchInput(event) { + event.preventDefault(); + event.stopPropagation(); + + let toggleSwitchElement = document.querySelector(".search-toggle-switch"); + if (toggleSwitchElement) { + toggleSwitchElement.style.display = "none"; + } + + let searchFormElement = document.querySelector(".search-form"); + if (searchFormElement) { + searchFormElement.style.display = "block"; + } + + let searchInputElement = document.getElementById("search-input"); + if (searchInputElement) { + searchInputElement.focus(); + searchInputElement.value = ""; + } +} + +// Show modal dialog with the list of keyboard shortcuts. +function showKeyboardShortcuts() { + let template = document.getElementById("keyboard-shortcuts"); + if (template !== null) { + ModalHandler.open(template.content); + } +} + +// Mark as read visible items of the current page. +function markPageAsRead() { + let items = DomHelper.getVisibleElements(".items .item"); + let entryIDs = []; + + items.forEach((element) => { + element.classList.add("item-status-read"); + entryIDs.push(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. + + let element = document.querySelector("a[data-mark-page-as-read]"); + let showOnlyUnread = false; + if (element) { + showOnlyUnread = element.dataset.showOnlyUnread; + } + + if (showOnlyUnread) { + window.location.reload(); + } else { + goToPage("next", true); + } + }); + } +} + +// 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. + goToNextListItem(); + toggleEntryStatus(currentItem); + } + } else { + toggleEntryStatus(document.querySelector(".entry")); + } +} + +// Change the entry status to the opposite value. +function toggleEntryStatus(element) { + let entryID = parseInt(element.dataset.id, 10); + let link = element.querySelector("a[data-toggle-status]"); + + let currentStatus = link.dataset.value; + let newStatus = currentStatus === "read" ? "unread" : "read"; + + updateEntriesStatus([entryID], newStatus); + + 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); + } +} + +// Mark a single entry as read. +function markEntryAsRead(element) { + if (element.classList.contains("item-status-unread")) { + element.classList.remove("item-status-unread"); + element.classList.add("item-status-read"); + + let entryID = parseInt(element.dataset.id, 10); + updateEntriesStatus([entryID], "read"); + } +} + +// Send the Ajax request to change entries statuses. +function updateEntriesStatus(entryIDs, status, callback) { + let url = document.body.dataset.entriesStatusUrl; + let request = new RequestBuilder(url); + request.withBody({ entry_ids: entryIDs, status: status }); + request.withCallback(callback); + request.execute(); + + if (status === "read") { + decrementUnreadCounter(1); + } else { + incrementUnreadCounter(1); + } +} + +// 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]")); + } +} + +// Send the Ajax request to save an entry. +function saveEntry(element) { + if (!element) { + return; + } + + if (element.dataset.completed) { + return; + } + + element.innerHTML = element.dataset.labelLoading; + + let request = new RequestBuilder(element.dataset.saveUrl); + request.withCallback(() => { + element.innerHTML = element.dataset.labelDone; + element.dataset.completed = true; + }); + request.execute(); +} + +// 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")); + } +} + +// Send the Ajax request and change the icon when bookmarking an entry. +function toggleBookmark(parentElement) { + let element = parentElement.querySelector("a[data-toggle-bookmark]"); + if (!element) { + return; + } + + element.innerHTML = element.dataset.labelLoading; + + let request = new RequestBuilder(element.dataset.bookmarkUrl); + request.withCallback(() => { + if (element.dataset.value === "star") { + element.innerHTML = element.dataset.labelStar; + element.dataset.value = "unstar"; + } else { + element.innerHTML = element.dataset.labelUnstar; + element.dataset.value = "star"; + } + }); + request.execute(); +} + +// Send the Ajax request to download the original web page. +function handleFetchOriginalContent() { + if (isListView()) { + return; + } + + let element = document.querySelector("a[data-fetch-content-entry]"); + if (!element) { + return; + } + + if (element.dataset.completed) { + return; + } + + element.innerHTML = element.dataset.labelLoading; + + let request = new RequestBuilder(element.dataset.fetchContentUrl); + request.withCallback((response) => { + element.innerHTML = element.dataset.labelDone; + element.dataset.completed = true; + + response.json().then((data) => { + if (data.hasOwnProperty("content")) { + document.querySelector(".entry-content").innerHTML = data.content; + } + }); + }); + request.execute(); +} + +function openOriginalLink() { + let entryLink = document.querySelector(".entry h1 a"); + if (entryLink !== null) { + DomHelper.openNewTab(entryLink.getAttribute("href")); + return; + } + + let currentItemOriginalLink = document.querySelector(".current-item a[data-original-link]"); + if (currentItemOriginalLink !== null) { + DomHelper.openNewTab(currentItemOriginalLink.getAttribute("href")); + + // Move to the next item and if we are on the unread page mark this item as read. + let currentItem = document.querySelector(".current-item"); + goToNextListItem(); + markEntryAsRead(currentItem); + } +} + +function openSelectedItem() { + let currentItemLink = document.querySelector(".current-item .item-title a"); + if (currentItemLink !== null) { + window.location.href = currentItemLink.getAttribute("href"); + } +} + +function unsubscribeFromFeed() { + let unsubscribeLinks = document.querySelectorAll("[data-action=remove-feed]"); + if (unsubscribeLinks.length === 1) { + let unsubscribeLink = unsubscribeLinks[0]; + + let request = new RequestBuilder(unsubscribeLink.dataset.url); + request.withCallback(() => { + if (unsubscribeLink.dataset.redirectUrl) { + window.location.href = unsubscribeLink.dataset.redirectUrl; + } else { + window.location.reload(); + } + }); + request.execute(); + } +} + +/** + * @param {string} page Page to redirect to. + * @param {boolean} fallbackSelf Refresh actual page if the page is not found. + */ +function goToPage(page, fallbackSelf) { + let element = document.querySelector("a[data-page=" + page + "]"); + + if (element) { + document.location.href = element.href; + } else if (fallbackSelf) { + window.location.reload(); + } +} + +function goToPrevious() { + if (isListView()) { + goToPreviousListItem(); + } else { + goToPage("previous"); + } +} + +function goToNext() { + if (isListView()) { + goToNextListItem(); + } else { + goToPage("next"); + } +} + +function goToFeedOrFeeds() { + if (isEntry()) { + let feedAnchor = document.querySelector("span.entry-website a"); + if (feedAnchor !== null) { + window.location.href = feedAnchor.href; + } + } else { + goToPage('feeds'); + } +} + +function goToPreviousListItem() { + 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"); + + if (i - 1 >= 0) { + items[i - 1].classList.add("current-item"); + DomHelper.scrollPageTo(items[i - 1]); + items[i - 1].querySelector('.item-header a').focus(); + } + + break; + } + } +} + +function goToNextListItem() { + let currentItem = document.querySelector(".current-item"); + let items = DomHelper.getVisibleElements(".items .item"); + if (items.length === 0) { + return; + } + + if (currentItem === 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"); + + if (i + 1 < items.length) { + items[i + 1].classList.add("current-item"); + DomHelper.scrollPageTo(items[i + 1]); + items[i + 1].querySelector('.item-header a').focus(); + } + + break; + } + } +} + +function decrementUnreadCounter(n) { + updateUnreadCounterValue((current) => { + return current - n; + }); +} + +function incrementUnreadCounter(n) { + updateUnreadCounterValue((current) => { + return current + n; + }); +} + +function updateUnreadCounterValue(callback) { + let counterElements = document.querySelectorAll("span.unread-counter"); + counterElements.forEach((element) => { + let oldValue = parseInt(element.textContent, 10); + element.innerHTML = callback(oldValue); + }); + + if (window.location.href.endsWith('/unread')) { + let oldValue = parseInt(document.title.split('(')[1], 10); + let newValue = callback(oldValue); + + document.title = document.title.replace( + /(.*?)\(\d+\)(.*?)/, + function (match, prefix, suffix, offset, string) { + return prefix + '(' + newValue + ')' + suffix; + } + ); + } +} + +function isEntry() { + return document.querySelector("section.entry") !== null; +} + +function isListView() { + return document.querySelector(".items") !== null; +} + +function flipElementState(element) { + let labelElement = document.createElement("span"); + labelElement.className = "link-flipped-state"; + labelElement.appendChild(document.createTextNode(element.dataset.labelNewState)); + + element.parentNode.appendChild(labelElement); + element.parentNode.removeChild(element); +} |