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",
-	"en_US": "7dcc212a35180ba1800d5dcb5c8455e746a5eb0c3c5c79b3b31ca0eb8dc46356",
-	"fr_FR": "e6ebd22a6c75cebf666e18424d489db254f0b34dc15a7002a574929179efb09a",
-	"nl_NL": "3bf3fd429bdf3e46a0be7f7e89eb06b8272a1833a04aca47ed8dd959fcac13a3",
-	"pl_PL": "6fcf2c429ad68cb99e357825e76bc8f79d9ca3b5d01217beed5e502df2eaa5c9",
-	"ru_RU": "5cd9093807f75f27580a1a20f0b4e4b1a4f2dc3c60b93d4fd53b5b01ecd34d71",
-	"zh_CN": "b16c175c71358b073e6098bf053e0387f0c1e4c6ce67794d9074d15b45928d5a",
+	"de_DE": "099dea24a10c4f842674db2ae44f99e99b9c880a6f83e3a42502603fa228fd32",
+	"en_US": "c23d1f16d1dbea72c1e1ba558c7a9c25e0ee8ffda420d50c998efe2fb4d9aa55",
+	"fr_FR": "b123c66c61cda3ae4a978465b7a0e332a83cf386032e1df11c033ed8def9203c",
+	"nl_NL": "b1e548c2b21f013b1b54a07df7df7c06c776cbd7d26fc1fed288bd6970e99c3c",
+	"pl_PL": "8cb856dede8b4f75e4c6aeb0a45f09507c5010f782692e887aae357e99674218",
+	"ru_RU": "0544db0800811fc678521b2e9a7141380919b9ae259b3158524619bf120600ab",
+	"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/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);
             };
         });