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