Display tooltip instead of the overlay in preview

Kitodo-DataManagement/src/main/java/org/kitodo/data/database/beans/Project.java

@@ -19,13 +19,16 @@
 import javax.persistence.CascadeType;
 import javax.persistence.Column;
 import javax.persistence.Entity;
+import javax.persistence.EnumType;
+import javax.persistence.Enumerated;
 import javax.persistence.ForeignKey;
 import javax.persistence.JoinColumn;
 import javax.persistence.ManyToMany;
 import javax.persistence.ManyToOne;
 import javax.persistence.OneToMany;
 import javax.persistence.Table;
 
+import org.kitodo.data.database.enums.PreviewHoverMode;
 import org.kitodo.data.database.persistence.ProjectDAO;
 
 @Entity
@@ -127,6 +130,13 @@ public class Project extends BaseIndexedBean implements Comparable<Project> {
     @JoinColumn(name = "preview_folder_id", foreignKey = @ForeignKey(name = "FK_project_preview_folder_id"))
     private Folder preview;
 
+    /**
+     * Field to define mode of hover in preview.
+     */
+    @Column(name = "preview_hover_mode")
+    @Enumerated(EnumType.STRING)
+    private PreviewHoverMode previewHoverMode = PreviewHoverMode.OVERLAY;
+
     /**
      * Folder with media to use for the audio preview.
      */
@@ -520,6 +530,24 @@ public void setPreview(Folder preview) {
         this.preview = preview;
     }
 
+    /**
+     * Sets the preview hover mode.
+     *
+     * @param previewHoverMode preview hover mode
+     */
+    public void setPreviewHoverMode(PreviewHoverMode previewHoverMode) {
+        this.previewHoverMode = previewHoverMode;
+    }
+
+    /**
+     * Returns the preview hover mode.
+     *
+     * @return The preview hover mode
+     */
+    public PreviewHoverMode getPreviewHoverMode() {
+        return previewHoverMode;
+    }
+
     /**
      * Returns the folder to use for audio preview.
      *

Kitodo-DataManagement/src/main/java/org/kitodo/data/database/enums/PreviewHoverMode.java

@@ -0,0 +1,21 @@
+/*
+ * (c) Kitodo. Key to digital objects e. V. <[email protected]>
+ *
+ * This file is part of the Kitodo project.
+ *
+ * It is licensed under GNU General Public License version 3 or later.
+ *
+ * For the full copyright and license information, please read the
+ * GPL3-License.txt file that was distributed with this source code.
+ */
+
+package org.kitodo.data.database.enums;
+
+public enum PreviewHoverMode {
+
+    OVERLAY,
+
+    TOOLTIP_PREVIEW,
+
+    TOOLTIP_MEDIAVIEW
+}

Kitodo-DataManagement/src/main/resources/db/migration/V2_127__Add_preview_tooltip_to_project.sql

@@ -0,0 +1,14 @@
+--
+-- (c) Kitodo. Key to digital objects e. V. <[email protected]>
+--
+-- This file is part of the Kitodo project.
+--
+-- It is licensed under GNU General Public License version 3 or later.
+--
+-- For the full copyright and license information, please read the
+-- GPL3-License.txt file that was distributed with this source code.
+--
+
+--
+-- Migration: Add column for mode of preview hover to project table.
+ALTER TABLE project ADD preview_hover_mode varchar(17) NOT NULL DEFAULT 'OVERLAY';

Kitodo/src/main/java/org/kitodo/production/forms/ProjectForm.java

@@ -43,6 +43,7 @@
 import org.kitodo.data.database.beans.Project;
 import org.kitodo.data.database.beans.Template;
 import org.kitodo.data.database.beans.User;
+import org.kitodo.data.database.enums.PreviewHoverMode;
 import org.kitodo.data.database.exceptions.DAOException;
 import org.kitodo.data.exceptions.DataException;
 import org.kitodo.exceptions.ProjectDeletionException;
@@ -733,6 +734,24 @@ public void setPreview(String preview) {
         project.setPreview(getFolderMap().get(preview));
     }
 
+    /**
+     * Returns the preview hover mode.
+     *
+     * @return The preview hover mode
+     */
+    public PreviewHoverMode getPreviewHoverMode() {
+        return project.getPreviewHoverMode();
+    }
+
+    /**
+     * Sets the preview hover mode.
+     *
+     * @param previewHoverMode preview hover mode
+     */
+    public void setPreviewHoverMode(PreviewHoverMode previewHoverMode) {
+        project.setPreviewHoverMode(previewHoverMode);
+    }
+
     /**
      * Returns the folder to use for audio preview.
      *

Kitodo/src/main/java/org/kitodo/production/forms/dataeditor/GalleryPanel.java

@@ -43,6 +43,7 @@
 import org.kitodo.data.database.beans.Folder;
 import org.kitodo.data.database.beans.Process;
 import org.kitodo.data.database.beans.Project;
+import org.kitodo.data.database.enums.PreviewHoverMode;
 import org.kitodo.exceptions.InvalidMetadataValueException;
 import org.kitodo.exceptions.NoSuchMetadataFieldException;
 import org.kitodo.production.enums.MediaContentType;
@@ -236,6 +237,16 @@ public boolean isAudioMediaViewWaveform() {
         return dataEditor.getProcess().getProject().isAudioMediaViewWaveform();
     }
 
+    /**
+     * Returns the preview hover mode of project.
+     *
+     * @return The preview hover mode
+     */
+    public PreviewHoverMode getPreviewHoverMode() {
+        return dataEditor.getProcess().getProject().getPreviewHoverMode();
+    }
+
+
     private boolean dragStripeIndexMatches(String dragId) {
         Matcher dragStripeImageMatcher = DRAG_STRIPE_IMAGE.matcher(dragId);
         Matcher dragUnstructuredMediaMatcher = DRAG_UNSTRUCTURED_MEDIA.matcher(dragId);

Kitodo/src/main/resources/messages/messages_de.properties

@@ -895,6 +895,11 @@ pleaseSignIn=Bitte melden Sie sich an
 plugins=Plugins
 position=Position
 ppn=PPN
+preview.headline=Vorschau
+previewHoverMode=Hover-Modus in der Vorschau
+previewHoverMode.OVERLAY=Overlay
+previewHoverMode.TOOLTIP_PREVIEW=Tooltip Vorschau
+previewHoverMode.TOOLTIP_MEDIAVIEW=Tooltip Medienansicht
 priority=Priorit\u00E4t
 process=Vorgang
 processConfig.fromTemplate=aus Produktionsvorlage

Kitodo/src/main/resources/messages/messages_en.properties

@@ -896,6 +896,11 @@ pleaseSignIn=Sign in
 plugins=Plugins
 position=Position
 ppn=PPN
+preview.headline=Preview
+previewHoverMode=Hover-Mode
+previewHoverMode.OVERLAY=Overlay
+previewHoverMode.TOOLTIP_PREVIEW=Tooltip preview
+previewHoverMode.TOOLTIP_MEDIAVIEW=Tooltip mediaview
 priority=Priority
 process=Process
 processConfig.fromTemplate=From process template

Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css

@@ -3378,6 +3378,45 @@ Column content
     margin-right: 3px;
 }
 
+.mediaListImageTooltipTrigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mediaListImageTooltipTrigger i.fa {
+    font-size: 30px;
+}
+
+.ui-tooltip.mediaListImageTooltip {
+    max-width: fit-content;
+}
+
+.ui-tooltip.mediaListImageTooltip.ui-tooltip-left > .ui-tooltip-arrow {
+    border-left-color: var(--pure-white);
+}
+
+.ui-tooltip.mediaListImageTooltip.ui-tooltip-right > .ui-tooltip-arrow {
+    border-right-color: var(--pure-white);
+}
+
+.ui-tooltip.mediaListImageTooltip > .ui-tooltip-text {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--pure-white);
+    padding: 8px;
+}
+
+.ui-tooltip.mediaListImageTooltip > .ui-tooltip-text > img {
+    max-height: 40vh;
+}
+
+.ui-tooltip.mediaListImageTooltip > .ui-tooltip-text > div {
+    color: var(--carbon-blue);
+    margin-top: 6px;
+    font-size: smaller;
+}
+
 .ui-widget .thumbnail-overlay {
     position: absolute;
     top: 0;
@@ -3838,15 +3877,6 @@ footer {
     padding: .75em 1.5em;
 }
 
-.la-folder-use {
-    padding-left: 16px;
-}
-
-.so-folder-use {
-    margin: 0 15px 1.3em 15px;
-    width: calc(100% - 64px);
-}
-
 .import-table-section-title,
 .ui-panelgrid-cell > .import-table-section-title {
     font-weight: bold;

Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js

@@ -394,6 +394,29 @@
             this.updateDiscontinuousSecletionState();
         },
 
+        /**
+         * Preload the images in tooltip.
+         *
+         * To improve performance, the images within the tooltips are loaded only when the tooltip is displayed.
+         * For the preview image, it makes no difference, as the image is already loaded. However, if the image
+         * from the MediaView is to be displayed in the tooltip, it must be preloaded. Otherwise, the tooltip appears
+         * at a shifted position because, at the time of display, it does not yet know the size of its content.
+         */
+        preloadTooltipImage(tooltip) {
+            let tooltipElement = document.getElementById(tooltip.id);
+            if (!tooltipElement.hasAttribute("data-preloaded")) {
+                let tempImage = new Image();
+                tempImage.src = tooltipElement.getElementsByTagName('img')[0].src;
+                tempImage.onload = function () {
+                    tooltipElement.setAttribute("data-preloaded", "true");
+                    tooltipElement.getElementsByTagName('img')[0].height = tempImage.height;
+                    PF(tooltip.cfg.widgetVar).show();
+                }
+                return false;
+            }
+            return true;
+        },
+
         /**
          * Checks whether selection is a continuous selection and applies corresponding CSS style class.
          */

Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list-overlay.xhtml

@@ -13,19 +13,67 @@
 
 <ui:composition
         xmlns:p="http://primefaces.org/ui"
+        xmlns:f="http://xmlns.jcp.org/jsf/core"
+        xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
         xmlns:h="http://xmlns.jcp.org/jsf/html"
-        xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
-
-    <p:outputPanel class="thumbnail-overlay">
-        <h:outputText rendered="#{media.type eq 'VIDEO'}">
-            #{msgs.video} #{media.shortId}
-        </h:outputText>
-        <h:outputText rendered="#{media.type eq 'AUDIO'}">
-            #{msgs.audio} #{media.shortId}
-        </h:outputText>
-        <h:outputText rendered="#{media.type eq 'IMAGE'}">
-            #{msgs.image} #{media.shortId}, #{msgs.page} #{media.orderlabel}
-        </h:outputText>
-    </p:outputPanel>
+        xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+        xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
+
+    <ui:param name="isPreviewTooltip"
+              value="#{(DataEditorForm.galleryPanel.previewHoverMode eq 'TOOLTIP_PREVIEW' and mediaProvider.hasPreviewVariant(media) and fn:startsWith(media.previewMimeType, 'image')) or
+              (DataEditorForm.galleryPanel.previewHoverMode eq 'TOOLTIP_MEDIAVIEW' and mediaProvider.hasMediaViewVariant(media) and fn:startsWith(media.mediaViewMimeType, 'image'))}"/>
+
+    <ui:fragment rendered="#{not isPreviewTooltip}">
+        <p:outputPanel class="thumbnail-overlay">
+            <h:outputText rendered="#{media.type eq 'VIDEO'}">
+                #{msgs.video} #{media.shortId}
+            </h:outputText>
+            <h:outputText rendered="#{media.type eq 'AUDIO'}">
+                #{msgs.audio} #{media.shortId}
+            </h:outputText>
+            <h:outputText rendered="#{media.type eq 'IMAGE'}">
+                #{msgs.image} #{media.shortId}, #{msgs.page} #{media.orderlabel}
+            </h:outputText>
+        </p:outputPanel>
+    </ui:fragment>
+
+    <ui:fragment rendered="#{isPreviewTooltip}">
+        <p:outputPanel id="mediaListImageTooltipTrigger" class="mediaListImageTooltipTrigger thumbnail-overlay">
+            <h:panelGroup>
+                <i class="fa fa-search-plus"/>
+            </h:panelGroup>
+        </p:outputPanel>
+
+        <p:tooltip for="mediaListImageTooltipTrigger" styleClass="mediaListImageTooltip"
+                   beforeShow="metadataEditor.gallery.pages.preloadTooltipImage(this)">
+            <p:graphicImage rendered="#{DataEditorForm.galleryPanel.previewHoverMode eq 'TOOLTIP_MEDIAVIEW'}"
+                            value="#{mediaProvider.mediaView}"
+                            a:loading="lazy">
+                <f:param name="mediaId"
+                         value="#{media.id}"/>
+                <f:param name="process"
+                         value="#{DataEditorForm.process.id}"/>
+                <f:param name="sessionId"
+                         value="#{DataEditorForm.galleryPanel.cachingUUID}"/>
+            </p:graphicImage>
+
+            <p:graphicImage rendered="#{DataEditorForm.galleryPanel.previewHoverMode eq 'TOOLTIP_PREVIEW'}"
+                            value="#{mediaProvider.previewData}"
+                            a:loading="lazy">
+                <f:param name="mediaId"
+                         value="#{media.id}"/>
+                <f:param name="process"
+                         value="#{DataEditorForm.process.id}"/>
+                <f:param name="sessionId"
+                         value="#{DataEditorForm.galleryPanel.cachingUUID}"/>
+            </p:graphicImage>
+
+            <p:outputPanel>
+                <h:outputText>
+                    #{msgs.image} #{media.shortId}, #{msgs.page} #{media.orderlabel}
+                </h:outputText>
+            </p:outputPanel>
+        </p:tooltip>
+    </ui:fragment>
 
 </ui:composition>

Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list.xhtml

@@ -55,7 +55,6 @@
                     <f:param name="krsc"
                              value="true"/>
                 </p:media>
-                <ui:include src="media-list-overlay.xhtml"/>
             </ui:fragment>
 
             <ui:fragment rendered="#{mediaProvider.hasPreviewVariant(media) and fn:startsWith(media.previewMimeType, 'image')}">
@@ -74,7 +73,6 @@
                 <h:outputText value="#{DataEditorForm.galleryPanel.getSeveralAssignmentsIndex(media) + 1}"
                               rendered="#{media.assignedSeveralTimes}"
                               styleClass="assigned-several-times"/>
-                <ui:include src="media-list-overlay.xhtml"/>
             </ui:fragment>
 
             <ui:fragment rendered="#{not mediaProvider.hasPreviewVariant(media)}">
@@ -89,9 +87,10 @@
                         <i class="fa fa-file-image-o"/>
                     </h:panelGroup>
                 </p:outputPanel>
-                <ui:include src="media-list-overlay.xhtml"/>
             </ui:fragment>
 
+            <ui:include src="media-list-overlay.xhtml"/>
+
         </p:outputPanel>
     </p:outputPanel>