From 2b6e17c1ef7f54f822e37991eaf7a309013182e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Guillot?= Date: Wed, 17 Jul 2019 20:27:39 -0700 Subject: [PATCH] Refactoring of Javascript code --- generate.go | 9 +- go.sum | 1 + ui/static/js.go | 99 +++--- ui/static/js/app.js | 464 +++++++++++++++++++++++++ ui/static/js/bootstrap.js | 103 +++--- ui/static/js/confirm_handler.js | 2 +- ui/static/js/entry_handler.js | 100 ------ ui/static/js/feed_handler.js | 7 - ui/static/js/form_handler.js | 15 - ui/static/js/link_state_handler.js | 10 - ui/static/js/menu_handler.js | 27 -- ui/static/js/mouse_handler.js | 14 - ui/static/js/nav_handler.js | 253 -------------- ui/static/js/touch_handler.js | 29 +- ui/static/js/unread_counter_handler.js | 33 -- 15 files changed, 573 insertions(+), 593 deletions(-) create mode 100644 ui/static/js/app.js delete mode 100644 ui/static/js/entry_handler.js delete mode 100644 ui/static/js/feed_handler.js delete mode 100644 ui/static/js/form_handler.js delete mode 100644 ui/static/js/link_state_handler.js delete mode 100644 ui/static/js/menu_handler.js delete mode 100644 ui/static/js/mouse_handler.js delete mode 100644 ui/static/js/nav_handler.js delete mode 100644 ui/static/js/unread_counter_handler.js diff --git a/generate.go b/generate.go index 5d325ffa..58d6e8ff 100644 --- a/generate.go +++ b/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{ diff --git a/go.sum b/go.sum index b9506e5d..d4012066 100644 --- a/go.sum +++ b/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= diff --git a/ui/static/js.go b/ui/static/js.go index 8e0e7e73..a0756af2 100644 --- a/ui/static/js.go +++ b/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=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;inavHandler.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", } diff --git a/ui/static/js/app.js b/ui/static/js/app.js new file mode 100644 index 00000000..93fd6613 --- /dev/null +++ b/ui/static/js/app.js @@ -0,0 +1,464 @@ +// OnClick attaches a listener to the elements that match the selector. +function onClick(selector, callback, noPreventDefault) { + let elements = document.querySelectorAll(selector); + elements.forEach((element) => { + element.onclick = (event) => { + if (!noPreventDefault) { + event.preventDefault(); + } + + callback(event); + }; + }); +} + +// Show and hide the main menu on mobile devices. +function toggleMainMenu() { + let menu = document.querySelector(".header nav ul"); + if (DomHelper.isVisible(menu)) { + menu.style.display = "none"; + } else { + menu.style.display = "block"; + } + + let searchElement = document.querySelector(".header .search"); + if (DomHelper.isVisible(searchElement)) { + searchElement.style.display = "none"; + } else { + searchElement.style.display = "block"; + } +} + +// Handle click events for the main menu (
  • and ). +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); +} diff --git a/ui/static/js/bootstrap.js b/ui/static/js/bootstrap.js index 4502c510..d07da563 100644 --- a/ui/static/js/bootstrap.js +++ b/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) { diff --git a/ui/static/js/confirm_handler.js b/ui/static/js/confirm_handler.js index 171654f6..74ebb2d4 100644 --- a/ui/static/js/confirm_handler.js +++ b/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); } diff --git a/ui/static/js/entry_handler.js b/ui/static/js/entry_handler.js deleted file mode 100644 index 6392aefe..00000000 --- a/ui/static/js/entry_handler.js +++ /dev/null @@ -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(); - } -} diff --git a/ui/static/js/feed_handler.js b/ui/static/js/feed_handler.js deleted file mode 100644 index 1d4190f5..00000000 --- a/ui/static/js/feed_handler.js +++ /dev/null @@ -1,7 +0,0 @@ -class FeedHandler { - static unsubscribe(feedUrl, callback) { - let request = new RequestBuilder(feedUrl); - request.withCallback(callback); - request.execute(); - } -} diff --git a/ui/static/js/form_handler.js b/ui/static/js/form_handler.js deleted file mode 100644 index de417db8..00000000 --- a/ui/static/js/form_handler.js +++ /dev/null @@ -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; - } - }; - }); - } -} diff --git a/ui/static/js/link_state_handler.js b/ui/static/js/link_state_handler.js deleted file mode 100644 index eec6df11..00000000 --- a/ui/static/js/link_state_handler.js +++ /dev/null @@ -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); - } -} diff --git a/ui/static/js/menu_handler.js b/ui/static/js/menu_handler.js deleted file mode 100644 index 0907a912..00000000 --- a/ui/static/js/menu_handler.js +++ /dev/null @@ -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"; - } - } -} diff --git a/ui/static/js/mouse_handler.js b/ui/static/js/mouse_handler.js deleted file mode 100644 index 8b42a562..00000000 --- a/ui/static/js/mouse_handler.js +++ /dev/null @@ -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); - }; - }); - } -} \ No newline at end of file diff --git a/ui/static/js/nav_handler.js b/ui/static/js/nav_handler.js deleted file mode 100644 index 9f1f8613..00000000 --- a/ui/static/js/nav_handler.js +++ /dev/null @@ -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; - } -} diff --git a/ui/static/js/touch_handler.js b/ui/static/js/touch_handler.js index 9e4b7bc5..4f6d7aec 100644 --- a/ui/static/js/touch_handler.js +++ b/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); }); diff --git a/ui/static/js/unread_counter_handler.js b/ui/static/js/unread_counter_handler.js deleted file mode 100644 index 87a1aaaf..00000000 --- a/ui/static/js/unread_counter_handler.js +++ /dev/null @@ -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; - } - ); - } - } -}