merge media-partials and image tooltip

markusweigelt · Dec 11, 2023 · a92113e · a92113e
2 parents 8e76da5 + a7aeb11
commit a92113e
Show file tree

Hide file tree

Showing 11 changed files with 359 additions and 108 deletions.
diff --git a/Kitodo-DataManagement/src/main/java/org/kitodo/data/database/beans/Project.java b/Kitodo-DataManagement/src/main/java/org/kitodo/data/database/beans/Project.java
@@ -127,6 +127,18 @@ 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 the status of the preview tooltip.
+     */
+    @Column(name = "preview_tooltip")
+    private Boolean previewTooltip = false;
+
+    /**
+     * Field to define the status if the media view should be displayed preview tooltip.
+     */
+    @Column(name = "preview_tooltip_media_view")
+    private Boolean previewTooltipMediaView = false;
+
     /**
      * Folder with media to use for the audio preview.
      */
@@ -520,6 +532,43 @@ public void setPreview(Folder preview) {
         this.preview = preview;
     }
 
+    /**
+     * Get the status of the preview tooltip.
+     *
+     * @return True if is active
+     */
+    public boolean isPreviewTooltip() {
+        return previewTooltip;
+    }
+
+    /**
+     * Set the status if the media view should be displayed preview tooltip.
+     *
+     * @param previewTooltipMediaView True if is active
+     */
+    public void setPreviewTooltipMediaView(boolean previewTooltipMediaView) {
+        this.previewTooltipMediaView = previewTooltipMediaView;
+    }
+
+    /**
+     * Get the status if the media view should be displayed preview tooltip.
+     *
+     * @return True if is active
+     */
+    public boolean isPreviewTooltipMediaView() {
+        return previewTooltipMediaView;
+    }
+
+    /**
+     * Set the status of the preview tooltip.
+     *
+     * @param previewTooltip
+     *         True if is active
+     */
+    public void setPreviewTooltip(boolean previewTooltip) {
+        this.previewTooltip = previewTooltip;
+    }
+
     /**
      * Returns the folder to use for audio preview.
      *

diff --git a/Kitodo-DataManagement/src/main/resources/db/V2_127__Add_preview_tooltip_to_project.sql b/Kitodo-DataManagement/src/main/resources/db/V2_127__Add_preview_tooltip_to_project.sql
@@ -0,0 +1,18 @@
+--
+-- (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 state of preview tooltip to project table.
+ALTER TABLE project ADD preview_tooltip TINYINT(1) NOT NULL DEFAULT 0;
+
+--
+-- Migration: Add column for state if the media view should be displayed preview tooltip to project table.
+ALTER TABLE project ADD preview_tooltip_media_view TINYINT(1) NOT NULL DEFAULT 0;
diff --git a/Kitodo/src/main/java/org/kitodo/production/forms/ProjectForm.java b/Kitodo/src/main/java/org/kitodo/production/forms/ProjectForm.java
@@ -733,6 +733,44 @@ public void setPreview(String preview) {
         project.setPreview(getFolderMap().get(preview));
     }
 
+
+    /**
+     * Returns the state of the preview tooltip field.
+     *
+     * @return True if enabled
+     */
+    public boolean isPreviewTooltip() {
+        return project.isPreviewTooltip();
+    }
+
+    /**
+     * Sets the state of the preview tooltip field.
+     *
+     * @param previewTooltip True if enabled
+     *
+     */
+    public void setPreviewTooltip(boolean previewTooltip) {
+        project.setPreviewTooltip(previewTooltip);
+    }
+
+    /**
+     * Get the status if the media view should be displayed preview tooltip.
+     *
+     * @return True if is active
+     */
+    public boolean isPreviewTooltipMediaView() {
+        return project.isPreviewTooltipMediaView();
+    }
+
+    /**
+     * Set the status if the media view should be displayed preview tooltip.
+     *
+     * @param previewTooltipMediaView True if is active
+     */
+    public void setPreviewTooltipMediaView(boolean previewTooltipMediaView) {
+        project.setPreviewTooltipMediaView(previewTooltipMediaView);
+    }
+
     /**
      * Returns the folder to use for audio preview.
      *

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
@@ -239,6 +239,20 @@ public boolean isAudioMediaViewWaveform() {
         return dataEditor.getProcess().getProject().isAudioMediaViewWaveform();
     }
 
+    /**
+     * Check if the preview tooltip is activated in project.
+     */
+    public boolean isPreviewTooltip() {
+        return dataEditor.getProcess().getProject().isPreviewTooltip();
+    }
+
+    /**
+     * Check if the media view for preview tooltip is activated in project.
+     */
+    public boolean isPreviewTooltipMediaView() {
+        return dataEditor.getProcess().getProject().isPreviewTooltipMediaView();
+    }
+
     private boolean dragStripeIndexMatches(String dragId) {
         Matcher dragStripeImageMatcher = DRAG_STRIPE_IMAGE.matcher(dragId);
         Matcher dragUnstructuredMediaMatcher = DRAG_UNSTRUCTURED_MEDIA.matcher(dragId);

diff --git a/Kitodo/src/main/resources/messages/messages_de.properties b/Kitodo/src/main/resources/messages/messages_de.properties
@@ -1133,6 +1133,9 @@ title=Titel
 titleRecordLink=Titelsatzverkn\u00FCpfung
 to=bis
 tooltip=Nr. {0}
+tooltip.headline=Tooltip
+tooltip.enable=Tooltip anstelle des Overlays in der Vorschau anzeigen
+tooltip.mediaView=Zeige die Medienansicht anstelle der Vorschau
 hits=Treffer
 tsl=TSL
 typ=Typ

diff --git a/Kitodo/src/main/resources/messages/messages_en.properties b/Kitodo/src/main/resources/messages/messages_en.properties
@@ -1134,6 +1134,9 @@ title=Title
 titleRecordLink=Title record link
 to=to
 tooltip=No. {0}
+tooltip.headline=Tooltip
+tooltip.enable=Show tooltip instead of the overlay in preview
+tooltip.mediaView=Show media view in tooltip instead of preview
 hits=Hits
 tsl=TSL
 typ=Type

diff --git a/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css b/Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
@@ -3497,6 +3497,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;
@@ -3957,15 +3996,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;

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
@@ -489,6 +489,29 @@ metadataEditor.gallery = {
             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.
          */

diff --git a/...c/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list-content.xhtml b/...c/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list-content.xhtml
@@ -13,21 +13,69 @@
 
 <ui:composition
         xmlns:p="http://primefaces.org/ui"
+        xmlns:f="http://xmlns.jcp.org/jsf/core"
         xmlns:h="http://xmlns.jcp.org/jsf/html"
-        xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
+        xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+        xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
 
     <h:outputText rendered="#{media.isMediaPartial()}" styleClass="icon-media-partial"/>
 
-    <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:param name="isPreviewTooltip"
+              value="#{DataEditorForm.galleryPanel.isPreviewTooltip() and (
+                        not DataEditorForm.galleryPanel.isPreviewTooltipMediaView() and mediaProvider.hasPreviewVariant(media) and fn:startsWith(media.previewMimeType, 'image') ) or (
+                        DataEditorForm.galleryPanel.isPreviewTooltipMediaView() 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"></i>
+            </h:panelGroup>
+        </p:outputPanel>
+
+        <p:tooltip for="mediaListImageTooltipTrigger" styleClass="mediaListImageTooltip"
+                   beforeShow="metadataEditor.gallery.pages.preloadTooltipImage(this)">
+            <p:graphicImage rendered="#{DataEditorForm.galleryPanel.isPreviewTooltipMediaView()}"
+                            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="#{not DataEditorForm.galleryPanel.isPreviewTooltipMediaView()}"
+                            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>
diff --git a/Kitodo/src/main/webapp/WEB-INF/templates/includes/metadataEditor/partials/media-list.xhtml b/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-content.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-content.xhtml"/>
             </ui:fragment>
 
             <ui:fragment rendered="#{not mediaProvider.hasPreviewVariant(media)}">
@@ -89,12 +87,10 @@
                         <i class="fa fa-file-image-o"/>
                     </h:panelGroup>
                 </p:outputPanel>
-                <h:outputText value="#{DataEditorForm.galleryPanel.getSeveralAssignmentsIndex(media) + 1}"
-                              rendered="#{media.assignedSeveralTimes}"
-                              styleClass="assigned-several-times"/>
-                <ui:include src="media-list-content.xhtml"/>
             </ui:fragment>
 
+            <ui:include src="media-list-overlay.xhtml"/>
+
         </p:outputPanel>
     </p:outputPanel>