Преглед изворни кода

Refactoring of Javascript code

Frédéric Guillot пре 6 година
родитељ
комит
2b6e17c1ef

+ 1 - 8
generate.go

@@ -189,17 +189,10 @@ func main() {
 			"ui/static/js/dom_helper.js",
 			"ui/static/js/touch_handler.js",
 			"ui/static/js/keyboard_handler.js",
-			"ui/static/js/mouse_handler.js",
-			"ui/static/js/form_handler.js",
 			"ui/static/js/request_builder.js",
-			"ui/static/js/unread_counter_handler.js",
-			"ui/static/js/entry_handler.js",
-			"ui/static/js/feed_handler.js",
 			"ui/static/js/confirm_handler.js",
-			"ui/static/js/menu_handler.js",
 			"ui/static/js/modal_handler.js",
-			"ui/static/js/nav_handler.js",
-			"ui/static/js/link_state_handler.js",
+			"ui/static/js/app.js",
 			"ui/static/js/bootstrap.js",
 		},
 		"sw": []string{

+ 1 - 0
go.sum

@@ -21,6 +21,7 @@ github.com/tdewolff/minify/v2 v2.3.8 h1:Eyv23Tu+Rb5Q2vyxmvzUgtHetgneqAsaGv3950s1
 github.com/tdewolff/minify/v2 v2.3.8/go.mod h1:DD1stRlSx6JsHfl1+E/HVMQeXiec9rD1UQ0epklIZLc=
 github.com/tdewolff/parse/v2 v2.3.5 h1:/uS8JfhwVJsNkEh769GM5ENv6L9LOh2Z9uW3tCdlhs0=
 github.com/tdewolff/parse/v2 v2.3.5/go.mod h1:HansaqmN4I/U7L6/tUp0NcwT2tFO0F4EAWYGSDzkYNk=
+github.com/tdewolff/test v1.0.0 h1:jOwzqCXr5ePXEPGJaq2ivoR6HOCi+D5TPfpoyg8yvmU=
 github.com/tdewolff/test v1.0.0/go.mod h1:DiQUlutnqlEvdvhSn2LPGy4TFwRauAaYDsL+683RNX4=
 golang.org/x/crypto v0.0.0-20181203042331-505ab145d0a9 h1:mKdxBk7AujPs8kU4m80U72y/zjbZ3UcXC7dClwKbUI0=
 golang.org/x/crypto v0.0.0-20181203042331-505ab145d0a9/go.mod h1:6SG95UA2DQfeDnfUPMdvaQW0Q7yPrPDi9nlGo2tz2b4=

+ 50 - 49
ui/static/js.go

@@ -12,7 +12,7 @@ static findParent(element,selector){for(;element&&element!==document;element=ele
 return null;}
 static hasPassiveEventListenerOption(){var passiveSupported=false;try{var options=Object.defineProperty({},"passive",{get:function(){passiveSupported=true;}});window.addEventListener("test",options,options);window.removeEventListener("test",options,options);}catch(err){passiveSupported=false;}
 return passiveSupported;}}
-class TouchHandler{constructor(navHandler){this.navHandler=navHandler;this.reset();}
+class TouchHandler{constructor(){this.reset();}
 reset(){this.touch={start:{x:-1,y:-1},move:{x:-1,y:-1},element:null};}
 calculateDistance(){if(this.touch.start.x>=-1&&this.touch.move.x>=-1){let horizontalDistance=Math.abs(this.touch.move.x-this.touch.start.x);let verticalDistance=Math.abs(this.touch.move.y-this.touch.start.y);if(horizontalDistance>30&&verticalDistance<70){return this.touch.move.x-this.touch.start.x;}}
 return 0;}
@@ -23,10 +23,10 @@ this.reset();this.touch.start.x=event.touches[0].clientX;this.touch.start.y=even
 onTouchMove(event){if(event.touches===undefined||event.touches.length!==1||this.element===null){return;}
 this.touch.move.x=event.touches[0].clientX;this.touch.move.y=event.touches[0].clientY;let distance=this.calculateDistance();let absDistance=Math.abs(distance);if(absDistance>0){let opacity=1-(absDistance>75?0.9:absDistance/75*0.9);let tx=distance>75?75:(distance<-75?-75:distance);this.touch.element.style.opacity=opacity;this.touch.element.style.transform="translateX("+tx+"px)";event.preventDefault();}}
 onTouchEnd(event){if(event.touches===undefined){return;}
-if(this.touch.element!==null){let distance=Math.abs(this.calculateDistance());if(distance>75){EntryHandler.toggleEntryStatus(this.touch.element);}
+if(this.touch.element!==null){let distance=Math.abs(this.calculateDistance());if(distance>75){toggleEntryStatus(this.touch.element);}
 this.touch.element.style.opacity=1;this.touch.element.style.transform="none";}
 this.reset();}
-listen(){let elements=document.querySelectorAll(".touch-item");let hasPassiveOption=DomHelper.hasPassiveEventListenerOption();elements.forEach((element)=>{element.addEventListener("touchstart",(e)=>this.onTouchStart(e),hasPassiveOption?{passive:true}:false);element.addEventListener("touchmove",(e)=>this.onTouchMove(e),hasPassiveOption?{passive:false}:false);element.addEventListener("touchend",(e)=>this.onTouchEnd(e),hasPassiveOption?{passive:true}:false);element.addEventListener("touchcancel",()=>this.reset(),hasPassiveOption?{passive:true}:false);});let entryContentElement=document.querySelector(".entry-content");if(entryContentElement){let doubleTapTimers={previous:null,next:null};const detectDoubleTap=(doubleTapTimer,event)=>{const timer=doubleTapTimers[doubleTapTimer];if(timer===null){doubleTapTimers[doubleTapTimer]=setTimeout(()=>{doubleTapTimers[doubleTapTimer]=null;},200);}else{event.preventDefault();this.navHandler.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);entryContentElement.addEventListener("touchmove",(e)=>{Object.keys(doubleTapTimers).forEach(timer=>doubleTapTimers[timer]=null);});}}}
+listen(){let elements=document.querySelectorAll(".touch-item");let hasPassiveOption=DomHelper.hasPassiveEventListenerOption();elements.forEach((element)=>{element.addEventListener("touchstart",(e)=>this.onTouchStart(e),hasPassiveOption?{passive:true}:false);element.addEventListener("touchmove",(e)=>this.onTouchMove(e),hasPassiveOption?{passive:false}:false);element.addEventListener("touchend",(e)=>this.onTouchEnd(e),hasPassiveOption?{passive:true}:false);element.addEventListener("touchcancel",()=>this.reset(),hasPassiveOption?{passive:true}:false);});let entryContentElement=document.querySelector(".entry-content");if(entryContentElement){let doubleTapTimers={previous:null,next:null};const detectDoubleTap=(doubleTapTimer,event)=>{const timer=doubleTapTimers[doubleTapTimer];if(timer===null){doubleTapTimers[doubleTapTimer]=setTimeout(()=>{doubleTapTimers[doubleTapTimer]=null;},200);}else{event.preventDefault();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);entryContentElement.addEventListener("touchmove",(e)=>{Object.keys(doubleTapTimers).forEach(timer=>doubleTapTimers[timer]=null);});}}}
 class KeyboardHandler{constructor(){this.queue=[];this.shortcuts={};}
 on(combination,callback){this.shortcuts[combination]=callback;}
 listen(){document.onkeydown=(event)=>{if(this.isEventIgnored(event)||this.isModifierKeyDown(event)){return;}
@@ -37,75 +37,76 @@ isEventIgnored(event){return event.target.tagName==="INPUT"||event.target.tagNam
 isModifierKeyDown(event){return event.getModifierState("Control")||event.getModifierState("Alt")||event.getModifierState("Meta");}
 getKey(event){const mapping={'Esc':'Escape','Up':'ArrowUp','Down':'ArrowDown','Left':'ArrowLeft','Right':'ArrowRight'};for(let key in mapping){if(mapping.hasOwnProperty(key)&&key===event.key){return mapping[key];}}
 return event.key;}}
-class MouseHandler{onClick(selector,callback,noPreventDefault){let elements=document.querySelectorAll(selector);elements.forEach((element)=>{element.onclick=(event)=>{if(!noPreventDefault){event.preventDefault();}
-callback(event);};});}}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;}};});}}
 class RequestBuilder{constructor(url){this.callback=null;this.url=url;this.options={method:"POST",cache:"no-cache",credentials:"include",body:null,headers:new Headers({"Content-Type":"application/json","X-Csrf-Token":this.getCsrfToken()})};}
 withBody(body){this.options.body=JSON.stringify(body);return this;}
 withCallback(callback){this.callback=callback;return this;}
 getCsrfToken(){let element=document.querySelector("meta[name=X-CSRF-Token]");if(element!==null){return element.getAttribute("value");}
 return "";}
 execute(){fetch(new Request(this.url,this.options)).then((response)=>{if(this.callback){this.callback(response);}});}}
-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;});}}}
-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();}}
-class FeedHandler{static unsubscribe(feedUrl,callback){let request=new RequestBuilder(feedUrl);request.withCallback(callback);request.execute();}}
 class ConfirmHandler{executeRequest(url,redirectURL){let request=new RequestBuilder(url);request.withCallback(()=>{if(redirectURL){window.location.href=redirectURL;}else{window.location.reload();}});request.execute();}
-handle(event){let questionElement=document.createElement("span");let linkElement=event.target;let containerElement=linkElement.parentNode;linkElement.style.display="none";let yesElement=document.createElement("a");yesElement.href="#";yesElement.appendChild(document.createTextNode(linkElement.dataset.labelYes));yesElement.onclick=(event)=>{event.preventDefault();let loadingElement=document.createElement("span");loadingElement.className="loading";loadingElement.appendChild(document.createTextNode(linkElement.dataset.labelLoading));questionElement.remove();containerElement.appendChild(loadingElement);if(linkElement.dataset.markPageAsRead){(new NavHandler()).markPageAsRead(event.target.dataset.showOnlyUnread||false);}else{this.executeRequest(linkElement.dataset.url,linkElement.dataset.redirectUrl);}};let noElement=document.createElement("a");noElement.href="#";noElement.appendChild(document.createTextNode(linkElement.dataset.labelNo));noElement.onclick=(event)=>{event.preventDefault();linkElement.style.display="inline";questionElement.remove();};questionElement.className="confirm";questionElement.appendChild(document.createTextNode(linkElement.dataset.labelQuestion+" "));questionElement.appendChild(yesElement);questionElement.appendChild(document.createTextNode(", "));questionElement.appendChild(noElement);containerElement.appendChild(questionElement);}}
-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";}}}
+handle(event){let questionElement=document.createElement("span");let linkElement=event.target;let containerElement=linkElement.parentNode;linkElement.style.display="none";let yesElement=document.createElement("a");yesElement.href="#";yesElement.appendChild(document.createTextNode(linkElement.dataset.labelYes));yesElement.onclick=(event)=>{event.preventDefault();let loadingElement=document.createElement("span");loadingElement.className="loading";loadingElement.appendChild(document.createTextNode(linkElement.dataset.labelLoading));questionElement.remove();containerElement.appendChild(loadingElement);if(linkElement.dataset.markPageAsRead){markPageAsRead(event.target.dataset.showOnlyUnread||false);}else{this.executeRequest(linkElement.dataset.url,linkElement.dataset.redirectUrl);}};let noElement=document.createElement("a");noElement.href="#";noElement.appendChild(document.createTextNode(linkElement.dataset.labelNo));noElement.onclick=(event)=>{event.preventDefault();linkElement.style.display="inline";questionElement.remove();};questionElement.className="confirm";questionElement.appendChild(document.createTextNode(linkElement.dataset.labelQuestion+" "));questionElement.appendChild(yesElement);questionElement.appendChild(document.createTextNode(", "));questionElement.appendChild(noElement);containerElement.appendChild(questionElement);}}
 class ModalHandler{static exists(){return document.getElementById("modal-container")!==null;}
 static open(fragment){if(ModalHandler.exists()){return;}
 let container=document.createElement("div");container.id="modal-container";container.appendChild(document.importNode(fragment,true));document.body.appendChild(container);let closeButton=document.querySelector("a.btn-close-modal");if(closeButton!==null){closeButton.onclick=(event)=>{event.preventDefault();ModalHandler.close();};}}
 static close(){let container=document.getElementById("modal-container");if(container!==null){container.parentNode.removeChild(container);}}}
-class NavHandler{setFocusToSearchInput(event){event.preventDefault();event.stopPropagation();let toggleSwitchElement=document.querySelector(".search-toggle-switch");if(toggleSwitchElement){toggleSwitchElement.style.display="none";}
+function onClick(selector,callback,noPreventDefault){let elements=document.querySelectorAll(selector);elements.forEach((element)=>{element.onclick=(event)=>{if(!noPreventDefault){event.preventDefault();}
+callback(event);};});}
+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";}}
+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");}}
+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;}};});}
+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="";}}
-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",()=>{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){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"));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();}});}}
-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;}
+function showKeyboardShortcuts(){let template=document.getElementById("keyboard-shortcuts");if(template!==null){ModalHandler.open(template.content);}}
+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",()=>{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);}});}}
+function handleEntryStatus(){if(isListView()){let currentItem=document.querySelector(".current-item");if(currentItem!==null){goToNextListItem();toggleEntryStatus(currentItem);}}else{toggleEntryStatus(document.querySelector(".entry"));}}
+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);}}
+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");}}
+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);}}
+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]"));}}
+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();}
+function handleBookmark(){if(isListView()){let currentItem=document.querySelector(".current-item");if(currentItem!==null){toggleBookmark(currentItem);}}else{toggleBookmark(document.querySelector(".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();}
+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"));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();}}
+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;}}}
-goToNextListItem(){let currentItem=document.querySelector(".current-item");let items=DomHelper.getVisibleElements(".items .item");if(items.length===0){return;}
+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;}}}
-isEntry(){return document.querySelector("section.entry")!==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);}}
-document.addEventListener("DOMContentLoaded",function(){FormHandler.handleSubmitButtons();let navHandler=new NavHandler();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("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]",(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));}
+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);}
+document.addEventListener("DOMContentLoaded",function(){handleSubmitButtons();if(!document.querySelector("body[data-disable-keyboard-shortcuts=true]")){let keyboardHandler=new KeyboardHandler();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();touchHandler.listen();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());onClick("a[data-toggle-status]",(event)=>{let currentItem=DomHelper.findParent(event.target,"entry");if(!currentItem){currentItem=DomHelper.findParent(event.target,"item");}
+if(currentItem){toggleEntryStatus(currentItem);}});onClick("a[data-confirm]",(event)=>{(new ConfirmHandler()).handle(event);});onClick("a[data-link-state=flip]",(event)=>{flipElementState(event.target);},true);if(document.documentElement.clientWidth<600){onClick(".logo",()=>toggleMainMenu());onClick(".header nav li",(event)=>onClickMainMenuListItem(event));}
 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;});});}));}});`,
 }
 
 var JavascriptsChecksums = map[string]string{
-	"app": "adf55d14f11a472a4224a6d983310964b9fe4217bd60c87adeb1779e96729243",
+	"app": "fe24291c59706b377062df11145b8aed5d48ce06afcce78a2c99ee879632cc57",
 	"sw":  "55fffa223919cc18572788fb9c62fccf92166c0eb5d3a1d6f91c31f24d020be9",
 }

+ 464 - 0
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);
+}

+ 41 - 62
ui/static/js/bootstrap.js

@@ -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) {

+ 1 - 1
ui/static/js/confirm_handler.js

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

+ 0 - 100
ui/static/js/entry_handler.js

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

+ 0 - 7
ui/static/js/feed_handler.js

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

+ 0 - 15
ui/static/js/form_handler.js

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

+ 0 - 10
ui/static/js/link_state_handler.js

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

+ 0 - 27
ui/static/js/menu_handler.js

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

+ 0 - 14
ui/static/js/mouse_handler.js

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

+ 0 - 253
ui/static/js/nav_handler.js

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

+ 15 - 14
ui/static/js/touch_handler.js

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

+ 0 - 33
ui/static/js/unread_counter_handler.js

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