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

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
This commit is contained in:
Costantino Perciante 2016-01-25 11:10:20 +00:00
parent 3caf2336b0
commit 34b883a285
6 changed files with 174 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/EnhancedImage.java
View File

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

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

@ -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);
}
}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

10
src/main/java/org/gcube/portlets/widgets/imagepreviewerwidget/client/resources/Resources.java Normal file
View File

@ -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();
}

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

@ -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());
}
}

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

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