gCubeSystem
/
news-feed
16
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Started embedding image-preview widget 

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/user/news-feed@122483 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Costantino Perciante 2016-01-22 17:54:30 +00:00
parent bf1903de5c
commit 4a17191707
7 changed files with 212 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pom.xml
View File

@ -3,7 +3,6 @@
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<artifactId>maven-parent</artifactId>
<groupId>org.gcube.tools</groupId>
@ -94,6 +93,11 @@
<artifactId>social-networking-library</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.gcube.portlets.widgets</groupId>
<artifactId>image-previewer-widget</artifactId>
<version>1.0.0-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>org.gcube.common</groupId>
<artifactId>home-library</artifactId>

63
src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.java
View File

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

4
src/main/java/org/gcube/portlets/user/newsfeed/client/ui/AttachmentPreviewer.ui.xml
View File

@ -45,7 +45,7 @@
.display-inline-style {
display: inline-block;
margin-right:5px;
margin-right: 5px;
}
</ui:style>
<g:HTMLPanel styleName="{style.container-style}" ui:field="attachmentContainer">
@ -54,7 +54,7 @@
<g:Label ui:field="fileNameLabel" styleName="{style.label-filename-style}"></g:Label>
<g:HorizontalPanel>
<g:Anchor ui:field="downloadLabel" styleName="{style.label-download}"></g:Anchor>
<g:Label>-</g:Label>
<g:Label ui:field="labelSeparator">-</g:Label>
<g:Anchor ui:field="showPreviewLabel" styleName="{style.label-show}"></g:Anchor>
</g:HorizontalPanel>
</g:VerticalPanel>

87
src/main/java/org/gcube/portlets/user/newsfeed/client/ui/LinkPreviewer.java
View File

@ -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<Widget, LinkPreviewer> {
}
// 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("<a class=\"link\" target=\"_blank\" href=\"" + url + "\">"+title+"</a> <span style=\"color: #333;\"> - " + host+ "</span>");
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<Widget, LinkPreviewer> {
}
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("<a class=\"link\" target=\"_blank\" href=\"" + url + "\">"+title+"</a> <span style=\"color: #333;\"> - " + host+ "</span>");
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();
}
});
}
}

93
src/main/java/org/gcube/portlets/user/newsfeed/client/ui/TweetTemplate.java
View File

@ -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<SingleComment>();
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<EnhancedImage> listOfEnhancedImages;
EnhancedImage enhancedImage = new EnhancedImage(
new com.github.gwtbootstrap.client.ui.Image(
feed.getUriThumbnail()),
feed.getLinkTitle(),
feed.getLinkTitle(),
feed.getUri()
);
listOfEnhancedImages = new ArrayList<EnhancedImage>();
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<EnhancedImage> listOfEnhancedImages = new ArrayList<EnhancedImage>();
// 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();

2
src/main/java/org/gcube/portlets/user/newsfeed/server/NewsServiceImpl.java
View File

@ -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;
}
/**

2
src/main/resources/org/gcube/portlets/user/newsfeed/NewsFeed.gwt.xml
View File

@ -18,6 +18,8 @@
<inherits name='org.gcube.portlets.widgets.sessionchecker.SessionChecker' />
<inherits name='org.gcube.portlets.widgets.pickitem.PickItem' />
<inherits name='org.gcube.portal.databook.GCubeSocialNetworking' />
<inherits name="org.gcube.portlets.widgets.imagepreviewerwidget.ImagePreviewer" />
<!-- Specify the app entry point class. -->
<entry-point class='org.gcube.portlets.user.newsfeed.client.NewsFeed' />