1
0
Fork 0
mirror of https://github.com/miniflux/v2.git synced 2025-09-15 18:57:04 +00:00

Refactoring of Javascript code

This commit is contained in:
Frédéric Guillot 2019-07-17 20:27:39 -07:00
parent 34421dcd49
commit 2b6e17c1ef
15 changed files with 573 additions and 593 deletions

464
ui/static/js/app.js Normal file
View file

@ -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);
}

View file

@ -1,88 +1,67 @@
document.addEventListener("DOMContentLoaded", function() {
FormHandler.handleSubmitButtons();
document.addEventListener("DOMContentLoaded", function () {
handleSubmitButtons();
let navHandler = new NavHandler();
if (! document.querySelector("body[data-disable-keyboard-shortcuts=true]")) {
if (!document.querySelector("body[data-disable-keyboard-shortcuts=true]")) {
let keyboardHandler = new KeyboardHandler();
keyboardHandler.on("g u", () => navHandler.goToPage("unread"));
keyboardHandler.on("g b", () => navHandler.goToPage("starred"));
keyboardHandler.on("g h", () => navHandler.goToPage("history"));
keyboardHandler.on("g f", () => navHandler.goToFeedOrFeeds());
keyboardHandler.on("g c", () => navHandler.goToPage("categories"));
keyboardHandler.on("g s", () => navHandler.goToPage("settings"));
keyboardHandler.on("ArrowLeft", () => navHandler.goToPrevious());
keyboardHandler.on("ArrowRight", () => navHandler.goToNext());
keyboardHandler.on("k", () => navHandler.goToPrevious());
keyboardHandler.on("p", () => navHandler.goToPrevious());
keyboardHandler.on("j", () => navHandler.goToNext());
keyboardHandler.on("n", () => navHandler.goToNext());
keyboardHandler.on("h", () => navHandler.goToPage("previous"));
keyboardHandler.on("l", () => navHandler.goToPage("next"));
keyboardHandler.on("o", () => navHandler.openSelectedItem());
keyboardHandler.on("v", () => navHandler.openOriginalLink());
keyboardHandler.on("m", () => navHandler.toggleEntryStatus());
keyboardHandler.on("A", () => {
let element = document.querySelector("a[data-mark-page-as-read]");
navHandler.markPageAsRead(element.dataset.showOnlyUnread || false);
});
keyboardHandler.on("s", () => navHandler.saveEntry());
keyboardHandler.on("d", () => navHandler.fetchOriginalContent());
keyboardHandler.on("f", () => navHandler.toggleBookmark());
keyboardHandler.on("?", () => navHandler.showKeyboardShortcuts());
keyboardHandler.on("#", () => navHandler.unsubscribeFromFeed());
keyboardHandler.on("/", (e) => navHandler.setFocusToSearchInput(e));
keyboardHandler.on("g u", () => goToPage("unread"));
keyboardHandler.on("g b", () => goToPage("starred"));
keyboardHandler.on("g h", () => goToPage("history"));
keyboardHandler.on("g f", () => goToFeedOrFeeds());
keyboardHandler.on("g c", () => goToPage("categories"));
keyboardHandler.on("g s", () => goToPage("settings"));
keyboardHandler.on("ArrowLeft", () => goToPrevious());
keyboardHandler.on("ArrowRight", () => goToNext());
keyboardHandler.on("k", () => goToPrevious());
keyboardHandler.on("p", () => goToPrevious());
keyboardHandler.on("j", () => goToNext());
keyboardHandler.on("n", () => goToNext());
keyboardHandler.on("h", () => goToPage("previous"));
keyboardHandler.on("l", () => goToPage("next"));
keyboardHandler.on("o", () => openSelectedItem());
keyboardHandler.on("v", () => openOriginalLink());
keyboardHandler.on("m", () => handleEntryStatus());
keyboardHandler.on("A", () => markPageAsRead());
keyboardHandler.on("s", () => handleSaveEntry());
keyboardHandler.on("d", () => handleFetchOriginalContent());
keyboardHandler.on("f", () => handleBookmark());
keyboardHandler.on("?", () => showKeyboardShortcuts());
keyboardHandler.on("#", () => unsubscribeFromFeed());
keyboardHandler.on("/", (e) => setFocusToSearchInput(e));
keyboardHandler.on("Escape", () => ModalHandler.close());
keyboardHandler.listen();
}
let touchHandler = new TouchHandler(navHandler);
let touchHandler = new TouchHandler();
touchHandler.listen();
let mouseHandler = new MouseHandler();
mouseHandler.onClick("a[data-save-entry]", (event) => {
EntryHandler.saveEntry(event.target);
});
onClick("a[data-save-entry]", () => handleSaveEntry());
onClick("a[data-toggle-bookmark]", () => handleBookmark());
onClick("a[data-fetch-content-entry]", () => handleFetchOriginalContent());
onClick("a[data-action=search]", (event) => setFocusToSearchInput(event));
onClick("a[data-on-click=markPageAsRead]", () => markPageAsRead());
mouseHandler.onClick("a[data-toggle-bookmark]", (event) => {
EntryHandler.toggleBookmark(event.target);
});
mouseHandler.onClick("a[data-toggle-status]", (event) => {
onClick("a[data-toggle-status]", (event) => {
let currentItem = DomHelper.findParent(event.target, "entry");
if (! currentItem) {
if (!currentItem) {
currentItem = DomHelper.findParent(event.target, "item");
}
if (currentItem) {
EntryHandler.toggleEntryStatus(currentItem);
toggleEntryStatus(currentItem);
}
});
mouseHandler.onClick("a[data-fetch-content-entry]", (event) => {
EntryHandler.fetchOriginalContent(event.target);
});
mouseHandler.onClick("a[data-on-click=markPageAsRead]", (event) => {
navHandler.markPageAsRead(event.target.dataset.showOnlyUnread || false);
});
mouseHandler.onClick("a[data-confirm]", (event) => {
onClick("a[data-confirm]", (event) => {
(new ConfirmHandler()).handle(event);
});
mouseHandler.onClick("a[data-action=search]", (event) => {
navHandler.setFocusToSearchInput(event);
});
mouseHandler.onClick("a[data-link-state=flip]", (event) => {
LinkStateHandler.flip(event.target);
onClick("a[data-link-state=flip]", (event) => {
flipElementState(event.target);
}, true);
if (document.documentElement.clientWidth < 600) {
let menuHandler = new MenuHandler();
mouseHandler.onClick(".logo", () => menuHandler.toggleMainMenu());
mouseHandler.onClick(".header nav li", (event) => menuHandler.clickMenuListItem(event));
onClick(".logo", () => toggleMainMenu());
onClick(".header nav li", (event) => onClickMainMenuListItem(event));
}
if ("serviceWorker" in navigator) {

View file

@ -33,7 +33,7 @@ class ConfirmHandler {
containerElement.appendChild(loadingElement);
if (linkElement.dataset.markPageAsRead) {
(new NavHandler()).markPageAsRead(event.target.dataset.showOnlyUnread || false);
markPageAsRead(event.target.dataset.showOnlyUnread || false);
} else {
this.executeRequest(linkElement.dataset.url, linkElement.dataset.redirectUrl);
}

View file

@ -1,100 +0,0 @@
class EntryHandler {
static 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") {
UnreadCounterHandler.decrement(1);
} else {
UnreadCounterHandler.increment(1);
}
}
static 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";
this.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);
}
}
static toggleBookmark(element) {
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();
}
static 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);
this.updateEntriesStatus([entryID], "read");
}
}
static saveEntry(element) {
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();
}
static fetchOriginalContent(element) {
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();
}
}

View file

@ -1,7 +0,0 @@
class FeedHandler {
static unsubscribe(feedUrl, callback) {
let request = new RequestBuilder(feedUrl);
request.withCallback(callback);
request.execute();
}
}

View file

@ -1,15 +0,0 @@
class FormHandler {
static 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;
}
};
});
}
}

View file

@ -1,10 +0,0 @@
class LinkStateHandler {
static flip(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);
}
}

View file

@ -1,27 +0,0 @@
class MenuHandler {
clickMenuListItem(event) {
let element = event.target;
if (element.tagName === "A") {
window.location.href = element.getAttribute("href");
} else {
window.location.href = element.querySelector("a").getAttribute("href");
}
}
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";
}
}
}

View file

@ -1,14 +0,0 @@
class MouseHandler {
onClick(selector, callback, noPreventDefault) {
let elements = document.querySelectorAll(selector);
elements.forEach((element) => {
element.onclick = (event) => {
if (! noPreventDefault) {
event.preventDefault();
}
callback(event);
};
});
}
}

View file

@ -1,253 +0,0 @@
class NavHandler {
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 = "";
}
}
showKeyboardShortcuts() {
let template = document.getElementById("keyboard-shortcuts");
if (template !== null) {
ModalHandler.open(template.content);
}
}
markPageAsRead(showOnlyUnread) {
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) {
EntryHandler.updateEntriesStatus(entryIDs, "read", () => {
// This callback make sure the Ajax request reach the server before we reload the page.
if (showOnlyUnread) {
window.location.reload();
} else {
this.goToPage("next", true);
}
});
}
}
saveEntry() {
if (this.isListView()) {
let currentItem = document.querySelector(".current-item");
if (currentItem !== null) {
let saveLink = currentItem.querySelector("a[data-save-entry]");
if (saveLink) {
EntryHandler.saveEntry(saveLink);
}
}
} else {
let saveLink = document.querySelector("a[data-save-entry]");
if (saveLink) {
EntryHandler.saveEntry(saveLink);
}
}
}
fetchOriginalContent() {
if (! this.isListView()){
let link = document.querySelector("a[data-fetch-content-entry]");
if (link) {
EntryHandler.fetchOriginalContent(link);
}
}
}
toggleEntryStatus() {
if (! this.isListView()) {
EntryHandler.toggleEntryStatus(document.querySelector(".entry"));
return;
}
let currentItem = document.querySelector(".current-item");
if (currentItem !== null) {
// The order is important here,
// On the unread page, the read item will be hidden.
this.goToNextListItem();
EntryHandler.toggleEntryStatus(currentItem);
}
}
toggleBookmark() {
if (! this.isListView()) {
this.toggleBookmarkLink(document.querySelector(".entry"));
return;
}
let currentItem = document.querySelector(".current-item");
if (currentItem !== null) {
this.toggleBookmarkLink(currentItem);
}
}
toggleBookmarkLink(parent) {
let bookmarkLink = parent.querySelector("a[data-toggle-bookmark]");
if (bookmarkLink) {
EntryHandler.toggleBookmark(bookmarkLink);
}
}
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");
this.goToNextListItem();
EntryHandler.markEntryAsRead(currentItem);
}
}
openSelectedItem() {
let currentItemLink = document.querySelector(".current-item .item-title a");
if (currentItemLink !== null) {
window.location.href = currentItemLink.getAttribute("href");
}
}
unsubscribeFromFeed() {
let unsubscribeLinks = document.querySelectorAll("[data-action=remove-feed]");
if (unsubscribeLinks.length === 1) {
let unsubscribeLink = unsubscribeLinks[0];
FeedHandler.unsubscribe(unsubscribeLink.dataset.url, () => {
if (unsubscribeLink.dataset.redirectUrl) {
window.location.href = unsubscribeLink.dataset.redirectUrl;
} else {
window.location.reload();
}
});
}
}
/**
* @param {string} page Page to redirect to.
* @param {boolean} fallbackSelf Refresh actual page if the page is not found.
*/
goToPage(page, fallbackSelf) {
let element = document.querySelector("a[data-page=" + page + "]");
if (element) {
document.location.href = element.href;
} else if (fallbackSelf) {
window.location.reload();
}
}
goToPrevious() {
if (this.isListView()) {
this.goToPreviousListItem();
} else {
this.goToPage("previous");
}
}
goToNext() {
if (this.isListView()) {
this.goToNextListItem();
} else {
this.goToPage("next");
}
}
goToFeedOrFeeds() {
if (this.isEntry()) {
let feedAnchor = document.querySelector("span.entry-website a");
if (feedAnchor !== null) {
window.location.href = feedAnchor.href;
}
} else {
this.goToPage('feeds');
}
}
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;
}
}
}
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;
}
}
}
isEntry() {
return document.querySelector("section.entry") !== null;
}
isListView() {
return document.querySelector(".items") !== null;
}
}

View file

@ -1,13 +1,12 @@
class TouchHandler {
constructor(navHandler) {
this.navHandler = navHandler;
constructor() {
this.reset();
}
reset() {
this.touch = {
start: {x: -1, y: -1},
move: {x: -1, y: -1},
start: { x: -1, y: -1 },
move: { x: -1, y: -1 },
element: null
};
}
@ -75,8 +74,9 @@ class TouchHandler {
let distance = Math.abs(this.calculateDistance());
if (distance > 75) {
EntryHandler.toggleEntryStatus(this.touch.element);
toggleEntryStatus(this.touch.element);
}
this.touch.element.style.opacity = 1;
this.touch.element.style.transform = "none";
}
@ -101,7 +101,7 @@ class TouchHandler {
previous: null,
next: null
};
const detectDoubleTap = (doubleTapTimer, event) => {
const timer = doubleTapTimers[doubleTapTimer];
if (timer === null) {
@ -110,17 +110,18 @@ class TouchHandler {
}, 200);
} else {
event.preventDefault();
this.navHandler.goToPage(doubleTapTimer);
goToPage(doubleTapTimer);
}
};
entryContentElement.addEventListener("touchend", (e) => {
if (e.changedTouches[0].clientX >= (entryContentElement.offsetWidth / 2)) {
detectDoubleTap("next", e);
} else {
detectDoubleTap("previous", e);
}
}, hasPassiveOption ? { passive: false } : false);
if (e.changedTouches[0].clientX >= (entryContentElement.offsetWidth / 2)) {
detectDoubleTap("next", e);
} else {
detectDoubleTap("previous", e);
}
}, hasPassiveOption ? { passive: false } : false);
entryContentElement.addEventListener("touchmove", (e) => {
Object.keys(doubleTapTimers).forEach(timer => doubleTapTimers[timer] = null);
});

View file

@ -1,33 +0,0 @@
class UnreadCounterHandler {
static decrement(n) {
this.updateValue((current) => {
return current - n;
});
}
static increment(n) {
this.updateValue((current) => {
return current + n;
});
}
static updateValue(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;
}
);
}
}
}