diff --git a/pom.xml b/pom.xml index b2e9d3c..2f9083f 100644 --- a/pom.xml +++ b/pom.xml @@ -3,7 +3,6 @@ xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> 4.0.0 - maven-parent org.gcube.tools @@ -94,6 +93,11 @@ social-networking-library provided + + org.gcube.portlets.widgets + image-previewer-widget + 1.0.0-SNAPSHOT + org.gcube.common home-library diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.java b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.java index 88f6932..777837f 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.java +++ b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.java @@ -1,14 +1,15 @@ package org.gcube.portlets.user.newsfeed.client.ui; import org.gcube.portal.databook.shared.Attachment; +import org.gcube.portlets.widgets.imagepreviewerwidget.client.ui.Carousel; import com.google.gwt.core.client.GWT; +import com.google.gwt.dom.client.Style.Cursor; import com.google.gwt.dom.client.Style.Unit; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.uibinder.client.UiBinder; import com.google.gwt.uibinder.client.UiField; -import com.google.gwt.user.client.Window; import com.google.gwt.user.client.ui.Anchor; import com.google.gwt.user.client.ui.Composite; import com.google.gwt.user.client.ui.HTMLPanel; @@ -48,9 +49,15 @@ public class AttachmentPreviewer extends Composite { @UiField Anchor showPreviewLabel; + + @UiField + Label labelSeparator; // save attachment private Attachment attachment; + + // carousel reference + private Carousel carousel; public AttachmentPreviewer(Attachment a) { @@ -73,18 +80,27 @@ public class AttachmentPreviewer extends Composite { downloadLabel.setHref(attachment.getUri()); downloadLabel.setTarget("_blank"); - // preview TODO - showPreviewLabel.setText("Show"); - showPreviewLabel.addClickHandler(new ClickHandler() { + // preview in case of an image + if(a.getMimeType().contains("image/")){ + + showPreviewLabel.setText("Show"); + showPreviewLabel.addClickHandler(new ClickHandler() { - @Override - public void onClick(ClickEvent event) { + @Override + public void onClick(ClickEvent event) { - Window.alert("Image preview widget will be made soon..."); + carousel.show(); + + } + }); + + }else{ + + // hide the show button and the separator label + showPreviewLabel.setVisible(false); + labelSeparator.setVisible(false); + } - } - }); - // style links downloadLabel.addStyleName("link"); showPreviewLabel.addStyleName("link"); @@ -101,5 +117,32 @@ public class AttachmentPreviewer extends Composite { attachmentContainer.getElement().getStyle().setWidth(newWidth, unit); } + + /** + * Set carousel to open when the user clicks on the image. + * @param carousel + */ + public void onImageClickOpenCarousel(final Carousel carousel) { + + // save it + this.carousel = carousel; + + // change cursor type on hover + imagePreview.getElement().getStyle().setCursor(Cursor.POINTER); + + // change tooltipe + imagePreview.setTitle("Click for a preview"); + + // add handler + imagePreview.addClickHandler(new ClickHandler() { + + @Override + public void onClick(ClickEvent event) { + + carousel.show(); + + } + }); + } } diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.ui.xml b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.ui.xml index 0514b54..e56fd72 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.ui.xml +++ b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.ui.xml @@ -45,7 +45,7 @@ .display-inline-style { display: inline-block; - margin-right:5px; + margin-right: 5px; } @@ -54,7 +54,7 @@ - - + - diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/LinkPreviewer.java b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/LinkPreviewer.java index 66c00e9..ddaeafc 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/LinkPreviewer.java +++ b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/LinkPreviewer.java @@ -1,8 +1,10 @@ package org.gcube.portlets.user.newsfeed.client.ui; - - +import org.gcube.portlets.widgets.imagepreviewerwidget.client.ui.Carousel; 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.uibinder.client.UiBinder; import com.google.gwt.uibinder.client.UiField; import com.google.gwt.user.client.ui.Composite; @@ -10,27 +12,16 @@ import com.google.gwt.user.client.ui.HTML; import com.google.gwt.user.client.ui.Image; import com.google.gwt.user.client.ui.Widget; +/** + * Link Previewer class to show a link a preview. + * @author Costantino Perciante at ISTI-CNR + * @author Massimiliano Assante at ISTI-CNR + */ public class LinkPreviewer extends Composite { - private static LinkPreviewUiBinder uiBinder = GWT - .create(LinkPreviewUiBinder.class); - interface LinkPreviewUiBinder extends UiBinder { - } + // is the preview image still there ? + private boolean imageRemoved = false; - public LinkPreviewer(String title, String titleDesc, String host, String linkThumbUrl, String url) { - initWidget(uiBinder.createAndBindUi(this)); - if (linkThumbUrl == null || linkThumbUrl.equals("null")) - image.removeFromParent(); - else { - image.setUrl(linkThumbUrl); - image.setWidth("80px"); - } - titleArea.setHTML(""+title+" - " + host+ ""); - urlText.setHTML((url.length() > 70) ? url.substring(0, 70)+"..." : url); - String desc = titleDesc; - descText.setHTML((desc.length() > 256) ? desc.substring(0, 256)+"..." : desc); - - } @UiField HTML titleArea; @UiField @@ -38,5 +29,59 @@ public class LinkPreviewer extends Composite { @UiField HTML descText; @UiField - Image image; + Image image; + + private static LinkPreviewUiBinder uiBinder = GWT + .create(LinkPreviewUiBinder.class); + + interface LinkPreviewUiBinder extends UiBinder { + } + + public LinkPreviewer(String title, String titleDesc, String host, String linkThumbUrl, String url) { + initWidget(uiBinder.createAndBindUi(this)); + if (linkThumbUrl == null || linkThumbUrl.equals("null")){ + + image.removeFromParent(); + imageRemoved = true; + + } + else { + + image.setUrl(linkThumbUrl); + image.setWidth("80px"); + + } + titleArea.setHTML(""+title+" - " + host+ ""); + urlText.setHTML((url.length() > 70) ? url.substring(0, 70)+"..." : url); + String desc = titleDesc; + descText.setHTML((desc.length() > 256) ? desc.substring(0, 256)+"..." : desc); + + } + + /** + * Set carousel to open when the user clicks on the image. + * @param carousel + */ + public void onImageClickOpenCarousel(final Carousel carousel) { + + if(imageRemoved) + return; + + // change cursor type on hover + image.getElement().getStyle().setCursor(Cursor.POINTER); + + // change tooltipe + image.setTitle("Click for a preview"); + + // add handler + image.addClickHandler(new ClickHandler() { + + @Override + public void onClick(ClickEvent event) { + + carousel.show(); + + } + }); + } } diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.java b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.java index 14a0e3f..9c102a7 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.java +++ b/src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.java @@ -21,6 +21,8 @@ import org.gcube.portlets.user.newsfeed.client.event.SeeLikesEvent; import org.gcube.portlets.user.newsfeed.client.event.UnLikeEvent; import org.gcube.portlets.user.newsfeed.client.panels.NewsFeedPanel; import org.gcube.portlets.user.newsfeed.shared.EnhancedFeed; +import org.gcube.portlets.widgets.imagepreviewerwidget.client.EnhancedImage; +import org.gcube.portlets.widgets.imagepreviewerwidget.client.ui.Carousel; import com.google.gwt.core.client.GWT; import com.google.gwt.core.client.RunAsyncCallback; @@ -74,6 +76,9 @@ public class TweetTemplate extends Composite { private TweetTemplate myInstance; + // Carousel from the image-previewer widget + private Carousel carousel; + /** * tell if this tweet is belonging to the current user */ @@ -133,6 +138,7 @@ public class TweetTemplate extends Composite { Feed feed = myFeed.getFeed(); this.eventBus = eventBus; this.isUsers = myFeed.isUsers(); + this.carousel = new Carousel(); myComments = new ArrayList(); if (isUsers || myUserInfo.isAdmin()) { @@ -142,15 +148,38 @@ public class TweetTemplate extends Composite { closeImage.removeFromParent(); } - GWT.log("Is feed multiupload? " + feed.isMultiFileUpload()); // if there is one attachment, maintain backward compatibility if (feed.getUri() != null && feed.getUri().compareTo("") != 0 && feed.getLinkTitle() != null && feed.getLinkTitle().compareTo("") != 0 && !feed.isMultiFileUpload()) { - // add link preview - previewPanel.add(new LinkPreviewer(feed.getLinkTitle(), feed.getLinkDescription(), feed.getLinkHost(), feed.getUriThumbnail(), feed.getUri())); - // hide the attachments panel attachmentPreviewPanel.setVisible(false); + + LinkPreviewer linkPreviewer = new LinkPreviewer(feed.getLinkTitle(), feed.getLinkDescription(), feed.getLinkHost(), feed.getUriThumbnail(), feed.getUri()); + + // enable the image previewer if it is an image (mime) + if(feed.getLinkHost().contains("image/")){ + + ArrayList listOfEnhancedImages; + + EnhancedImage enhancedImage = new EnhancedImage( + new com.github.gwtbootstrap.client.ui.Image( + feed.getUriThumbnail()), + feed.getLinkTitle(), + feed.getLinkTitle(), + feed.getUri() + ); + + listOfEnhancedImages = new ArrayList(); + listOfEnhancedImages.add(enhancedImage); + carousel.updateImages(listOfEnhancedImages); + + // set handler on the linkpreviewer image to show this carousel + linkPreviewer.onImageClickOpenCarousel(carousel); + + } + + // add link preview + previewPanel.add(linkPreviewer); } // in case there are attachments, we have to fill attachmentPreviewPanel instead of the previewPanel @@ -162,8 +191,10 @@ public class TweetTemplate extends Composite { // hide link preview panel previewPanel.setVisible(false); + // prepare the carousel + ArrayList listOfEnhancedImages = new ArrayList(); + // remember that one attachment is stored in the fields: uri, uriThumbnail, linkTitle, linkDescription, linkHost - // build up an attachment Attachment firstAttachment = new Attachment( feed.getKey(), // it is meaningless but it's needed feed.getUri(), @@ -172,15 +203,57 @@ public class TweetTemplate extends Composite { feed.getUriThumbnail(), feed.getLinkHost()); - // add it to the panel - attachmentPreviewPanel.add(new AttachmentPreviewer(firstAttachment)); + // create first attachment previewer and pass it the carousel + AttachmentPreviewer firstAttachmentPreviewer = new AttachmentPreviewer(firstAttachment); + + // check if it is an image + if(firstAttachment.getMimeType().contains("image/")){ - for (Attachment otherAttachment : myFeed.getAttachments()) { + EnhancedImage enhancedImage = new EnhancedImage( + new com.github.gwtbootstrap.client.ui.Image( + feed.getUriThumbnail()), + feed.getLinkTitle(), + feed.getLinkTitle(), + feed.getUri() + ); - // try to build the attachment viewer - attachmentPreviewPanel.add(new AttachmentPreviewer(otherAttachment)); + listOfEnhancedImages.add(enhancedImage); + firstAttachmentPreviewer.onImageClickOpenCarousel(carousel); } + + // add the first attachment to the panel + attachmentPreviewPanel.add(firstAttachmentPreviewer); + + // check the others + for (Attachment otherAttachment : myFeed.getAttachments()) { + + AttachmentPreviewer attachmentPreviewer = new AttachmentPreviewer(otherAttachment); + + if(otherAttachment.getMimeType().contains("image/")){ + + EnhancedImage enhancedImage = new EnhancedImage( + new com.github.gwtbootstrap.client.ui.Image( + otherAttachment.getThumbnailURL()), + otherAttachment.getName(), + otherAttachment.getName(), + otherAttachment.getUri() + ); + + listOfEnhancedImages.add(enhancedImage); + + // pass the carousel + attachmentPreviewer.onImageClickOpenCarousel(carousel); + + } + + // try to build the attachment viewer + attachmentPreviewPanel.add(attachmentPreviewer); + + } + + // update the carousel's images + carousel.updateImages(listOfEnhancedImages); // invoke append label attachmentPreviewPanel.appendShowMoreLabel(); diff --git a/src/main/java/org/gcube/portlets/user/newsfeed/server/NewsServiceImpl.java b/src/main/java/org/gcube/portlets/user/newsfeed/server/NewsServiceImpl.java index e9397c3..eb6b09e 100644 --- a/src/main/java/org/gcube/portlets/user/newsfeed/server/NewsServiceImpl.java +++ b/src/main/java/org/gcube/portlets/user/newsfeed/server/NewsServiceImpl.java @@ -124,7 +124,7 @@ public class NewsServiceImpl extends RemoteServiceServlet implements NewsService */ public String getDevelopmentUser() { String user = NewsConstants.TEST_USER; - // user = "costantino.perciante"; + user = "costantino.perciante"; return user; } /** diff --git a/src/main/resources/org/gcube/portlets/user/newsfeed/NewsFeed.gwt.xml b/src/main/resources/org/gcube/portlets/user/newsfeed/NewsFeed.gwt.xml index ed67b14..23c3bc7 100644 --- a/src/main/resources/org/gcube/portlets/user/newsfeed/NewsFeed.gwt.xml +++ b/src/main/resources/org/gcube/portlets/user/newsfeed/NewsFeed.gwt.xml @@ -18,6 +18,8 @@ + +