Skip to content

Commit

Permalink
Merge pull request kitodo#5845 from markusweigelt/image-tooltip
Browse files Browse the repository at this point in the history
Display tooltip instead of the overlay in preview
  • Loading branch information
solth authored Jan 15, 2024
2 parents 44733e6 + 24c1412 commit a6d0a8b
Show file tree
Hide file tree
Showing 12 changed files with 346 additions and 105 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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.
*
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/*
* (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;

/**
* Configuration modes when hovering over item in list view (preview item).
*/
public enum PreviewHoverMode {

/**
* Show an overlay directly over the item.
*/
OVERLAY,

/**
* Show a tooltip beside the item with the preview as content.
*/
TOOLTIP_PREVIEW,

/**
* Show a tooltip beside the item with the mediaview as content.
*/
TOOLTIP_MEDIAVIEW
}
Original file line number Diff line number Diff line change
@@ -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';
19 changes: 19 additions & 0 deletions Kitodo/src/main/java/org/kitodo/production/forms/ProjectForm.java
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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.
*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down
5 changes: 5 additions & 0 deletions Kitodo/src/main/resources/messages/messages_de.properties
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 5 additions & 0 deletions Kitodo/src/main/resources/messages/messages_en.properties
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
48 changes: 39 additions & 9 deletions Kitodo/src/main/webapp/WEB-INF/resources/css/kitodo.css
Original file line number Diff line number Diff line change
Expand Up @@ -3401,6 +3401,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;
Expand Down Expand Up @@ -3861,15 +3900,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;
Expand Down
23 changes: 23 additions & 0 deletions Kitodo/src/main/webapp/WEB-INF/resources/js/metadata_editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -394,6 +394,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.
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
<!--@elvariable id="media" type="org.kitodo.production.forms.dataeditor.GalleryMediaContent"-->
<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'))}"/>

<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 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>
Original file line number Diff line number Diff line change
Expand Up @@ -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')}">
Expand All @@ -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)}">
Expand All @@ -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>

Expand Down
Loading

0 comments on commit a6d0a8b

Please sign in to comment.