Refactor confirmation handler

4 files changed, 61 insertions, 71 deletions

diff --git a/ui/static/js.go b/ui/static/js.go
index a0756af..523468d 100644
--- a/ui/static/js.go
+++ b/ui/static/js.go
@@ -43,8 +43,6 @@ 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 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){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();};}}
@@ -59,7 +57,7 @@ function setFocusToSearchInput(event){event.preventDefault();event.stopPropagati
 let searchFormElement=document.querySelector(".search-form");if(searchFormElement){searchFormElement.style.display="block";}
 let searchInputElement=document.getElementById("search-input");if(searchInputElement){searchInputElement.focus();searchInputElement.value="";}}
 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;}
+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-action=markPageAsRead]");let showOnlyUnread=false;if(element){showOnlyUnread=element.dataset.showOnlyUnread||false;}
 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";}
@@ -99,14 +97,15 @@ function updateUnreadCounterValue(callback){let counterElements=document.querySe
 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);}
+function handleConfirmationMessage(linkElement,callback){linkElement.style.display="none";let containerElement=linkElement.parentNode;let questionElement=document.createElement("span");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);callback(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);}
 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));}
+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-action=markPageAsRead]",()=>handleConfirmationMessage(event.target,()=>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)=>handleConfirmationMessage(event.target,(url,redirectURL)=>{let request=new RequestBuilder(url);request.withCallback(()=>{if(redirectURL){window.location.href=redirectURL;}else{window.location.reload();}});request.execute();}));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": "fe24291c59706b377062df11145b8aed5d48ce06afcce78a2c99ee879632cc57",
+	"app": "bf306e93b04662c7ecc975c54e2ce4b1a4ed76d23ea2e708da70fb8371f368b8",
 	"sw":  "55fffa223919cc18572788fb9c62fccf92166c0eb5d3a1d6f91c31f24d020be9",
 }
diff --git a/ui/static/js/app.js b/ui/static/js/app.js
index 93fd661..7737699 100644
--- a/ui/static/js/app.js
+++ b/ui/static/js/app.js
@@ -99,10 +99,10 @@ function markPageAsRead() {
         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 element = document.querySelector("a[data-action=markPageAsRead]");
             let showOnlyUnread = false;
             if (element) {
-                showOnlyUnread = element.dataset.showOnlyUnread;
+                showOnlyUnread = element.dataset.showOnlyUnread || false;
             }
 
             if (showOnlyUnread) {
@@ -462,3 +462,43 @@ function flipElementState(element) {
     element.parentNode.appendChild(labelElement);
     element.parentNode.removeChild(element);
 }
+
+function handleConfirmationMessage(linkElement, callback) {
+    linkElement.style.display = "none";
+
+    let containerElement = linkElement.parentNode;
+    let questionElement = document.createElement("span");
+
+    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);
+
+        callback(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);
+}
diff --git a/ui/static/js/bootstrap.js b/ui/static/js/bootstrap.js
index d07da56..95b0a68 100644
--- a/ui/static/js/bootstrap.js
+++ b/ui/static/js/bootstrap.js
@@ -38,7 +38,7 @@ document.addEventListener("DOMContentLoaded", function () {
     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-action=markPageAsRead]", () => handleConfirmationMessage(event.target, () => markPageAsRead()));
 
     onClick("a[data-toggle-status]", (event) => {
         let currentItem = DomHelper.findParent(event.target, "entry");
@@ -51,9 +51,19 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     });
 
-    onClick("a[data-confirm]", (event) => {
-        (new ConfirmHandler()).handle(event);
-    });
+    onClick("a[data-confirm]", (event) => handleConfirmationMessage(event.target, (url, redirectURL) => {
+        let request = new RequestBuilder(url);
+
+        request.withCallback(() => {
+            if (redirectURL) {
+                window.location.href = redirectURL;
+            } else {
+                window.location.reload();
+            }
+        });
+
+        request.execute();
+    }));
 
     onClick("a[data-link-state=flip]", (event) => {
         flipElementState(event.target);
diff --git a/ui/static/js/confirm_handler.js b/ui/static/js/confirm_handler.js
deleted file mode 100644
index 74ebb2d..0000000
--- a/ui/static/js/confirm_handler.js
+++ /dev/null
@@ -1,59 +0,0 @@
-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) {
-                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);
-    }
-}