fix(gesture): fix double event issue

This commit is contained in:
Max Lynch
2015-08-31 11:27:57 -05:00
parent 4dd9d87ab4
commit c4a2cd7536
7 changed files with 56 additions and 24 deletions

View File

@ -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 {

View File

@ -21,4 +21,7 @@ ion-scroll {
}
.ion-scroll-zoom {
}
}

View File

@ -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);
});
}

View File

@ -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
}

View File

@ -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 = {}

View File

@ -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() {

View File

@ -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,