From c4a2cd7536de711a0b8c44949197bc7de983f829 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Mon, 31 Aug 2015 11:27:57 -0500 Subject: [PATCH] fix(gesture): fix double event issue --- ionic/components/aside/extensions/gestures.ts | 4 +-- ionic/components/scroll/scroll.scss | 3 ++ ionic/components/scroll/scroll.ts | 32 +++++++++++++++---- ionic/components/slides/slides.ts | 23 +++++++------ ionic/gestures/gesture.ts | 12 +++++-- ionic/gestures/slide-edge-gesture.ts | 2 +- ionic/gestures/slide-gesture.ts | 4 +-- 7 files changed, 56 insertions(+), 24 deletions(-) diff --git a/ionic/components/aside/extensions/gestures.ts b/ionic/components/aside/extensions/gestures.ts index efd2efc5c4..8859a2e9fb 100644 --- a/ionic/components/aside/extensions/gestures.ts +++ b/ionic/components/aside/extensions/gestures.ts @@ -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 { diff --git a/ionic/components/scroll/scroll.scss b/ionic/components/scroll/scroll.scss index ca639122fe..7f4b0dbcf3 100644 --- a/ionic/components/scroll/scroll.scss +++ b/ionic/components/scroll/scroll.scss @@ -21,4 +21,7 @@ ion-scroll { } + .ion-scroll-zoom { + } + } diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts index 2ce80a9006..69b060275e 100644 --- a/ionic/components/scroll/scroll.ts +++ b/ionic/components/scroll/scroll.ts @@ -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: '' @@ -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(() => { - this.scrollElement = this.getNativeElement().children[0]; + 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); }); } diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts index 66ebc3e46c..d539980e18 100644 --- a/ionic/components/slides/slides.ts +++ b/ionic/components/slides/slides.ts @@ -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} 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 } diff --git a/ionic/gestures/gesture.ts b/ionic/gestures/gesture.ts index 9b4a7d1836..9e9bd9dd27 100644 --- a/ionic/gestures/gesture.ts +++ b/ionic/gestures/gesture.ts @@ -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 = {} diff --git a/ionic/gestures/slide-edge-gesture.ts b/ionic/gestures/slide-edge-gesture.ts index a24209a1b7..b61e1e68e0 100644 --- a/ionic/gestures/slide-edge-gesture.ts +++ b/ionic/gestures/slide-edge-gesture.ts @@ -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() { diff --git a/ionic/gestures/slide-gesture.ts b/ionic/gestures/slide-gesture.ts index 590b4288eb..f98dc61934 100644 --- a/ionic/gestures/slide-gesture.ts +++ b/ionic/gestures/slide-gesture.ts @@ -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,