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

src/main/java/org/gcube/portlets/user/shareupdates/client/dialog/PickUsersDialog.java

@@ -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");
+		focusPanel.setWidth("525px");
-		setWidget(mainPanel);
+		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) {
+	 * called for each keyUp event from the user
-			mainPanel.add(new SingleUserTemplate(new Like("", "", new Date(), "", 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");
 		}
 	}
 

src/main/java/org/gcube/portlets/user/shareupdates/client/form/MyTextArea.java

@@ -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();
+	public final static int ARROW_UP = 38; 
-	int limit = 10;
+	public final static int ARROW_DOWN = 40; 
-
-	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());
-					}
-				}
-			});
-		}
-	}
-
 	PickUsersDialog pickUserDlg = new PickUsersDialog();
 	/**
 	 * 
@@ -45,22 +27,8 @@ public class MyTextArea extends Div {
 		sinkEvents(Event.ONPASTE);
 		sinkEvents(Event.ONCONTEXTMENU);
 		sinkEvents(Event.ONKEYUP);
-
+		sinkEvents(Event.ONKEYDOWN);
-		ArrayList<String> users = new ArrayList<String>();
+		sinkEvents(Event.ONKEYPRESS);		
-		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");
 	}
 
 	/**
@@ -87,11 +55,15 @@ public class MyTextArea extends Div {
 			break;
 		}
 		case Event.ONKEYUP: {
-			final String before = getText();
+			pickUserDlg.onKeyUp(event, this.getAbsoluteLeft(), this.getAbsoluteTop()+65, getText());				
-			//showSuggestions(before);
+			break;
-			if (before.endsWith("@")) { //the only way i found to intercept @
+		}
-				pickUserDlg.setPopupPosition(this.getAbsoluteLeft(), this.getAbsoluteTop()+65);
+		case Event.ONKEYDOWN: {
-				pickUserDlg.show();
+			if (event.getKeyCode() == ARROW_UP) {
+				DOM.eventCancelBubble(event, true);
+				DOM.eventPreventDefault(event);
+				GWT.log("Cancelled");
+				return;
 			}
 			break;
 		}

src/main/java/org/gcube/portlets/user/shareupdates/client/form/SingleUserTemplate.java

@@ -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;
-	public SingleUserTemplate(Like like) {
+	private int currDisplayIndex;
-		initWidget(uiBinder.createAndBindUi(this));
+	
-		if (like.getThumbnailURL() != null)
+	@UiField
-			avatarImage.setUrl(like.getThumbnailURL());
+	FocusPanel focusDiv;
-		
-		avatarImage.setPixelSize(30, 30);
-		contentArea.setHTML("<a class=\"person-link\" style=\"font-size:16px;\"  href=\""+GCubeSocialNetworking.USER_PROFILE_LINK+"\">"+like.getFullName()+"</a> ");
-	}
 	@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();
+	}
 }

src/main/java/org/gcube/portlets/user/shareupdates/client/form/SingleUserTemplate.ui.xml

@@ -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">
+	<g:FocusPanel ui:field="focusDiv" styleName="user-table pickperson">
-		<div class="user-table-500">
+		<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">
+					<div>
-						<g:HTML styleName="" ui:field="contentArea" />
+						<g:HTML styleName="pick-label" ui:field="contentArea" />
-					</div>
-					<div class="liked-aux">
-						
 					</div>
 				</div>
 			</div>
-		</div>
+		</g:HTMLPanel>
-	</g:HTMLPanel>
+	</g:FocusPanel>
 </ui:UiBinder> 

src/main/webapp/ShareUpdates.css

@@ -192,43 +192,52 @@ a.link:hover {
 .pickDialog {
 	border: 1px solid #333;
 	background-color: #FFF;
-	padding: 5px;
 }
 
-.liked-person {
+.pick-label {
-	padding-top: 10px;	
-}
-
-a.person-link {
 	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;
+	background: #FFF;
-	text-decoration: none;
+	
-	color: #3B5998;
+	-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 {
+.pickperson-selected {
-	opacity: 0.8;
+	background-color: #033E6B;
-	font-size: 16x;
+	color: whitesmoke;
-	text-decoration: underline;
 }
 
+.pickperson:active,.pickperson:focus,.pickperson:hover {
+	background-color: #033E6B;
+	color: whitesmoke;
+}
 
-.user-table-500 {
+.pickperson-photo {
-	margin-top: 3px;
+	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;
 }