fix(picker): safari fired pointerEnd() twice (#6708)

closes #6704
This commit is contained in:
Manu Mtz.-Almeida
2016-05-31 23:36:59 +02:00
committed by Adam Bradley
parent 6e3859a657
commit 170cf8c409

View File

@ -103,7 +103,7 @@ export class Picker extends ViewController {
'(touchend)': 'pointerEnd($event)', '(touchend)': 'pointerEnd($event)',
'(mousedown)': 'pointerStart($event)', '(mousedown)': 'pointerStart($event)',
'(mousemove)': 'pointerMove($event)', '(mousemove)': 'pointerMove($event)',
'(body:mouseup)': 'pointerEnd($event)', '(body:mouseup)': 'pointerEnd($event)'
} }
}) })
class PickerColumnCmp { class PickerColumnCmp {
@ -122,6 +122,8 @@ class PickerColumnCmp {
maxY: number; maxY: number;
rotateFactor: number; rotateFactor: number;
lastIndex: number; lastIndex: number;
receivingEvents: boolean = false;
@Output() ionChange: EventEmitter<any> = new EventEmitter(); @Output() ionChange: EventEmitter<any> = new EventEmitter();
constructor(config: Config, private _sanitizer: DomSanitizationService) { constructor(config: Config, private _sanitizer: DomSanitizationService) {
@ -156,22 +158,18 @@ class PickerColumnCmp {
this.startY = pointerCoord(ev).y; this.startY = pointerCoord(ev).y;
// reset everything // reset everything
this.receivingEvents = true;
this.velocity = 0; this.velocity = 0;
this.pos.length = 0; this.pos.length = 0;
this.pos.push(this.startY, Date.now()); this.pos.push(this.startY, Date.now());
let minY = this.col.options.length - 1; let minY = (this.col.options.length - 1);
let maxY = 0; let maxY = 0;
for (var i = 0; i < this.col.options.length; i++) { for (var i = 0; i < this.col.options.length; i++) {
if (this.col.options[i].disabled) { if (!this.col.options[i].disabled) {
continue; minY = Math.min(minY, i);
} maxY = Math.max(maxY, i);
if (i < minY) {
minY = i;
}
if (i > maxY) {
maxY = i;
} }
} }
@ -183,7 +181,10 @@ class PickerColumnCmp {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
if (this.startY !== null) { if (this.startY === null) {
return;
}
if (this.isPrevented(ev)) { if (this.isPrevented(ev)) {
return; return;
} }
@ -210,13 +211,16 @@ class PickerColumnCmp {
this.update(y, 0, false, false); this.update(y, 0, false, false);
} }
}
pointerEnd(ev) { pointerEnd(ev) {
if (this.isPrevented(ev)) { if (this.isPrevented(ev)) {
return; return;
} }
if (!this.receivingEvents) {
return;
}
this.receivingEvents = false;
this.velocity = 0; this.velocity = 0;
if (this.bounceFrom > 0) { if (this.bounceFrom > 0) {
@ -392,14 +396,9 @@ class PickerColumnCmp {
let max = 0; let max = 0;
for (var i = 0; i < this.col.options.length; i++) { for (var i = 0; i < this.col.options.length; i++) {
var opt = this.col.options[i]; if (!this.col.options[i].disabled) {
if (!opt.disabled) { min = Math.min(min, i);
if (i < min) { max = Math.max(max, i);
min = i;
}
if (i > max) {
max = i;
}
} }
} }
@ -411,18 +410,20 @@ class PickerColumnCmp {
} }
} }
isPrevented(ev) { isPrevented(ev): boolean {
let now = Date.now();
if (ev.type.indexOf('touch') > -1) { if (ev.type.indexOf('touch') > -1) {
// this is a touch event, so prevent mouse events for a while // this is a touch event, so prevent mouse events for a while
this.msPrv = Date.now() + 2000; this.msPrv = now + 2000;
} else if (this.msPrv > Date.now() && ev.type.indexOf('mouse') > -1) { } else if (this.msPrv > now && ev.type.indexOf('mouse') > -1) {
// this is a mouse event, and a touch event already happend recently // this is a mouse event, and a touch event already happend recently
// prevent the calling method from continuing // prevent the calling method from continuing
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
return true; return true;
} }
return false;
} }
} }
@ -445,7 +446,7 @@ class PickerColumnCmp {
'</div>' + '</div>' +
'<div class="picker-columns">' + '<div class="picker-columns">' +
'<div class="picker-above-highlight"></div>' + '<div class="picker-above-highlight"></div>' +
'<div *ngFor="let c of d.columns" [col]="c" class="picker-col"> (ionChange)="_colChange($event)"</div>' + '<div *ngFor="let c of d.columns" [col]="c" class="picker-col" (ionChange)="_colChange($event)"></div>' +
'<div class="picker-below-highlight"></div>' + '<div class="picker-below-highlight"></div>' +
'</div>' + '</div>' +
'</div>', '</div>',