image gallery has been integrated
This commit is contained in:
parent
ad5b11d587
commit
9717b5917a
|
@ -9,14 +9,29 @@ import com.google.gwt.core.client.JavaScriptObject;
|
||||||
import com.google.gwt.json.client.JSONArray;
|
import com.google.gwt.json.client.JSONArray;
|
||||||
import com.google.gwt.json.client.JSONObject;
|
import com.google.gwt.json.client.JSONObject;
|
||||||
import com.google.gwt.json.client.JSONString;
|
import com.google.gwt.json.client.JSONString;
|
||||||
|
import com.google.gwt.user.client.Random;
|
||||||
import com.google.gwt.user.client.ui.HTMLPanel;
|
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 {
|
public class ImagesGallery {
|
||||||
|
|
||||||
HTMLPanel galleryPanel = new HTMLPanel("<div id='nanogallery'></div>");
|
private HTMLPanel galleryPanel;
|
||||||
private List<UploadedImageDV> listImages;
|
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)
|
console.log("showing: " + json_array_images)
|
||||||
var waitForJQuery = setInterval(
|
var waitForJQuery = setInterval(
|
||||||
|
@ -24,11 +39,11 @@ public class ImagesGallery {
|
||||||
if (typeof $wnd.$ != 'undefined') {
|
if (typeof $wnd.$ != 'undefined') {
|
||||||
|
|
||||||
$wnd
|
$wnd
|
||||||
.$("#nanogallery")
|
.$("#"+galleryDivId)
|
||||||
.nanogallery2(
|
.nanogallery2(
|
||||||
{
|
{
|
||||||
thumbnailHeight : '200 XS150 SM150', // RESPONSIVE THUMBNAIL HEIGHT: default=250px, XS resolution=200px, SM resolution=200px
|
thumbnailHeight : '200 XS150 SM150', // RESPONSIVE THUMBNAIL HEIGHT: default=200px, XS resolution=150px, SM resolution=150px
|
||||||
thumbnailWidth : 'auto', // RESPONSIVE THUMBNAIL WIDTH: default=250px, XS resolution=150px, SM resolution=200px
|
thumbnailWidth : 'auto', // RESPONSIVE THUMBNAIL WIDTH: auto
|
||||||
thumbnailAlignment : 'left',
|
thumbnailAlignment : 'left',
|
||||||
thumbnailBorderHorizontal : 0,
|
thumbnailBorderHorizontal : 0,
|
||||||
thumbnailBorderVertical : 0,
|
thumbnailBorderVertical : 0,
|
||||||
|
@ -58,7 +73,7 @@ public class ImagesGallery {
|
||||||
|
|
||||||
// THUMBNAIL'S HOVER ANIMATION
|
// THUMBNAIL'S HOVER ANIMATION
|
||||||
//thumbnailBuildInit2 : 'tools_font-size_1.5em|title_font-size_1.5em',
|
//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,
|
touchAnimation : true,
|
||||||
touchAutoOpenDelay : 800,
|
touchAutoOpenDelay : 800,
|
||||||
|
|
||||||
|
@ -68,7 +83,7 @@ public class ImagesGallery {
|
||||||
borderRadius : '2px',
|
borderRadius : '2px',
|
||||||
background : '#fff',
|
background : '#fff',
|
||||||
titleShadow : 'none',
|
titleShadow : 'none',
|
||||||
titleColor : 'gray',
|
titleColor : '#696969',
|
||||||
labelBackground : '#f3f3f3'
|
labelBackground : '#f3f3f3'
|
||||||
},
|
},
|
||||||
thumbnailIcon : {
|
thumbnailIcon : {
|
||||||
|
@ -97,15 +112,29 @@ public class ImagesGallery {
|
||||||
|
|
||||||
}-*/;
|
}-*/;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Instantiates a new images gallery.
|
||||||
|
*
|
||||||
|
* @param immagini the immagini
|
||||||
|
*/
|
||||||
public ImagesGallery(List<UploadedImageDV> immagini) {
|
public ImagesGallery(List<UploadedImageDV> immagini) {
|
||||||
|
this.galleryDivId = "nanogallery"+Random.nextInt()+Random.nextInt();
|
||||||
|
this.galleryPanel = new HTMLPanel("<div id='"+galleryDivId+"'></div>");
|
||||||
this.listImages = immagini;
|
this.listImages = immagini;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the gallery panel.
|
||||||
|
*
|
||||||
|
* @return the gallery panel
|
||||||
|
*/
|
||||||
public HTMLPanel getGalleryPanel() {
|
public HTMLPanel getGalleryPanel() {
|
||||||
return galleryPanel;
|
return galleryPanel;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fill gallery.
|
||||||
|
*/
|
||||||
public void fillGallery() {
|
public void fillGallery() {
|
||||||
|
|
||||||
JSONArray jsonArray = new JSONArray();
|
JSONArray jsonArray = new JSONArray();
|
||||||
|
@ -116,12 +145,12 @@ public class ImagesGallery {
|
||||||
json.put("src", new JSONString(imageContent.getLink()));
|
json.put("src", new JSONString(imageContent.getLink()));
|
||||||
json.put("srct", new JSONString(imageContent.getLink()));
|
json.put("srct", new JSONString(imageContent.getLink()));
|
||||||
List<String> listAuthors = image.getResponsabili();
|
List<String> listAuthors = image.getResponsabili();
|
||||||
String txtAuthors = listAuthors.size()>1 ? "Authors ": "Author ";
|
String txtAuthors = listAuthors.size()>1 ? "Authors: ": "Author: ";
|
||||||
for (String author : listAuthors) {
|
for (String author : listAuthors) {
|
||||||
txtAuthors+= " "+author +",";
|
txtAuthors+= " "+author +",";
|
||||||
}
|
}
|
||||||
String description = txtAuthors + ". ID Licenza: "+image.getLicenseID();
|
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("title", new JSONString(image.getDidascalia()));
|
||||||
json.put("description", new JSONString(description));
|
json.put("description", new JSONString(description));
|
||||||
json.put("downloadURL", new JSONString(imageContent.getLink()));
|
json.put("downloadURL", new JSONString(imageContent.getLink()));
|
||||||
|
@ -130,6 +159,6 @@ public class ImagesGallery {
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
showGallery(jsonArray.getJavaScriptObject());
|
showGallery(jsonArray.getJavaScriptObject(), galleryDivId);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
package org.gcube.portlets.user.geoportaldataviewer.client.ui.products.concessioni;
|
package org.gcube.portlets.user.geoportaldataviewer.client.ui.products.concessioni;
|
||||||
|
|
||||||
|
import java.util.ArrayList;
|
||||||
import java.util.List;
|
import java.util.List;
|
||||||
|
|
||||||
import org.gcube.application.geoportalcommon.shared.GeoNaItemRef;
|
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.ModalWindow;
|
||||||
import org.gcube.portlets.user.geoportaldataviewer.client.ui.dialogs.DialogShareableLink;
|
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.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.map.MapView;
|
||||||
import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTable;
|
import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTable;
|
||||||
import org.gcube.portlets.user.geoportaldataviewer.shared.products.ConcessioneDV;
|
import org.gcube.portlets.user.geoportaldataviewer.shared.products.ConcessioneDV;
|
||||||
|
@ -319,33 +319,29 @@ public class ConcessioneView extends Composite {
|
||||||
}
|
}
|
||||||
|
|
||||||
private void addUploadedImages() {
|
private void addUploadedImages() {
|
||||||
|
GWT.log("Managing immagini: "+concessioneDV.getImmaginiRappresentative());
|
||||||
List<UploadedImageDV> immagini = concessioneDV.getImmaginiRappresentative();
|
List<UploadedImageDV> immagini = concessioneDV.getImmaginiRappresentative();
|
||||||
if (immagini != null && immagini.size() > 0) {
|
if (immagini != null && immagini.size() > 0) {
|
||||||
imagesPanel.setVisible(true);
|
imagesPanel.setVisible(true);
|
||||||
|
|
||||||
ImagesGallery gallery = new ImagesGallery(immagini);
|
List<UploadedImageDV> immaginiToShow = new ArrayList<UploadedImageDV>();
|
||||||
imagesPanel.add(gallery.getGalleryPanel());
|
//SHOWING ONLY OPEN IMAGES OR IF THE USER IS LOGGED
|
||||||
gallery.fillGallery();
|
|
||||||
|
|
||||||
/*boolean addedImage = false;
|
|
||||||
imagesPanel.add(thumbNails);
|
|
||||||
for (UploadedImageDV uploadedImageDV : immagini) {
|
for (UploadedImageDV uploadedImageDV : immagini) {
|
||||||
|
|
||||||
if(uploadedImageDV.getPolicy()==null || uploadedImageDV.getPolicy().equalsIgnoreCase("OPEN")) {
|
if(uploadedImageDV.getPolicy()==null || uploadedImageDV.getPolicy().equalsIgnoreCase("OPEN")) {
|
||||||
thumbNails.add(new ThumbnailImageView(uploadedImageDV, viewImageButtonVisible, openImageButtonVisible));
|
immaginiToShow.add(uploadedImageDV);
|
||||||
addedImage = true;
|
|
||||||
}else {
|
}else {
|
||||||
if(myLogin!=null) {
|
if(myLogin!=null) {
|
||||||
thumbNails.add(new ThumbnailImageView(uploadedImageDV, viewImageButtonVisible, openImageButtonVisible));
|
immaginiToShow.add(uploadedImageDV);
|
||||||
addedImage = true;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!addedImage) {
|
if(immaginiToShow.size()>0) {
|
||||||
imagesPanel.remove(thumbNails);
|
ImagesGallery gallery = new ImagesGallery(immaginiToShow);
|
||||||
}*/
|
imagesPanel.add(gallery.getGalleryPanel());
|
||||||
|
gallery.fillGallery();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -236,14 +236,15 @@ body {
|
||||||
|
|
||||||
/** NanoGallery2 **/
|
/** NanoGallery2 **/
|
||||||
|
|
||||||
.nanogallery_viewertheme_dark_nanogallery .nGY2Viewer {
|
.nGY2Viewer {
|
||||||
background: rgba(4, 4, 4, 0.80) !important;
|
background: rgba(4, 4, 4, .8) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nanogallery_viewertheme_dark_nanogallery .nGY2Viewer .toolbarBackground {
|
.nGY2Viewer .toolbarBackground {
|
||||||
background: rgba(4, 4, 4, 0.60) !important;
|
background: rgba(4, 4, 4, .8) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.nGY2 .toolbar .ngbt {
|
.nGY2 .toolbar .ngbt {
|
||||||
font-size: 1em !important;
|
font-size: 1em !important;
|
||||||
padding: 12px 12px !important;
|
padding: 12px 12px !important;
|
||||||
|
|
Loading…
Reference in New Issue