Close and download buttons added in the carousel's footer

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@122460 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Costantino Perciante 2016-01-22 14:40:49 +00:00
parent 077268ded8
commit 3483b4727c
15 changed files with 343 additions and 79 deletions

View File

@ -31,7 +31,6 @@
<classpathentry kind="con" path="org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER">
<attributes>
<attribute name="maven.pomderived" value="true"/>
<attribute name="org.eclipse.jst.component.dependency" value="/WEB-INF/lib"/>
</attributes>
</classpathentry>
<classpathentry kind="lib" path="/home/costantino/Downloads/gwt-2.7.0/gwt-user.jar">

2
distro/INSTALL Normal file
View File

@ -0,0 +1,2 @@

7
distro/LICENSE Normal file
View File

@ -0,0 +1,7 @@
gCube System - License
------------------------------------------------------------
The gCube/gCore software is licensed as Free Open Source software conveying to the EUPL (http://ec.europa.eu/idabc/eupl).
The software and documentation is provided by its authors/distributors "as is" and no expressed or
implied warranty is given for its use, quality or fitness for a particular case.

6
distro/MAINTAINERS Normal file
View File

@ -0,0 +1,6 @@
Mantainers
-------
* Costantino Perciante (costantino.perciante@isti.cnr.it), CNR Pisa,
Istituto di Scienza e Tecnologie dell'Informazione "A. Faedo".

35
distro/README Normal file
View File

@ -0,0 +1,35 @@
The gCube System - Social Library
------------------------------------------------------------
This work is partially funded by the European Commission in the
context of the iMarine project (www.i-marine.eu), under the 1st call of FP7 IST priority.
Authors
-------
Massimiliano Assante
*
Version and Release Date
------------------------
July 2015
Description
-----------
Download information
--------------------
Source code is available from SVN:
https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/widgtes
Binaries can be downloaded from:
http://software.d4science.research-infrastructures.eu/
Documentation
-------------
Documentation is available on-line from the Projects Documentation Wiki:
Licensing
---------
This software is licensed under the terms you may find in the file named "LICENSE" in this directory.

5
distro/changelog.xml Normal file
View File

@ -0,0 +1,5 @@
<ReleaseNotes>
<Changeset component="org.gcube.portlets-widgets.image-previewer-widget.1-0-0" date="2016-01-22">
<Change>First Release</Change>
</Changeset>
</ReleaseNotes>

48
distro/descriptor.xml Normal file
View File

@ -0,0 +1,48 @@
<assembly
xmlns="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.0 http://maven.apache.org/xsd/assembly-1.1.0.xsd">
<id>servicearchive</id>
<formats>
<format>tar.gz</format>
</formats>
<baseDirectory>/</baseDirectory>
<fileSets>
<fileSet>
<directory>${distroDirectory}</directory>
<outputDirectory>/</outputDirectory>
<useDefaultExcludes>true</useDefaultExcludes>
<includes>
<include>README</include>
<include>LICENSE</include>
<include>INSTALL</include>
<include>MAINTAINERS</include>
<include>changelog.xml</include>
</includes>
<fileMode>755</fileMode>
<filtered>true</filtered>
</fileSet>
<fileSet>
<directory>target/apidocs</directory>
<outputDirectory>/${artifactId}/doc/api</outputDirectory>
<useDefaultExcludes>true</useDefaultExcludes>
<fileMode>755</fileMode>
</fileSet>
</fileSets>
<files>
<file>
<source>${distroDirectory}/profile.xml</source>
<outputDirectory>./</outputDirectory>
<filtered>true</filtered>
</file>
<file>
<source>target/${build.finalName}.jar</source>
<outputDirectory>/${artifactId}</outputDirectory>
</file>
<file>
<source>${distroDirectory}/svnpath.txt</source>
<outputDirectory>/${artifactId}</outputDirectory>
<filtered>true</filtered>
</file>
</files>
</assembly>

25
distro/profile.xml Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<Resource xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<ID></ID>
<Type>Service</Type>
<Profile>
<Description>${Description}</Description>
<Class>PortletWidgets</Class>
<Name>${artifactId}</Name>
<Version>${version}</Version>
<Packages>
<Software>
<Name>${artifactId}</Name>
<Version>${version}</Version>
<MavenCoordinates>
<groupId>${groupId}</groupId>
<artifactId>${artifactId}</artifactId>
<version>${version}</version>
</MavenCoordinates>
<Files>
<File>target/${build.finalName}.jar</File>
</Files>
</Software>
</Packages>
</Profile>
</Resource>

1
distro/svnpath.txt Normal file
View File

@ -0,0 +1 @@
${scm.url}

62
pom.xml
View File

@ -12,12 +12,17 @@
<groupId>org.gcube.portlets.widgets</groupId>
<artifactId>image-previewer-widget</artifactId>
<packaging>war</packaging>
<packaging>jar</packaging>
<version>1.0.0-SNAPSHOT</version>
<name>gCube Image previewer widget</name>
<description>
gCube Image Previewer widget is a GWT Widget that can be used to show a preview of one or more images
</description>
<scm>
<connection>scm:svn:http://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/widgets/${project.artifactId}</connection>
<developerConnection>scm:https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/widgets/${project.artifactId}</developerConnection>
<url>http://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/widgets/${project.artifactId}</url>
</scm>
<properties>
<!-- Convenience property to set the GWT version -->
@ -128,6 +133,61 @@
</modules>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>2.3.2</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
</configuration>
</plugin>
<!-- SA Plugin -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-assembly-plugin</artifactId>
<version>2.2</version>
<configuration>
<descriptors>
<descriptor>${distroDirectory}/descriptor.xml</descriptor>
</descriptors>
</configuration>
<executions>
<execution>
<id>servicearchive</id>
<phase>install</phase>
<goals>
<goal>single</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>2.5</version>
<executions>
<execution>
<id>copy-profile</id>
<phase>install</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>target</outputDirectory>
<resources>
<resource>
<directory>${distroDirectory}</directory>
<filtering>true</filtering>
<includes>
<include>profile.xml</include>
</includes>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>

View File

@ -3,72 +3,125 @@ package org.gcube.portlets.widgets.imagepreviewerwidget.client;
import com.github.gwtbootstrap.client.ui.Image;
/**
* This class contains the object to show within the carousel.
* This class contains the object to show within the carousel plus some other information:
* <ul>
* <li>title to show: a title to show in the header of the carousel;</li>
* <li>tooltip : a tooltip shown on image hover event;</li>
* <li>download url: in case of a file, this field can be used to download it.</li>
* </ul>
* @author Costantino Perciante at ISTI-CNR
*
*/
public class EnhancedImage {
/**
* The image to show: it could be also a preview image for a file
*/
private Image image;
/**
* Title to show in the header of the carousel
*/
private String titleToShow;
/**
* Tooltip shown when the user passes over the image
*/
private String toolTipToShow;
/**
* The download url for the image/file
*/
private String downloadUrl;
/**
* The image/file url.
* @param imageUrl the url of the image.
*/
public EnhancedImage(String imageUrl){
super();
this.image = new Image(imageUrl);
this.titleToShow = imageUrl;
this.toolTipToShow = imageUrl;
this.downloadUrl = imageUrl;
}
/**
* The image to show.
* @param image the image to show
*/
public EnhancedImage(Image image){
super();
this.image = image;
this.titleToShow = image.getUrl();
this.toolTipToShow = image.getUrl();
this.downloadUrl = image.getUrl();
}
/**
* This constructor accepts the image to show plus the title to show and the tooltip over the image.
* @param image
* @param titleToShow
* @param toolTipToShow
*/
public EnhancedImage(Image image, String titleToShow, String toolTipToShow) {
super();
this.image = image;
this.titleToShow = titleToShow;
this.toolTipToShow = toolTipToShow;
this.downloadUrl = image.getUrl();
}
/**
* This constructor accepts the image to show plus the title to show and the tooltip over the image.
* @param image
* @param titleToShow
* @param toolTipToShow
*/
public EnhancedImage(Image image, String titleToShow, String toolTipToShow, String downloadUrl) {
super();
this.image = image;
this.titleToShow = titleToShow;
this.toolTipToShow = toolTipToShow;
this.downloadUrl = downloadUrl;
}
public Image getImage() {
return image;
}
public void setImage(Image image) {
this.image = image;
}
public String getTitleToShow() {
return titleToShow;
}
public void setTitleToShow(String titleToShow) {
this.titleToShow = titleToShow;
}
public String getToolTipToShow() {
return toolTipToShow;
}
public void setToolTipToShow(String toolTipToShow) {
this.toolTipToShow = toolTipToShow;
}
public String getImageUrl(){
@ -76,9 +129,19 @@ public class EnhancedImage {
}
public String getDownloadUrl() {
return downloadUrl;
}
public void setDownloadUrl(String downloadUrl) {
this.downloadUrl = downloadUrl;
}
@Override
public String toString() {
return "EnhancedImage [image=" + image + ", titleToShow=" + titleToShow
+ ", toolTipToShow=" + toolTipToShow + "]";
+ ", toolTipToShow=" + toolTipToShow + ", downloadUrl="
+ downloadUrl + "]";
}
}

View File

@ -11,13 +11,17 @@ import com.google.gwt.user.client.ui.RootPanel;
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class ImagePreviewer implements EntryPoint {
/**
* This is the entry point method.
*/
public void onModuleLoad() {
//test();
}
private void test(){
// random images for test
List<EnhancedImage> images = new ArrayList<>();
images.add(new EnhancedImage("https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg"));
@ -25,6 +29,6 @@ public class ImagePreviewer implements EntryPoint {
images.add(new EnhancedImage("http://nerdist.com/wp-content/uploads/2014/07/ned-stark-970x545.jpg"));
images.add(new EnhancedImage("http://vignette2.wikia.nocookie.net/gameofthrones/images/2/25/Eddard's_Head.png/revision/latest?cb=20121205211321"));
images.add(new EnhancedImage("https://upload.wikimedia.org/wikipedia/it/1/17/Il_grande_Lebowski.jpg"));
RootPanel.get("image-previewer-div").add(Carousel.getImagePreviewerInstance(images));
RootPanel.get("image-previewer-div").add(new Carousel(images));
}
}

View File

@ -12,7 +12,10 @@ import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
/**
@ -26,7 +29,7 @@ public class Carousel extends Composite{
interface CarouselUiBinder extends UiBinder<Widget, Carousel> {
}
@UiField
Modal mainModalPanel;
@ -39,31 +42,44 @@ public class Carousel extends Composite{
@UiField
Button nextButton;
@UiField
Button downloadButton;
@UiField
Button closeButton;
@UiField
Image shownImage;
@UiField
HorizontalPanel horizontaFooterPanel;
private List<EnhancedImage> listOfAttachmentsToShow;
private int currentPreviewPosition;
private static Carousel instance;
public static Carousel getImagePreviewerInstance(List<EnhancedImage> imagesToShow){
if(instance == null){
instance = new Carousel(imagesToShow);
}
return instance;
}
private Carousel(List<EnhancedImage> imagesToShow) {
/**
* Build a carousel that shows imagesToShow images.
* @param imagesToShow
*/
public Carousel(List<EnhancedImage> imagesToShow) {
initWidget(uiBinder.createAndBindUi(this));
// set alignment of the horizontal panel's children
horizontaFooterPanel.setCellHorizontalAlignment(closeButton, HorizontalPanel.ALIGN_CENTER);
horizontaFooterPanel.setCellHorizontalAlignment(downloadButton, HorizontalPanel.ALIGN_CENTER);
horizontaFooterPanel.setCellHorizontalAlignment(prevButton, HorizontalPanel.ALIGN_LEFT);
horizontaFooterPanel.setCellHorizontalAlignment(nextButton, HorizontalPanel.ALIGN_RIGHT);
// set central buttons' cell widths to be equal
horizontaFooterPanel.setCellWidth(downloadButton, "200px");
horizontaFooterPanel.setCellWidth(closeButton, "200px");
// set vertical alignment
horizontaFooterPanel.setCellVerticalAlignment((Widget)nextButton, VerticalPanel.ALIGN_MIDDLE);
horizontaFooterPanel.setCellVerticalAlignment(prevButton, VerticalPanel.ALIGN_MIDDLE);
// prev button
prevButton.setText("<<");
@ -94,6 +110,20 @@ public class Carousel extends Composite{
}
@UiHandler("closeButton")
public void closeOnClick(ClickEvent e){
mainModalPanel.hide();
}
@UiHandler("downloadButton")
public void downloadOnClick(ClickEvent e){
Window.open(listOfAttachmentsToShow.get(currentPreviewPosition).getDownloadUrl(), "_blank", "");
}
@UiHandler("prevButton")
public void onClickPrev(ClickEvent e){
@ -133,7 +163,7 @@ public class Carousel extends Composite{
* Change the current image.
* @param newPosition index of the new image to show
*/
public void changeImageShown(int newPosition){
public void changeIndexImageShown(int newPosition){
if(newPosition < 0 || newPosition >= listOfAttachmentsToShow.size())
return;
@ -151,30 +181,4 @@ public class Carousel extends Composite{
}
/**
* Update the underneath set of enhanced images.
* @param imagesToShow the new set of images
*/
public void changeUnderneathImageSet(List<EnhancedImage> imagesToShowNew){
// hide the modal
mainModalPanel.hide();
// change the set
listOfAttachmentsToShow = imagesToShowNew;
// take the first object
currentPreviewPosition = 0;
// show it
shownImage.setUrl(listOfAttachmentsToShow.get(currentPreviewPosition).getImageUrl());
// change image tooltip
shownImage.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getToolTipToShow());
// change the title to the modal
mainModalPanel.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow());
}
}

View File

@ -7,15 +7,11 @@
}
.left-align {
vertical-align: center;
float: left;
color: #3B5998;
font-weight: bold;
}
.right-align {
vertical-align: center;
float: right;
color: #3B5998;
font-weight: bold;
}
@ -44,17 +40,26 @@
border-top: 1px solid #DDD;
border-radius: 0px 0px 6px 6px;
box-shadow: 0px 1px 0px #FFF inset;
vertical-align: middle;
}
.style-horizontal-panel {
width: 100%;
}
</ui:style>
<g:HTMLPanel>
<b:Button ui:field="showButton">Show the modal!</b:Button>
<b:Button ui:field="showButton">Show the carousel!</b:Button>
<b:Modal ui:field="mainModalPanel" backdrop="NORMAL" keyboard="true"
animation="true" dynamicSafe="true">
closeVisible="false" animation="true" dynamicSafe="true">
<b:Image styleName="{style.image}" ui:field="shownImage"></b:Image>
<b:ModalFooter>
<b:Button title="Previous" ui:field="prevButton" styleName="{style.left-align}"></b:Button>
<b:Button title="Next" ui:field="nextButton" styleName="{style.right-align}"></b:Button>
<g:HorizontalPanel styleName="{style.style-horizontal-panel}" ui:field="horizontaFooterPanel">
<b:Button title="Previous" ui:field="prevButton"
styleName="{style.left-align}"></b:Button>
<b:Button title="Download" ui:field="downloadButton">Download</b:Button>
<b:Button title="Close" ui:field="closeButton">Close</b:Button>
<b:Button title="Next" ui:field="nextButton" styleName="{style.right-align}"></b:Button>
</g:HorizontalPanel>
</b:ModalFooter>
</b:Modal>
</g:HTMLPanel>

View File

@ -1,4 +1,4 @@
h3 {
font-size: 14px !important;
color: #3B5998!important;
}
color: #3B5998 !important;
}