enable pinch zoom (closes #53)

README.md

@@ -233,25 +233,19 @@ To display a caption, add a `data-caption` attribute with the desired text or HT
 `onChangeImage` runs when a gallery image is changed and provides useful data about the current image.
 
 ```javascript
-// example of how scrolling can be disabled using callbacks
+// example of how scrolling can be disabled using henrygd.me/hide-show-scroll
 BigPicture({
 	el: e.target,
-	animationStart: function () {
-		// executed immediately before open animation starts
-		document.documentElement.style.overflowY = 'hidden'
-		document.body.style.overflowY = 'scroll'
-	},
+	// animationStart executed immediately before open animation starts
+	animationStart: hideShowScroll.hide,
+	// animationEnd executed immediately after open animation finishes
 	animationEnd: function () {
-		// executed immediately after open animation finishes
 		console.log('it has opened')
 	},
-	onClose: function () {
-		// executed immediately after close animation finishes
-		document.documentElement.style.overflowY = 'auto'
-		document.body.style.overflowY = 'auto'
-	},
+	// onClose executed immediately after close animation finishes
+	onClose: hideShowScroll.show,
+	// onChangeImage executed on gallery image change
 	onChangeImage: function (props) {
-		// executed on gallery image change
 		console.log('gallery image changed', props)
 	},
 })

src/BigPicture.js

@@ -188,7 +188,7 @@ export default (options) => {
 
 // create all needed methods / store dom elements on first use
 function initialize() {
-	let startX
+	let startX, isPinch
 	// return close button elements
 	function createCloseButton(className) {
 		const el = document[createEl]('button')
@@ -223,24 +223,21 @@ function initialize() {
 	container.onclick = close
 	closeButton = createCloseButton('bp-x')
 	container[appendEl](closeButton)
-	// gallery swipe listeners
-	if ('ontouchstart' in window) {
+	// gallery touch listeners
+	if ('ontouchend' in window && window.visualViewport) {
 		supportsTouch = true
-		container.ontouchstart = ({ changedTouches }) => {
+		container.ontouchstart = ({ touches, changedTouches }) => {
+			isPinch = touches.length > 1
 			startX = changedTouches[0].pageX
 		}
-		container.ontouchmove = (e) => {
-			e.preventDefault()
-		}
 		container.ontouchend = ({ changedTouches }) => {
-			if (!galleryOpen) {
-				return
+			if (galleryOpen && !isPinch && window.visualViewport.scale <= 1) {
+				let distX = changedTouches[0].pageX - startX
+				// swipe right
+				distX < -30 && updateGallery(1)
+				// swipe left
+				distX > 30 && updateGallery(-1)
 			}
-			const distX = changedTouches[0].pageX - startX
-			// swipe right
-			distX < -30 && updateGallery(1)
-			// swipe left
-			distX > 30 && updateGallery(-1)
 		}
 	}