Updated style of arrows and loader, Added possibility to override click next and click prev

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@148950 82a268e6-3cf1-43bd-a215-b396298e98cf

.classpath

@@ -17,11 +17,6 @@
 			<attribute name="maven.pomderived" value="true"/>
 		</attributes>
 	</classpathentry>
-	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.7">
-		<attributes>
-			<attribute name="maven.pomderived" value="true"/>
-		</attributes>
-	</classpathentry>
 	<classpathentry kind="con" path="org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER">
 		<attributes>
 			<attribute name="maven.pomderived" value="true"/>
@@ -32,5 +27,11 @@
 			<attribute name="maven.pomderived" value="true"/>
 		</attributes>
 	</classpathentry>
+	<classpathentry kind="con" path="com.google.gwt.eclipse.core.GWT_CONTAINER"/>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8">
+		<attributes>
+			<attribute name="owner.project.facets" value="java"/>
+		</attributes>
+	</classpathentry>
 	<classpathentry kind="output" path="${webappDirectory}/WEB-INF/classes"/>
 </classpath>

.settings/com.google.gdt.eclipse.core.prefs

@@ -1,4 +1,4 @@
 eclipse.preferences.version=1
-lastWarOutDir=/home/costantino/workspace/image-previewer-widget/target/image-previewer-widget-1.0.0-SNAPSHOT
+lastWarOutDir=/Users/massi/Documents/workspace/image-previewer-widget/target/image-previewer-widget-1.2.0-SNAPSHOT
 warSrcDir=src/main/webapp
 warSrcDirIsOutput=false

.settings/org.eclipse.jdt.core.prefs

@@ -1,8 +1,8 @@
 eclipse.preferences.version=1
 org.eclipse.jdt.core.compiler.codegen.inlineJsrBytecode=enabled
-org.eclipse.jdt.core.compiler.codegen.targetPlatform=1.7
+org.eclipse.jdt.core.compiler.codegen.targetPlatform=1.8
-org.eclipse.jdt.core.compiler.compliance=1.7
+org.eclipse.jdt.core.compiler.compliance=1.8
 org.eclipse.jdt.core.compiler.problem.assertIdentifier=error
 org.eclipse.jdt.core.compiler.problem.enumIdentifier=error
 org.eclipse.jdt.core.compiler.problem.forbiddenReference=warning
-org.eclipse.jdt.core.compiler.source=1.7
+org.eclipse.jdt.core.compiler.source=1.8

.settings/org.eclipse.wst.common.project.facet.core.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <faceted-project>
   <fixed facet="wst.jsdt.web"/>
-  <installed facet="java" version="1.7"/>
   <installed facet="jst.web" version="2.3"/>
   <installed facet="wst.jsdt.web" version="1.0"/>
+  <installed facet="java" version="1.8"/>
 </faceted-project>

distro/changelog.xml

@@ -1,4 +1,8 @@
 <ReleaseNotes>
+	<Changeset component="org.gcube.portlets-widgets.image-previewer-widget.1-2-0"	date="2017-05-22">
+		<Change>Updated style of arrows and loader</Change>
+		<Change>Added possibility to override click next and click prev</Change>
+	</Changeset>
 	<Changeset component="org.gcube.portlets-widgets.image-previewer-widget.1-1-2"	date="2016-11-21">
 		<Change>Minor fix</Change>
 	</Changeset>

pom.xml

@@ -12,7 +12,7 @@
 
 	<groupId>org.gcube.portlets.widgets</groupId>
 	<artifactId>image-previewer-widget</artifactId>
-	<version>1.1.3-SNAPSHOT</version>
+	<version>1.2.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

src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/CarouselInterface.java

@@ -0,0 +1,6 @@
+package org.gcube.portlets.widgets.imagepreviewerwidget.client;
+
+public interface CarouselInterface {
+	 void onClickPrev();
+	 void onClickNext();
+}

src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ImagePreviewer.java

@@ -7,6 +7,7 @@ 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.core.shared.GWT;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.user.client.ui.RootPanel;
@@ -21,7 +22,7 @@ public class ImagePreviewer implements EntryPoint {
 	public void onModuleLoad() {
 
 		// decomment for testing purpose
-		// test();
+//		test();
 
 	}
 
@@ -40,8 +41,21 @@ public class ImagePreviewer implements EntryPoint {
 		images.add(new EnhancedImage("https://upload.wikimedia.org/wikipedia/it/1/17/Il_grande_Lebowski.jpg"));
 
 
-		final Carousel c = new Carousel();
+		final Carousel c = new Carousel() {
-		c.updateImages(images);
+			@Override
+			public void onClickNext() {
+				GWT.log("onClickNext intercepted");
+				show(new EnhancedImage("http://images6.alphacoders.com/316/316963.jpg"));
+			}
+			@Override
+			public void onClickPrev() {
+				GWT.log("onClickPrev intercepted");
+				show(new EnhancedImage("http://nerdist.com/wp-content/uploads/2014/07/ned-stark-970x545.jpg"));
+			}
+			
+		};
+		c.show(new EnhancedImage("http://ftp.d4science.org/previews/2771b8d3-7b39-451e-a642-fd7eea1c1baa.jpg"));
+		//c.updateImages(images);
 
 		// button to show the carousel
 		Button b = new Button(new ClickHandler() {
@@ -54,7 +68,7 @@ public class ImagePreviewer implements EntryPoint {
 		});
 		b.setText("Show preview");
 
-		b.click();
+	//	b.click();
 
 		RootPanel.get("image-previewer-div").add(b);
 	}

src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.java

@@ -1,7 +1,9 @@
 package org.gcube.portlets.widgets.imagepreviewerwidget.client.ui;
 
+import java.util.ArrayList;
 import java.util.List;
 
+import org.gcube.portlets.widgets.imagepreviewerwidget.client.CarouselInterface;
 import org.gcube.portlets.widgets.imagepreviewerwidget.client.EnhancedImage;
 import org.gcube.portlets.widgets.imagepreviewerwidget.client.ImageService;
 import org.gcube.portlets.widgets.imagepreviewerwidget.client.ImageServiceAsync;
@@ -14,6 +16,7 @@ import com.github.gwtbootstrap.client.ui.Modal;
 import com.github.gwtbootstrap.client.ui.constants.Device;
 import com.github.gwtbootstrap.client.ui.constants.IconSize;
 import com.github.gwtbootstrap.client.ui.constants.IconType;
+import com.github.gwtbootstrap.client.ui.resources.ButtonSize;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.NodeList;
@@ -38,7 +41,7 @@ import com.google.gwt.user.client.ui.Widget;
  * (costantino.perciante@isti.cnr.it)
  *
  */
-public class Carousel extends Composite{
+public class Carousel extends Composite implements CarouselInterface {
 
 	private static CarouselUiBinder uiBinder = GWT
 			.create(CarouselUiBinder.class);
@@ -94,7 +97,7 @@ public class Carousel extends Composite{
 	public Carousel() {
 
 		initWidget(uiBinder.createAndBindUi(this));
-
+		listOfAttachmentsToShow = new ArrayList<>();
 		// add custom styles to gwt-bootstrap-modal (just once)
 		mainModalPanel.addStyleName("modal-custom");
 		((Element)mainModalPanel.getElement().getChildNodes().getItem(1)).addClassName("modal-body-custom");
@@ -116,14 +119,17 @@ public class Carousel extends Composite{
 		closeButton.setWidth("90px");
 		downloadButtonSmart.setWidth("15px");
 		closeButtonSmart.setWidth("15px");
-
+		closeButtonSmart.setSize(ButtonSize.LARGE);
+		
 		// set icons
 		downloadButton.setIcon(IconType.DOWNLOAD_ALT);
 		closeButton.setIcon(IconType.COLLAPSE);
 		downloadButtonSmart.setIcon(IconType.DOWNLOAD_ALT);
 		closeButtonSmart.setIcon(IconType.COLLAPSE);
 		prevButton.setIcon(IconType.CHEVRON_LEFT);
+		prevButton.setSize(ButtonSize.LARGE);
 		nextButton.setIcon(IconType.CHEVRON_RIGHT);
+		nextButton.setSize(ButtonSize.LARGE);
 
 		// set icons'size
 		prevButton.setIconSize(IconSize.LARGE);
@@ -217,21 +223,31 @@ public class Carousel extends Composite{
 
 	}
 
+	@Override
+	public void onClickPrev() {
+		// evaluate prev index
+		currentPreviewPosition = currentPreviewPosition == 0 ? listOfAttachmentsToShow.size() - 1 : currentPreviewPosition - 1;
+		// show the image
+		showImage(currentPreviewPosition);
+	}
+
+	@Override
+	public void onClickNext() {
+		// evaluate next index
+		currentPreviewPosition = currentPreviewPosition == listOfAttachmentsToShow.size() -1 ? 	0 : currentPreviewPosition + 1;
+		// show the image
+		showImage(currentPreviewPosition);
+	}
+	
 	@UiHandler("prevButton")
 	/**
 	 * Show the previous image, if any.
 	 * @param e
 	 */
-	public void onClickPrev(ClickEvent e){
-
-		// evaluate prev index
-		currentPreviewPosition = 
-				currentPreviewPosition == 0 ? 
-						listOfAttachmentsToShow.size() - 1 : currentPreviewPosition - 1;
-
-						// show the image
-						showImage(currentPreviewPosition);
 
+	public void onClickPrev(ClickEvent e) {
+		GWT.log("onClickPrev classic");
+		onClickPrev();
 	}
 
 	@UiHandler("nextButton")
@@ -240,15 +256,7 @@ public class Carousel extends Composite{
 	 * @param e
 	 */
 	public void onClickNext(ClickEvent e){
-
+		onClickNext();
-		// evaluate next index
-		currentPreviewPosition = 
-				currentPreviewPosition == listOfAttachmentsToShow.size() -1 ? 
-						0 : currentPreviewPosition + 1;
-
-		// show the image
-		showImage(currentPreviewPosition);
-
 	}
 
 	/**
@@ -269,19 +277,22 @@ public class Carousel extends Composite{
 	 * Used to show a specific image of this carousel.
 	 */
 	public void show(EnhancedImage image){
-
+		GWT.log("image=" + image.getDownloadUrl());
 		// evaluate where this image is
 		int index = evaluateImagePosition(image);
-
+		GWT.log("index=" + index);
-		if(index == -1)
+		if(index == -1) {
-			return;
+			listOfAttachmentsToShow.clear();
-
+			listOfAttachmentsToShow.add(image);
-		// take the first object
+			index = 0;
-		currentPreviewPosition = index;
+			showImage(index);
-
+		}
-		// show the image
+		else {
-		showImage(currentPreviewPosition);
+			// take the first object
-
+			currentPreviewPosition = index;
+			// show the image
+			showImage(currentPreviewPosition);
+		}
 		// show the panel
 		mainModalPanel.show();
 	}
@@ -314,13 +325,22 @@ public class Carousel extends Composite{
 	}
 
 	/**
-	 * Hide Previous and Next arrows of the carousel.
+	 * use showArrows(boolean visible)
 	 */
-	public void hideArrows(){
+	@Deprecated
-
+	public void hideArrows() {
 		nextButton.setVisible(false);
 		prevButton.setVisible(false);
+	}
+	
 
+	/**
+	 * Hide/Show Previous and Next arrows of the carousel.
+	 * @param visible the visibility of the command arrows
+	 */
+	public void showArrows(boolean visible) {
+		nextButton.setVisible(visible);
+		prevButton.setVisible(visible);
 	}
 
 	/**

src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/ui/Carousel.ui.xml

@@ -1,6 +1,8 @@
 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
 <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">
+	xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"
+	xmlns:c="urn:import:org.gcube.portlets.widgets.imagepreviewerwidget.client.resources">
+
 	<g:HTMLPanel>
 		<b:Modal ui:field="mainModalPanel" backdrop="NORMAL" keyboard="true"
 			closeVisible="true" animation="true" dynamicSafe="true">
@@ -12,13 +14,17 @@
 				</g:HTMLPanel>
 
 				<g:HorizontalPanel ui:field="commands" styleName="command-container">
-					<b:Button title="Previous" ui:field="prevButton"
+				<g:SimplePanel styleName="arrowYPos-left">
-						styleName="arrow-left"></b:Button>
+						<b:Button title="Previous" ui:field="prevButton"
-						<b:Button  title="Download" ui:field="downloadButtonSmart"></b:Button>
+							styleName="arrow-left"></b:Button>
-						<b:Button  title="Close" ui:field="closeButtonSmart"></b:Button>
+					</g:SimplePanel>
+					<b:Button title="Download" ui:field="downloadButtonSmart"></b:Button>
+					<b:Button title="Close" ui:field="closeButtonSmart"></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="arrow-right"></b:Button>
+					<g:SimplePanel styleName="arrowYPos-right">
+						<b:Button title="Next" ui:field="nextButton" styleName="arrow-right"></b:Button>
+					</g:SimplePanel>
 				</g:HorizontalPanel>
 			</g:HTMLPanel>
 		</b:Modal>

src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/public/ImagePreviewer.css

@@ -33,6 +33,18 @@
 	}
 }
 
+.arrowYPos-right {
+	position: relative; 
+	top: -280px;
+	float: right;
+}
+
+.arrowYPos-left {
+	position: relative; 
+	top: -280px;
+	float: left;
+}
+
 .modal-custom {
 	min-width: 300px !important;
 	top: 3% !important;
@@ -69,6 +81,7 @@
 	height: 90%;
 	width: 100%;
 	margin-bottom: 2%;
+	cursor: pointer;
 }
 
 .command-container {