partially impleemented pickuser (mentions)
git-svn-id: https://svn.research-infrastructures.eu/d4science/gcube/trunk/portlets/user/share-updates@73359 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
parent
700efdcf64
commit
110bb620a2
|
|
@ -5,24 +5,191 @@ import java.util.Date;
|
|||
|
||||
import org.gcube.portal.databook.shared.Like;
|
||||
import org.gcube.portlets.user.shareupdates.client.form.SingleUserTemplate;
|
||||
import org.glite.security.voms.admin.operations.groups.AddMemberOperation;
|
||||
|
||||
import com.google.gwt.core.client.GWT;
|
||||
import com.google.gwt.event.dom.client.KeyCodes;
|
||||
import com.google.gwt.event.dom.client.KeyDownEvent;
|
||||
import com.google.gwt.event.dom.client.KeyDownHandler;
|
||||
import com.google.gwt.event.dom.client.MouseOutEvent;
|
||||
import com.google.gwt.event.dom.client.MouseOutHandler;
|
||||
import com.google.gwt.event.dom.client.MouseOverEvent;
|
||||
import com.google.gwt.event.dom.client.MouseOverHandler;
|
||||
import com.google.gwt.user.client.Event;
|
||||
import com.google.gwt.user.client.Window;
|
||||
import com.google.gwt.user.client.ui.FocusPanel;
|
||||
import com.google.gwt.user.client.ui.KeyboardListener;
|
||||
import com.google.gwt.user.client.ui.MultiWordSuggestOracle;
|
||||
import com.google.gwt.user.client.ui.PopupPanel;
|
||||
import com.google.gwt.user.client.ui.Widget;
|
||||
import com.google.gwt.user.client.ui.SuggestOracle.Callback;
|
||||
import com.google.gwt.user.client.ui.SuggestOracle.Request;
|
||||
import com.google.gwt.user.client.ui.SuggestOracle.Response;
|
||||
import com.google.gwt.user.client.ui.SuggestOracle.Suggestion;
|
||||
import com.google.gwt.user.client.ui.VerticalPanel;
|
||||
|
||||
public class PickUsersDialog extends PopupPanel {
|
||||
|
||||
public final static int ARROW_UP = 38;
|
||||
public final static int ARROW_DOWN = 40;
|
||||
|
||||
public final static int DELETE = KeyCodes.KEY_DELETE;
|
||||
public final static int ENTER = KeyCodes.KEY_ENTER;
|
||||
public final static int ESCAPE = KeyCodes.KEY_ESCAPE;
|
||||
|
||||
private int limit = 10;
|
||||
|
||||
private final MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
|
||||
|
||||
private ArrayList<String> users = new ArrayList<String>();
|
||||
private int displayIndexSelected;
|
||||
|
||||
private FocusPanel focusPanel = new FocusPanel();
|
||||
private VerticalPanel mainPanel = new VerticalPanel();
|
||||
|
||||
//needed because is selected when it popups
|
||||
private SingleUserTemplate first;
|
||||
|
||||
public PickUsersDialog() {
|
||||
super(true, false);
|
||||
setWidth("515px");
|
||||
setWidget(mainPanel);
|
||||
focusPanel.setWidth("525px");
|
||||
mainPanel.setWidth("525px");
|
||||
setWidth("525px");
|
||||
focusPanel.add(mainPanel);
|
||||
setWidget(focusPanel);
|
||||
setStyleName("pickDialog");
|
||||
|
||||
oracle.add("Massi Assante");
|
||||
oracle.add("Gino Strada");
|
||||
oracle.add("Marco Pozzi");
|
||||
oracle.add("Marino Marini");
|
||||
oracle.add("Franco Zoppi");
|
||||
oracle.add("Anna Mazza");
|
||||
oracle.add("Antonio Gioia");
|
||||
|
||||
//remove the first selected when hovering
|
||||
focusPanel.addMouseOverHandler(new MouseOverHandler() {
|
||||
@Override
|
||||
public void onMouseOver(MouseOverEvent event) {
|
||||
if (first != null)
|
||||
first.removeStyleName("pickperson-selected");
|
||||
}
|
||||
});
|
||||
|
||||
focusPanel.addMouseOutHandler(new MouseOutHandler() {
|
||||
@Override
|
||||
public void onMouseOut(MouseOutEvent event) {
|
||||
select(displayIndexSelected);
|
||||
}
|
||||
});
|
||||
|
||||
focusPanel.addKeyDownHandler(new KeyDownHandler() {
|
||||
|
||||
@Override
|
||||
public void onKeyDown(KeyDownEvent event) {
|
||||
// TODO Auto-generated method stub
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public void fill(ArrayList<String> users) {
|
||||
for (String user : users) {
|
||||
mainPanel.add(new SingleUserTemplate(new Like("", "", new Date(), "", user, "")));
|
||||
/**
|
||||
* called for each keyUp event from the user
|
||||
* @param event
|
||||
* @param x
|
||||
* @param y
|
||||
* @param currText
|
||||
*/
|
||||
public void onKeyUp(Event event, int x, int y, String currText) {
|
||||
if (currText.endsWith("@")) { //the only way i found to intercept @
|
||||
setPopupPosition(x, y);
|
||||
hide();
|
||||
} else if (currText.contains("@")) {
|
||||
if (pickingUser(currText)) {
|
||||
handleNonCharKeys(event);
|
||||
}
|
||||
} else if (!currText.contains("@"))
|
||||
hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* split the text and keeps listening for user keyboard events
|
||||
* @param currText the text being typed
|
||||
*/
|
||||
private boolean pickingUser(String currText) {
|
||||
String[] toSplit = currText.split("@"); //get the interesting part
|
||||
if (toSplit[1].trim().length() > 0) {
|
||||
showSuggestions(toSplit[1]);
|
||||
return true;
|
||||
}
|
||||
hide();
|
||||
return false;
|
||||
}
|
||||
/**
|
||||
* handles the nonchar events (arrows, esc, enter etc)
|
||||
* @param event
|
||||
*/
|
||||
private void handleNonCharKeys(Event event) {
|
||||
switch (event.getKeyCode()) {
|
||||
case ARROW_UP:
|
||||
if (displayIndexSelected > 0) {
|
||||
select(--displayIndexSelected);
|
||||
}
|
||||
break;
|
||||
case ARROW_DOWN:
|
||||
if (displayIndexSelected < mainPanel.getWidgetCount()) {
|
||||
select(++displayIndexSelected);
|
||||
}
|
||||
break;
|
||||
case ESCAPE:
|
||||
hide();
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
public void showSuggestions(String query) {
|
||||
if (query.length() > 0) {
|
||||
oracle.requestSuggestions(new Request(query, limit), new Callback() {
|
||||
public void onSuggestionsReady(Request request, Response response) {
|
||||
mainPanel.clear();
|
||||
int i = 0;
|
||||
for (Suggestion s : response.getSuggestions()) {
|
||||
if (i == 0) {
|
||||
first = getUserTemplate(new Like("", "", new Date(), "", s.getDisplayString(), ""), i);
|
||||
first.addStyleName("pickperson-selected");
|
||||
mainPanel.add(first);
|
||||
}
|
||||
else
|
||||
mainPanel.add(getUserTemplate(new Like("", "", new Date(), "", s.getDisplayString(), ""), i));
|
||||
i++;
|
||||
}
|
||||
if (i > 0)
|
||||
show();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private SingleUserTemplate getUserTemplate(Like like, int displayIndex) {
|
||||
return new SingleUserTemplate(this, new Like("", "", new Date(), "", like.getFullName(), ""), displayIndex);
|
||||
}
|
||||
|
||||
/**
|
||||
* select the user in the model and in the view
|
||||
* @param displayIndex
|
||||
*/
|
||||
public void select(int displayIndex) {
|
||||
for (int i = 0; i < mainPanel.getWidgetCount(); i++) {
|
||||
SingleUserTemplate ut = (SingleUserTemplate) mainPanel.getWidget(i);
|
||||
if (i == displayIndex) {
|
||||
ut.addStyleName("pickperson-selected");
|
||||
displayIndexSelected = i;
|
||||
GWT.log("Selected: "+ut.getFullName());
|
||||
}
|
||||
else
|
||||
ut.removeStyleName("pickperson-selected");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,40 +3,22 @@
|
|||
*/
|
||||
package org.gcube.portlets.user.shareupdates.client.form;
|
||||
|
||||
import java.util.ArrayList;
|
||||
|
||||
import org.gcube.portlets.user.shareupdates.client.dialog.PickUsersDialog;
|
||||
import org.gcube.portlets.user.shareupdates.client.elements.Div;
|
||||
|
||||
import com.google.gwt.core.client.GWT;
|
||||
import com.google.gwt.event.dom.client.KeyCodes;
|
||||
import com.google.gwt.user.client.DOM;
|
||||
import com.google.gwt.user.client.Event;
|
||||
import com.google.gwt.user.client.Timer;
|
||||
import com.google.gwt.user.client.ui.MultiWordSuggestOracle;
|
||||
import com.google.gwt.user.client.ui.SuggestOracle.Callback;
|
||||
import com.google.gwt.user.client.ui.SuggestOracle.Request;
|
||||
import com.google.gwt.user.client.ui.SuggestOracle.Response;
|
||||
import com.google.gwt.user.client.ui.SuggestOracle.Suggestion;
|
||||
|
||||
/**
|
||||
* @author massi
|
||||
*
|
||||
*/
|
||||
public class MyTextArea extends Div {
|
||||
final MultiWordSuggestOracle oracle = new MultiWordSuggestOracle();
|
||||
int limit = 10;
|
||||
|
||||
void showSuggestions(String query) {
|
||||
if (query.length() > 0) {
|
||||
oracle.requestSuggestions(new Request(query, limit), new Callback() {
|
||||
public void onSuggestionsReady(Request request, Response response) {
|
||||
for (Suggestion s : response.getSuggestions()) {
|
||||
GWT.log("s:"+s.getReplacementString());
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public final static int ARROW_UP = 38;
|
||||
public final static int ARROW_DOWN = 40;
|
||||
PickUsersDialog pickUserDlg = new PickUsersDialog();
|
||||
/**
|
||||
*
|
||||
|
|
@ -45,22 +27,8 @@ public class MyTextArea extends Div {
|
|||
sinkEvents(Event.ONPASTE);
|
||||
sinkEvents(Event.ONCONTEXTMENU);
|
||||
sinkEvents(Event.ONKEYUP);
|
||||
|
||||
ArrayList<String> users = new ArrayList<String>();
|
||||
users.add("Massi");
|
||||
users.add("Gino");
|
||||
users.add("Marco");
|
||||
users.add("Franco");
|
||||
users.add("Anna");
|
||||
users.add("Antonio");
|
||||
pickUserDlg.fill(users);
|
||||
|
||||
oracle.add("Massi");
|
||||
oracle.add("Gino");
|
||||
oracle.add("Marco");
|
||||
oracle.add("Franco");
|
||||
oracle.add("Anna");
|
||||
oracle.add("Antonio");
|
||||
sinkEvents(Event.ONKEYDOWN);
|
||||
sinkEvents(Event.ONKEYPRESS);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -87,11 +55,15 @@ public class MyTextArea extends Div {
|
|||
break;
|
||||
}
|
||||
case Event.ONKEYUP: {
|
||||
final String before = getText();
|
||||
//showSuggestions(before);
|
||||
if (before.endsWith("@")) { //the only way i found to intercept @
|
||||
pickUserDlg.setPopupPosition(this.getAbsoluteLeft(), this.getAbsoluteTop()+65);
|
||||
pickUserDlg.show();
|
||||
pickUserDlg.onKeyUp(event, this.getAbsoluteLeft(), this.getAbsoluteTop()+65, getText());
|
||||
break;
|
||||
}
|
||||
case Event.ONKEYDOWN: {
|
||||
if (event.getKeyCode() == ARROW_UP) {
|
||||
DOM.eventCancelBubble(event, true);
|
||||
DOM.eventPreventDefault(event);
|
||||
GWT.log("Cancelled");
|
||||
return;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
package org.gcube.portlets.user.shareupdates.client.form;
|
||||
|
||||
import org.gcube.portal.databook.client.GCubeSocialNetworking;
|
||||
import org.gcube.portal.databook.shared.Like;
|
||||
import org.gcube.portlets.user.shareupdates.client.dialog.PickUsersDialog;
|
||||
|
||||
import com.google.gwt.core.client.GWT;
|
||||
import com.google.gwt.event.dom.client.MouseOverEvent;
|
||||
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.ui.Composite;
|
||||
import com.google.gwt.user.client.ui.FocusPanel;
|
||||
import com.google.gwt.user.client.ui.HTML;
|
||||
import com.google.gwt.user.client.ui.Image;
|
||||
import com.google.gwt.user.client.ui.Widget;
|
||||
|
|
@ -18,17 +21,35 @@ public class SingleUserTemplate extends Composite {
|
|||
|
||||
interface LikedTemplateUiBinder extends UiBinder<Widget, SingleUserTemplate> {
|
||||
}
|
||||
PickUsersDialog owner;
|
||||
private int currDisplayIndex;
|
||||
|
||||
public SingleUserTemplate(Like like) {
|
||||
initWidget(uiBinder.createAndBindUi(this));
|
||||
if (like.getThumbnailURL() != null)
|
||||
avatarImage.setUrl(like.getThumbnailURL());
|
||||
|
||||
avatarImage.setPixelSize(30, 30);
|
||||
contentArea.setHTML("<a class=\"person-link\" style=\"font-size:16px;\" href=\""+GCubeSocialNetworking.USER_PROFILE_LINK+"\">"+like.getFullName()+"</a> ");
|
||||
}
|
||||
@UiField
|
||||
FocusPanel focusDiv;
|
||||
@UiField
|
||||
Image avatarImage;
|
||||
@UiField
|
||||
HTML contentArea;
|
||||
|
||||
public SingleUserTemplate(PickUsersDialog owner, Like like, int displayIndex) {
|
||||
initWidget(uiBinder.createAndBindUi(this));
|
||||
this.owner = owner;
|
||||
currDisplayIndex = displayIndex;
|
||||
if (like.getThumbnailURL() != null)
|
||||
avatarImage.setUrl(like.getThumbnailURL());
|
||||
|
||||
avatarImage.setPixelSize(30, 30);
|
||||
contentArea.setHTML(like.getFullName());
|
||||
|
||||
|
||||
}
|
||||
|
||||
@UiHandler("focusDiv")
|
||||
void onMouseOver(MouseOverEvent e) {
|
||||
owner.select(currDisplayIndex);
|
||||
}
|
||||
|
||||
public String getFullName() {
|
||||
return contentArea.getText();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,22 @@
|
|||
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
|
||||
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
|
||||
xmlns:g="urn:import:com.google.gwt.user.client.ui">
|
||||
<g:HTMLPanel ui:field="mainHTML">
|
||||
<div class="user-table-500">
|
||||
<g:FocusPanel ui:field="focusDiv" styleName="user-table pickperson">
|
||||
<g:HTMLPanel ui:field="mainDiv">
|
||||
<div class="user-table-row">
|
||||
<div class="user-table-col smallphoto">
|
||||
<a href="">
|
||||
<g:Image title="" styleName="member-photo" url=""
|
||||
<g:Image title="" styleName="pickperson-photo" url=""
|
||||
ui:field="avatarImage" width="30px" height="30px" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-table-col content">
|
||||
<div class="liked-person">
|
||||
<g:HTML styleName="" ui:field="contentArea" />
|
||||
</div>
|
||||
<div class="liked-aux">
|
||||
|
||||
<div>
|
||||
<g:HTML styleName="pick-label" ui:field="contentArea" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</g:HTMLPanel>
|
||||
</g:HTMLPanel>
|
||||
</g:FocusPanel>
|
||||
</ui:UiBinder>
|
||||
|
|
@ -192,43 +192,52 @@ a.link:hover {
|
|||
.pickDialog {
|
||||
border: 1px solid #333;
|
||||
background-color: #FFF;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.liked-person {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
a.person-link {
|
||||
.pick-label {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 16x;
|
||||
font-size: 15x;
|
||||
line-height: 18px;
|
||||
color: #3B5998;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.person-link,a.person-link:visited {
|
||||
|
||||
.pickperson {
|
||||
color: #0B61A4;
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
font-size: 16x;
|
||||
text-decoration: none;
|
||||
color: #3B5998;
|
||||
background: #FFF;
|
||||
|
||||
-webkit-transition: background-color .25s ease-in-out;
|
||||
-moz-transition: background-color .25s ease-in-out;
|
||||
-o-transition: background-color .25s ease-in-out;
|
||||
transition: background-color .25s ease-in-out;
|
||||
}
|
||||
|
||||
a.person-link:hover {
|
||||
opacity: 0.8;
|
||||
font-size: 16x;
|
||||
text-decoration: underline;
|
||||
.pickperson-selected {
|
||||
background-color: #033E6B;
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.pickperson:active,.pickperson:focus,.pickperson:hover {
|
||||
background-color: #033E6B;
|
||||
color: whitesmoke;
|
||||
}
|
||||
|
||||
.user-table-500 {
|
||||
margin-top: 3px;
|
||||
.pickperson-photo {
|
||||
display: block;
|
||||
padding: 2px;
|
||||
border: 1px solid #E6E6E6;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.user-table {
|
||||
margin: 1px 0px;
|
||||
display: table;
|
||||
width: 500px;
|
||||
width: 100%;
|
||||
background-clip: border-box;
|
||||
background-image: none;
|
||||
background-origin: padding-box;
|
||||
padding: 12px 7px 3px 7px;
|
||||
}
|
||||
|
||||
.user-table-row {
|
||||
|
|
@ -242,7 +251,7 @@ a.person-link:hover {
|
|||
}
|
||||
|
||||
.user-table-col.content {
|
||||
padding-left: 10px;
|
||||
padding: 10px 0px 0px 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue