image gallery has been integrated

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("<div id='nanogallery'></div>");
+	private HTMLPanel galleryPanel;
 	private List<UploadedImageDV> 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<UploadedImageDV> immagini) {
-
+		this.galleryDivId = "nanogallery"+Random.nextInt()+Random.nextInt();
+		this.galleryPanel = new HTMLPanel("<div id='"+galleryDivId+"'></div>");
 		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<String> 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);
 	}
 }

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<UploadedImageDV> 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<UploadedImageDV> immaginiToShow = new ArrayList<UploadedImageDV>();
+			//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();
+			}
 		}
 	}
 

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;