2014-04-09 18:45:21 +02:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
*/
|
2014-04-11 13:02:15 +02:00
|
|
|
package org.gcube.portlets.user.newsfeed.client.ui;
|
2014-04-09 18:45:21 +02:00
|
|
|
|
2015-07-15 18:47:28 +02:00
|
|
|
import java.util.HashSet;
|
2014-04-09 18:45:21 +02:00
|
|
|
|
2014-04-10 17:45:50 +02:00
|
|
|
import org.gcube.portlets.user.gcubewidgets.client.elements.Div;
|
2014-04-09 18:45:21 +02:00
|
|
|
import org.gcube.portlets.user.newsfeed.client.NewsService;
|
|
|
|
import org.gcube.portlets.user.newsfeed.client.NewsServiceAsync;
|
2018-03-18 17:59:46 +01:00
|
|
|
import org.gcube.portlets.user.newsfeed.shared.MentionedDTO;
|
2014-10-08 23:15:42 +02:00
|
|
|
import org.gcube.portlets.widgets.pickitem.client.dialog.PickItemsDialog;
|
|
|
|
import org.gcube.portlets.widgets.pickitem.client.events.PickedItemEvent;
|
|
|
|
import org.gcube.portlets.widgets.pickitem.client.events.PickedItemEventHandler;
|
|
|
|
import org.gcube.portlets.widgets.pickitem.shared.ItemBean;
|
2014-04-09 18:45:21 +02:00
|
|
|
|
|
|
|
import com.google.gwt.core.client.GWT;
|
|
|
|
import com.google.gwt.dom.client.Element;
|
2018-03-18 17:59:46 +01:00
|
|
|
import com.google.gwt.dom.client.NodeList;
|
2016-12-20 17:50:52 +01:00
|
|
|
import com.google.gwt.event.dom.client.FocusEvent;
|
|
|
|
import com.google.gwt.event.dom.client.FocusHandler;
|
2014-04-09 18:45:21 +02:00
|
|
|
import com.google.gwt.event.dom.client.KeyCodes;
|
2015-07-17 12:32:52 +02:00
|
|
|
import com.google.gwt.event.dom.client.KeyPressEvent;
|
|
|
|
import com.google.gwt.event.dom.client.KeyPressHandler;
|
2014-04-09 18:45:21 +02:00
|
|
|
import com.google.gwt.event.shared.HandlerManager;
|
|
|
|
import com.google.gwt.user.client.DOM;
|
|
|
|
import com.google.gwt.user.client.Event;
|
2014-04-10 17:45:50 +02:00
|
|
|
import com.google.gwt.user.client.Random;
|
2014-04-09 18:45:21 +02:00
|
|
|
import com.google.gwt.user.client.Timer;
|
|
|
|
import com.google.gwt.user.client.ui.TextArea;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @author massi
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
public class SuperPosedTextArea extends TextArea {
|
|
|
|
|
|
|
|
private final NewsServiceAsync newsService = GWT.create(NewsService.class);
|
|
|
|
|
|
|
|
private final HandlerManager eventBus = new HandlerManager(null);
|
2014-04-10 17:45:50 +02:00
|
|
|
|
2016-12-20 17:50:52 +01:00
|
|
|
private PickItemsDialog pickUserDlg = null;
|
2014-04-10 17:45:50 +02:00
|
|
|
private Div highlighterDIV;
|
2014-04-09 18:45:21 +02:00
|
|
|
public final static int ARROW_UP = 38;
|
|
|
|
public final static int ARROW_DOWN = 40;
|
2018-06-11 19:00:23 +02:00
|
|
|
private String context;
|
2018-03-18 17:59:46 +01:00
|
|
|
private HashSet<MentionedDTO> mentionedUsers = new HashSet<MentionedDTO>();
|
2014-04-10 17:45:50 +02:00
|
|
|
|
|
|
|
private String areaId;
|
2014-04-09 18:45:21 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
*
|
|
|
|
*/
|
2014-04-10 17:45:50 +02:00
|
|
|
public SuperPosedTextArea(Div highlighterDIV) {
|
2014-04-09 18:45:21 +02:00
|
|
|
sinkEvents(Event.ONPASTE);
|
|
|
|
sinkEvents(Event.ONCONTEXTMENU);
|
|
|
|
sinkEvents(Event.ONKEYDOWN);
|
2015-07-15 18:47:28 +02:00
|
|
|
sinkEvents(Event.ONKEYUP);
|
2014-04-10 17:45:50 +02:00
|
|
|
setText(AddCommentTemplate.COMMENT_TEXT);
|
|
|
|
this.highlighterDIV = highlighterDIV;
|
|
|
|
//needed to give unique identifiers to the Area (for the jQuery plugin)
|
|
|
|
areaId = "postTextArea"+Random.nextInt();
|
2015-07-15 18:47:28 +02:00
|
|
|
getElement().setAttribute("id", areaId);
|
2014-04-09 18:45:21 +02:00
|
|
|
bind();
|
|
|
|
Timer t = new Timer() {
|
|
|
|
@Override
|
|
|
|
public void run() {
|
2014-04-10 17:45:50 +02:00
|
|
|
myAutoSize(areaId);
|
2014-04-09 18:45:21 +02:00
|
|
|
}
|
|
|
|
};
|
2014-04-10 17:45:50 +02:00
|
|
|
t.schedule(200);
|
2015-07-17 12:32:52 +02:00
|
|
|
|
|
|
|
this.addKeyPressHandler(new KeyPressHandler() {
|
|
|
|
@Override
|
|
|
|
public void onKeyPress(KeyPressEvent event) {
|
2018-03-07 15:28:17 +01:00
|
|
|
if (pickUserDlg != null) {
|
|
|
|
int top = getAbsoluteTop();
|
|
|
|
int offset = getOffsetHeight();
|
|
|
|
int y = getAbsoluteTop()+getOffsetHeight();
|
|
|
|
GWT.log("top=" + top + " - offset = " +offset);
|
|
|
|
pickUserDlg.onKeyPress(getCursorPos(), event.getUnicodeCharCode(), getAbsoluteLeft(), y, getText());
|
|
|
|
}
|
2016-12-20 17:50:52 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
this.addFocusHandler(new FocusHandler() {
|
|
|
|
@Override
|
|
|
|
public void onFocus(FocusEvent event) {
|
2018-06-11 19:00:23 +02:00
|
|
|
pickUserDlg = new PickItemsDialog('@', eventBus, 430, context);
|
|
|
|
pickUserDlg.withPhoto();
|
2015-07-17 12:32:52 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-04-09 18:45:21 +02:00
|
|
|
}
|
2014-04-10 17:45:50 +02:00
|
|
|
/**
|
|
|
|
* This is the way to wrap jQuery plugins into GWT, wrap it in a function and call it.
|
|
|
|
*/
|
|
|
|
public static native void myAutoSize(String myAreaId) /*-{
|
|
|
|
function autoSizeArea() {
|
|
|
|
$wnd.jQuery('#'+myAreaId).autosize();
|
2014-04-09 18:45:21 +02:00
|
|
|
}
|
|
|
|
autoSizeArea();
|
|
|
|
}-*/;
|
|
|
|
/**
|
|
|
|
* @param element
|
|
|
|
*/
|
|
|
|
public SuperPosedTextArea(Element element) {
|
|
|
|
super(element);
|
|
|
|
}
|
2018-06-11 19:00:23 +02:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @param context e.g. /gcube/devNext/NextNext
|
|
|
|
*/
|
|
|
|
public void setContext(String context) {
|
|
|
|
this.context = context;
|
|
|
|
}
|
2014-04-09 18:45:21 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* paste event overridden
|
|
|
|
*/
|
|
|
|
public void onBrowserEvent(Event event) {
|
|
|
|
super.onBrowserEvent(event);
|
|
|
|
switch (event.getTypeInt()) {
|
|
|
|
case Event.ONPASTE: {
|
2014-04-10 17:45:50 +02:00
|
|
|
if (getText().equals(AddCommentTemplate.COMMENT_TEXT) || getText().equals(AddCommentTemplate.ERROR_UPDATE_TEXT) ) {
|
2014-04-09 18:45:21 +02:00
|
|
|
setText("");
|
|
|
|
addStyleName("dark-color");
|
2015-04-27 16:39:29 +02:00
|
|
|
removeStyleName("nwfeed-error");
|
2014-04-09 18:45:21 +02:00
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case Event.ONKEYUP: {
|
|
|
|
injectInDiv(getText());
|
2015-07-15 18:47:28 +02:00
|
|
|
pickUserDlg.onKeyUp(event.getKeyCode());
|
2014-04-09 18:45:21 +02:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
case Event.ONCONTEXTMENU: {
|
|
|
|
removeSampleText();
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case Event.ONKEYDOWN: {
|
|
|
|
if (pickUserDlg.isShowing()) {
|
|
|
|
//avoid the arrow up to move the cursor at the beginning of the textbox and the TAB to move around inputs and enter to go newline
|
|
|
|
if (event.getKeyCode() == ARROW_UP || event.getKeyCode() == KeyCodes.KEY_TAB || event.getKeyCode() == KeyCodes.KEY_ENTER) {
|
|
|
|
DOM.eventCancelBubble(event, true);
|
2015-07-15 18:47:28 +02:00
|
|
|
event.preventDefault();
|
2014-04-09 18:45:21 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
protected void removeSampleText() {
|
2014-04-10 17:45:50 +02:00
|
|
|
if (getText().equals(AddCommentTemplate.COMMENT_TEXT) || getText().equals(AddCommentTemplate.ERROR_UPDATE_TEXT) ) {
|
2014-04-09 18:45:21 +02:00
|
|
|
setText("");
|
|
|
|
addStyleName("darker-color");
|
2015-04-27 16:39:29 +02:00
|
|
|
removeStyleName("nwfeed-error");
|
2014-04-09 18:45:21 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
protected void cleanHighlighterDiv() {
|
2014-04-10 17:45:50 +02:00
|
|
|
//DOM.getElementById("comment-highlighter").setInnerHTML("");
|
|
|
|
highlighterDIV.getElement().setInnerHTML("");
|
2014-04-09 18:45:21 +02:00
|
|
|
}
|
2014-04-10 17:45:50 +02:00
|
|
|
/**
|
|
|
|
* copy what is being written in the text area in the underneath DIV
|
|
|
|
* @param textAreaText
|
|
|
|
*/
|
2014-04-09 18:45:21 +02:00
|
|
|
private void injectInDiv(String textAreaText) {
|
|
|
|
String text;
|
|
|
|
// parse the text:
|
|
|
|
// replace all the line braks by <br/>, and all the double spaces by the html version
|
|
|
|
text = textAreaText.replaceAll("(\r\n|\n)","<br />");
|
|
|
|
text = text.replaceAll("\\s\\s"," ");
|
2018-03-18 17:59:46 +01:00
|
|
|
|
|
|
|
for (MentionedDTO mentionedUser : mentionedUsers) {
|
|
|
|
text = text.replaceAll(mentionedUser.value,
|
|
|
|
"<span id=\""+ mentionedUser.id +"\" title=\""+ mentionedUser.type +"\" class=\"highlightedUser\">"+mentionedUser.value+"</span>");
|
|
|
|
}
|
2014-04-09 18:45:21 +02:00
|
|
|
// re-inject the processed text into the div
|
2014-04-10 17:45:50 +02:00
|
|
|
highlighterDIV.getElement().setInnerHTML(text);
|
2014-04-09 18:45:21 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* events binder
|
|
|
|
*/
|
|
|
|
private void bind() {
|
2014-10-08 23:15:42 +02:00
|
|
|
eventBus.addHandler(PickedItemEvent.TYPE, new PickedItemEventHandler() {
|
2014-04-09 18:45:21 +02:00
|
|
|
@Override
|
2014-10-08 23:15:42 +02:00
|
|
|
public void onSelectedItem(PickedItemEvent event) {
|
2014-04-09 18:45:21 +02:00
|
|
|
|
2014-10-08 23:15:42 +02:00
|
|
|
String toAdd = event.getSelectedItem().getAlternativeName();
|
2018-03-18 17:59:46 +01:00
|
|
|
|
|
|
|
ItemBean ib = event.getSelectedItem();
|
|
|
|
String type = ib.isItemGroup() ? "team" : "user";
|
|
|
|
MentionedDTO mToAdd = new MentionedDTO(ib.getId(), ib.getAlternativeName(), type);
|
|
|
|
mentionedUsers.add(mToAdd);
|
|
|
|
|
2015-07-15 18:47:28 +02:00
|
|
|
String preceedingPart = getText().substring(0, event.getItemCursorIndexStart());
|
|
|
|
String afterPart = getText().substring(event.getItemCursorIndexEnd()+1);
|
|
|
|
|
|
|
|
setText(preceedingPart + toAdd + " " + afterPart);
|
|
|
|
injectInDiv(getText());
|
2014-04-09 18:45:21 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-03-18 17:59:46 +01:00
|
|
|
public HashSet<MentionedDTO> getMentionedUsers() {
|
|
|
|
NodeList<Element> elems = highlighterDIV.getElement().getElementsByTagName("span");
|
|
|
|
HashSet<MentionedDTO> toReturn = new HashSet<MentionedDTO>();
|
|
|
|
if (elems != null && elems.getLength() > 0) {
|
|
|
|
int elemsNo = elems.getLength();
|
|
|
|
for (int i = 0; i < elemsNo; i++) {
|
|
|
|
Element el = elems.getItem(i);
|
|
|
|
String id = el.getId();
|
|
|
|
String type = el.getTitle();
|
|
|
|
String value = el.getInnerText();
|
|
|
|
MentionedDTO toAdd = new MentionedDTO(id, value, type);
|
|
|
|
toReturn.add(toAdd);
|
|
|
|
GWT.log(toAdd.toString());
|
|
|
|
}
|
2014-04-09 18:45:21 +02:00
|
|
|
}
|
2018-03-18 17:59:46 +01:00
|
|
|
return toReturn;
|
2014-04-09 18:45:21 +02:00
|
|
|
}
|
2014-04-10 17:45:50 +02:00
|
|
|
/**
|
2014-04-11 12:50:23 +02:00
|
|
|
* return the unique identifier of this textarea, useful for getElementById JS method
|
|
|
|
* @return
|
2014-04-09 18:45:21 +02:00
|
|
|
*/
|
2014-04-11 12:50:23 +02:00
|
|
|
public String getAreaId() {
|
|
|
|
return areaId;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2014-04-09 18:45:21 +02:00
|
|
|
}
|