javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Tap and pinch to zoom for scroller zoom

Browse Source
This commit is contained in:
Max Lynch
2015-09-01 10:24:35 -05:00
parent 3157f2ff66
commit 3e516dce46
2 changed files with 42 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
ionic/components/scroll/scroll.ts
View File

@ -16,7 +16,7 @@ import * as util from 'ionic/util';
@IonicComponent({
selector: 'ion-scroll',
properties: [
'scrollX', 'scrollY', 'zoom'
'scrollX', 'scrollY', 'zoom', 'maxZoom'
],
host: {
'[class.scroll-x]': 'scrollX',
@ -35,15 +35,13 @@ export class Scroll extends Ion {
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
super(elementRef, ionicConfig);
this.zoomAmount = 1;
this.maxScale = 3;
}
onInit() {
this.scrollElement = this.getNativeElement().children[0];
if(util.isTrueProperty(this.zoom)) {
console.log('Zoom?', this.zoom);
this.initZoomScrolling();
}
}
@ -60,25 +58,51 @@ export class Scroll extends Ion {
this.zoomGesture = new Gesture(this.scrollElement);
this.zoomGesture.listen();
let scale = 1, last_scale;
this.zoomGesture.on('pinchstart', (e) => {
last_scale = scale;
console.log('Last scale', e.scale);
});
this.zoomGesture.on('pinch', (e) => {
console.log('PINCH', e);
scale = Math.max(1, Math.min(last_scale * e.scale, 10));
console.log('Scaling', scale);
this.zoomElement.style[CSS.transform] = 'scale(' + scale + ')'
});
this.zoomGesture.on('pinchend', (e) => {
//last_scale = Math.max(1, Math.min(last_scale * e.scale, 10));
if(scale > this.maxScale) {
let za = new Animation(this.zoomElement)
.duration(160)
.easing('ease-in-out')
.from('scale', scale)
.to('scale', this.maxScale);
za.play();
scale = this.maxScale;
}
});
this.zoomGesture.on('doubletap', (e) => {
this.zoomAnimation = new Animation(this.zoomElement)
.duration(200)
.easing('ease-in');
console.log("Double tap");
let za = new Animation(this.zoomElement)
.duration(160)
.easing('ease-in-out');
if(this.zoomAmount > 1) {
this.zoomAnimation.from('scale', this.zoomAmount);
this.zoomAnimation.to('scale', 1);
this.zoomAnimation.play();
this.zoomAmount = 1;
if(scale > 1) {
za.from('scale', scale);
za.to('scale', 1);
za.play();
scale = 1;
} else {
this.zoomAnimation.from('scale', this.zoomAmount);
this.zoomAnimation.to('scale', 3);
this.zoomAnimation.play();
this.zoomAmount = 3;
za.from('scale', scale);
za.to('scale', this.maxScale);
za.play();
scale = this.maxScale;
}
//this.zoomElement.style[CSS.transform] = 'scale(3)';
});

2
ionic/components/slides/test/basic/index.ts
View File

@ -20,7 +20,7 @@ class MyApp {
Http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key=' + FLICKR_API_KEY + '&jsoncallback=JSON_CALLBACK&format=json&tags=' + tags, {
method: 'jsonp'
}).then((val) => {
this.images = val.photos.photo;
this.images = val.photos.photo.slice(0, 20);
this.slider.update();
}, (err) => {
alert('Unable to load images');