WICKET-6517 added some CSS styling
Project: http://git-wip-us.apache.org/repos/asf/wicket/repo Commit: http://git-wip-us.apache.org/repos/asf/wicket/commit/f1dd096c Tree: http://git-wip-us.apache.org/repos/asf/wicket/tree/f1dd096c Diff: http://git-wip-us.apache.org/repos/asf/wicket/diff/f1dd096c Branch: refs/heads/WICKET-6498_deferred_javascript_2 Commit: f1dd096c772feb9f878f783c5764a37403e82e5b Parents: 3f5c293 Author: Sven Meier <[email protected]> Authored: Thu Jan 18 22:43:21 2018 +0100 Committer: Sven Meier <[email protected]> Committed: Fri Jan 26 23:09:37 2018 +0100 ---------------------------------------------------------------------- .../examples/ajax/builtin/FileUploadPage.html | 17 +++++++++++- .../wicket/extensions/Initializer.properties | 2 ++ .../ajax/markup/html/AjaxFileDropBehavior.java | 27 ++++++++++++++------ 3 files changed, 37 insertions(+), 9 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/wicket/blob/f1dd096c/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/FileUploadPage.html ---------------------------------------------------------------------- diff --git a/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/FileUploadPage.html b/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/FileUploadPage.html index 4642ae3..2ed083d 100644 --- a/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/FileUploadPage.html +++ b/wicket-examples/src/main/java/org/apache/wicket/examples/ajax/builtin/FileUploadPage.html @@ -1,5 +1,20 @@ <?xml version="1.0" encoding="UTF-8" ?> <html> +<head> + <wicket:head> + <style> + .drop-zone { + border: 1px dotted #FF9925; + width:200px; + height:200px; + } + .drop-zone.drag-over { + background: #FF9925; + color: #ffffff; + } + </style> + </wicket:head> +</head> <body> <wicket:extend xmlns:wicket="http://wicket.apache.org";> @@ -15,7 +30,7 @@ Demonstrates Wicket's ability to transparently handle multipart forms via AJAX.< <input type="submit" value="Regular Submit"/> <input wicket:id="ajaxSubmit" type="button" value="Ajax Submit"/> </form> -<div wicket:id="drop" style="border: 1px dotted black; width:200px; height:200px;"> +<div wicket:id="drop" class="drop-zone"> Drop file here. </div> http://git-wip-us.apache.org/repos/asf/wicket/blob/f1dd096c/wicket-extensions/src/main/java/org/apache/wicket/extensions/Initializer.properties ---------------------------------------------------------------------- diff --git a/wicket-extensions/src/main/java/org/apache/wicket/extensions/Initializer.properties b/wicket-extensions/src/main/java/org/apache/wicket/extensions/Initializer.properties index 98f7925..6b43d43 100644 --- a/wicket-extensions/src/main/java/org/apache/wicket/extensions/Initializer.properties +++ b/wicket-extensions/src/main/java/org/apache/wicket/extensions/Initializer.properties @@ -45,3 +45,5 @@ AbstractDateTimeField.CSS.time=datetime-time TimeField.hoursSeparator=\u00a0:\u00a0 TimeField.CSS.hours=time-hours TimeField.CSS.minutes=time-minutes + +AjaxFileDropBehavior.CSS.dragover=drag-over \ No newline at end of file http://git-wip-us.apache.org/repos/asf/wicket/blob/f1dd096c/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/AjaxFileDropBehavior.java ---------------------------------------------------------------------- diff --git a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/AjaxFileDropBehavior.java b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/AjaxFileDropBehavior.java index b8806d9..817c2f4 100644 --- a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/AjaxFileDropBehavior.java +++ b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/AjaxFileDropBehavior.java @@ -25,11 +25,12 @@ import org.apache.wicket.Component; import org.apache.wicket.WicketRuntimeException; import org.apache.wicket.ajax.AjaxEventBehavior; import org.apache.wicket.ajax.AjaxRequestTarget; +import org.apache.wicket.ajax.attributes.AjaxCallListener; import org.apache.wicket.ajax.attributes.AjaxRequestAttributes; import org.apache.wicket.ajax.attributes.AjaxRequestAttributes.Method; +import org.apache.wicket.core.util.string.CssUtils; import org.apache.wicket.markup.head.IHeaderResponse; import org.apache.wicket.markup.head.JavaScriptHeaderItem; -import org.apache.wicket.markup.head.OnDomReadyHeaderItem; import org.apache.wicket.markup.html.form.upload.FileUpload; import org.apache.wicket.protocol.http.servlet.MultipartServletWebRequest; import org.apache.wicket.protocol.http.servlet.ServletWebRequest; @@ -47,6 +48,8 @@ import org.apache.wicket.util.lang.Bytes; public class AjaxFileDropBehavior extends AjaxEventBehavior { + public static final String DRAG_OVER_CLASS_KEY = CssUtils.key(AjaxFileDropBehavior.class, "dragover"); + private static final ResourceReference JS = new PackageResourceReference( AjaxFileDropBehavior.class, "datatransfer.js"); @@ -62,9 +65,13 @@ public class AjaxFileDropBehavior extends AjaxEventBehavior private String parameterName = "f"; + /** + * Listen for 'dragover' and 'drop' events and prevent them, only 'drop' will initiate + * an Ajax request. + */ public AjaxFileDropBehavior() { - super("drop"); + super("dragenter dragover dragleave drop"); } @Override @@ -73,12 +80,6 @@ public class AjaxFileDropBehavior extends AjaxEventBehavior super.renderHead(component, response); response.render(JavaScriptHeaderItem.forReference(JS)); - - // default must be prevented for dragover event, otherwise browser will consume the - // dataTransfer - response.render(OnDomReadyHeaderItem.forScript( - String.format("jQuery('#%s').on('dragover', function(e) { e.preventDefault(); });", - component.getMarkupId()))); } @Override @@ -91,6 +92,16 @@ public class AjaxFileDropBehavior extends AjaxEventBehavior // default must be prevented, otherwise browser will consume the dataTransfer attributes.setPreventDefault(true); + attributes.getAjaxCallListeners().add(new AjaxCallListener() { + @Override + public CharSequence getPrecondition(Component component) + { + String css = getComponent().getString(DRAG_OVER_CLASS_KEY); + + return String.format("jQuery('#' + attrs.c).toggleClass('%s', attrs.event.type === 'dragover'); return (attrs.event.type === 'drop');", css); + } + }); + attributes.getDynamicExtraParameters() .add(String.format( "return Wicket.DataTransfer.getFilesAsParamArray(attrs.event.originalEvent, '%s');",
