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

Zoomer

Browse Source
This commit is contained in:
Max Lynch
2015-09-01 15:45:28 -05:00
parent 1027d2bacc
commit 11f47a72a1
2 changed files with 50 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,10 +48,17 @@ export class Scroll extends Ion {
} }
resetZoom() { resetZoom() {
console.log('RESET ZOOM');
if(this.scale > 1) { if(this.zoomElement) {
this.zoomElement && this.zoomElement.style[CSS.transform] = 'scale(1)';
this.zoomElement.parentElement.style[CSS.transform] = '';
this.zoomElement.style[CSS.transform] = 'scale(1)';
} }
this.scale = 1;
this.zoomLastPosX = 0;
this.zoomLastPosY = 0;
} }
initZoomScrolling() { initZoomScrolling() {
@ -68,38 +75,30 @@ export class Scroll extends Ion {
this.scale = 1; this.scale = 1;
let last_scale, deltaX, deltaY, this.zoomLastPosX = 0;
startX, startY, posX = 0, posY = 0, lastPosX = 0, lastPosY = 0, this.zoomLastPosY = 0;
zoomRect, viewportWidth, viewportHeight;
let last_scale, deltaX, deltaY, startX, startY, posX = 0, posY = 0, zoomRect, viewportWidth, viewportHeight;
viewportWidth = this.scrollElement.offsetWidth; viewportWidth = this.scrollElement.offsetWidth;
viewportHeight = this.scrollElement.offsetWidth; viewportHeight = this.scrollElement.offsetWidth;
this.zoomElement.addEventListener('touchstart', (e) => { this.zoomElement.addEventListener('touchstart', (e) => {
console.log('PAN START', e);
startX = e.touches[0].clientX; startX = e.touches[0].clientX;
startY = e.touches[0].clientY; startY = e.touches[0].clientY;
//lastPosX = 0;
//lastPosY = 0;
if(this.scale > 1) {
//e.preventDefault();
//e.stopPropagation();
}
}); });
this.zoomElement.addEventListener('touchmove', (e) => { this.zoomElement.addEventListener('touchmove', (e) => {
console.log('PAN', e);
deltaX = e.touches[0].clientX - startX; deltaX = e.touches[0].clientX - startX;
deltaY = e.touches[0].clientY - startY; deltaY = e.touches[0].clientY - startY;
if(this.scale > 1) { if(this.scale > 1) {
console.log('PAN', e);
// Move image // Move image
posX = deltaX + lastPosX; posX = deltaX + this.zoomLastPosX;
posY = deltaY + lastPosY; posY = deltaY + this.zoomLastPosY;
console.log(posX, posY); console.log(posX, posY);
@ -109,7 +108,7 @@ export class Scroll extends Ion {
} else if(-posX > viewportWidth) { } else if(-posX > viewportWidth) {
// Too far on the right side, let the event bubble up (to enable slider on edges, for example) // Too far on the right side, let the event bubble up (to enable slider on edges, for example)
} else { } else {
this.zoomElement.parentElement.style[CSS.transform] = 'translate3d(' + posX + 'px, ' + posY + 'px, 0)'; this.zoomElement.parentElement.style[CSS.transform] = 'translateX(' + posX + 'px) translateY(' + posY + 'px)';
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
return false; return false;
@ -125,8 +124,8 @@ export class Scroll extends Ion {
posX = posX > 0 ? viewportWidth - 1 : -(viewportWidth - 1); posX = posX > 0 ? viewportWidth - 1 : -(viewportWidth - 1);
console.log('Setting on posx', posX); console.log('Setting on posx', posX);
} }
lastPosX = posX; this.zoomLastPosX = posX;
lastPosY = posY; this.zoomLastPosY = posY;
}); });
this.zoomGesture.on('pinchstart', (e) => { this.zoomGesture.on('pinchstart', (e) => {
@ -161,10 +160,25 @@ export class Scroll extends Ion {
let x = e.pointers[0].clientX; let x = e.pointers[0].clientX;
let y = e.pointers[0].clientY; let y = e.pointers[0].clientY;
let tx = (viewportWidth / 2) - x; let mx = viewportWidth / 2;
let ty = (viewportHeight / 2) - y; let my = viewportHeight / 2;
console.log("Double tap", e, x, y, tx, ty); let tx, ty;
if(x > mx) {
// Greater than half
tx = -x;
} else {
// Less than or equal to half
tx = (viewportWidth - x);
}
if(y > my) {
ty = -y;
} else {
ty = y-my;
}
console.log(y);
let zi = new Animation(this.zoomElement) let zi = new Animation(this.zoomElement)
.duration(this.zoomDuration) .duration(this.zoomDuration)
@ -181,12 +195,13 @@ export class Scroll extends Ion {
zw.fromTo('translateX', posX + 'px', '0px'); zw.fromTo('translateX', posX + 'px', '0px');
zw.fromTo('translateY', posY + 'px', '0px'); zw.fromTo('translateY', posY + 'px', '0px');
zi.from('scale', this.scale); zi.from('scale', this.scale);
zi.to('scale', 1); zi.to('scale', 1);
za.play(); za.play();
posX = 0; posX = 0;
posy = 0; posY = 0;
this.scale = 1; this.scale = 1;
} else { } else {
@ -194,6 +209,7 @@ export class Scroll extends Ion {
zw.fromTo('translateX', posX + 'px', tx + 'px'); zw.fromTo('translateX', posX + 'px', tx + 'px');
zw.fromTo('translateY', posY + 'px', ty + 'px'); zw.fromTo('translateY', posY + 'px', ty + 'px');
zi.from('scale', this.scale); zi.from('scale', this.scale);
zi.to('scale', this.maxScale); zi.to('scale', this.maxScale);
za.play(); za.play();

11
ionic/components/slides/slides.ts
View File

@ -70,10 +70,13 @@ export class Slides extends Ion {
paginationClickable: true, paginationClickable: true,
lazyLoading: true, lazyLoading: true,
onSlideChangeStart: (swiper) => { onSlideChangeStart: (swiper) => {
console.log('Slide change!', swiper); console.log('Slide change!', swiper.previousIndex);
this.scrollChildren.forEach((s) => { let so = this.scrollChildren._results[swiper.previousIndex];
s.resetZoom(); if(so) {
}); setTimeout(() => {
so.resetZoom();
}, 300);
}
}, },
onSlideChangeEnd: (swiper) => { onSlideChangeEnd: (swiper) => {
console.log('Slide changED!'); console.log('Slide changED!');