Amphtml: implement pinch zoom on <amp-image-lightbox>

[muxin]

Pinch zoom was added to <amp-lightbox-viewer> (now <amp-lightbox-gallery>) in https://github.com/ampproject/amphtml/pull/12219. This FR is to backport it to <amp-image-lightbox>.

What you need to know

• Some basic knowledge of how to use the Gesture Recognizers library
• Be able to find <amp-image-lightbox> and test it locally.
• You will need a mobile phone to test this. If you have android, you can use remote device debugging with Chrome. Otherwise, you can setup ngrok to proxy localhost.

The feature

<amp-image-lightbox> opens up an image in full screen mode. On mobile phones, people can use double tap to zoom in on the image. We want to also allow people to zoom in and out via pinch.

Implementation

The source code for amp-image-lightbox is located at extensions/amp-image-lightbox/0.1/. The manual test is located at test/manual/amp-image-lightbox.amp.html. Take a look at https://github.com/ampproject/amphtml/pull/12219 and the component amp-image-viewer. This contains an implementation of pinch zoom that can be ported back to amp-image-viewer.

Step by step

• [ ] Claim this issue by adding a comment below. Please only claim this bug if you plan on starting work in the next day or so. (If you join the AMP Project we'll be able to assign this issue to you after you've claimed it.)
• [ ] If you aren't too familiar with Git/GitHub, see the Getting Started End-to-End Guide for an intro to Git & GitHub, and how to get a copy of the code. You can also refer to the Quick Start Guide for the necessary setup steps with less explanation than the End-to-End guide.
• [ ] Follow the instructions for building AMP.
• [ ] [Create a Git branch](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#create-a-git-branch) for making your changes.
• [ ] [Sign the Contributor License Agreement](https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#contributor-license-agreement) before creating a Pull Request. (If you are contributing code on behalf of a corporation start this process as early as possible.)
• [ ] [Commit your changes](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#edit-files-and-commit-them) frequently.
• [ ] [Push your changes to GitHub](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#push-your-changes-to-your-github-fork).
• [ ] [Create a Pull Request](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#send-a-pull-request-ie-request-a-code-review). Mention closes Issue #9891 in the description and tag @cathyxz for review.
• [ ] [Respond to your reviewer's comments](https://github.com/ampproject/amphtml/blob/master/contributing/getting-started-e2e.md#respond-to-pull-request-comments) (if any).

Once approved, your changes will be merged. ⚡⚡⚡Congrats on making your first contribution to the AMP Project!⚡⚡⚡ You'll be able to see it live across the web soon!

Thanks, and we hope to see more contributions from you soon.

Questions?

If you have questions ask @cathyxz in this issue or on your Pull Request (if you've created one) or see the How to get help section of the Getting Started guide.

[mattwomple]

I assumed this was fixed with https://github.com/ampproject/amphtml/pull/12219 but pinch-zoom doesn't appear to be working at all right now in AMP version 1519774160068 .

Samples:

• amp-image-lightbox playground
• minimal example

Tested UserAgents:

• Mozilla/5.0 (Linux; Android 7.0; Moto G (5) Plus Build/NPNS25.137-93-4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.137 Mobile Safari/537.36
• Mozilla/5.0 (Linux; Android 8.0.0; moto x4 Build/OPWS27.57-25-6-6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Mobile Safari/537.36

[cathyxz]

@mattwomple yup, we added it to the new lightbox component <amp-lightbox-gallery>. Didn't backfill it to <amp-image-lightbox> yet. You can implement it in pretty much the exact same way as #12219 (the <amp-image-lightbox> component has an internal ImageViewer class. I'm trying to wrap up and launch <amp-lightbox-gallery> soon, which should deprecate <amp-image-lightbox>, but happy to take a contribution if you want this right now.

[HeidiW]

Hello, I would like to claim this as a first issue. Is it available? I am a first-time contributor to any open source @cathyxz

[cathyxz]

It's all yours. =) Feel free to ping me here or on slack if you run into any issues. If you join the project per https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md, it allows me to assign the issue to you.

[HeidiW]

@cathyxz I don't have experience working with a large code base. I was able to get through all the steps to get AMP up and running, but is this the place to see my changes as I debug remotely? http://localhost:8000/test/manual/amp-image-lightbox.amp.html

[cathyxz]

Yup!

[aghassemi]

dedupe with https://github.com/ampproject/amphtml/issues/22955