Change link state when marking all entries as read

generate.go

@@ -198,6 +198,7 @@ func main() {
 			"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/bootstrap.js",
 		},
 		"sw": []string{

locale/translations.go

@@ -38,6 +38,7 @@ var translations = map[string]string{
     "menu.create_category": "Kategorie anlegen",
     "menu.mark_page_as_read": "Diese Seite als gelesen markieren",
     "menu.mark_all_as_read": "Alle als gelesen markieren",
+    "menu.mark_all_as_read_wip": "In Arbeit...",
     "menu.refresh_feed": "Aktualisieren",
     "menu.refresh_all_feeds": "Alle Abonnements im Hintergrund aktualisieren",
     "menu.edit_feed": "Bearbeiten",
@@ -326,8 +327,9 @@ var translations = map[string]string{
     "menu.create_category": "Create a category",
     "menu.mark_page_as_read": "Mark this page as read",
     "menu.mark_all_as_read": "Mark all as read",
+    "menu.mark_all_as_read_wip": "Operation in progress...",
     "menu.refresh_feed": "Refresh",
-    "menu.refresh_all_feeds": "Refresh all feeds in background",
+    "menu.refresh_all_feeds": "Refresh all feeds in the background",
     "menu.edit_feed": "Edit",
     "menu.edit_category": "Edit",
     "menu.add_feed": "Add subscription",
@@ -594,6 +596,7 @@ var translations = map[string]string{
     "menu.create_category": "Créer une catégorie",
     "menu.mark_page_as_read": "Marquer cette page comme lu",
     "menu.mark_all_as_read": "Tout marquer comme lu",
+    "menu.mark_all_as_read_wip": "Opération en cours...",
     "menu.refresh_feed": "Actualiser",
     "menu.refresh_all_feeds": "Actualiser les abonnements en arrière-plan",
     "menu.edit_feed": "Modifier",
@@ -882,6 +885,7 @@ var translations = map[string]string{
     "menu.create_category": "Categorie toevoegen",
     "menu.mark_page_as_read": "Markeer deze pagina als gelezen",
     "menu.mark_all_as_read": "Markeer alle items als gelezen",
+    "menu.mark_all_as_read_wip": "Bezig...",
     "menu.refresh_feed": "Vernieuwen",
     "menu.refresh_all_feeds": "Vernieuw alle feeds in de achtergrond",
     "menu.edit_feed": "Bewerken",
@@ -1168,6 +1172,7 @@ var translations = map[string]string{
     "menu.create_category": "Utwórz kategorię",
     "menu.mark_page_as_read": "Oznacz jako przeczytane",
     "menu.mark_all_as_read": "Oznacz wszystko jako przeczytane",
+    "menu.mark_all_as_read_wip": "W toku...",
     "menu.refresh_feed": "Odśwież",
     "menu.refresh_all_feeds": "Odśwież wszystkie subskrypcje w tle",
     "menu.edit_feed": "Edytuj",
@@ -1462,6 +1467,7 @@ var translations = map[string]string{
     "menu.create_category": "Создать категорию",
     "menu.mark_page_as_read": "Отметить эту страницу прочитанной",
     "menu.mark_all_as_read": "Отметить всё как прочитанное",
+    "menu.mark_all_as_read_wip": "В процессе…",
     "menu.refresh_feed": "Обновить",
     "menu.refresh_all_feeds": "Обновить все подписки в фоне",
     "menu.edit_feed": "Изменить",
@@ -1738,6 +1744,7 @@ var translations = map[string]string{
     "menu.create_category": "新建分类",
     "menu.mark_page_as_read": "标记为已读",
     "menu.mark_all_as_read": "全标记为已读",
+    "menu.mark_all_as_read_wip": "执行中...",
     "menu.refresh_feed": "更新",
     "menu.refresh_all_feeds": "在后台更新全部源",
     "menu.edit_feed": "编辑",
@@ -1984,11 +1991,11 @@ var translations = map[string]string{
 }
 
 var translationsChecksums = map[string]string{
-	"de_DE": "604b7a957e7633da81585553d17ef401326914e2b6605cfe50450b8f4df44310",
+	"de_DE": "099dea24a10c4f842674db2ae44f99e99b9c880a6f83e3a42502603fa228fd32",
-	"en_US": "7dcc212a35180ba1800d5dcb5c8455e746a5eb0c3c5c79b3b31ca0eb8dc46356",
+	"en_US": "c23d1f16d1dbea72c1e1ba558c7a9c25e0ee8ffda420d50c998efe2fb4d9aa55",
-	"fr_FR": "e6ebd22a6c75cebf666e18424d489db254f0b34dc15a7002a574929179efb09a",
+	"fr_FR": "b123c66c61cda3ae4a978465b7a0e332a83cf386032e1df11c033ed8def9203c",
-	"nl_NL": "3bf3fd429bdf3e46a0be7f7e89eb06b8272a1833a04aca47ed8dd959fcac13a3",
+	"nl_NL": "b1e548c2b21f013b1b54a07df7df7c06c776cbd7d26fc1fed288bd6970e99c3c",
-	"pl_PL": "6fcf2c429ad68cb99e357825e76bc8f79d9ca3b5d01217beed5e502df2eaa5c9",
+	"pl_PL": "8cb856dede8b4f75e4c6aeb0a45f09507c5010f782692e887aae357e99674218",
-	"ru_RU": "5cd9093807f75f27580a1a20f0b4e4b1a4f2dc3c60b93d4fd53b5b01ecd34d71",
+	"ru_RU": "0544db0800811fc678521b2e9a7141380919b9ae259b3158524619bf120600ab",
-	"zh_CN": "b16c175c71358b073e6098bf053e0387f0c1e4c6ce67794d9074d15b45928d5a",
+	"zh_CN": "92687fecfaaf74489714c52903987e7027d8c1cda45b60aa081f7b2165ccaed5",
 }

locale/translations/de_DE.json

@@ -33,6 +33,7 @@
     "menu.create_category": "Kategorie anlegen",
     "menu.mark_page_as_read": "Diese Seite als gelesen markieren",
     "menu.mark_all_as_read": "Alle als gelesen markieren",
+    "menu.mark_all_as_read_wip": "In Arbeit...",
     "menu.refresh_feed": "Aktualisieren",
     "menu.refresh_all_feeds": "Alle Abonnements im Hintergrund aktualisieren",
     "menu.edit_feed": "Bearbeiten",

locale/translations/en_US.json

@@ -33,8 +33,9 @@
     "menu.create_category": "Create a category",
     "menu.mark_page_as_read": "Mark this page as read",
     "menu.mark_all_as_read": "Mark all as read",
+    "menu.mark_all_as_read_wip": "Operation in progress...",
     "menu.refresh_feed": "Refresh",
-    "menu.refresh_all_feeds": "Refresh all feeds in background",
+    "menu.refresh_all_feeds": "Refresh all feeds in the background",
     "menu.edit_feed": "Edit",
     "menu.edit_category": "Edit",
     "menu.add_feed": "Add subscription",

locale/translations/fr_FR.json

@@ -33,6 +33,7 @@
     "menu.create_category": "Créer une catégorie",
     "menu.mark_page_as_read": "Marquer cette page comme lu",
     "menu.mark_all_as_read": "Tout marquer comme lu",
+    "menu.mark_all_as_read_wip": "Opération en cours...",
     "menu.refresh_feed": "Actualiser",
     "menu.refresh_all_feeds": "Actualiser les abonnements en arrière-plan",
     "menu.edit_feed": "Modifier",

locale/translations/nl_NL.json

@@ -33,6 +33,7 @@
     "menu.create_category": "Categorie toevoegen",
     "menu.mark_page_as_read": "Markeer deze pagina als gelezen",
     "menu.mark_all_as_read": "Markeer alle items als gelezen",
+    "menu.mark_all_as_read_wip": "Bezig...",
     "menu.refresh_feed": "Vernieuwen",
     "menu.refresh_all_feeds": "Vernieuw alle feeds in de achtergrond",
     "menu.edit_feed": "Bewerken",

locale/translations/pl_PL.json

@@ -33,6 +33,7 @@
     "menu.create_category": "Utwórz kategorię",
     "menu.mark_page_as_read": "Oznacz jako przeczytane",
     "menu.mark_all_as_read": "Oznacz wszystko jako przeczytane",
+    "menu.mark_all_as_read_wip": "W toku...",
     "menu.refresh_feed": "Odśwież",
     "menu.refresh_all_feeds": "Odśwież wszystkie subskrypcje w tle",
     "menu.edit_feed": "Edytuj",

locale/translations/ru_RU.json

@@ -33,6 +33,7 @@
     "menu.create_category": "Создать категорию",
     "menu.mark_page_as_read": "Отметить эту страницу прочитанной",
     "menu.mark_all_as_read": "Отметить всё как прочитанное",
+    "menu.mark_all_as_read_wip": "В процессе…",
     "menu.refresh_feed": "Обновить",
     "menu.refresh_all_feeds": "Обновить все подписки в фоне",
     "menu.edit_feed": "Изменить",

locale/translations/zh_CN.json

@@ -33,6 +33,7 @@
     "menu.create_category": "新建分类",
     "menu.mark_page_as_read": "标记为已读",
     "menu.mark_all_as_read": "全标记为已读",
+    "menu.mark_all_as_read_wip": "执行中...",
     "menu.refresh_feed": "更新",
     "menu.refresh_all_feeds": "在后台更新全部源",
     "menu.edit_feed": "编辑",

template/html/unread_entries.html

@@ -9,7 +9,9 @@
             <a href="#" data-on-click="markPageAsRead">{{ t "menu.mark_page_as_read" }}</a>
         </li>
         <li>
-            <a href="{{ route "markAllAsRead" }}">{{ t "menu.mark_all_as_read" }}</a>
+            <a data-link-state="flip"
+               data-label-new-state="{{ t "menu.mark_all_as_read_wip" }}"
+               href="{{ route "markAllAsRead" }}">{{ t "menu.mark_all_as_read" }}</a>
         </li>
     </ul>
     {{ end }}

template/views.go

@@ -1261,7 +1261,9 @@ var templateViewsMap = map[string]string{
             <a href="#" data-on-click="markPageAsRead">{{ t "menu.mark_page_as_read" }}</a>
         </li>
         <li>
-            <a href="{{ route "markAllAsRead" }}">{{ t "menu.mark_all_as_read" }}</a>
+            <a data-link-state="flip"
+               data-label-new-state="{{ t "menu.mark_all_as_read_wip" }}"
+               href="{{ route "markAllAsRead" }}">{{ t "menu.mark_all_as_read" }}</a>
         </li>
     </ul>
     {{ end }}
@@ -1387,6 +1389,6 @@ var templateViewsMapChecksums = map[string]string{
 	"search_entries":      "d71849a4f2b0573c7c76ad0ea941812009e9f022de60895987a781d3e6f08a01",
 	"sessions":            "1b3ec0970a4111b81f86d6ed187bb410f88972e2ede6723b9febcc4c7e5fc921",
 	"settings":            "bc04faf83dd977306825973375954600bd014619340188e1243fd9e2f5d5e1a9",
-	"unread_entries":      "058d918592b25bd209c84660dd546b7426f19b1083da868a8672fde9bbcf1b17",
+	"unread_entries":      "880018cbc59ec09b23dd800c4010fadad944d7023e0d36a3872c09b5d4952799",
 	"users":               "4b56cc76fbcc424e7c870d0efca93bb44dbfcc2a08b685cf799c773fbb8dfb2f",
 }

ui/static/css/common.css

@@ -37,6 +37,10 @@ a:hover {
     text-decoration: none;
 }
 
+.link-flipped-state {
+    font-style: italic;
+}
+
 /* Header and main menu */
 .header {
     margin-top: 10px;

ui/static/js.go

@@ -36,7 +36,7 @@ if(this.queue.length>=2){this.queue=[];}};}
 isEventIgnored(event){return event.target.tagName==="INPUT"||event.target.tagName==="TEXTAREA";}
 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){let elements=document.querySelectorAll(selector);elements.forEach((element)=>{element.onclick=(event)=>{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 MouseHandler{onClick(selector,callback,noPreventDefault){let elements=document.querySelectorAll(selector);elements.forEach((element)=>{element.onclick=(event)=>{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;}
@@ -91,13 +91,15 @@ if(currentItem===null){items[0].classList.add("current-item");items[0].querySele
 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;}}}
 isListView(){return document.querySelector(".items")!==null;}}
-document.addEventListener("DOMContentLoaded",function(){FormHandler.handleSubmitButtons();let touchHandler=new TouchHandler();touchHandler.listen();let navHandler=new NavHandler();let keyboardHandler=new KeyboardHandler();keyboardHandler.on("g u",()=>navHandler.goToPage("unread"));keyboardHandler.on("g b",()=>navHandler.goToPage("starred"));keyboardHandler.on("g h",()=>navHandler.goToPage("history"));keyboardHandler.on("g f",()=>navHandler.goToPage("feeds"));keyboardHandler.on("g c",()=>navHandler.goToPage("categories"));keyboardHandler.on("g s",()=>navHandler.goToPage("settings"));keyboardHandler.on("ArrowLeft",()=>navHandler.goToPrevious());keyboardHandler.on("ArrowRight",()=>navHandler.goToNext());keyboardHandler.on("j",()=>navHandler.goToPrevious());keyboardHandler.on("p",()=>navHandler.goToPrevious());keyboardHandler.on("k",()=>navHandler.goToNext());keyboardHandler.on("n",()=>navHandler.goToNext());keyboardHandler.on("h",()=>navHandler.goToPage("previous"));keyboardHandler.on("l",()=>navHandler.goToPage("next"));keyboardHandler.on("o",()=>navHandler.openSelectedItem());keyboardHandler.on("v",()=>navHandler.openOriginalLink());keyboardHandler.on("m",()=>navHandler.toggleEntryStatus());keyboardHandler.on("A",()=>navHandler.markPageAsRead());keyboardHandler.on("s",()=>navHandler.saveEntry());keyboardHandler.on("d",()=>navHandler.fetchOriginalContent());keyboardHandler.on("f",()=>navHandler.toggleBookmark());keyboardHandler.on("?",()=>navHandler.showKeyboardShortcuts());keyboardHandler.on("/",(e)=>navHandler.setFocusToSearchInput(e));keyboardHandler.on("Escape",()=>ModalHandler.close());keyboardHandler.listen();let mouseHandler=new MouseHandler();mouseHandler.onClick("a[data-save-entry]",(event)=>{event.preventDefault();EntryHandler.saveEntry(event.target);});mouseHandler.onClick("a[data-toggle-bookmark]",(event)=>{event.preventDefault();EntryHandler.toggleBookmark(event.target);});mouseHandler.onClick("a[data-toggle-status]",(event)=>{event.preventDefault();let currentItem=DomHelper.findParent(event.target,"entry");if(!currentItem){currentItem=DomHelper.findParent(event.target,"item");}
+class LinkStateHandler{static flip(element){let labelElement=document.createElement("span")
-if(currentItem){EntryHandler.toggleEntryStatus(currentItem);}});mouseHandler.onClick("a[data-fetch-content-entry]",(event)=>{event.preventDefault();EntryHandler.fetchOriginalContent(event.target);});mouseHandler.onClick("a[data-on-click=markPageAsRead]",()=>navHandler.markPageAsRead());mouseHandler.onClick("a[data-confirm]",(event)=>{(new ConfirmHandler()).handle(event);});mouseHandler.onClick("a[data-action=search]",(event)=>{navHandler.setFocusToSearchInput(event);});if(document.documentElement.clientWidth<600){let menuHandler=new MenuHandler();mouseHandler.onClick(".logo",()=>menuHandler.toggleMainMenu());mouseHandler.onClick(".header nav li",(event)=>menuHandler.clickMenuListItem(event));}
+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 touchHandler=new TouchHandler();touchHandler.listen();let navHandler=new NavHandler();let keyboardHandler=new KeyboardHandler();keyboardHandler.on("g u",()=>navHandler.goToPage("unread"));keyboardHandler.on("g b",()=>navHandler.goToPage("starred"));keyboardHandler.on("g h",()=>navHandler.goToPage("history"));keyboardHandler.on("g f",()=>navHandler.goToPage("feeds"));keyboardHandler.on("g c",()=>navHandler.goToPage("categories"));keyboardHandler.on("g s",()=>navHandler.goToPage("settings"));keyboardHandler.on("ArrowLeft",()=>navHandler.goToPrevious());keyboardHandler.on("ArrowRight",()=>navHandler.goToNext());keyboardHandler.on("j",()=>navHandler.goToPrevious());keyboardHandler.on("p",()=>navHandler.goToPrevious());keyboardHandler.on("k",()=>navHandler.goToNext());keyboardHandler.on("n",()=>navHandler.goToNext());keyboardHandler.on("h",()=>navHandler.goToPage("previous"));keyboardHandler.on("l",()=>navHandler.goToPage("next"));keyboardHandler.on("o",()=>navHandler.openSelectedItem());keyboardHandler.on("v",()=>navHandler.openOriginalLink());keyboardHandler.on("m",()=>navHandler.toggleEntryStatus());keyboardHandler.on("A",()=>navHandler.markPageAsRead());keyboardHandler.on("s",()=>navHandler.saveEntry());keyboardHandler.on("d",()=>navHandler.fetchOriginalContent());keyboardHandler.on("f",()=>navHandler.toggleBookmark());keyboardHandler.on("?",()=>navHandler.showKeyboardShortcuts());keyboardHandler.on("/",(e)=>navHandler.setFocusToSearchInput(e));keyboardHandler.on("Escape",()=>ModalHandler.close());keyboardHandler.listen();let mouseHandler=new MouseHandler();mouseHandler.onClick("a[data-save-entry]",(event)=>{EntryHandler.saveEntry(event.target);});mouseHandler.onClick("a[data-toggle-bookmark]",(event)=>{EntryHandler.toggleBookmark(event.target);});mouseHandler.onClick("a[data-toggle-status]",(event)=>{let currentItem=DomHelper.findParent(event.target,"entry");if(!currentItem){currentItem=DomHelper.findParent(event.target,"item");}
+if(currentItem){EntryHandler.toggleEntryStatus(currentItem);}});mouseHandler.onClick("a[data-fetch-content-entry]",(event)=>{EntryHandler.fetchOriginalContent(event.target);});mouseHandler.onClick("a[data-on-click=markPageAsRead]",()=>navHandler.markPageAsRead());mouseHandler.onClick("a[data-confirm]",(event)=>{(new ConfirmHandler()).handle(event);});mouseHandler.onClick("a[data-action=search]",(event)=>{navHandler.setFocusToSearchInput(event);});mouseHandler.onClick("a[data-link-state=flip]",(event)=>{LinkStateHandler.flip(event.target);},true);if(document.documentElement.clientWidth<600){let menuHandler=new MenuHandler();mouseHandler.onClick(".logo",()=>menuHandler.toggleMainMenu());mouseHandler.onClick(".header nav li",(event)=>menuHandler.clickMenuListItem(event));}
 if("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": "583320452ca24912512d41f6b31221b14a3e0d53f02511e55246a60d0b56d095",
+	"app": "e47094cfa9d58b7306e93c047fc8fd7530c2350f1959aa27e5bff525c4c2c50e",
 	"sw":  "55fffa223919cc18572788fb9c62fccf92166c0eb5d3a1d6f91c31f24d020be9",
 }

ui/static/js/bootstrap.js

@@ -34,18 +34,14 @@ document.addEventListener("DOMContentLoaded", function() {
 
     let mouseHandler = new MouseHandler();
     mouseHandler.onClick("a[data-save-entry]", (event) => {
-        event.preventDefault();
         EntryHandler.saveEntry(event.target);
     });
 
     mouseHandler.onClick("a[data-toggle-bookmark]", (event) => {
-        event.preventDefault();
         EntryHandler.toggleBookmark(event.target);
     });
 
     mouseHandler.onClick("a[data-toggle-status]", (event) => {
-        event.preventDefault();
-
         let currentItem = DomHelper.findParent(event.target, "entry");
         if (! currentItem) {
             currentItem = DomHelper.findParent(event.target, "item");
@@ -57,7 +53,6 @@ document.addEventListener("DOMContentLoaded", function() {
     });
 
     mouseHandler.onClick("a[data-fetch-content-entry]", (event) => {
-        event.preventDefault();
         EntryHandler.fetchOriginalContent(event.target);
     });
 
@@ -71,6 +66,10 @@ document.addEventListener("DOMContentLoaded", function() {
         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());

ui/static/js/link_state_handler.js

@@ -0,0 +1,10 @@
+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);
+    }
+}

ui/static/js/mouse_handler.js

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