From 3fe8132706226fb53b2d022a155bf4a3390aea9f Mon Sep 17 00:00:00 2001
From: Thomas Low <code@thomaslow.com>
Date: Thu, 7 Nov 2024 12:55:40 +0000
Subject: [PATCH] Fix detail view navigation if no thumbnail is selected. Add
 fast forward and backward buttons to skip many media.

---
 .../forms/dataeditor/GalleryPanel.java        |  4 +--
 .../webapp/WEB-INF/resources/css/kitodo.css   |  2 +-
 .../WEB-INF/resources/js/metadata_editor.js   | 30 ++++++++++++++++++
 .../partials/media-detail.xhtml               | 31 ++++++++++++-------
 4 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java
index 8c9541c9306..82c462a5b74 100644
--- a/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java
+++ b/Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java
@@ -1050,7 +1050,7 @@ public MediaPartialsPanel getMediaPartialsPanel() {
     }
 
     /**
-     * Return true if the currently selected media (that is shown in the detail view) is the verify 
+     * Return true if the currently selected media (that is shown in the detail view) is the  
      * first media of all available media.
      * @return boolean true if selected media is first media
      */
@@ -1078,7 +1078,7 @@ public boolean isSelectedMediaFirst() {
     }
 
     /**
-     * Return true if the currently selected media (that is shown in the detail view) is the verify 
+     * Return true if the currently selected media (that is shown in the detail view) is the  
      * last media of all available media.
      * @return boolean true if selected media is last media
      */
diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
index 6abc4bd4c96..857eba319eb 100644
--- a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
+++ b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
@@ -3436,7 +3436,7 @@ Column content
 }
 
 #imagePreviewForm .mediaDetailNavigationPanel button {
-    margin: var(--default-full-size);
+    margin: var(--default-full-size) var(--default-half-size);
     pointer-events: all;
     opacity: 0.0;
     transition: opacity 0.1s linear;
diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js b/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js
index 4cd4f57e078..e35659a75ad 100644
--- a/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js
+++ b/Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js
@@ -937,6 +937,36 @@ metadataEditor.pagination = {
     }
 };
 
+metadataEditor.detailView = {
+
+    /**
+     * Select the previous or following media when clicking on the navigation buttons of the detail view.
+     * @param {int} delta position delta with respect to currently selected media
+     */
+    navigate(delta) {
+        // find media currently shown in detail view
+        let currentTreeNodeId = $("#imagePreviewForm\\:mediaDetail").data("logicaltreenodeid");
+        if (!currentTreeNodeId) {
+            return;
+        }
+        // find current media in list of thumbnails
+        let thumbnails = $("#imagePreviewForm .thumbnail-container");
+        let currentThumbnail = $("#imagePreviewForm .thumbnail-container[data-logicaltreenodeid='" + currentTreeNodeId + "']");
+        let index = thumbnails.index(currentThumbnail);
+        if (index < 0) {
+            return;
+        }
+        // add delta to find previous or next thumbnail
+        index = Math.min(thumbnails.length - 1, Math.max(0, index + delta));
+        let nextThumbnail = thumbnails.eq(index);
+        let nextTreeNodeId = nextThumbnail.data("logicaltreenodeid");
+        // update selection and trigger reload of detail view
+        metadataEditor.gallery.pages.handleSingleSelect(null, nextThumbnail, nextTreeNodeId);
+        metadataEditor.gallery.pages.handleSelectionUpdates(nextTreeNodeId);
+        scrollToPreviewThumbnail(nextThumbnail, $("#thumbnailStripeScrollableContent"));
+    }    
+};
+
 metadataEditor.contextMenu = {
     listen() {
         document.oncontextmenu = function(event) {
diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail.xhtml b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail.xhtml
index 260db4f9089..0c4fa6c760f 100644
--- a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail.xhtml
+++ b/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-detail.xhtml
@@ -19,9 +19,12 @@
         xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
         xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
 
-    <h:panelGroup id="mediaDetail" layout="block">
-        <ui:param name="selectedGalleryMediaContent"
-                  value="#{DataEditorForm.galleryPanel.getGalleryMediaContent(DataEditorForm.galleryPanel.lastSelection.key)}"/>
+    <ui:param name="selectedGalleryMediaContent"
+        value="#{DataEditorForm.galleryPanel.getGalleryMediaContent(DataEditorForm.galleryPanel.lastSelection.key)}"/>
+    
+    <h:panelGroup id="mediaDetail" 
+                  layout="block"
+                  a:data-logicaltreenodeid="#{selectedGalleryMediaContent.getLogicalTreeNodeId()}">
 
         <ui:fragment
                 rendered="#{mediaProvider.hasMediaViewVariant(selectedGalleryMediaContent) and (fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'video') or fn:startsWith(selectedGalleryMediaContent.mediaViewMimeType, 'audio'))}">
@@ -92,16 +95,22 @@
         </ui:fragment>
 
         <p:outputPanel styleClass="mediaDetailNavigationPanel">
-            <p:commandButton id="mediaDetailNavigationPreviousButton" 
-                             title="#{msgs['dataEditor.navigateToPreviousElement']}"
+            <p:commandButton title="#{msgs['dataEditor.navigateToPreviousElement']}"
                              disabled="#{DataEditorForm.galleryPanel.isSelectedMediaFirst()}"
-                             icon="fa fa-arrow-left fa-lg"
-                             onclick="metadataEditor.shortcuts.navigateByShortcut(-1, false);" />
-            <p:commandButton id="mediaDetailNavigationNextButton" 
-                             title="#{msgs['dataEditor.navigateToNextElement']}"
+                             icon="fa fa-angle-double-left fa-lg"
+                             onclick="metadataEditor.detailView.navigate(-20);" />
+            <p:commandButton title="#{msgs['dataEditor.navigateToPreviousElement']}"
+                             disabled="#{DataEditorForm.galleryPanel.isSelectedMediaFirst()}"
+                             icon="fa fa-angle-left fa-lg"
+                             onclick="metadataEditor.detailView.navigate(-1);" />
+            <p:commandButton title="#{msgs['dataEditor.navigateToNextElement']}"
+                             disabled="#{DataEditorForm.galleryPanel.isSelectedMediaLast()}"
+                             icon="fa fa-angle-right fa-lg"
+                             onclick="metadataEditor.detailView.navigate(+1);" />
+            <p:commandButton title="#{msgs['dataEditor.navigateToNextElement']}"
                              disabled="#{DataEditorForm.galleryPanel.isSelectedMediaLast()}"
-                             icon="fa fa-arrow-right fa-lg"
-                             onclick="metadataEditor.shortcuts.navigateByShortcut(1, false);" />
+                             icon="fa fa-angle-double-right fa-lg"
+                             onclick="metadataEditor.detailView.navigate(+20);" />
         </p:outputPanel>
 
     </h:panelGroup>