diff --git a/ionic/components/scroll/scroll.scss b/ionic/components/scroll/scroll.scss
index 51c56260ab..1d6f5c85df 100644
--- a/ionic/components/scroll/scroll.scss
+++ b/ionic/components/scroll/scroll.scss
@@ -29,6 +29,12 @@ ion-scroll {
}
+ .scroll-zoom-wrapper {
+ display: block;
+ width: 100%;
+ text-align: center;
+ }
+
.ion-scroll-zoom {
}
diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts
index 313acd9484..504b290689 100644
--- a/ionic/components/scroll/scroll.ts
+++ b/ionic/components/scroll/scroll.ts
@@ -24,7 +24,7 @@ import * as util from 'ionic/util';
},
})
@View({
- template: ''
+ template: '
'
})
export class Scroll extends Ion {
/**
@@ -36,6 +36,7 @@ export class Scroll extends Ion {
super(elementRef, ionicConfig);
this.maxScale = 3;
+ this.zoomDuration = 250;
}
onInit() {
@@ -47,7 +48,7 @@ export class Scroll extends Ion {
}
initZoomScrolling() {
- this.zoomElement = this.scrollElement.children[0];
+ this.zoomElement = this.scrollElement.children[0].children[0];
this.zoomElement && this.zoomElement.classList.add('ion-scroll-zoom');
@@ -58,7 +59,55 @@ export class Scroll extends Ion {
this.zoomGesture = new Gesture(this.scrollElement);
this.zoomGesture.listen();
- let scale = 1, last_scale;
+ let scale = 1, last_scale, deltaX, deltaY,
+ startX, startY, posX = 0, posY = 0, lastPosX = 0, lastPosY = 0;
+
+
+ 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(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(scale > 1) {
+
+ // Move image
+ posX = deltaX + lastPosX;
+ posY = deltaY + lastPosY;
+
+ this.zoomElement.parentElement.style[CSS.transform] = 'translate3d(' + posX + 'px, ' + posY + 'px, 0)';
+
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ }
+ });
+ this.zoomElement.addEventListener('touchend', (e) => {
+ console.log('PANEND', e);
+ lastPosX = posX;
+ lastPosY = posY;
+ /*
+ if(scale > 1) {
+ console.log('BLOCKING SCROLL');
+ e.preventDefault();
+ e.stopPropagation();
+ return false;
+ }
+ */
+ });
this.zoomGesture.on('pinchstart', (e) => {
last_scale = scale;
@@ -75,8 +124,8 @@ export class Scroll extends Ion {
//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')
+ .duration(this.zoomDuration)
+ .easing('linear')
.from('scale', scale)
.to('scale', this.maxScale);
za.play();
@@ -88,8 +137,8 @@ export class Scroll extends Ion {
this.zoomGesture.on('doubletap', (e) => {
console.log("Double tap");
let za = new Animation(this.zoomElement)
- .duration(160)
- .easing('ease-in-out');
+ .duration(this.zoomDuration)
+ .easing('linear');
if(scale > 1) {
za.from('scale', scale);
diff --git a/ionic/components/slides/test/basic/index.ts b/ionic/components/slides/test/basic/index.ts
index c85b21eb18..f1e754eab7 100644
--- a/ionic/components/slides/test/basic/index.ts
+++ b/ionic/components/slides/test/basic/index.ts
@@ -21,7 +21,9 @@ class MyApp {
method: 'jsonp'
}).then((val) => {
this.images = val.photos.photo.slice(0, 20);
- this.slider.update();
+ setTimeout(() => {
+ this.slider.update();
+ });
}, (err) => {
alert('Unable to load images');
console.error(err);