From 9717b5917a2fde3e4614643d95df3178c5b657dc Mon Sep 17 00:00:00 2001 From: "francesco.mangiacrapa" Date: Wed, 21 Jul 2021 12:13:24 +0200 Subject: [PATCH] image gallery has been integrated --- .../client/ui/gallery/ImagesGallery.java | 51 +++++++++++++++---- .../products/concessioni/ConcessioneView.java | 26 ++++------ src/main/webapp/GeoportalDataViewer.css | 9 ++-- 3 files changed, 56 insertions(+), 30 deletions(-) diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/gallery/ImagesGallery.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/gallery/ImagesGallery.java index 22266a3..950854c 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/gallery/ImagesGallery.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/gallery/ImagesGallery.java @@ -9,14 +9,29 @@ import com.google.gwt.core.client.JavaScriptObject; import com.google.gwt.json.client.JSONArray; import com.google.gwt.json.client.JSONObject; import com.google.gwt.json.client.JSONString; +import com.google.gwt.user.client.Random; import com.google.gwt.user.client.ui.HTMLPanel; + +/** + * The Class ImagesGallery. + * + * @author Francesco Mangiacrapa at ISTI-CNR (francesco.mangiacrapa@isti.cnr.it) + * + * Jul 21, 2021 + */ public class ImagesGallery { - HTMLPanel galleryPanel = new HTMLPanel("
"); + private HTMLPanel galleryPanel; private List listImages; + private String galleryDivId; - private native void showGallery(JavaScriptObject json_array_images) /*-{ + /** + * Show gallery. + * + * @param json_array_images the json array images + */ + private native void showGallery(JavaScriptObject json_array_images, String galleryDivId) /*-{ console.log("showing: " + json_array_images) var waitForJQuery = setInterval( @@ -24,11 +39,11 @@ public class ImagesGallery { if (typeof $wnd.$ != 'undefined') { $wnd - .$("#nanogallery") + .$("#"+galleryDivId) .nanogallery2( { - thumbnailHeight : '200 XS150 SM150', // RESPONSIVE THUMBNAIL HEIGHT: default=250px, XS resolution=200px, SM resolution=200px - thumbnailWidth : 'auto', // RESPONSIVE THUMBNAIL WIDTH: default=250px, XS resolution=150px, SM resolution=200px + thumbnailHeight : '200 XS150 SM150', // RESPONSIVE THUMBNAIL HEIGHT: default=200px, XS resolution=150px, SM resolution=150px + thumbnailWidth : 'auto', // RESPONSIVE THUMBNAIL WIDTH: auto thumbnailAlignment : 'left', thumbnailBorderHorizontal : 0, thumbnailBorderVertical : 0, @@ -58,7 +73,7 @@ public class ImagesGallery { // THUMBNAIL'S HOVER ANIMATION //thumbnailBuildInit2 : 'tools_font-size_1.5em|title_font-size_1.5em', - thumbnailHoverEffect2 : 'image_scale_1.00_1.20_1000|tools_opacity_0_1|tools_translateX_-30px_0px|title_opacity_1_0|title_translateX_0px_-30px', + thumbnailHoverEffect2 : 'imageScaleIn80|tools_opacity_0_1|tools_translateX_-30px_0px|title_opacity_1_0|title_translateX_0px_-30px', touchAnimation : true, touchAutoOpenDelay : 800, @@ -68,7 +83,7 @@ public class ImagesGallery { borderRadius : '2px', background : '#fff', titleShadow : 'none', - titleColor : 'gray', + titleColor : '#696969', labelBackground : '#f3f3f3' }, thumbnailIcon : { @@ -97,15 +112,29 @@ public class ImagesGallery { }-*/; + /** + * Instantiates a new images gallery. + * + * @param immagini the immagini + */ public ImagesGallery(List immagini) { - + this.galleryDivId = "nanogallery"+Random.nextInt()+Random.nextInt(); + this.galleryPanel = new HTMLPanel("
"); this.listImages = immagini; } + /** + * Gets the gallery panel. + * + * @return the gallery panel + */ public HTMLPanel getGalleryPanel() { return galleryPanel; } + /** + * Fill gallery. + */ public void fillGallery() { JSONArray jsonArray = new JSONArray(); @@ -116,12 +145,12 @@ public class ImagesGallery { json.put("src", new JSONString(imageContent.getLink())); json.put("srct", new JSONString(imageContent.getLink())); List listAuthors = image.getResponsabili(); - String txtAuthors = listAuthors.size()>1 ? "Authors ": "Author "; + String txtAuthors = listAuthors.size()>1 ? "Authors: ": "Author: "; for (String author : listAuthors) { txtAuthors+= " "+author +","; } String description = txtAuthors + ". ID Licenza: "+image.getLicenseID(); - txtAuthors = txtAuthors.substring(0,txtAuthors.length()-1); + txtAuthors = txtAuthors.substring(0,txtAuthors.length()-2); json.put("title", new JSONString(image.getDidascalia())); json.put("description", new JSONString(description)); json.put("downloadURL", new JSONString(imageContent.getLink())); @@ -130,6 +159,6 @@ public class ImagesGallery { } } - showGallery(jsonArray.getJavaScriptObject()); + showGallery(jsonArray.getJavaScriptObject(), galleryDivId); } } diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.java index bfeca01..40a115e 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.java +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/products/concessioni/ConcessioneView.java @@ -1,5 +1,6 @@ package org.gcube.portlets.user.geoportaldataviewer.client.ui.products.concessioni; +import java.util.ArrayList; import java.util.List; import org.gcube.application.geoportalcommon.shared.GeoNaItemRef; @@ -9,7 +10,6 @@ import org.gcube.portlets.user.geoportaldataviewer.client.gis.MapUtils; import org.gcube.portlets.user.geoportaldataviewer.client.ui.ModalWindow; import org.gcube.portlets.user.geoportaldataviewer.client.ui.dialogs.DialogShareableLink; import org.gcube.portlets.user.geoportaldataviewer.client.ui.gallery.ImagesGallery; -import org.gcube.portlets.user.geoportaldataviewer.client.ui.images.ThumbnailImageView; import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.MapView; import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTable; import org.gcube.portlets.user.geoportaldataviewer.shared.products.ConcessioneDV; @@ -319,33 +319,29 @@ public class ConcessioneView extends Composite { } private void addUploadedImages() { + GWT.log("Managing immagini: "+concessioneDV.getImmaginiRappresentative()); List immagini = concessioneDV.getImmaginiRappresentative(); if (immagini != null && immagini.size() > 0) { imagesPanel.setVisible(true); - ImagesGallery gallery = new ImagesGallery(immagini); - imagesPanel.add(gallery.getGalleryPanel()); - gallery.fillGallery(); - - /*boolean addedImage = false; - imagesPanel.add(thumbNails); + List immaginiToShow = new ArrayList(); + //SHOWING ONLY OPEN IMAGES OR IF THE USER IS LOGGED for (UploadedImageDV uploadedImageDV : immagini) { if(uploadedImageDV.getPolicy()==null || uploadedImageDV.getPolicy().equalsIgnoreCase("OPEN")) { - thumbNails.add(new ThumbnailImageView(uploadedImageDV, viewImageButtonVisible, openImageButtonVisible)); - addedImage = true; + immaginiToShow.add(uploadedImageDV); }else { if(myLogin!=null) { - thumbNails.add(new ThumbnailImageView(uploadedImageDV, viewImageButtonVisible, openImageButtonVisible)); - addedImage = true; + immaginiToShow.add(uploadedImageDV); } } - } - if(!addedImage) { - imagesPanel.remove(thumbNails); - }*/ + if(immaginiToShow.size()>0) { + ImagesGallery gallery = new ImagesGallery(immaginiToShow); + imagesPanel.add(gallery.getGalleryPanel()); + gallery.fillGallery(); + } } } diff --git a/src/main/webapp/GeoportalDataViewer.css b/src/main/webapp/GeoportalDataViewer.css index 7f83318..99a7645 100644 --- a/src/main/webapp/GeoportalDataViewer.css +++ b/src/main/webapp/GeoportalDataViewer.css @@ -236,14 +236,15 @@ body { /** NanoGallery2 **/ -.nanogallery_viewertheme_dark_nanogallery .nGY2Viewer { - background: rgba(4, 4, 4, 0.80) !important; +.nGY2Viewer { + background: rgba(4, 4, 4, .8) !important; } -.nanogallery_viewertheme_dark_nanogallery .nGY2Viewer .toolbarBackground { - background: rgba(4, 4, 4, 0.60) !important; +.nGY2Viewer .toolbarBackground { + background: rgba(4, 4, 4, .8) !important; } + .nGY2 .toolbar .ngbt { font-size: 1em !important; padding: 12px 12px !important;