I'm working in a GWT app that will have two RichTextAreas. In each of them there will be the same sentence, but in different languages. When the user clicks in a word it will be highlighted together with its correspondence in the other RichTextArea. When a user double clicks in a word, instead of the words, their chunks will be highlighted. Because of the double click event is never raised (I don't know why) I created my own class, which extends RichTextArea and I raised myself the double click event (depending of the time passed between two clicks).
The problem is that I can't disable default text selection. I've been searching for possible solutions but I didn't found any that actually worked. I've tried with both CSS and JavaScript. This is how my class looks like:
public class MyRichTextArea extends RichTextArea
{
private boolean clickedOnce = false;
private int msDelay = 250;
public MyRichTextArea()
{
sinkEvents(Event.ONMOUSEDOWN);
disableTextSelectInternal(this.getElement());
}
public void onBrowserEvent(Event event)
{
switch (DOM.eventGetType(event))
{
case Event.ONMOUSEDOWN:
if (!clickedOnce)
{
clickedOnce = true;
Timer t = new Timer()
{
public void run()
{
if (clickedOnce)
{
clickedOnce = false;
raiseEvent(1);
}
}
};
t.schedule(msDelay);
}
else
{
clickedOnce = false;
raiseEvent(2);
}
//DOM.eventPreventDefault(event);
break;
}
}
public void raiseEvent(int clickCount)
{
if (clickCount == 1)
{
this.fireEvent( new GwtEvent<ClickHandler>()
{
public com.google.gwt.event.shared.GwtEvent.Type<ClickHandler> getAssociatedType()
{
return ClickEvent.getType();
}
protected void dispatch(ClickHandler handler)
{
handler.onClick(null);
}
});
}
else
{
this.fireEvent( new GwtEvent<DoubleClickHandler>()
{
public com.google.gwt.event.shared.GwtEvent.Type<DoubleClickHandler> getAssociatedType()
{
return DoubleClickEvent.getType();
}
protected void dispatch(DoubleClickHandler handler)
{
handler.onDoubleClick(null);
}
});
}
}
protected native static void disableTextSelectInternal(Element e)
/*-{
e.ondrag = function () { return false; };
e.onselectstart = function () { return false; };
e.onmousedown = function () { return false; }
e.style.MozUserSelect="none"
}-*/;
}
I picked that method from here: http://comments.gmane.org/gmane.org.google.gwt/49564, but it doesn't work to me. I guess this will have to be done with JavaScript. I'm a bit newbie in JavaScript and I don't know where to start from. If anyone has faced this problem before or has any possible solution, any help will be appreciated.
Thanks in advance
