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({ @IonicComponent({
selector: 'ion-scroll', selector: 'ion-scroll',
properties: [ properties: [
'scrollX', 'scrollY', 'zoom' 'scrollX', 'scrollY', 'zoom', 'maxZoom'
], ],
host: { host: {
'[class.scroll-x]': 'scrollX', '[class.scroll-x]': 'scrollX',
@ -35,15 +35,13 @@ export class Scroll extends Ion {
constructor(elementRef: ElementRef, ionicConfig: IonicConfig) { constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
super(elementRef, ionicConfig); super(elementRef, ionicConfig);
this.zoomAmount = 1; this.maxScale = 3;
} }
onInit() { onInit() {
this.scrollElement = this.getNativeElement().children[0]; this.scrollElement = this.getNativeElement().children[0];
if(util.isTrueProperty(this.zoom)) { if(util.isTrueProperty(this.zoom)) {
console.log('Zoom?', this.zoom);
this.initZoomScrolling(); this.initZoomScrolling();
} }
} }
@ -60,25 +58,51 @@ export class Scroll extends Ion {
this.zoomGesture = new Gesture(this.scrollElement); this.zoomGesture = new Gesture(this.scrollElement);
this.zoomGesture.listen(); 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) => { 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.zoomGesture.on('doubletap', (e) => {
this.zoomAnimation = new Animation(this.zoomElement) console.log("Double tap");
.duration(200) let za = new Animation(this.zoomElement)
.easing('ease-in'); .duration(160)
.easing('ease-in-out');
if(this.zoomAmount > 1) { if(scale > 1) {
this.zoomAnimation.from('scale', this.zoomAmount); za.from('scale', scale);
this.zoomAnimation.to('scale', 1); za.to('scale', 1);
this.zoomAnimation.play(); za.play();
this.zoomAmount = 1;
scale = 1;
} else { } else {
this.zoomAnimation.from('scale', this.zoomAmount); za.from('scale', scale);
this.zoomAnimation.to('scale', 3); za.to('scale', this.maxScale);
this.zoomAnimation.play(); za.play();
this.zoomAmount = 3;
scale = this.maxScale;
} }
//this.zoomElement.style[CSS.transform] = 'scale(3)'; //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, { 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' method: 'jsonp'
}).then((val) => { }).then((val) => {
this.images = val.photos.photo; this.images = val.photos.photo.slice(0, 20);
this.slider.update(); this.slider.update();
}, (err) => { }, (err) => {
alert('Unable to load images'); alert('Unable to load images');