2016-01-21 17:50:48 +01:00
|
|
|
package org.gcube.portlets.widgets.imagepreviewerwidget.client.ui;
|
|
|
|
|
|
|
|
import java.util.List;
|
|
|
|
|
|
|
|
import org.gcube.portlets.widgets.imagepreviewerwidget.client.EnhancedImage;
|
2016-01-25 12:10:20 +01:00
|
|
|
import org.gcube.portlets.widgets.imagepreviewerwidget.client.resources.Resources;
|
2016-01-21 17:50:48 +01:00
|
|
|
|
|
|
|
import com.github.gwtbootstrap.client.ui.Button;
|
|
|
|
import com.github.gwtbootstrap.client.ui.Image;
|
|
|
|
import com.github.gwtbootstrap.client.ui.Modal;
|
2016-01-25 12:10:20 +01:00
|
|
|
import com.github.gwtbootstrap.client.ui.constants.IconSize;
|
|
|
|
import com.github.gwtbootstrap.client.ui.constants.IconType;
|
2016-01-21 17:50:48 +01:00
|
|
|
import com.google.gwt.core.client.GWT;
|
2016-01-25 12:10:20 +01:00
|
|
|
import com.google.gwt.dom.client.Style.Cursor;
|
2016-01-21 17:50:48 +01:00
|
|
|
import com.google.gwt.event.dom.client.ClickEvent;
|
2016-01-25 12:10:20 +01:00
|
|
|
import com.google.gwt.event.dom.client.ClickHandler;
|
|
|
|
import com.google.gwt.event.dom.client.LoadEvent;
|
|
|
|
import com.google.gwt.event.dom.client.LoadHandler;
|
2016-01-21 17:50:48 +01:00
|
|
|
import com.google.gwt.uibinder.client.UiBinder;
|
|
|
|
import com.google.gwt.uibinder.client.UiField;
|
|
|
|
import com.google.gwt.uibinder.client.UiHandler;
|
2016-01-22 15:40:49 +01:00
|
|
|
import com.google.gwt.user.client.Window;
|
2016-01-21 17:50:48 +01:00
|
|
|
import com.google.gwt.user.client.ui.Composite;
|
2016-01-22 15:40:49 +01:00
|
|
|
import com.google.gwt.user.client.ui.HorizontalPanel;
|
|
|
|
import com.google.gwt.user.client.ui.VerticalPanel;
|
2016-01-21 17:50:48 +01:00
|
|
|
import com.google.gwt.user.client.ui.Widget;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* A carousel for image/file previews.
|
2016-01-25 15:21:00 +01:00
|
|
|
* @author Costantino Perciante at ISTI-CNR
|
|
|
|
* (costantino.perciante@isti.cnr.it)
|
|
|
|
*
|
2016-01-21 17:50:48 +01:00
|
|
|
*/
|
|
|
|
public class Carousel extends Composite{
|
|
|
|
|
|
|
|
private static CarouselUiBinder uiBinder = GWT
|
|
|
|
.create(CarouselUiBinder.class);
|
|
|
|
|
|
|
|
interface CarouselUiBinder extends UiBinder<Widget, Carousel> {
|
|
|
|
}
|
2016-01-22 15:40:49 +01:00
|
|
|
|
2016-01-21 17:50:48 +01:00
|
|
|
@UiField
|
|
|
|
Modal mainModalPanel;
|
|
|
|
|
|
|
|
@UiField
|
|
|
|
Button prevButton;
|
|
|
|
|
|
|
|
@UiField
|
|
|
|
Button nextButton;
|
|
|
|
|
2016-01-22 15:40:49 +01:00
|
|
|
@UiField
|
|
|
|
Button downloadButton;
|
|
|
|
|
|
|
|
@UiField
|
|
|
|
Button closeButton;
|
|
|
|
|
2016-01-21 17:50:48 +01:00
|
|
|
@UiField
|
|
|
|
Image shownImage;
|
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
@UiField
|
|
|
|
Image loadingImage;
|
|
|
|
|
2016-01-22 15:40:49 +01:00
|
|
|
@UiField
|
|
|
|
HorizontalPanel horizontaFooterPanel;
|
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// list of enhanced images to show
|
2016-01-21 17:50:48 +01:00
|
|
|
private List<EnhancedImage> listOfAttachmentsToShow;
|
|
|
|
|
2016-01-25 15:21:00 +01:00
|
|
|
// index of the image shown
|
2016-01-21 17:50:48 +01:00
|
|
|
private int currentPreviewPosition;
|
2016-01-21 18:50:30 +01:00
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// other resources
|
|
|
|
private Resources resources = GWT.create(Resources.class);
|
|
|
|
|
2016-01-22 15:40:49 +01:00
|
|
|
/**
|
2016-01-25 12:10:20 +01:00
|
|
|
* Build a carousel to show EnhancedImages.
|
2016-01-22 15:40:49 +01:00
|
|
|
* @param imagesToShow
|
|
|
|
*/
|
2016-01-22 18:14:48 +01:00
|
|
|
public Carousel() {
|
2016-01-21 17:50:48 +01:00
|
|
|
|
|
|
|
initWidget(uiBinder.createAndBindUi(this));
|
2016-01-22 18:51:57 +01:00
|
|
|
|
2016-01-22 15:40:49 +01:00
|
|
|
// 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);
|
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// set central buttons' cell widths to be equal TODO
|
|
|
|
//horizontaFooterPanel.setCellWidth(downloadButton, "200px");
|
|
|
|
//horizontaFooterPanel.setCellWidth(closeButton, "200px");
|
2016-01-22 15:40:49 +01:00
|
|
|
|
|
|
|
// set vertical alignment
|
2016-01-25 12:10:20 +01:00
|
|
|
horizontaFooterPanel.setCellVerticalAlignment(nextButton, VerticalPanel.ALIGN_MIDDLE);
|
2016-01-22 15:40:49 +01:00
|
|
|
horizontaFooterPanel.setCellVerticalAlignment(prevButton, VerticalPanel.ALIGN_MIDDLE);
|
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// set icons
|
|
|
|
downloadButton.setIcon(IconType.DOWNLOAD);
|
|
|
|
closeButton.setIcon(IconType.COLLAPSE);
|
|
|
|
prevButton.setIcon(IconType.CHEVRON_LEFT);
|
|
|
|
nextButton.setIcon(IconType.CHEVRON_RIGHT);
|
2016-01-21 17:50:48 +01:00
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// set icons'size
|
|
|
|
prevButton.setIconSize(IconSize.LARGE);
|
|
|
|
nextButton.setIconSize(IconSize.LARGE);
|
2016-01-21 18:50:30 +01:00
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// TODO hide close button (for now)
|
|
|
|
closeButton.setVisible(false);
|
2016-01-21 17:50:48 +01:00
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
//on user click on the image, go on
|
|
|
|
shownImage.addClickHandler(new ClickHandler() {
|
2016-01-21 17:50:48 +01:00
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
@Override
|
|
|
|
public void onClick(ClickEvent event) {
|
|
|
|
|
|
|
|
if(nextButton.isVisible())
|
|
|
|
nextButton.click();
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// set url of the loading image
|
|
|
|
loadingImage.setResource(resources.loadingImage());
|
|
|
|
|
2016-01-25 15:21:00 +01:00
|
|
|
// set shownImage mouse icon to pointer
|
2016-01-25 12:10:20 +01:00
|
|
|
shownImage.getElement().getStyle().setCursor(Cursor.POINTER);
|
2016-01-21 17:50:48 +01:00
|
|
|
}
|
|
|
|
|
2016-01-22 15:40:49 +01:00
|
|
|
@UiHandler("closeButton")
|
2016-01-25 12:10:20 +01:00
|
|
|
public void hideOnClick(ClickEvent e){
|
2016-01-22 15:40:49 +01:00
|
|
|
|
|
|
|
mainModalPanel.hide();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
@UiHandler("downloadButton")
|
2016-01-25 15:36:39 +01:00
|
|
|
/**
|
|
|
|
* When the user pushes this button, try to download the file.
|
|
|
|
* @param e
|
|
|
|
*/
|
2016-01-22 15:40:49 +01:00
|
|
|
public void downloadOnClick(ClickEvent e){
|
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
String downloadUrl = listOfAttachmentsToShow.get(currentPreviewPosition).getDownloadUrl();
|
2016-01-25 15:21:00 +01:00
|
|
|
|
|
|
|
if(downloadUrl != null){
|
2016-01-25 12:10:20 +01:00
|
|
|
mainModalPanel.hide();
|
|
|
|
Window.open(downloadUrl, "_blank", "");
|
|
|
|
}
|
2016-01-22 15:40:49 +01:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2016-01-21 17:50:48 +01:00
|
|
|
@UiHandler("prevButton")
|
2016-01-25 15:36:39 +01:00
|
|
|
/**
|
|
|
|
* Show the previous image, if any.
|
|
|
|
* @param e
|
|
|
|
*/
|
2016-01-21 17:50:48 +01:00
|
|
|
public void onClickPrev(ClickEvent e){
|
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// evaluate prev index
|
2016-01-25 15:21:00 +01:00
|
|
|
currentPreviewPosition =
|
|
|
|
currentPreviewPosition == 0 ? listOfAttachmentsToShow.size() - 1 : currentPreviewPosition - 1;
|
2016-01-21 17:50:48 +01:00
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// show the image
|
|
|
|
showImage(currentPreviewPosition);
|
2016-01-21 17:50:48 +01:00
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
@UiHandler("nextButton")
|
2016-01-25 15:36:39 +01:00
|
|
|
/**
|
|
|
|
* Show the next image, if any.
|
|
|
|
* @param e
|
|
|
|
*/
|
2016-01-21 17:50:48 +01:00
|
|
|
public void onClickNext(ClickEvent e){
|
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// evaluate next index
|
2016-01-25 15:21:00 +01:00
|
|
|
currentPreviewPosition =
|
|
|
|
currentPreviewPosition == listOfAttachmentsToShow.size() -1 ?
|
2016-01-21 17:50:48 +01:00
|
|
|
0 : currentPreviewPosition + 1;
|
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// show the image
|
|
|
|
showImage(currentPreviewPosition);
|
2016-01-21 17:50:48 +01:00
|
|
|
|
|
|
|
}
|
2016-01-22 18:51:57 +01:00
|
|
|
|
2016-01-22 18:02:17 +01:00
|
|
|
/**
|
2016-01-25 15:36:39 +01:00
|
|
|
* Used to show this carousel (starting from the initial image).
|
2016-01-22 18:02:17 +01:00
|
|
|
*/
|
|
|
|
public void show(){
|
2016-01-22 18:51:57 +01:00
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
mainModalPanel.show();
|
|
|
|
|
2016-01-25 15:21:00 +01:00
|
|
|
// take the first image
|
2016-01-22 18:14:48 +01:00
|
|
|
currentPreviewPosition = 0;
|
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// show the image
|
|
|
|
showImage(currentPreviewPosition);
|
2016-01-22 18:02:17 +01:00
|
|
|
}
|
2016-01-21 17:50:48 +01:00
|
|
|
|
|
|
|
/**
|
2016-01-22 18:51:57 +01:00
|
|
|
* Used to show a specific image of this carousel.
|
2016-01-21 17:50:48 +01:00
|
|
|
*/
|
2016-01-22 18:51:57 +01:00
|
|
|
public void show(EnhancedImage image){
|
2016-01-21 17:50:48 +01:00
|
|
|
|
2016-01-22 18:51:57 +01:00
|
|
|
// evaluate where this image is
|
|
|
|
int index = evaluateImagePosition(image);
|
2016-01-25 12:10:20 +01:00
|
|
|
|
2016-01-22 18:51:57 +01:00
|
|
|
if(index == -1)
|
2016-01-21 17:50:48 +01:00
|
|
|
return;
|
|
|
|
|
2016-01-22 18:51:57 +01:00
|
|
|
// take the first object
|
|
|
|
currentPreviewPosition = index;
|
2016-01-21 17:50:48 +01:00
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// show the image
|
|
|
|
showImage(currentPreviewPosition);
|
2016-01-21 17:50:48 +01:00
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
// show the panel
|
2016-01-22 18:51:57 +01:00
|
|
|
mainModalPanel.show();
|
2016-01-21 17:50:48 +01:00
|
|
|
}
|
2016-01-22 18:51:57 +01:00
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
/**
|
2016-01-25 15:36:39 +01:00
|
|
|
* Retrieve the index of such image.
|
2016-01-25 12:10:20 +01:00
|
|
|
* @param image
|
2016-01-25 15:21:00 +01:00
|
|
|
* @return -1 if no image matches
|
2016-01-25 12:10:20 +01:00
|
|
|
*/
|
2016-01-22 18:51:57 +01:00
|
|
|
private int evaluateImagePosition(EnhancedImage image) {
|
|
|
|
|
|
|
|
for(int index = 0; index < listOfAttachmentsToShow.size(); index++){
|
|
|
|
|
|
|
|
if(listOfAttachmentsToShow.get(index).equals(image))
|
|
|
|
return index;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return -1;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2016-01-22 18:02:17 +01:00
|
|
|
/**
|
2016-01-25 15:36:39 +01:00
|
|
|
* Change the set of images to show.
|
2016-01-22 18:02:17 +01:00
|
|
|
* @param imagesToShow
|
|
|
|
*/
|
|
|
|
public void updateImages(List<EnhancedImage> imagesToShow){
|
2016-01-22 18:51:57 +01:00
|
|
|
|
2016-01-22 18:02:17 +01:00
|
|
|
listOfAttachmentsToShow = imagesToShow;
|
2016-01-22 18:51:57 +01:00
|
|
|
|
2016-01-22 18:02:17 +01:00
|
|
|
}
|
2016-01-21 17:50:48 +01:00
|
|
|
|
2016-01-25 12:10:20 +01:00
|
|
|
/**
|
2016-01-25 15:36:39 +01:00
|
|
|
* Hide Previous and Next arrows of the carousel.
|
2016-01-25 12:10:20 +01:00
|
|
|
*/
|
|
|
|
public void hideArrows(){
|
|
|
|
|
|
|
|
nextButton.setVisible(false);
|
|
|
|
prevButton.setVisible(false);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2016-01-25 15:36:39 +01:00
|
|
|
* Show image function.
|
2016-01-25 12:10:20 +01:00
|
|
|
* @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();
|
2016-01-25 15:21:00 +01:00
|
|
|
mainModalPanel.setTitle(shownTitle);
|
2016-01-25 12:10:20 +01:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2016-01-21 17:50:48 +01:00
|
|
|
}
|