diff options
3 files changed, 83 insertions, 4 deletions
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<Touch> 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 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..15fda265ca 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,9 @@ } .#{$primaryStyleName}-body { + -ms-touch-action: none; + touch-action: none; + z-index: 0; top: 0; |