integrated with nanogallery

This commit is contained in:
Francesco Mangiacrapa 2021-07-19 18:04:14 +02:00
parent 0ad1937951
commit e806c20462
9 changed files with 272 additions and 127 deletions

View File

@ -1,4 +1,4 @@
eclipse.preferences.version=1
lastWarOutDir=/home/francescomangiacrapa/git/geoportal-data-viewer-app/target/geoportal-data-viewer-app-1.1.0
lastWarOutDir=/home/francescomangiacrapa/git/geoportal-data-viewer-app/target/geoportal-data-viewer-app-1.2.0-SNAPSHOT
warSrcDir=src/main/webapp
warSrcDirIsOutput=false

View File

@ -4,6 +4,13 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [v1.2.0-SNAPSHOT] - 2021-07-19
#### Enhancements
Moved to maven-portal-bom v.3.6.3
## [v1.1.0] - 2020-12-21
#### Enhancements

14
pom.xml
View File

@ -14,7 +14,7 @@
<groupId>org.gcube.portlets.user</groupId>
<artifactId>geoportal-data-viewer-app</artifactId>
<packaging>war</packaging>
<version>1.1.0</version>
<version>1.2.0-SNAPSHOT</version>
<name>GeoPortal Data Viewer App</name>
<description>The GeoPortal Data Viewer App is an application to access, discovery and navigate the GeoNa products by a Web-Map Interface</description>
@ -54,7 +54,7 @@
<dependency>
<groupId>org.gcube.distribution</groupId>
<artifactId>maven-portal-bom</artifactId>
<version>3.6.0</version>
<version>3.6.3-SNAPSHOT</version>
<type>pom</type>
<scope>import</scope>
<exclusions>
@ -109,6 +109,16 @@
<version>${gwt.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.gcube.portal</groupId>
<artifactId>oidc-library-portal</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.gcube.common</groupId>
<artifactId>oidc-library</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.github.tdesjardins</groupId>
<artifactId>gwt-ol3</artifactId>

View File

@ -12,7 +12,10 @@
<inherits name="com.github.gwtbootstrap.Bootstrap" />
<inherits name='org.gcube.application.geoportalcommon.GeoportalDataCommon' />
<inherits
name='org.gcube.application.geoportalcommon.GeoportalDataCommon' />
<inherits name="com.google.gwt.json.JSON" />
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->

View File

@ -24,6 +24,7 @@ import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.core.client.Scheduler;
import com.google.gwt.core.client.Scheduler.ScheduledCommand;
import com.google.gwt.core.client.ScriptInjector;
import com.google.gwt.event.logical.shared.ResizeEvent;
import com.google.gwt.event.logical.shared.ResizeHandler;
import com.google.gwt.event.shared.HandlerManager;
@ -88,6 +89,10 @@ public class GeoportalDataViewer implements EntryPoint {
RootPanel.get(APP_DIV).add(mainPanel);
Timer t = new Timer() {
@Override
public void run() {
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
@Override
@ -97,6 +102,8 @@ public class GeoportalDataViewer implements EntryPoint {
layerManager.setOlMap(olMapMng.getOLOSMMap());
mainPanel.setMap(olMapMng.getOLOSMMap());
updateSize();
ScriptInjector.fromUrl("//cdn.jsdelivr.net/npm/nanogallery2@3/dist/jquery.nanogallery2.min.js")
.setWindow(ScriptInjector.TOP_WINDOW).inject();
}
});
@ -176,6 +183,13 @@ public class GeoportalDataViewer implements EntryPoint {
});
bindEvents();
}
};
t.schedule(3000);
}
/**

View File

@ -0,0 +1,92 @@
package org.gcube.portlets.user.geoportaldataviewer.client.ui.gallery;
import java.util.List;
import org.gcube.portlets.user.geoportaldataviewer.shared.products.content.WorkspaceContentDV;
import org.gcube.portlets.user.geoportaldataviewer.shared.products.model.UploadedImageDV;
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.ui.HTMLPanel;
public class ImagesGallery {
HTMLPanel galleryPanel = new HTMLPanel("<div id='nanogallery'></div>");
private List<UploadedImageDV> listImages;
private native void showGallery(JavaScriptObject json_array_images) /*-{
console.log("showing: " + json_array_images)
var waitForJQuery = setInterval(
function() {
if (typeof $wnd.$ != 'undefined') {
$wnd
.$("#nanogallery")
.nanogallery2(
{
thumbnailHeight : '200',
thumbnailWidth : 'auto',
thumbnailAlignment : 'fillWidth',
thumbnailDisplayTransition : 'slideDown',
thumbnailDisplayTransitionDuration : 500,
thumbnailDisplayInterval : 30,
// THUMBNAIL'S HOVER ANIMATION
thumbnailHoverEffect2 : 'imageScaleIn80',
touchAnimation : true,
touchAutoOpenDelay : 800,
viewerToolbar : {
display : true,
standard : 'minimizeButton, label',
minimized : 'minimizeButton, label, fullscreenButton, downloadButton'
},
viewerTools : {
topLeft : 'pageCounter',
topRight : 'playPauseButton, zoomButton, fullscreenButton, downloadButton, closeButton'
},
// DEEP LINKING
locationHash : false,
items : json_array_images
})
clearInterval(waitForJQuery);
}
}, 200);
}-*/;
public ImagesGallery(List<UploadedImageDV> immagini) {
this.listImages = immagini;
}
public HTMLPanel getGalleryPanel() {
return galleryPanel;
}
public void fillGallery() {
JSONArray jsonArray = new JSONArray();
int index = 0;
for (UploadedImageDV image : listImages) {
for (WorkspaceContentDV imageContent : image.getListWsContent()) {
JSONObject json = new JSONObject();
json.put("src", new JSONString(imageContent.getLink()));
json.put("srct", new JSONString(imageContent.getLink()));
json.put("title", new JSONString(image.getDidascalia()));
//json.put("description", new JSONString(image.getDidascalia()));
json.put("downloadURL", new JSONString(imageContent.getLink()));
jsonArray.set(index, json);
index++;
}
}
showGallery(jsonArray.getJavaScriptObject());
}
}

View File

@ -8,6 +8,7 @@ import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerSer
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;
@ -321,7 +322,12 @@ public class ConcessioneView extends Composite {
List<UploadedImageDV> immagini = concessioneDV.getImmaginiRappresentative();
if (immagini != null && immagini.size() > 0) {
imagesPanel.setVisible(true);
boolean addedImage = false;
ImagesGallery gallery = new ImagesGallery(immagini);
imagesPanel.add(gallery.getGalleryPanel());
gallery.fillGallery();
/*boolean addedImage = false;
imagesPanel.add(thumbNails);
for (UploadedImageDV uploadedImageDV : immagini) {
@ -339,7 +345,7 @@ public class ConcessioneView extends Composite {
if(!addedImage) {
imagesPanel.remove(thumbNails);
}
}*/
}
}

View File

@ -12,7 +12,10 @@
<inherits name="com.github.gwtbootstrap.Bootstrap" />
<inherits name='org.gcube.application.geoportalcommon.GeoportalDataCommon' />
<inherits
name='org.gcube.application.geoportalcommon.GeoportalDataCommon' />
<inherits name="com.google.gwt.json.JSON" />
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->

View File

@ -6,46 +6,56 @@
<!-- differences in layout. -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link type="text/css" rel="stylesheet" href="GeoportalDataViewer.css">
<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link type="text/css" rel="stylesheet" href="GeoportalDataViewer.css">
<link href="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" rel="stylesheet" type="text/css">
<script src="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js" type="text/javascript"></script>
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Web Application Starter Project</title>
<link
href="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css"
rel="stylesheet" type="text/css">
<script
src="//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"
type="text/javascript"></script>
<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script type="text/javascript" language="javascript" src="GeoportalDataViewer/GeoportalDataViewer.nocache.js"></script>
</head>
<link
href="https://cdn.jsdelivr.net/npm/nanogallery2@3/dist/css/nanogallery2.min.css"
rel="stylesheet" type="text/css">
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>Web Application Starter Project</title>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body>
<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script type="text/javascript" language="javascript"
src="GeoportalDataViewer/GeoportalDataViewer.nocache.js"></script>
</head>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
style="position: absolute; width: 0; height: 0; border: 0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
<div
style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled in order for this
application to display correctly.</div>
</noscript>
<div id="geoportal-data-viewer"></div>
</body>
</body>
</html>