From eb2f5ac3a714aefce948d447a4004b94e35e44a9 Mon Sep 17 00:00:00 2001 From: Johannes Tuikkala Date: Thu, 29 Sep 2016 11:03:29 +0300 Subject: Fixed touch scrolling issue in Surface and WP devices (#18737) Fixed by using mouse events instead of touchevents when the browser is IE or Edge (added isIEOrEdge utility method in the BrowserInfo). Also added touch-action: none; css rules into escalator.css to prevent default touch behaviour on IE and Edge No new unit tests since we do not have automatic touch testing possibilities yet. Please test manually with Surface: IE and Edge, use for example uitest: com.vaadin.tests.components.grid.basics.GridBasics Change-Id: I5b37f1648e2051ea0ab4d56ab767186b532da07c --- .../main/java/com/vaadin/client/BrowserInfo.java | 4 ++ .../java/com/vaadin/client/widgets/Escalator.java | 80 ++++++++++++++++++++-- 2 files changed, 80 insertions(+), 4 deletions(-) (limited to 'client') diff --git a/client/src/main/java/com/vaadin/client/BrowserInfo.java b/client/src/main/java/com/vaadin/client/BrowserInfo.java index f037fba175..bce96fe2c7 100644 --- a/client/src/main/java/com/vaadin/client/BrowserInfo.java +++ b/client/src/main/java/com/vaadin/client/BrowserInfo.java @@ -245,6 +245,10 @@ public class BrowserInfo { return browserDetails.isEdge(); } + public boolean isIEOrEdge() { + return browserDetails.isIE() || browserDetails.isEdge(); + } + public boolean isFirefox() { return browserDetails.isFirefox(); } diff --git a/client/src/main/java/com/vaadin/client/widgets/Escalator.java b/client/src/main/java/com/vaadin/client/widgets/Escalator.java index 9eaa7ddd36..14c75a00ba 100644 --- a/client/src/main/java/com/vaadin/client/widgets/Escalator.java +++ b/client/src/main/java/com/vaadin/client/widgets/Escalator.java @@ -457,6 +457,15 @@ public class Escalator extends Widget } int pagePosition(CustomTouchEvent event) { + // Use native event's screen x and y for IEs and Edge + // since there is no touches for these browsers (#18737) + if (BrowserInfo.get().isIEOrEdge()) { + return vertical + ? event.getNativeEvent().getClientY() + + Window.getScrollTop() + : event.getNativeEvent().getClientX() + + Window.getScrollLeft(); + } JsArray a = event.getNativeEvent().getTouches(); return vertical ? a.get(0).getPageY() : a.get(0).getPageX(); } @@ -496,7 +505,7 @@ public class Escalator extends Widget }; public void touchStart(final CustomTouchEvent event) { - if (event.getNativeEvent().getTouches().length() == 1) { + if (allowTouch(event)) { if (yMov == null) { yMov = new Movement(true); xMov = new Movement(false); @@ -544,6 +553,15 @@ public class Escalator extends Widget } } + // Allow touchStart for IE and Edge even though there is no touch + // (#18737), + // otherwise allow touch only if there is a single touch in the + // event + private boolean allowTouch(final CustomTouchEvent event) { + return BrowserInfo.get().isIEOrEdge() + || event.getNativeEvent().getTouches().length() == 1; + } + private double easingInOutCos(double val, double max) { return 0.5 - 0.5 * Math.cos(Math.PI * Math.signum(val) * Math.min(Math.abs(val), max) / max); @@ -958,7 +976,7 @@ public class Escalator extends Widget public native void attachTouchListeners(Element element) /* - * Detaching events with JSNI instead of the GWT event mechanism because + * Attaching events with JSNI instead of the GWT event mechanism because * GWT didn't provide enough details in events, or triggering the event * handlers with GWT bindings was unsuccessful. Maybe, with more time * and skill, it could be done with better success. JavaScript overlay @@ -996,6 +1014,48 @@ public class Escalator extends Widget } }-*/; + /** + * Using mousedown, mousemove, and mouseup for IE and Edge instead of + * touch* listeners (#18737) + * + * @param element + */ + public native void attachMouseDragListeners(Element element) + /* + * Attaching events with JSNI instead of the GWT event mechanism because + * GWT didn't provide enough details in events, or triggering the event + * handlers with GWT bindings was unsuccessful. Maybe, with more time + * and skill, it could be done with better success. JavaScript overlay + * types might work. This might also get rid of the JsniWorkaround + * class. + */ + /*-{ + element.addEventListener("mousedown", this.@com.vaadin.client.widgets.JsniWorkaround::touchStartFunction); + element.addEventListener("mousemove", this.@com.vaadin.client.widgets.JsniWorkaround::touchMoveFunction); + element.addEventListener("mouseup", this.@com.vaadin.client.widgets.JsniWorkaround::touchEndFunction); + }-*/; + + /** + * Using mousedown, mousemove, and mouseup for IE and Edge instead of + * touch* listeners (#18737) + * + * @param element + */ + public native void detachMouseDragListeners(Element element) + /* + * Detaching events with JSNI instead of the GWT event mechanism because + * GWT didn't provide enough details in events, or triggering the event + * handlers with GWT bindings was unsuccessful. Maybe, with more time + * and skill, it could be done with better success. JavaScript overlay + * types might work. This might also get rid of the JsniWorkaround + * class. + */ + /*-{ + element.removeEventListener("mousedown", this.@com.vaadin.client.widgets.JsniWorkaround::touchStartFunction); + element.removeEventListener("mousemove", this.@com.vaadin.client.widgets.JsniWorkaround::touchMoveFunction); + element.removeEventListener("mouseup", this.@com.vaadin.client.widgets.JsniWorkaround::touchEndFunction); + }-*/; + public void scrollToColumn(final int columnIndex, final ScrollDestination destination, final int padding) { assert columnIndex >= columnConfiguration.frozenColumns : "Can't scroll to a frozen column"; @@ -5772,7 +5832,13 @@ public class Escalator extends Widget scroller.attachScrollListener(verticalScrollbar.getElement()); scroller.attachScrollListener(horizontalScrollbar.getElement()); scroller.attachMousewheelListener(getElement()); - scroller.attachTouchListeners(getElement()); + + if (BrowserInfo.get().isIEOrEdge()) { + // Touch listeners doesn't work for IE and Edge (#18737) + scroller.attachMouseDragListeners(getElement()); + } else { + scroller.attachTouchListeners(getElement()); + } } @Override @@ -5781,7 +5847,13 @@ public class Escalator extends Widget scroller.detachScrollListener(verticalScrollbar.getElement()); scroller.detachScrollListener(horizontalScrollbar.getElement()); scroller.detachMousewheelListener(getElement()); - scroller.detachTouchListeners(getElement()); + + if (BrowserInfo.get().isIEOrEdge()) { + // Touch listeners doesn't work for IE and Edge (#18737) + scroller.detachMouseDragListeners(getElement()); + } else { + scroller.detachTouchListeners(getElement()); + } /* * We can call paintRemoveRows here, because static ranges are simple to -- cgit v1.2.3