Expose pinch-to-zoom from scroller

[mlynch]

The scroll system supports it, so we should expose this through the scroll system.

[CoenWarmer]

Definitely would love to see this!

[rayshan]

👍

[mlynch]

Hmm, I'm not exactly sure the scroll system supports this as-is. Need to dig into it a bit more.

[CoenWarmer]

Any luck with this @mlynch? Would be great to have!

[luxcem]

Hi guys, check this : http://codepen.io/arnaud-f/pen/CDatr
I thought it might be included in the scroll directive. It need a clean-up and cross-browser testing but the idea is here.
What do you think ? I could work on a PR if you want.

[mlynch]

@Arnaud-F nice work! That's exactly what the solution would be, looks like we just didn't do anything to support the zooming in the scroll view. I'll see about getting this in. Thanks!

[mlynch]

Okay, I added it! You can use it like this:

<ion-scroll zooming="true" style="width: 100%; height: 100%">
  <img src="blah.jpg" style="width: 2000px; height: 2000px">
</ion-scroll>

And thanks @Arnaud-F, couldn't have done it without you :)

[ssassi]

Thanks @mlynch, works perfectly well on iOS, but when I tested it on an Android device It didn't work. The pinch event is not triggered apparently.
I found this issue created 4 months ago: pbakaus/scroller#50

[CoenWarmer]

Can this be verified by someone? I would really really like this functionality to be in Ionic...

[CoenWarmer]

@mlynch anything new on this functionality?

[jedibatman]

I can verify this with 100% certainty. The issue referenced by @ssassi is valid and should be addressed.

For whatever reason, the touchmove events that are emitted by iOS devices have two additional properties: scale and rotation.

On Android devices, those are not present. Additionally, if you look at the implementation of gestures by hammer.js, you will notice that they extend events being emitted to include this information, in addition to other things -- the library which is used and implemented in $ionicGesture.

What is more interesting is that the presence of those two additional properties on the touchmove event appear to be some form of wizardry on the part of iOS given the fact that it isn't part of the specification or docs from what I can tell.

Two possible solutions to this issue would be to change the way events are being listened to by the ionic.views.scroll to use $ionicGesture instead, or to replicate hammer.js event extending to include this information.

@mlynch, your thoughts?

[CoenWarmer]

That's a shame. Just added this feature to a cross platform app, works great on iOS, Android users won't be able to use this for now.

[jedibatman]

@CoenWarmer, have no fear! I have patched the issue such that it now works on Android.

However, I am currently trying to figure out how best to submit the patch.

I will provide an update as they are available here.

[EnchanterIO]

@jcsmith1859 Hi, do you know if it's already implemented in beta 10 ? Because this isn't working for me:

<ion-scroll zooming="true" style="width: 100%; height: 100%">
  <img src="blah.jpg" style="width: 2000px; height: 2000px">
</ion-scroll>

[jedibatman]

@TrkiSF2 this was merged into the master branch and is tagged for beta 10.

[JerryBels]

Hello,

I know this is a very old issue but wonder if it's possible that a new update broke it on Android ? I'm testing a very simple code :

<ion-modal-view>
    <ion-scroll zooming="true" style="width: 100%; height: 100%;">
        <img ng-src="{{modalMediaThumb}}" class="maxPage" ng-if="modalMediaType == 1" />
    </ion-scroll>
</ion-modal-view>

And it doesn't allow zooming - pinching the screen don't do anything.

[ziobudda]

Any news for this zoom problem ? In ionic 1.3.1 it does not work

[huilianyi]

+1. Android zoom still does not work