From 2b74113e000c1412598b679d67b91da5eb962441 Mon Sep 17 00:00:00 2001 From: khmyznikov Date: Sun, 20 May 2018 19:11:21 +0300 Subject: [PATCH 1/2] Update index.ts --- src/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.ts b/src/index.ts index 7f9ff9a..9ae76f5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -27,6 +27,8 @@ function onTouchstart( e:TouchEvent ) { // only allow one drag operation at a time if( activeDragOperation ) { console.log( "dnd-poly: drag operation already active" ); + // try avoid infinite loop on iOS if something happened with draggable dom object (disappeared or changed during drag) + activeDragOperation._cleanup(); return; } From d973e5d0bd60296c7cc2007da06bf918bd92eba0 Mon Sep 17 00:00:00 2001 From: Gleb Khmyznikov Date: Thu, 20 Sep 2018 13:11:51 +0300 Subject: [PATCH 2/2] Feature detection suggestion I have made some research about android webkit and iOS safari. Caniuse not right about Chrome android, he have support of native DnD from M54 version. And i have check iOS 11-12 and 9-10, so made regexp for detection iOS version and android chrome version. --- .../internal/drag-operation-controller.d.ts | 2 +- src/index.ts | 2 +- src/internal/drag-operation-controller.ts | 10 +++--- src/internal/feature-detection.ts | 32 +++++++++++++------ 4 files changed, 30 insertions(+), 16 deletions(-) diff --git a/release/internal/drag-operation-controller.d.ts b/release/internal/drag-operation-controller.d.ts index 0621ea0..c4bd0e7 100644 --- a/release/internal/drag-operation-controller.d.ts +++ b/release/internal/drag-operation-controller.d.ts @@ -29,7 +29,7 @@ export declare class DragOperationController { private _iterationIntervalId; constructor(_initialEvent: TouchEvent, _config: Config, _sourceNode: HTMLElement, _dragOperationEndedCb: (config: Config, event: TouchEvent, state: DragOperationState) => void); private _setup(); - private _cleanup(); + cleanup(); private _onTouchMove(event); private _onTouchEndOrCancel(event); private _dragAndDropProcessModelIteration(); diff --git a/src/index.ts b/src/index.ts index 9ae76f5..4200d07 100644 --- a/src/index.ts +++ b/src/index.ts @@ -28,7 +28,7 @@ function onTouchstart( e:TouchEvent ) { if( activeDragOperation ) { console.log( "dnd-poly: drag operation already active" ); // try avoid infinite loop on iOS if something happened with draggable dom object (disappeared or changed during drag) - activeDragOperation._cleanup(); + activeDragOperation.cleanup(); return; } diff --git a/src/internal/drag-operation-controller.ts b/src/internal/drag-operation-controller.ts index 2a20d4d..06c17be 100644 --- a/src/internal/drag-operation-controller.ts +++ b/src/internal/drag-operation-controller.ts @@ -173,7 +173,7 @@ export class DragOperationController { console.log( "dnd-poly: dragstart cancelled" ); // dragstart has been prevented -> cancel d'n'd this._dragOperationState = DragOperationState.CANCELLED; - this._cleanup(); + this.cleanup(); return false; } @@ -245,7 +245,7 @@ export class DragOperationController { return true; } - private _cleanup() { + public cleanup() { console.log( "dnd-poly: cleanup" ); @@ -304,7 +304,7 @@ export class DragOperationController { if( !startDrag ) { - this._cleanup(); + this.cleanup(); return; } @@ -398,7 +398,7 @@ export class DragOperationController { // drag operation did not even start if( this._dragOperationState === DragOperationState.POTENTIAL ) { - this._cleanup(); + this.cleanup(); return; } @@ -796,7 +796,7 @@ export class DragOperationController { // drag operation over and out this._dragOperationState = DragOperationState.ENDED; - this._cleanup(); + this.cleanup(); } // diff --git a/src/internal/feature-detection.ts b/src/internal/feature-detection.ts index b637157..721c5e6 100644 --- a/src/internal/feature-detection.ts +++ b/src/internal/feature-detection.ts @@ -12,15 +12,29 @@ export function detectFeatures():DetectedFeatures { userAgentSupportingNativeDnD: undefined }; - const isBlinkEngine = !!((window).chrome) || /chrome/i.test( navigator.userAgent ); - - features.userAgentSupportingNativeDnD = !( - // if is mobile safari or android browser -> no native dnd - (/iPad|iPhone|iPod|Android/.test( navigator.userAgent )) - || // OR - //if is blink(chrome/opera) with touch events enabled -> no native dnd - (isBlinkEngine && ("ontouchstart" in document.documentElement)) - ); + // const isBlinkEngine = !!((window).chrome) || /chrome/i.test( navigator.userAgent ); + + // features.userAgentSupportingNativeDnD = !( + // // if is mobile safari or android browser -> no native dnd + // (/iPad|iPhone|iPod|Android/.test( navigator.userAgent )) + // || // OR + // //if is blink(chrome/opera) with touch events enabled -> no native dnd + // (isBlinkEngine && ("ontouchstart" in document.documentElement)) + // ); + + if (/iPad|iPhone|iPod/.test(navigator.userAgent)) { + // from iOS 11 and higher are supported + features.userAgentSupportingNativeDnD = !/(OS \d_)|(OS 10_)/.test(navigator.userAgent); + } + else + if (/Android/.test(navigator.userAgent)) { + // from Chrome Mobile 54 and higher are supported + features.userAgentSupportingNativeDnD = !/(Chrome\/5[0-3]\.)|(Chrome\/[1-4]\d\.)|(Chrome\/\d\.)/.test(navigator.userAgent); + } + else { + // should work on all ten years old desktop browsers and younger + features.userAgentSupportingNativeDnD = true; + } return features; }