diff --git a/src/vaadin-dialog-draggable-mixin.html b/src/vaadin-dialog-draggable-mixin.html index 2ff1041..202714d 100644 --- a/src/vaadin-dialog-draggable-mixin.html +++ b/src/vaadin-dialog-draggable-mixin.html @@ -40,6 +40,11 @@ } _startDrag(e) { + // Don't initiate when there's more than 1 touch (pinch zoom) + if (e.type === 'touchstart' && e.touches.length > 1) { + return; + } + if (this.draggable && (e.button === 0 || e.touches)) { const resizerContainer = this.$.overlay.$.resizerContainer; const isResizerContainer = e.target === resizerContainer; @@ -47,8 +52,7 @@ const isContentPart = e.target === this.$.overlay.$.content; const isDraggable = e.target.classList.contains('draggable'); if ((isResizerContainer && !isResizerContainerScrollbar) || isContentPart || isDraggable) { - // Is needed to prevent text selection in Safari - !this._touchDevice && !isDraggable && e.preventDefault(); + !isDraggable && e.preventDefault(); this._originalBounds = this._getOverlayBounds(); const event = this.__getMouseOrFirstTouchEvent(e); this._originalMouseCoords = {top: event.pageY, left: event.pageX}; @@ -65,8 +69,7 @@ _drag(e) { const event = this.__getMouseOrFirstTouchEvent(e); - if (this._eventInWindow(event) && - (e.type !== 'touchmove' || e.type === 'touchmove' && e.touches.length < 2)) { + if (this._eventInWindow(event)) { const top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top); const left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left); this._setBounds({top, left}); diff --git a/src/vaadin-dialog-resizable-mixin.html b/src/vaadin-dialog-resizable-mixin.html index 1858deb..e2c7fe5 100644 --- a/src/vaadin-dialog-resizable-mixin.html +++ b/src/vaadin-dialog-resizable-mixin.html @@ -132,6 +132,11 @@ } _startResize(e, direction) { + // Don't initiate when there's more than 1 touch (pinch zoom) + if (e.type === 'touchstart' && e.touches.length > 1) { + return; + } + if (e.button === 0 || e.touches) { e.preventDefault(); this._originalBounds = this._getOverlayBounds(); @@ -149,8 +154,7 @@ _resize(e, resizer) { const event = this.__getMouseOrFirstTouchEvent(e); - if (this._eventInWindow(event) && - (e.type !== 'touchmove' || e.type === 'touchmove' && e.touches.length < 2)) { + if (this._eventInWindow(event)) { const minimumSize = 40; resizer.split('').forEach((direction) => { switch (direction) { diff --git a/src/vaadin-dialog.html b/src/vaadin-dialog.html index e765d57..a126409 100644 --- a/src/vaadin-dialog.html +++ b/src/vaadin-dialog.html @@ -277,15 +277,6 @@ this._observer = new Polymer.FlattenedNodesObserver(this, info => { this._setTemplateFromNodes(info.addedNodes); }); - - // We need to prevent dragging behind the non-draggable content of the dialog (i.e slotted text / button) - this.$.overlay.$.content.addEventListener('touchmove', this._preventMove, {passive: false}); - } - - _preventMove(e) { - if (e.touches.length < 2) { - e.preventDefault(); - } } _setTemplateFromNodes(nodes) { diff --git a/test/vaadin-dialog_draggable-resizable-test.html b/test/vaadin-dialog_draggable-resizable-test.html index 3e1b672..987980e 100644 --- a/test/vaadin-dialog_draggable-resizable-test.html +++ b/test/vaadin-dialog_draggable-resizable-test.html @@ -512,7 +512,7 @@ y: Math.floor(bounds.top + (bounds.height / 2)) }; const toXY = {x: fromXY.x + dx, y: fromXY.y + dx}; - dispatchTouchEvent(target, 'touchstart', fromXY); + dispatchTouchEvent(target, 'touchstart', fromXY, multitouch); dispatchTouchEvent(target, 'touchmove', toXY, multitouch); dispatchTouchEvent(target, 'touchend', toXY); } @@ -525,7 +525,7 @@ }; const toXY = {x: fromXY.x + dx, y: fromXY.y + dy}; - dispatchTouchEvent(target, 'touchstart', fromXY); + dispatchTouchEvent(target, 'touchstart', fromXY, multitouch); dispatchTouchEvent(target, 'touchmove', toXY, multitouch); dispatchTouchEvent(target, 'touchend', toXY); } @@ -558,9 +558,9 @@ expect(e.defaultPrevented).to.be.true; }); - it('should prevent default of the touchmove when dragged', () => { + it('should not prevent default of the touchmove events', () => { const e = dispatchTouchEvent(draggableOverlay.$.content, 'touchmove'); - expect(e.defaultPrevented).to.be.true; + expect(e.defaultPrevented).to.be.false; }); it('should bring to front on touch start', () => {