From 3483b4727c06fd9d482f8e7b55f983823f89e77b Mon Sep 17 00:00:00 2001 From: Costantino Perciante Date: Fri, 22 Jan 2016 14:40:49 +0000 Subject: [PATCH] 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 --- .classpath | 1 - distro/INSTALL | 2 + distro/LICENSE | 7 ++ distro/MAINTAINERS | 6 + distro/README | 35 ++++++ distro/changelog.xml | 5 + distro/descriptor.xml | 48 ++++++++ distro/profile.xml | 25 +++++ distro/svnpath.txt | 1 + pom.xml | 62 ++++++++++- .../client/EnhancedImage.java | 103 ++++++++++++++---- .../client/ImagePreviewer.java | 12 +- .../client/ui/Carousel.java | 90 +++++++-------- .../client/ui/Carousel.ui.xml | 21 ++-- src/main/webapp/ImagePreviewer.css | 4 +- 15 files changed, 343 insertions(+), 79 deletions(-) create mode 100644 distro/INSTALL create mode 100644 distro/LICENSE create mode 100644 distro/MAINTAINERS create mode 100644 distro/README create mode 100644 distro/changelog.xml create mode 100644 distro/descriptor.xml create mode 100644 distro/profile.xml create mode 100644 distro/svnpath.txt diff --git a/.classpath b/.classpath index 65a07a3..8d950c4 100644 --- a/.classpath +++ b/.classpath @@ -31,7 +31,6 @@ - diff --git a/distro/INSTALL b/distro/INSTALL new file mode 100644 index 0000000..139597f --- /dev/null +++ b/distro/INSTALL @@ -0,0 +1,2 @@ + + diff --git a/distro/LICENSE b/distro/LICENSE new file mode 100644 index 0000000..cdb5851 --- /dev/null +++ b/distro/LICENSE @@ -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. + diff --git a/distro/MAINTAINERS b/distro/MAINTAINERS new file mode 100644 index 0000000..21f820d --- /dev/null +++ b/distro/MAINTAINERS @@ -0,0 +1,6 @@ +Mantainers +------- + +* Costantino Perciante (costantino.perciante@isti.cnr.it), CNR Pisa, + Istituto di Scienza e Tecnologie dell'Informazione "A. Faedo". + diff --git a/distro/README b/distro/README new file mode 100644 index 0000000..590030a --- /dev/null +++ b/distro/README @@ -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. diff --git a/distro/changelog.xml b/distro/changelog.xml new file mode 100644 index 0000000..3be48f0 --- /dev/null +++ b/distro/changelog.xml @@ -0,0 +1,5 @@ + + + First Release + + diff --git a/distro/descriptor.xml b/distro/descriptor.xml new file mode 100644 index 0000000..c468f13 --- /dev/null +++ b/distro/descriptor.xml @@ -0,0 +1,48 @@ + + servicearchive + + tar.gz + + / + + + ${distroDirectory} + / + true + + README + LICENSE + INSTALL + MAINTAINERS + changelog.xml + + 755 + true + + + target/apidocs + /${artifactId}/doc/api + true + 755 + + + + + ${distroDirectory}/profile.xml + ./ + true + + + target/${build.finalName}.jar + /${artifactId} + + + ${distroDirectory}/svnpath.txt + /${artifactId} + true + + + \ No newline at end of file diff --git a/distro/profile.xml b/distro/profile.xml new file mode 100644 index 0000000..255885a --- /dev/null +++ b/distro/profile.xml @@ -0,0 +1,25 @@ + + + + Service + + ${Description} + PortletWidgets + ${artifactId} + ${version} + + + ${artifactId} + ${version} + + ${groupId} + ${artifactId} + ${version} + + + target/${build.finalName}.jar + + + + + diff --git a/distro/svnpath.txt b/distro/svnpath.txt new file mode 100644 index 0000000..edacb04 --- /dev/null +++ b/distro/svnpath.txt @@ -0,0 +1 @@ +${scm.url} \ No newline at end of file diff --git a/pom.xml b/pom.xml index e7ebc34..bb8f15a 100644 --- a/pom.xml +++ b/pom.xml @@ -12,12 +12,17 @@ org.gcube.portlets.widgets image-previewer-widget - war + jar 1.0.0-SNAPSHOT gCube Image previewer widget gCube Image Previewer widget is a GWT Widget that can be used to show a preview of one or more images + + scm:svn:http://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/widgets/${project.artifactId} + scm:https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/widgets/${project.artifactId} + http://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/widgets/${project.artifactId} + @@ -128,6 +133,61 @@ + + org.apache.maven.plugins + maven-compiler-plugin + 2.3.2 + + 1.7 + 1.7 + + + + + org.apache.maven.plugins + maven-assembly-plugin + 2.2 + + + ${distroDirectory}/descriptor.xml + + + + + servicearchive + install + + single + + + + + + org.apache.maven.plugins + maven-resources-plugin + 2.5 + + + copy-profile + install + + copy-resources + + + target + + + ${distroDirectory} + true + + profile.xml + + + + + + + diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/EnhancedImage.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/EnhancedImage.java index 3410cbb..a9652c2 100644 --- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/EnhancedImage.java +++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/EnhancedImage.java @@ -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: + *
    + *
  • title to show: a title to show in the header of the carousel;
    • + *
  • tooltip : a tooltip shown on image hover event;
    • + *
  • download url: in case of a file, this field can be used to download it.
    • + *
* @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 + "]"; } + } diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java index 76cf350..d98009d 100644 --- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java +++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java @@ -11,13 +11,17 @@ import com.google.gwt.user.client.ui.RootPanel; * Entry point classes define onModuleLoad(). */ public class ImagePreviewer implements EntryPoint { - - /** * This is the entry point method. */ public void onModuleLoad() { - + + //test(); + + } + + private void test(){ + // random images for test List 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)); } } diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java index fb06901..4e1be31 100644 --- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java +++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java @@ -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 { } - + @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 listOfAttachmentsToShow; private int currentPreviewPosition; - - private static Carousel instance; - - public static Carousel getImagePreviewerInstance(List imagesToShow){ - - if(instance == null){ - - instance = new Carousel(imagesToShow); - - } - - return instance; - - } - private Carousel(List imagesToShow) { + /** + * Build a carousel that shows imagesToShow images. + * @param imagesToShow + */ + public Carousel(List 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 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()); - - } - } diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml index 107b2b4..c2e0108 100644 --- a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml +++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml @@ -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%; } - Show the modal! + Show the carousel! + closeVisible="false" animation="true" dynamicSafe="true"> - - + + + Download + Close + + diff --git a/src/main/webapp/ImagePreviewer.css b/src/main/webapp/ImagePreviewer.css index db098d8..f41e151 100644 --- a/src/main/webapp/ImagePreviewer.css +++ b/src/main/webapp/ImagePreviewer.css @@ -1,4 +1,4 @@ h3 { font-size: 14px !important; - color: #3B5998!important; -} \ No newline at end of file + color: #3B5998 !important; +}