Improve page reload when showing unread/all entries

- Show only unread entries = refresh current page
- Show all entries = go to next page
This commit is contained in:
Diego Agulló 2019-04-05 03:59:04 +02:00 committed by fguillot
parent 8ee1a09dc7
commit a6068aae1d
6 changed files with 51 additions and 18 deletions

View file

@ -6,7 +6,10 @@
<ul> <ul>
{{ if .entries }} {{ if .entries }}
<li> <li>
<a href="#" data-on-click="markPageAsRead">{{ t "menu.mark_page_as_read" }}</a> <a href="#" data-on-click="markPageAsRead"
data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">
{{ t "menu.mark_page_as_read" }}
</a>
</li> </li>
{{ end }} {{ end }}
{{ if .showOnlyUnreadEntries }} {{ if .showOnlyUnreadEntries }}
@ -44,7 +47,10 @@
{{ if .entries }} {{ if .entries }}
<ul> <ul>
<li> <li>
<a href="#" data-on-click="markPageAsRead">{{ t "menu.mark_page_as_read" }}</a> <a href="#" data-on-click="markPageAsRead"
data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">
{{ t "menu.mark_page_as_read" }}
</a>
</li> </li>
</ul> </ul>
{{ end }} {{ end }}

View file

@ -6,7 +6,10 @@
<ul> <ul>
{{ if .entries }} {{ if .entries }}
<li> <li>
<a href="#" data-on-click="markPageAsRead">{{ t "menu.mark_page_as_read" }}</a> <a href="#" data-on-click="markPageAsRead"
data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">
{{ t "menu.mark_page_as_read" }}
</a>
</li> </li>
{{ end }} {{ end }}
{{ if .showOnlyUnreadEntries }} {{ if .showOnlyUnreadEntries }}
@ -72,7 +75,10 @@
{{ if .entries }} {{ if .entries }}
<ul> <ul>
<li> <li>
<a href="#" data-on-click="markPageAsRead">{{ t "menu.mark_page_as_read" }}</a> <a href="#" data-on-click="markPageAsRead"
data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">
{{ t "menu.mark_page_as_read" }}
</a>
</li> </li>
</ul> </ul>
{{ end }} {{ end }}

View file

@ -209,7 +209,10 @@ var templateViewsMap = map[string]string{
<ul> <ul>
{{ if .entries }} {{ if .entries }}
<li> <li>
<a href="#" data-on-click="markPageAsRead">{{ t "menu.mark_page_as_read" }}</a> <a href="#" data-on-click="markPageAsRead"
data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">
{{ t "menu.mark_page_as_read" }}
</a>
</li> </li>
{{ end }} {{ end }}
{{ if .showOnlyUnreadEntries }} {{ if .showOnlyUnreadEntries }}
@ -247,7 +250,10 @@ var templateViewsMap = map[string]string{
{{ if .entries }} {{ if .entries }}
<ul> <ul>
<li> <li>
<a href="#" data-on-click="markPageAsRead">{{ t "menu.mark_page_as_read" }}</a> <a href="#" data-on-click="markPageAsRead"
data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">
{{ t "menu.mark_page_as_read" }}
</a>
</li> </li>
</ul> </ul>
{{ end }} {{ end }}
@ -698,7 +704,10 @@ var templateViewsMap = map[string]string{
<ul> <ul>
{{ if .entries }} {{ if .entries }}
<li> <li>
<a href="#" data-on-click="markPageAsRead">{{ t "menu.mark_page_as_read" }}</a> <a href="#" data-on-click="markPageAsRead"
data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">
{{ t "menu.mark_page_as_read" }}
</a>
</li> </li>
{{ end }} {{ end }}
{{ if .showOnlyUnreadEntries }} {{ if .showOnlyUnreadEntries }}
@ -764,7 +773,10 @@ var templateViewsMap = map[string]string{
{{ if .entries }} {{ if .entries }}
<ul> <ul>
<li> <li>
<a href="#" data-on-click="markPageAsRead">{{ t "menu.mark_page_as_read" }}</a> <a href="#" data-on-click="markPageAsRead"
data-show-only-unread="{{ if .showOnlyUnreadEntries }}1{{ end }}">
{{ t "menu.mark_page_as_read" }}
</a>
</li> </li>
</ul> </ul>
{{ end }} {{ end }}
@ -1409,7 +1421,7 @@ var templateViewsMapChecksums = map[string]string{
"add_subscription": "a0f1d2bc02b6adc83dbeae593f74d9b936102cd6dd73302cdbec2137cafdcdd9", "add_subscription": "a0f1d2bc02b6adc83dbeae593f74d9b936102cd6dd73302cdbec2137cafdcdd9",
"bookmark_entries": "609f4b2342152fe495a219a32f17a4528b01807d61f53cee0cbebf728be73c42", "bookmark_entries": "609f4b2342152fe495a219a32f17a4528b01807d61f53cee0cbebf728be73c42",
"categories": "642ee3cddbd825ee6ab5a77caa0d371096b55de0f1bd4ae3055b8c8a70507d8d", "categories": "642ee3cddbd825ee6ab5a77caa0d371096b55de0f1bd4ae3055b8c8a70507d8d",
"category_entries": "07ff798025f8527de5351a89fd5fc51973c1ea6c56710b4f703cbae183fbcbb6", "category_entries": "8ed501d58fd659c6f505d200f5f92dc2d3f8ed8893c7a8076d05ca54c9adb944",
"choose_subscription": "33c04843d7c1b608d034e605e52681822fc6d79bc6b900c04915dd9ebae584e2", "choose_subscription": "33c04843d7c1b608d034e605e52681822fc6d79bc6b900c04915dd9ebae584e2",
"create_category": "6b22b5ce51abf4e225e23a79f81be09a7fb90acb265e93a8faf9446dff74018d", "create_category": "6b22b5ce51abf4e225e23a79f81be09a7fb90acb265e93a8faf9446dff74018d",
"create_user": "1e940be3afefc0a5c6273bbadcddc1e29811e9548e5227ac2adfe697ca5ce081", "create_user": "1e940be3afefc0a5c6273bbadcddc1e29811e9548e5227ac2adfe697ca5ce081",
@ -1417,7 +1429,7 @@ var templateViewsMapChecksums = map[string]string{
"edit_feed": "ab30c31a4385a7b16c54baa78bdcb93a57181ed1c5018ce097d7eb50673bb995", "edit_feed": "ab30c31a4385a7b16c54baa78bdcb93a57181ed1c5018ce097d7eb50673bb995",
"edit_user": "f4f99412ba771cfca2a2a42778b023b413c5494e9a287053ba8cf380c2865c5f", "edit_user": "f4f99412ba771cfca2a2a42778b023b413c5494e9a287053ba8cf380c2865c5f",
"entry": "2ea9fee1ae5513ef1abb5923221c2ef1212e26d3bb651da66069ce8a336cbb7c", "entry": "2ea9fee1ae5513ef1abb5923221c2ef1212e26d3bb651da66069ce8a336cbb7c",
"feed_entries": "f76de17ba8739c94897c3259e72acc82f7b74181125ee78c2873c5e5f20215f3", "feed_entries": "0b97344b4045058b7154d0c01b85e4afd957c23e7cb2d011451f96baf6233dfc",
"feeds": "31acc253c547a6cce5710d72a6f6b3b396162ecd5e5af295b2cf47c1ff55bd06", "feeds": "31acc253c547a6cce5710d72a6f6b3b396162ecd5e5af295b2cf47c1ff55bd06",
"history_entries": "b65ca1d85615caa7c314a33f1cb997aa3477a79e66b9894b2fd387271ad467d2", "history_entries": "b65ca1d85615caa7c314a33f1cb997aa3477a79e66b9894b2fd387271ad467d2",
"import": "8349e47a783bb40d8e9248b4771656e5f006185e11079e1c4680dd52633420ed", "import": "8349e47a783bb40d8e9248b4771656e5f006185e11079e1c4680dd52633420ed",

View file

@ -71,7 +71,7 @@ class NavHandler{setFocusToSearchInput(event){event.preventDefault();event.stopP
let searchFormElement=document.querySelector(".search-form");if(searchFormElement){searchFormElement.style.display="block";} let searchFormElement=document.querySelector(".search-form");if(searchFormElement){searchFormElement.style.display="block";}
let searchInputElement=document.getElementById("search-input");if(searchInputElement){searchInputElement.focus();searchInputElement.value="";}} 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);}} showKeyboardShortcuts(){let template=document.getElementById("keyboard-shortcuts");if(template!==null){ModalHandler.open(template.content);}}
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){EntryHandler.updateEntriesStatus(entryIDs,"read",()=>{this.goToPage("next",true);});}} 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",()=>{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);}}} 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);}}} 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;} toggleEntryStatus(){if(!this.isListView()){EntryHandler.toggleEntryStatus(document.querySelector(".entry"));return;}
@ -98,13 +98,13 @@ break;}}}
isEntry(){return document.querySelector("section.entry")!==null;} isEntry(){return document.querySelector("section.entry")!==null;}
isListView(){return document.querySelector(".items")!==null;}} isListView(){return document.querySelector(".items")!==null;}}
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);}} 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);}}
document.addEventListener("DOMContentLoaded",function(){FormHandler.handleSubmitButtons();let navHandler=new NavHandler();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("j",()=>navHandler.goToPrevious());keyboardHandler.on("p",()=>navHandler.goToPrevious());keyboardHandler.on("k",()=>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",()=>navHandler.markPageAsRead());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("Escape",()=>ModalHandler.close());keyboardHandler.listen();let touchHandler=new TouchHandler(navHandler);touchHandler.listen();let mouseHandler=new MouseHandler();mouseHandler.onClick("a[data-save-entry]",(event)=>{EntryHandler.saveEntry(event.target);});mouseHandler.onClick("a[data-toggle-bookmark]",(event)=>{EntryHandler.toggleBookmark(event.target);});mouseHandler.onClick("a[data-toggle-status]",(event)=>{let currentItem=DomHelper.findParent(event.target,"entry");if(!currentItem){currentItem=DomHelper.findParent(event.target,"item");} document.addEventListener("DOMContentLoaded",function(){FormHandler.handleSubmitButtons();let navHandler=new NavHandler();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("j",()=>navHandler.goToPrevious());keyboardHandler.on("p",()=>navHandler.goToPrevious());keyboardHandler.on("k",()=>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-on-click=markPageAsRead]");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("Escape",()=>ModalHandler.close());keyboardHandler.listen();let touchHandler=new TouchHandler(navHandler);touchHandler.listen();let mouseHandler=new MouseHandler();mouseHandler.onClick("a[data-save-entry]",(event)=>{EntryHandler.saveEntry(event.target);});mouseHandler.onClick("a[data-toggle-bookmark]",(event)=>{EntryHandler.toggleBookmark(event.target);});mouseHandler.onClick("a[data-toggle-status]",(event)=>{let currentItem=DomHelper.findParent(event.target,"entry");if(!currentItem){currentItem=DomHelper.findParent(event.target,"item");}
if(currentItem){EntryHandler.toggleEntryStatus(currentItem);}});mouseHandler.onClick("a[data-fetch-content-entry]",(event)=>{EntryHandler.fetchOriginalContent(event.target);});mouseHandler.onClick("a[data-on-click=markPageAsRead]",()=>navHandler.markPageAsRead());mouseHandler.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);},true);if(document.documentElement.clientWidth<600){let menuHandler=new MenuHandler();mouseHandler.onClick(".logo",()=>menuHandler.toggleMainMenu());mouseHandler.onClick(".header nav li",(event)=>menuHandler.clickMenuListItem(event));} if(currentItem){EntryHandler.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)=>{(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);},true);if(document.documentElement.clientWidth<600){let menuHandler=new MenuHandler();mouseHandler.onClick(".logo",()=>menuHandler.toggleMainMenu());mouseHandler.onClick(".header nav li",(event)=>menuHandler.clickMenuListItem(event));}
if("serviceWorker"in navigator){let scriptElement=document.getElementById("service-worker-script");if(scriptElement){navigator.serviceWorker.register(scriptElement.src);}}});})();`, if("serviceWorker"in navigator){let scriptElement=document.getElementById("service-worker-script");if(scriptElement){navigator.serviceWorker.register(scriptElement.src);}}});})();`,
"sw": `'use strict';self.addEventListener("fetch",(event)=>{if(event.request.url.includes("/feed/icon/")){event.respondWith(caches.open("feed_icons").then((cache)=>{return cache.match(event.request).then((response)=>{return response||fetch(event.request).then((response)=>{cache.put(event.request,response.clone());return response;});});}));}});`, "sw": `'use strict';self.addEventListener("fetch",(event)=>{if(event.request.url.includes("/feed/icon/")){event.respondWith(caches.open("feed_icons").then((cache)=>{return cache.match(event.request).then((response)=>{return response||fetch(event.request).then((response)=>{cache.put(event.request,response.clone());return response;});});}));}});`,
} }
var JavascriptsChecksums = map[string]string{ var JavascriptsChecksums = map[string]string{
"app": "41518498a6efcdb4dc72abdbe0dc44d93abbe244b1f50f2a89dee51e7fbee673", "app": "a3b8e1f0b369fc0d543a67ee714bcdcbe5823bab0978118580e95e6c5cdecd2b",
"sw": "55fffa223919cc18572788fb9c62fccf92166c0eb5d3a1d6f91c31f24d020be9", "sw": "55fffa223919cc18572788fb9c62fccf92166c0eb5d3a1d6f91c31f24d020be9",
} }

View file

@ -20,7 +20,10 @@ document.addEventListener("DOMContentLoaded", function() {
keyboardHandler.on("o", () => navHandler.openSelectedItem()); keyboardHandler.on("o", () => navHandler.openSelectedItem());
keyboardHandler.on("v", () => navHandler.openOriginalLink()); keyboardHandler.on("v", () => navHandler.openOriginalLink());
keyboardHandler.on("m", () => navHandler.toggleEntryStatus()); keyboardHandler.on("m", () => navHandler.toggleEntryStatus());
keyboardHandler.on("A", () => navHandler.markPageAsRead()); keyboardHandler.on("A", () => {
let element = document.querySelector("a[data-on-click=markPageAsRead]");
navHandler.markPageAsRead(element.dataset.showOnlyUnread || false);
});
keyboardHandler.on("s", () => navHandler.saveEntry()); keyboardHandler.on("s", () => navHandler.saveEntry());
keyboardHandler.on("d", () => navHandler.fetchOriginalContent()); keyboardHandler.on("d", () => navHandler.fetchOriginalContent());
keyboardHandler.on("f", () => navHandler.toggleBookmark()); keyboardHandler.on("f", () => navHandler.toggleBookmark());
@ -57,7 +60,9 @@ document.addEventListener("DOMContentLoaded", function() {
EntryHandler.fetchOriginalContent(event.target); EntryHandler.fetchOriginalContent(event.target);
}); });
mouseHandler.onClick("a[data-on-click=markPageAsRead]", () => navHandler.markPageAsRead()); mouseHandler.onClick("a[data-on-click=markPageAsRead]", (event) => {
navHandler.markPageAsRead(event.target.dataset.showOnlyUnread || false);
});
mouseHandler.onClick("a[data-confirm]", (event) => { mouseHandler.onClick("a[data-confirm]", (event) => {
(new ConfirmHandler()).handle(event); (new ConfirmHandler()).handle(event);

View file

@ -27,7 +27,7 @@ class NavHandler {
} }
} }
markPageAsRead() { markPageAsRead(showOnlyUnread) {
let items = DomHelper.getVisibleElements(".items .item"); let items = DomHelper.getVisibleElements(".items .item");
let entryIDs = []; let entryIDs = [];
@ -39,7 +39,11 @@ class NavHandler {
if (entryIDs.length > 0) { if (entryIDs.length > 0) {
EntryHandler.updateEntriesStatus(entryIDs, "read", () => { EntryHandler.updateEntriesStatus(entryIDs, "read", () => {
// This callback make sure the Ajax request reach the server before we reload the page. // 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); this.goToPage("next", true);
}
}); });
} }
} }