jump to previous/next page if at the last log entry, when moving through logs via keyboard

Author: arukompas

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=c6b0db33328045843a901c6840bbbb55",
+    "/app.js": "/app.js?id=10fd202d284550adc56be1499fbd44c1",
     "/app.css": "/app.css?id=12c5e78a91987c11d8a0cc04436541e9",
     "/img/log-viewer-128.png": "/img/log-viewer-128.png?id=d576c6d2e16074d3f064e60fe4f35166",
     "/img/log-viewer-32.png": "/img/log-viewer-32.png?id=f8ec67d10f996aa8baf00df3b61eea6d",

public/mix-manifest.json

@@ -35,7 +35,7 @@
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/vue/24/outline';
 import { usePaginationStore } from '../stores/pagination.js';
 import { useRoute, useRouter } from 'vue-router';
-import { computed } from 'vue';
+import {computed, onBeforeUnmount, onMounted} from 'vue';
 import { replaceQuery } from '../helpers.js';
 
 const props = defineProps({
@@ -69,4 +69,14 @@ const gotoPage = (page) => {
 
 const nextPage = () => gotoPage(paginationStore.page + 1);
 const previousPage = () => gotoPage(paginationStore.page - 1);
+
+onMounted(() => {
+  document.addEventListener('goToNextPage', nextPage);
+  document.addEventListener('goToPreviousPage', previousPage);
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('goToNextPage', nextPage);
+  document.removeEventListener('goToPreviousPage', previousPage);
+})
 </script>

resources/js/components/Pagination.vue

@@ -50,8 +50,16 @@ export const openNextLogEntry = () => {
   const el = document.activeElement;
   const nextElement = getNextElementWithClass(el, logToggleButtonClass);
   if (!nextElement) {
+    const onNextPageLoad = () => {
+      setTimeout(() => {
+        focusFirstLogEntry();
+        ensureIsExpanded(document.activeElement);
+      }, 50)
+      document.removeEventListener('logsPageLoaded', onNextPageLoad);
+    };
+    document.addEventListener('logsPageLoaded', onNextPageLoad);
+    document.dispatchEvent(new Event('goToNextPage'));
     return;
-    // TODO: check if there's a next pagination page to load and open the next log entry.
   }
   ensureIsCollapsed(el);
   nextElement.focus();
@@ -62,8 +70,16 @@ export const openPreviousLogEntry = () => {
   const el = document.activeElement;
   const previousElement = getPreviousElementWithClass(el, logToggleButtonClass);
   if (!previousElement) {
+    const onPreviousPageLoad = () => {
+      setTimeout(() => {
+        focusLastLogEntry();
+        ensureIsExpanded(document.activeElement);
+      }, 50)
+      document.removeEventListener('logsPageLoaded', onPreviousPageLoad);
+    };
+    document.addEventListener('logsPageLoaded', onPreviousPageLoad);
+    document.dispatchEvent(new Event('goToPreviousPage'));
     return;
-    // TODO: check if there's a previous pagination page to load and open the previous log entry.
   }
   ensureIsCollapsed(el);
   previousElement.focus();

resources/js/keyboardNavigation/shared.js

@@ -234,11 +234,14 @@ export const useLogViewerStore = defineStore({
 
           if (!silently) {
             nextTick(() => {
+              document.dispatchEvent(new Event('logsPageLoaded'));
               this.reset();
               if (data.expandAutomatically) {
                 this.stacksOpen.push(0);
               }
             });
+          } else {
+            document.dispatchEvent(new Event('logsPageLoadedSilently'));
           }
 
           if (this.hasMoreResults) {