I figured out a way for users to DnD into GWT's RichTextArea from either
inside the GWT application and for us even more importantly from another
website/page. We had to use JSNI as the standard GWT drop listeners are
never fired, I assume it's because it uses an iFrame. I thought I'd post
it here as perhaps others will find it useful. Also if you see some
potential problems let me know as I'd like to improve it.
One question I have is should I be adding the listener to the iframe too or
just to iframe.contentWindow?
Also things works really well with Firefox I need to determine if any
changes are needed for IE8/9/10 and Chrome.
public class GwtRichTextArea extends RichTextArea {
private Object dragenterFunction = null;
private Object dragoverFunction = null;
private Object dropFunction = null;
public GwtRichTextArea () {
}
@Override
protected void onAttach() {
super.onAttach();
IFrameElement iFrame = IFrameElement.as(getElement());
iFrame.setName(UUID.uuid());
addDragOverHandler(iFrame);
addDropHandler(iFrame);
}
@Override
protected void onDetach() {
IFrameElement iFrame = IFrameElement.as(getElement());
removeDragOverHandler(iFrame);
removeDropHandler(iFrame);
super.onDetach();
}
private native void addDragEnterHandler(IFrameElement iframe)
/*-{
if (iframe == null)
return;
var _this = this;
var dragenterFunction = function (e) {
// todo: add some css style here
}
[email protected]::dragenterFunction
= dragenterFunction;
iframe.addEventListener('dragenter', dragenterFunction, true);
iframe.contentWindow.addEventListener('dragenter', dragenterFunction,
true);
}-*/;
private native void addDragOverHandler(IFrameElement iframe)
/*-{
if (iframe != null) {
var _this = this;
var dragoverFunction = function (e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'copy';
return false;
}
[email protected]::dragoverFunction =
dragoverFunction;
iframe.addEventListener('dragover', dragoverFunction, true);
iframe.contentWindow.addEventListener('dragover', dragoverFunction,
true);
}
}-*/;
private native void addDropHandler(IFrameElement iframe)
/*-{
if (iframe == null) {
return;
}
var _this = this;
var dropFunction = function (event) {
// Handle the drop. We attach to the body element...
iframe.contentWindow.document.body.appendChild(newElement);
return false;
}
[email protected]::dropFunction =
dropFunction;
iframe.addEventListener('drop', dropFunction, true);
iframe.contentWindow.addEventListener('drop', dropFunction, true);
}-*/;
private native void removeDragOverHandler(IFrameElement iframe)
/*-{
if (iframe != null) {
var _this = this;
var dragoverFunction =
[email protected]::dragoverFunction;
iframe.removeEventListener('dragover', dragoverFunction, true);
iframe.contentWindow.removeEventListener('dragover',
dragoverFunction, true);
}
}-*/;
private native void removeDropHandler(IFrameElement iframe)
/*-{
if (iframe != null) {
var _this = this;
var dropFunction =
[email protected]::dropFunction;
iframe.removeEventListener('drop', dropFunction, true);
iframe.contentWindow.removeEventListener('drop', dropFunction,
true);
}
}-*/;
private native void removeTextPasteHandler(IFrameElement iframe)
/*-{
if (iframe != null) {
var _this = this;
var pasteFunction =
[email protected]::pasteFunction;
iframe.removeEventListener('paste', pasteFunction, true);
iframe.contentWindow.removeEventListener('paste', pasteFunction,
true);
}
}-*/;
}
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
