Wrap around when navigating with keyboard shortcuts on a list view

2 files changed, 24 insertions, 15 deletions

diff --git a/ui/static/js.go b/ui/static/js.go
index 85eb408..57be42e 100644
--- a/ui/static/js.go
+++ b/ui/static/js.go
@@ -88,12 +88,12 @@ 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;}}}
+for(let i=0;i<items.length;i++){if(items[i].classList.contains("current-item")){items[i].classList.remove("current-item");let nextItem;if(i-1>=0){nextItem=items[i-1];}else{nextItem=items[items.length-1];}
+nextItem.classList.add("current-item");DomHelper.scrollPageTo(nextItem);nextItem.querySelector('.item-header a').focus();break;}}}
+function goToNextListItem(){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");let nextItem;if(i+1<items.length){nextItem=items[i+1];}else{nextItem=items[0];}
+nextItem.classList.add("current-item");DomHelper.scrollPageTo(nextItem);nextItem.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;});}}
@@ -109,6 +109,6 @@ if("serviceWorker"in navigator){let scriptElement=document.getElementById("servi
 }
 
 var JavascriptsChecksums = map[string]string{
-	"app": "f33c45750b6bcc73a33fa39a6ae5d879a53e6edfc99e3eec15c258e18d1d3c35",
+	"app": "be87d5db4f4373b0a2db87952db4200888cff16e0a400130c931436d475a72d6",
 	"sw":  "55fffa223919cc18572788fb9c62fccf92166c0eb5d3a1d6f91c31f24d020be9",
 }
diff --git a/ui/static/js/app.js b/ui/static/js/app.js
index 968045e..6164800 100644
--- a/ui/static/js/app.js
+++ b/ui/static/js/app.js
@@ -404,25 +404,29 @@ function goToPreviousListItem() {
         if (items[i].classList.contains("current-item")) {
             items[i].classList.remove("current-item");
 
+            let nextItem;
             if (i - 1 >= 0) {
-                items[i - 1].classList.add("current-item");
-                DomHelper.scrollPageTo(items[i - 1]);
-                items[i - 1].querySelector('.item-header a').focus();
+                nextItem = items[i - 1];
+            } else {
+                nextItem = items[items.length - 1];
             }
 
+            nextItem.classList.add("current-item");
+            DomHelper.scrollPageTo(nextItem);
+            nextItem.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) {
+    if (document.querySelector(".current-item") === null) {
         items[0].classList.add("current-item");
         items[0].querySelector('.item-header a').focus();
         return;
@@ -432,12 +436,17 @@ function goToNextListItem() {
         if (items[i].classList.contains("current-item")) {
             items[i].classList.remove("current-item");
 
+            let nextItem;
             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();
+                nextItem = items[i + 1];
+            } else {
+                nextItem = items[0];
             }
 
+            nextItem.classList.add("current-item");
+            DomHelper.scrollPageTo(nextItem);
+            nextItem.querySelector('.item-header a').focus();
+
             break;
         }
     }