From 92b5c38476286a5998730d80da1598132ee29361 Mon Sep 17 00:00:00 2001 From: Johannes Tuikkala Date: Mon, 14 Nov 2016 09:46:32 +0200 Subject: [PATCH] Fixed touch scrolling issue in Surface and WP devices (#18737) Fixed by using pointerevents instead of touchevents when the browser is IE11, or Edge. Also added touch-action: none; css rules into escalator.css to prevent default touch behaviour on IE11 and Edge. Does not affect IE8 to IE10 browsers, behaviour on those will stay the same as before the fix. No new unit tests since we do not have automatic touch testing possibilities yet. Please test manually with Surface: IE11 and Edge, use for example uitest: com.vaadin.tests.components.grid.basics.GridBasicsomponents.grid.basics.GridBasics Change-Id: Iddbf1852e6ffafc855f749d6f4ebb235ed0f5703 --- .../com/vaadin/client/widgets/Escalator.java | 100 +++++++++++++++++- .../themes/base/escalator/escalator.scss | 2 + 2 files changed, 98 insertions(+), 4 deletions(-) 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..39f996aa84 100644 --- a/client/src/main/java/com/vaadin/client/widgets/Escalator.java +++ b/client/src/main/java/com/vaadin/client/widgets/Escalator.java @@ -308,6 +308,8 @@ public class Escalator extends Widget static class JsniUtil { public static class TouchHandlerBundle { + public static final String POINTER_EVENT_TYPE_TOUCH = "touch"; + /** * A a = event.getNativeEvent().getTouches(); return vertical ? a.get(0).getPageY() : a.get(0).getPageX(); } @@ -496,7 +512,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 +560,18 @@ public class Escalator extends Widget } } + // Allow touchStart for IE11 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 TouchHandlerBundle.CustomTouchEvent event) { + if (isCurrentBrowserIE11OrEdge()) { + return (POINTER_EVENT_TYPE_TOUCH.equals(event.getPointerType())); + } else { + return (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); @@ -901,7 +929,7 @@ public class Escalator extends Widget public native void detachScrollListener(Element element) /* - * Attaching events with JSNI instead of the GWT event mechanism because + * 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 @@ -996,6 +1024,50 @@ public class Escalator extends Widget } }-*/; + /** + * Using pointerdown, pointermove, pointerup, and pointercancel for IE11 and Edge instead of + * touch* listeners (#18737) + * + * @param element + */ + public native void attachPointerEventListeners(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("pointerdown", this.@com.vaadin.client.widgets.JsniWorkaround::touchStartFunction); + element.addEventListener("pointermove", this.@com.vaadin.client.widgets.JsniWorkaround::touchMoveFunction); + element.addEventListener("pointerup", this.@com.vaadin.client.widgets.JsniWorkaround::touchEndFunction); + element.addEventListener("pointercancel", this.@com.vaadin.client.widgets.JsniWorkaround::touchEndFunction); + }-*/; + + /** + * Using pointerdown, pointermove, pointerup, and pointercancel for IE11 and Edge instead of + * touch* listeners (#18737) + * + * @param element + */ + public native void detachPointerEventListeners(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("pointerdown", this.@com.vaadin.client.widgets.JsniWorkaround::touchStartFunction); + element.removeEventListener("pointermove", this.@com.vaadin.client.widgets.JsniWorkaround::touchMoveFunction); + element.removeEventListener("pointerup", this.@com.vaadin.client.widgets.JsniWorkaround::touchEndFunction); + element.removeEventListener("pointercancel", 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 +5844,13 @@ public class Escalator extends Widget scroller.attachScrollListener(verticalScrollbar.getElement()); scroller.attachScrollListener(horizontalScrollbar.getElement()); scroller.attachMousewheelListener(getElement()); - scroller.attachTouchListeners(getElement()); + + if (isCurrentBrowserIE11OrEdge()) { + // Touch listeners doesn't work for IE11 and Edge (#18737) + scroller.attachPointerEventListeners(getElement()); + } else { + scroller.attachTouchListeners(getElement()); + } } @Override @@ -5781,7 +5859,13 @@ public class Escalator extends Widget scroller.detachScrollListener(verticalScrollbar.getElement()); scroller.detachScrollListener(horizontalScrollbar.getElement()); scroller.detachMousewheelListener(getElement()); - scroller.detachTouchListeners(getElement()); + + if (isCurrentBrowserIE11OrEdge()) { + // Touch listeners doesn't work for IE11 and Edge (#18737) + scroller.detachPointerEventListeners(getElement()); + } else { + scroller.detachTouchListeners(getElement()); + } /* * We can call paintRemoveRows here, because static ranges are simple to @@ -6838,4 +6922,12 @@ public class Escalator extends Widget double getMinCellWidth(int colIndex) { return columnConfiguration.getMinCellWidth(colIndex); } + + /** + * Internal method for checking whether the browser is IE11 or Edge + * @return true only if the current browser is IE11, or Edge + */ + private static boolean isCurrentBrowserIE11OrEdge() { + return BrowserInfo.get().isIE11() || BrowserInfo.get().isEdge(); + } } diff --git a/themes/src/main/themes/VAADIN/themes/base/escalator/escalator.scss b/themes/src/main/themes/VAADIN/themes/base/escalator/escalator.scss index 2d5ad729fc..7758ebe6e8 100644 --- a/themes/src/main/themes/VAADIN/themes/base/escalator/escalator.scss +++ b/themes/src/main/themes/VAADIN/themes/base/escalator/escalator.scss @@ -75,6 +75,8 @@ } .#{$primaryStyleName}-body { + -ms-touch-action: none; + touch-action: none; z-index: 0; top: 0; -- 2.39.5