gCubeSystem
/
image-previewer-widget
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Massimiliano Assante 2017-05-23 12:09:25 +00:00
parent c0f2daf232
commit 0e2f646c6f
12 changed files with 120 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.classpath
View File

@ -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>

2
.settings/com.google.gdt.eclipse.core.prefs
View File

@ -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

6
.settings/org.eclipse.jdt.core.prefs
View File

@ -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.compliance=1.7
org.eclipse.jdt.core.compiler.codegen.targetPlatform=1.8
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

2
.settings/org.eclipse.wst.common.project.facet.core.xml
View File

@ -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>

4
distro/changelog.xml
View File

@ -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>

2
pom.xml
View File

@ -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

6
src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/CarouselInterface.java Normal file
View File

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

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

@ -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();
c.updateImages(images);
final Carousel c = new Carousel() {
@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);
}

BIN
src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/loading.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 11 KiB

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

@ -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){
// evaluate next index
currentPreviewPosition =
currentPreviewPosition == listOfAttachmentsToShow.size() -1 ?
0 : currentPreviewPosition + 1;
// show the image
showImage(currentPreviewPosition);
onClickNext();
}
/**
@ -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);
if(index == -1)
return;
// take the first object
currentPreviewPosition = index;
// show the image
showImage(currentPreviewPosition);
GWT.log("index=" + index);
if(index == -1) {
listOfAttachmentsToShow.clear();
listOfAttachmentsToShow.add(image);
index = 0;
showImage(index);
}
else {
// 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);
}
/**

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

@ -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"
styleName="arrow-left"></b:Button>
<b:Button title="Download" ui:field="downloadButtonSmart"></b:Button>
<b:Button title="Close" ui:field="closeButtonSmart"></b:Button>
<g:SimplePanel styleName="arrowYPos-left">
<b:Button title="Previous" ui:field="prevButton"
styleName="arrow-left"></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>

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

@ -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 {