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:
parent
bf1903de5c
commit
4a17191707
6
pom.xml
6
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">
|
||||
|
||||
<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>
|
||||
|
|
|
@ -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;
|
||||
|
@ -49,9 +50,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) {
|
||||
|
||||
// init
|
||||
|
@ -73,17 +80,26 @@ 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/")){
|
||||
|
||||
@Override
|
||||
public void onClick(ClickEvent event) {
|
||||
showPreviewLabel.setText("Show");
|
||||
showPreviewLabel.addClickHandler(new ClickHandler() {
|
||||
|
||||
Window.alert("Image preview widget will be made soon...");
|
||||
@Override
|
||||
public void onClick(ClickEvent event) {
|
||||
|
||||
}
|
||||
});
|
||||
carousel.show();
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
}else{
|
||||
|
||||
// hide the show button and the separator label
|
||||
showPreviewLabel.setVisible(false);
|
||||
labelSeparator.setVisible(false);
|
||||
}
|
||||
|
||||
// style links
|
||||
downloadLabel.addStyleName("link");
|
||||
|
@ -102,4 +118,31 @@ public class AttachmentPreviewer extends Composite {
|
|||
|
||||
}
|
||||
|
||||
/**
|
||||
* 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();
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
@ -39,4 +30,58 @@ public class LinkPreviewer extends Composite {
|
|||
HTML descText;
|
||||
@UiField
|
||||
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();
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,16 +203,58 @@ 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);
|
||||
|
||||
for (Attachment otherAttachment : myFeed.getAttachments()) {
|
||||
// check if it is an image
|
||||
if(firstAttachment.getMimeType().contains("image/")){
|
||||
|
||||
// try to build the attachment viewer
|
||||
attachmentPreviewPanel.add(new AttachmentPreviewer(otherAttachment));
|
||||
EnhancedImage enhancedImage = new EnhancedImage(
|
||||
new com.github.gwtbootstrap.client.ui.Image(
|
||||
feed.getUriThumbnail()),
|
||||
feed.getLinkTitle(),
|
||||
feed.getLinkTitle(),
|
||||
feed.getUri()
|
||||
);
|
||||
|
||||
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();
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
/**
|
||||
|
|
|
@ -19,6 +19,8 @@
|
|||
<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' />
|
||||
|
||||
|
|
Loading…
Reference in New Issue