mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
fix(gesture): fix double event issue
This commit is contained in:
@ -29,7 +29,7 @@ class AsideTargetGesture extends SlideEdgeGesture {
|
||||
}
|
||||
onSlideEnd(slide, ev) {
|
||||
this.aside.setSliding(false);
|
||||
if (Math.abs(ev.gesture.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5) {
|
||||
if (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5) {
|
||||
|
||||
this.aside.setOpen(!this.aside.isOpen);
|
||||
this.aside.setDoneTransforming(!this.aside.isOpen);
|
||||
@ -86,7 +86,7 @@ class AsideGesture extends SlideEdgeGesture {
|
||||
}
|
||||
onSlideEnd(slide, ev) {
|
||||
this.aside.setSliding(false);
|
||||
if (Math.abs(ev.gesture.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5) {
|
||||
if (Math.abs(ev.velocityX) > 0.2 || Math.abs(slide.delta) > Math.abs(slide.max) * 0.5) {
|
||||
this.aside.setOpen(!this.aside.isOpen);
|
||||
this.aside.setDoneTransforming(!this.aside.isOpen);
|
||||
} else {
|
||||
|
@ -21,4 +21,7 @@ ion-scroll {
|
||||
|
||||
}
|
||||
|
||||
.ion-scroll-zoom {
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1,8 +1,9 @@
|
||||
import {View, ElementRef} from 'angular2/angular2';
|
||||
import {View, ElementRef, onInit} from 'angular2/angular2';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {IonicConfig} from '../../config/config';
|
||||
import {IonicComponent} from '../../config/annotations';
|
||||
import {Gesture} from '../../gestures/gesture';
|
||||
|
||||
|
||||
/**
|
||||
@ -12,12 +13,12 @@ import {IonicComponent} from '../../config/annotations';
|
||||
@IonicComponent({
|
||||
selector: 'ion-scroll',
|
||||
properties: [
|
||||
'scrollX', 'scrollY'
|
||||
'scrollX', 'scrollY', 'zoom'
|
||||
],
|
||||
host: {
|
||||
'[class.scroll-x]': 'scrollX',
|
||||
'[class.scroll-y]': 'scrollY'
|
||||
}
|
||||
},
|
||||
})
|
||||
@View({
|
||||
template: '<scroll-content><ng-content></ng-content></scroll-content>'
|
||||
@ -29,10 +30,29 @@ export class Scroll extends Ion {
|
||||
* @param {IonicConfig} config TODO
|
||||
*/
|
||||
constructor(elementRef: ElementRef, config: IonicConfig) {
|
||||
super(elementRef, config);
|
||||
super(elementRef, ionicConfig);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
onInit() {
|
||||
this.scrollElement = this.getNativeElement().children[0];
|
||||
|
||||
if(this.zoom === "") {
|
||||
this.initZoomScrolling();
|
||||
}
|
||||
}
|
||||
|
||||
initZoomScrolling() {
|
||||
this.scrollElement.children[0] && this.scrollElement.children[0].classList.add('ion-scroll-zoom');
|
||||
|
||||
this.scrollElement.addEventListener('scroll', (e) => {
|
||||
console.log("Scrolling", e);
|
||||
});
|
||||
|
||||
this.zoomGesture = new Gesture(this.scrollElement);
|
||||
this.zoomGesture.listen();
|
||||
|
||||
this.zoomGesture.on('doubletap', (e) => {
|
||||
console.log('Double tap', e);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -134,7 +134,10 @@ export class Slides {
|
||||
* @param {Slide} slide The slide to add.
|
||||
*/
|
||||
add(slide) {
|
||||
console.log('Added slide');
|
||||
this._append(slide);
|
||||
|
||||
this.resize();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -282,8 +285,8 @@ export class Slides {
|
||||
* @param {Event} event TODO
|
||||
*/
|
||||
_dragPre(event) {
|
||||
let dx = event.gesture.deltaX;
|
||||
let dy = event.gesture.deltaY;
|
||||
let dx = event.deltaX;
|
||||
let dy = event.deltaY;
|
||||
|
||||
if(this.disableScroll) {
|
||||
event.preventDefault();
|
||||
@ -306,7 +309,7 @@ export class Slides {
|
||||
* @param {Event} event TODO
|
||||
*/
|
||||
_drag(event) {
|
||||
let dx = event.gesture.deltaX;
|
||||
let dx = event.deltaX;
|
||||
let width = this.containerWidth;
|
||||
let index = this.currentIndex;
|
||||
|
||||
@ -391,8 +394,8 @@ export class Slides {
|
||||
_finish(event, drag) {
|
||||
|
||||
let delta = {
|
||||
x: event.gesture.deltaX,
|
||||
y: event.gesture.deltaY
|
||||
x: event.deltaX,
|
||||
y: event.deltaY
|
||||
}
|
||||
|
||||
let width = this.containerWidth;
|
||||
@ -632,7 +635,7 @@ export class SlidePager {
|
||||
* @returns {Array<Slide>} An array of slides in the slidebox.
|
||||
*/
|
||||
getSlides() {
|
||||
return this.slides.slides;
|
||||
return this.slides.slides.slice(0, 10);
|
||||
}
|
||||
}
|
||||
|
||||
@ -649,8 +652,8 @@ export class SlidesGesture extends DragGesture {
|
||||
this.slides = slides;
|
||||
}
|
||||
onDrag(event) {
|
||||
let x = event.gesture.center.x;
|
||||
let y = event.gesture.center.y;
|
||||
let x = event.center.x;
|
||||
let y = event.center.y;
|
||||
|
||||
this._drag.x = x;
|
||||
this._drag.y = y;
|
||||
@ -660,8 +663,8 @@ export class SlidesGesture extends DragGesture {
|
||||
onDragStart(event) {
|
||||
|
||||
this._drag = {
|
||||
startX: event.gesture.center.x,
|
||||
startY: event.gesture.center.y,
|
||||
startX: event.center.x,
|
||||
startY: event.center.y,
|
||||
time: +new Date
|
||||
}
|
||||
|
||||
|
@ -1,6 +1,11 @@
|
||||
import * as util from 'ionic/util';
|
||||
import {Hammer} from 'ionic/gestures/hammer';
|
||||
|
||||
/**
|
||||
* A gesture recognizer class.
|
||||
*
|
||||
* TODO(mlynch): Re-enable the DOM event simulation that was causing issues (or verify hammer does this already, it might);
|
||||
*/
|
||||
|
||||
export class Gesture {
|
||||
constructor(element, opts = {}) {
|
||||
@ -25,9 +30,9 @@ export class Gesture {
|
||||
}
|
||||
|
||||
on(type, cb) {
|
||||
this.hammertime.on(type, util.noop);
|
||||
this.hammertime.on(type, cb);
|
||||
(this._callbacks[type] || (this._callbacks[type] = [])).push(cb);
|
||||
this.element.addEventListener(type, cb);
|
||||
//this.element.addEventListener(type, cb);
|
||||
}
|
||||
|
||||
listen() {
|
||||
@ -39,7 +44,8 @@ export class Gesture {
|
||||
this.hammertime = null;
|
||||
for (let type in this._callbacks) {
|
||||
for (let i = 0; i < this._callbacks[type].length; i++) {
|
||||
this.element.removeEventListener(type, this._callbacks[type][i]);
|
||||
//this.element.removeEventListener(type, this._callbacks[type][i]);
|
||||
this.hammertime.off(type, this._callbacks[type]);
|
||||
}
|
||||
}
|
||||
this._callbacks = {}
|
||||
|
@ -15,7 +15,7 @@ export class SlideEdgeGesture extends SlideGesture {
|
||||
|
||||
canStart(ev) {
|
||||
this._containerRect = this.getContainerDimensions();
|
||||
return this.edges.every(edge => this._checkEdge(edge, ev.gesture.center));
|
||||
return this.edges.every(edge => this._checkEdge(edge, ev.center));
|
||||
}
|
||||
|
||||
getContainerDimensions() {
|
||||
|
@ -40,7 +40,7 @@ export class SlideGesture extends DragGesture {
|
||||
this.slide.min = min;
|
||||
this.slide.max = max;
|
||||
this.slide.elementStartPos = this.getElementStartPos(this.slide, ev);
|
||||
this.slide.pointerStartPos = ev.gesture.center[this.direction];
|
||||
this.slide.pointerStartPos = ev.center[this.direction];
|
||||
this.slide.started = true;
|
||||
this.onSlideStart(this.slide, ev);
|
||||
}).catch(() => {
|
||||
@ -49,7 +49,7 @@ export class SlideGesture extends DragGesture {
|
||||
}
|
||||
onDrag(ev) {
|
||||
if (!this.slide || !this.slide.started) return;
|
||||
this.slide.pos = ev.gesture.center[this.direction];
|
||||
this.slide.pos = ev.center[this.direction];
|
||||
this.slide.distance = util.clamp(
|
||||
this.slide.min,
|
||||
this.slide.pos - this.slide.pointerStartPos + this.slide.elementStartPos,
|
||||
|
Reference in New Issue
Block a user