From 34b883a2853f0175bc843a44beed8ee1f4912e07 Mon Sep 17 00:00:00 2001
From: Costantino Perciante <costantino.perciante@isti.cnr.it>
Date: Mon, 25 Jan 2016 11:10:20 +0000
Subject: [PATCH] Few changes: - added loading image before the browser fetches
 the image to show from its url; - added method to hide left and right arrows;
 - added download icon; - now if the user clicks on the image the next one is
 shown.

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@122484 82a268e6-3cf1-43bd-a215-b396298e98cf
---
 .../client/EnhancedImage.java                 |   2 +-
 .../client/ImagePreviewer.java                |  27 ++-
 .../client/resources/Loading.gif              | Bin 0 -> 5215 bytes
 .../client/resources/Resources.java           |  10 +
 .../client/ui/Carousel.java                   | 186 ++++++++++++------
 .../client/ui/Carousel.ui.xml                 |  27 +--
 6 files changed, 174 insertions(+), 78 deletions(-)
 create mode 100644 src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Loading.gif
 create mode 100644 src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Resources.java

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 604c650..75163c5 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,7 +3,7 @@ package org.gcube.portlets.widgets.imagepreviewerwidget.client;
 import com.github.gwtbootstrap.client.ui.Image;
 
 /**
- * This class contains the object to show within the carousel plus some other information:
+ * This class contains the image to show within the carousel plus the following 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>
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 3345193..0c657e4 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
@@ -5,7 +5,10 @@ import java.util.List;
 
 import org.gcube.portlets.widgets.imagepreviewerwidget.client.ui.Carousel;
 
+import com.github.gwtbootstrap.client.ui.Button;
 import com.google.gwt.core.client.EntryPoint;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.user.client.ui.RootPanel;
 
 /**
@@ -17,22 +20,38 @@ public class ImagePreviewer implements EntryPoint {
 	 */
 	public void onModuleLoad() {
 
-		//test();
+		// decomment for testing purpose
+		test();
 
 	}
 
-	@SuppressWarnings("unused")
 	private void test(){
 
 		// random images for test
 		List<EnhancedImage> images = new ArrayList<>();
+		images.add(new EnhancedImage("http://kreativportfolio.com/wp-content/uploads/2015/12/google-art-project-jacob-van-ruisdael--rough-sea-at-a-jetty--google-art-project.jpg"));
 		images.add(new EnhancedImage("https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg"));
+		images.add(new EnhancedImage("http://www.symphony-solutions.eu/wp-content/uploads/2014/09/GDG-DevFest-Ukraine-Banner.jpg"));
 		images.add(new EnhancedImage("http://images6.alphacoders.com/316/316963.jpg"));
 		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"));
-		Carousel c = new Carousel();
+		
+		
+		final Carousel c = new Carousel();
 		c.updateImages(images);
-		RootPanel.get("image-previewer-div").add(c);
+		
+		// button to show the carousel
+		Button b = new Button(new ClickHandler() {
+			
+			@Override
+			public void onClick(ClickEvent event) {
+				c.show();
+				
+			}
+		});
+		b.setText("Show images");
+		
+		RootPanel.get("image-previewer-div").add(b);
 	}
 }
diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Loading.gif b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..4c4d825935c0fc0e5a97f0559011438ee3e35971
GIT binary patch
literal 5215
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

literal 0
HcmV?d00001

diff --git a/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Resources.java b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Resources.java
new file mode 100644
index 0000000..b1eb152
--- /dev/null
+++ b/src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Resources.java
@@ -0,0 +1,10 @@
+package org.gcube.portlets.widgets.imagepreviewerwidget.client.resources;
+
+import com.google.gwt.resources.client.ClientBundle;
+import com.google.gwt.resources.client.ImageResource;
+
+public interface Resources extends ClientBundle {
+	
+	@Source("Loading.gif")
+	ImageResource loadingImage();
+}
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 8b11cce..ddddf26 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
@@ -3,17 +3,25 @@ package org.gcube.portlets.widgets.imagepreviewerwidget.client.ui;
 import java.util.List;
 
 import org.gcube.portlets.widgets.imagepreviewerwidget.client.EnhancedImage;
+import org.gcube.portlets.widgets.imagepreviewerwidget.client.resources.Resources;
 
 import com.github.gwtbootstrap.client.ui.Button;
 import com.github.gwtbootstrap.client.ui.Image;
 import com.github.gwtbootstrap.client.ui.Modal;
+import com.github.gwtbootstrap.client.ui.constants.IconSize;
+import com.github.gwtbootstrap.client.ui.constants.IconType;
 import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Style.Cursor;
 import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.LoadEvent;
+import com.google.gwt.event.dom.client.LoadHandler;
 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.HTML;
 import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
@@ -33,9 +41,6 @@ public class Carousel extends Composite{
 	@UiField
 	Modal mainModalPanel;
 
-	@UiField
-	Button showButton;
-
 	@UiField
 	Button prevButton;
 
@@ -51,55 +56,78 @@ public class Carousel extends Composite{
 	@UiField
 	Image shownImage;
 
+	@UiField
+	Image loadingImage;
+
 	@UiField
 	HorizontalPanel horizontaFooterPanel;
 
+	// list of enhanced images to show
 	private List<EnhancedImage> listOfAttachmentsToShow;
 
+	// show the image at currentPreviewPosition
 	private int currentPreviewPosition;
 
+	// other resources
+	private Resources resources = GWT.create(Resources.class);
+
 	/**
-	 * Build a carousel that shows imagesToShow images.
+	 * Build a carousel to show EnhancedImages.
 	 * @param imagesToShow
 	 */
 	public Carousel() {
 
 		initWidget(uiBinder.createAndBindUi(this));
 
-		// hide show button (not needed when the widget is used...it was used while creating the widget)
-		showButton.setVisible(false);
-
 		// 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 central buttons' cell widths to be equal TODO
+		//horizontaFooterPanel.setCellWidth(downloadButton, "200px");
+		//horizontaFooterPanel.setCellWidth(closeButton, "200px");
 
 		// set vertical alignment
-		horizontaFooterPanel.setCellVerticalAlignment((Widget)nextButton, VerticalPanel.ALIGN_MIDDLE);
+		horizontaFooterPanel.setCellVerticalAlignment(nextButton, VerticalPanel.ALIGN_MIDDLE);
 		horizontaFooterPanel.setCellVerticalAlignment(prevButton,  VerticalPanel.ALIGN_MIDDLE);
 
-		// prev button
-		prevButton.setText("<<");
+		// set icons
+		downloadButton.setIcon(IconType.DOWNLOAD);
+		closeButton.setIcon(IconType.COLLAPSE);
+		prevButton.setIcon(IconType.CHEVRON_LEFT);
+		nextButton.setIcon(IconType.CHEVRON_RIGHT);
 
-		// next button
-		nextButton.setText(">>");
+		// set icons'size
+		prevButton.setIconSize(IconSize.LARGE);
+		nextButton.setIconSize(IconSize.LARGE);
 
-	}
+		// TODO hide close button (for now)
+		closeButton.setVisible(false);
 
-	@UiHandler("showButton")
-	public void onClick(ClickEvent e){
+		//on user click on the image, go on
+		shownImage.addClickHandler(new ClickHandler() {
 
-		mainModalPanel.show();
+			@Override
+			public void onClick(ClickEvent event) {
+
+				if(nextButton.isVisible())
+					nextButton.click();
+
+			}
+		});
+
+		// set url of the loading image
+		loadingImage.setResource(resources.loadingImage());
+		
+		// set shownimage mouse icon to pointer
+		shownImage.getElement().getStyle().setCursor(Cursor.POINTER); 
 
 	}
 
 	@UiHandler("closeButton")
-	public void closeOnClick(ClickEvent e){
+	public void hideOnClick(ClickEvent e){
 
 		mainModalPanel.hide();
 
@@ -108,43 +136,34 @@ public class Carousel extends Composite{
 	@UiHandler("downloadButton")
 	public void downloadOnClick(ClickEvent e){
 
-		mainModalPanel.hide();
-		Window.open(listOfAttachmentsToShow.get(currentPreviewPosition).getDownloadUrl(), "_blank", "");
+		String downloadUrl = listOfAttachmentsToShow.get(currentPreviewPosition).getDownloadUrl();
+		if( downloadUrl != null){
+			mainModalPanel.hide();
+			Window.open(downloadUrl, "_blank", "");
+		}
 
 	}
 
 	@UiHandler("prevButton")
 	public void onClickPrev(ClickEvent e){
 
-		int prevPreviewPosition = currentPreviewPosition == 0 ? listOfAttachmentsToShow.size() - 1 : currentPreviewPosition - 1;
-		currentPreviewPosition = prevPreviewPosition;
+		// evaluate prev index
+		currentPreviewPosition = currentPreviewPosition == 0 ? listOfAttachmentsToShow.size() - 1 : currentPreviewPosition - 1;
 
-		// 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());
+		// show the image
+		showImage(currentPreviewPosition);
 
 	}
 
 	@UiHandler("nextButton")
 	public void onClickNext(ClickEvent e){
 
-		int nextPreviewPosition = currentPreviewPosition == listOfAttachmentsToShow.size() -1 ? 
+		// evaluate next index
+		currentPreviewPosition= currentPreviewPosition == listOfAttachmentsToShow.size() -1 ? 
 				0 : currentPreviewPosition + 1;
-		currentPreviewPosition = nextPreviewPosition;
 
-		// 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());
+		// show the image
+		showImage(currentPreviewPosition);
 
 	}
 
@@ -153,19 +172,13 @@ public class Carousel extends Composite{
 	 */
 	public void show(){
 
+		mainModalPanel.show();
+
 		// 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());
-
-		mainModalPanel.show();
+		// show the image
+		showImage(currentPreviewPosition);
 	}
 
 	/**
@@ -175,25 +188,25 @@ public class Carousel extends Composite{
 
 		// evaluate where this image is
 		int index = evaluateImagePosition(image);
-		
+
 		if(index == -1)
 			return;
 
 		// take the first object
 		currentPreviewPosition = index;
 
-		// 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());
+		// show the image
+		showImage(currentPreviewPosition);
 
+		// show the panel
 		mainModalPanel.show();
 	}
 
+	/**
+	 * Retrieve the index of such image
+	 * @param image
+	 * @return
+	 */
 	private int evaluateImagePosition(EnhancedImage image) {
 
 		for(int index = 0; index < listOfAttachmentsToShow.size(); index++){
@@ -217,4 +230,55 @@ public class Carousel extends Composite{
 
 	}
 
+	/**
+	 * Hide Previouse and Next arrows of the carousel.
+	 */
+	public void hideArrows(){
+
+		nextButton.setVisible(false);
+		prevButton.setVisible(false);
+
+	}
+
+	/**
+	 * Show image function
+	 * @param index the index of the image to show
+	 */
+	private void showImage(int index){
+
+		// show loading image and hide the shown one
+		loadingImage.setVisible(true);
+		shownImage.setVisible(false);
+
+		// when image is download ...
+		shownImage.addLoadHandler(new LoadHandler() {
+
+			@Override
+			public void onLoad(LoadEvent event) {
+
+				// swap
+				shownImage.setVisible(true);
+				loadingImage.setVisible(false);
+
+			}
+		});
+
+		// fetch the image from the url
+		shownImage.setUrl(listOfAttachmentsToShow.get(currentPreviewPosition).getImageUrl());
+
+		// change image tooltip
+		shownImage.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getToolTipToShow());
+
+		// change the title to the modal
+		String shownTitle = listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().length() > 50 ?
+				listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow().substring(0, 50) + "..." :
+					listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow();
+		HTML title = new HTML(shownTitle);
+		title.setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow());
+		
+		mainModalPanel.setTitle(title.getHTML());
+		
+		
+	}
+
 }
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 c2e0108..fc1031e 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
@@ -2,23 +2,25 @@
 <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
 	xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
 	<ui:style>
+	
 	.image {
 		width: 100%;
 	}
 	
-	.left-align {
-		color: #3B5998;
-		font-weight: bold;
+	.image-loading {
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		margin-top: 30%;
+		margin-bottom: 30%;
 	}
 	
-	.right-align {
+	.arrow {
 		color: #3B5998;
-		font-weight: bold;
 	}
 	
 	@external .modal-header;
 	.modal-header {
-		text-align: center;
 		font-family: "Helvetica Neue", Arial, sans-serif;
 		height: 20px;
 	}
@@ -28,7 +30,7 @@
 		position: relative;
 		max-height: 400px;
 		padding: 0;
-		overflow-y: auto;
+		overflow-y: hidden;
 	}
 	
 	@external .modal-footer;
@@ -48,17 +50,18 @@
 	}
 	</ui:style>
 	<g:HTMLPanel>
-		<b:Button ui:field="showButton">Show the carousel!</b:Button>
 		<b:Modal ui:field="mainModalPanel" backdrop="NORMAL" keyboard="true"
-			closeVisible="false" animation="true" dynamicSafe="true">
+			closeVisible="true" animation="true" dynamicSafe="true">
+			<b:Image styleName="{style.image-loading}" ui:field="loadingImage"></b:Image>
 			<b:Image styleName="{style.image}" ui:field="shownImage"></b:Image>
 			<b:ModalFooter>
-				<g:HorizontalPanel styleName="{style.style-horizontal-panel}" ui:field="horizontaFooterPanel">
+				<g:HorizontalPanel styleName="{style.style-horizontal-panel}"
+					ui:field="horizontaFooterPanel">
 					<b:Button title="Previous" ui:field="prevButton"
-						styleName="{style.left-align}"></b:Button>
+						styleName="{style.arrow}"></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>
+					<b:Button title="Next" ui:field="nextButton" styleName="{style.arrow}"></b:Button>
 				</g:HorizontalPanel>
 			</b:ModalFooter>
 		</b:Modal>