diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts index c07df11475..763b9f1c7b 100644 --- a/ionic/components/scroll/scroll.ts +++ b/ionic/components/scroll/scroll.ts @@ -48,10 +48,17 @@ export class Scroll extends Ion { } resetZoom() { - console.log('RESET ZOOM'); - if(this.scale > 1) { - this.zoomElement && this.zoomElement.style[CSS.transform] = 'scale(1)'; + + if(this.zoomElement) { + + this.zoomElement.parentElement.style[CSS.transform] = ''; + + this.zoomElement.style[CSS.transform] = 'scale(1)'; } + + this.scale = 1; + this.zoomLastPosX = 0; + this.zoomLastPosY = 0; } initZoomScrolling() { @@ -68,38 +75,30 @@ export class Scroll extends Ion { this.scale = 1; - let last_scale, deltaX, deltaY, - startX, startY, posX = 0, posY = 0, lastPosX = 0, lastPosY = 0, - zoomRect, viewportWidth, viewportHeight; + this.zoomLastPosX = 0; + this.zoomLastPosY = 0; + + + let last_scale, deltaX, deltaY, startX, startY, posX = 0, posY = 0, zoomRect, viewportWidth, viewportHeight; viewportWidth = this.scrollElement.offsetWidth; viewportHeight = this.scrollElement.offsetWidth; - this.zoomElement.addEventListener('touchstart', (e) => { - console.log('PAN START', e); - startX = e.touches[0].clientX; startY = e.touches[0].clientY; - - //lastPosX = 0; - //lastPosY = 0; - - if(this.scale > 1) { - //e.preventDefault(); - //e.stopPropagation(); - } }); + this.zoomElement.addEventListener('touchmove', (e) => { - console.log('PAN', e); deltaX = e.touches[0].clientX - startX; deltaY = e.touches[0].clientY - startY; if(this.scale > 1) { + console.log('PAN', e); // Move image - posX = deltaX + lastPosX; - posY = deltaY + lastPosY; + posX = deltaX + this.zoomLastPosX; + posY = deltaY + this.zoomLastPosY; console.log(posX, posY); @@ -109,7 +108,7 @@ export class Scroll extends Ion { } else if(-posX > viewportWidth) { // Too far on the right side, let the event bubble up (to enable slider on edges, for example) } 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.stopPropagation(); return false; @@ -125,8 +124,8 @@ export class Scroll extends Ion { posX = posX > 0 ? viewportWidth - 1 : -(viewportWidth - 1); console.log('Setting on posx', posX); } - lastPosX = posX; - lastPosY = posY; + this.zoomLastPosX = posX; + this.zoomLastPosY = posY; }); this.zoomGesture.on('pinchstart', (e) => { @@ -161,10 +160,25 @@ export class Scroll extends Ion { let x = e.pointers[0].clientX; let y = e.pointers[0].clientY; - let tx = (viewportWidth / 2) - x; - let ty = (viewportHeight / 2) - y; + let mx = viewportWidth / 2; + 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) .duration(this.zoomDuration) @@ -181,12 +195,13 @@ export class Scroll extends Ion { zw.fromTo('translateX', posX + 'px', '0px'); zw.fromTo('translateY', posY + 'px', '0px'); + zi.from('scale', this.scale); zi.to('scale', 1); za.play(); posX = 0; - posy = 0; + posY = 0; this.scale = 1; } else { @@ -194,6 +209,7 @@ export class Scroll extends Ion { zw.fromTo('translateX', posX + 'px', tx + 'px'); zw.fromTo('translateY', posY + 'px', ty + 'px'); + zi.from('scale', this.scale); zi.to('scale', this.maxScale); za.play(); diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts index 08b0412ac0..a96405ae94 100644 --- a/ionic/components/slides/slides.ts +++ b/ionic/components/slides/slides.ts @@ -70,10 +70,13 @@ export class Slides extends Ion { paginationClickable: true, lazyLoading: true, onSlideChangeStart: (swiper) => { - console.log('Slide change!', swiper); - this.scrollChildren.forEach((s) => { - s.resetZoom(); - }); + console.log('Slide change!', swiper.previousIndex); + let so = this.scrollChildren._results[swiper.previousIndex]; + if(so) { + setTimeout(() => { + so.resetZoom(); + }, 300); + } }, onSlideChangeEnd: (swiper) => { console.log('Slide changED!');