Brion VIBBER has uploaded a new change for review.
https://gerrit.wikimedia.org/r/153543
Change subject: Work in progress: allow pinch-zoom on image viewer overlay
......................................................................
Work in progress: allow pinch-zoom on image viewer overlay
Switches position:fixed to position:absolute in ImageOverlay,
and adds an Overlay property 'allowZoom' which can be set to
true to disable the disabling of scroll and zoom behavior.
Briefly tested on iOS 7.1 simulator. May explode on other systems.
Bug: 69414
Change-Id: I6de82009409a28c46b36be13f67129c30f4e0891
---
M javascripts/common/Overlay.js
M javascripts/modules/mediaViewer/ImageOverlay.js
M less/modules/mediaViewer.less
3 files changed, 16 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/43/153543/1
diff --git a/javascripts/common/Overlay.js b/javascripts/common/Overlay.js
index d30f969..3991df4 100644
--- a/javascripts/common/Overlay.js
+++ b/javascripts/common/Overlay.js
@@ -25,6 +25,10 @@
* @type {Boolean}
*/
fullScreen: true,
+ /**
+ * @type {Boolean}
+ */
+ allowZoom: false,
/**
* use '#mw-mf-viewport' rather than 'body' - for some reasons
this has
@@ -88,7 +92,9 @@
( $overlayContent.scrollTop()
=== 0 && startY < y ) ||
( $overlayContent.scrollTop()
=== contentLenght && startY > y )
) {
- ev.preventDefault();
+ if ( !self.allowZoom ) {
+ ev.preventDefault();
+ }
}
} );
@@ -138,7 +144,9 @@
if ( M.isIos ) {
$window
.on( 'touchmove.ios', function( ev ) {
- ev.preventDefault();
+ if ( !self.allowZoom ) {
+ ev.preventDefault();
+ }
} )
.on( 'resize.ios', function() {
self._resizeContent(
$window.height() );
diff --git a/javascripts/modules/mediaViewer/ImageOverlay.js
b/javascripts/modules/mediaViewer/ImageOverlay.js
index 43362f1..5e450f0 100644
--- a/javascripts/modules/mediaViewer/ImageOverlay.js
+++ b/javascripts/modules/mediaViewer/ImageOverlay.js
@@ -14,6 +14,7 @@
className: 'overlay media-viewer',
template: M.template.get( 'modules/ImageOverlay.hogan' ),
closeOnBack: true,
+ allowZoom: true,
defaults: {
detailsMsg: mw.msg( 'mobile-frontend-media-details' ),
@@ -56,6 +57,7 @@
show: function() {
this._super();
this._positionImage();
+ M.unlockViewport();
},
_positionImage: function() {
diff --git a/less/modules/mediaViewer.less b/less/modules/mediaViewer.less
index 42a3b6b..abe09e8 100644
--- a/less/modules/mediaViewer.less
+++ b/less/modules/mediaViewer.less
@@ -6,13 +6,13 @@
padding-top: 0;
.main {
- height: auto;
- position: relative;
+ position: absolute;
width: 100%;
+ height: 100%;
}
.image-wrapper {
- position: fixed;
+ position: absolute;
left: 0;
right: 0;
top: 0;
@@ -56,7 +56,7 @@
.details {
bottom: 0;
height: auto;
- position: fixed;
+ position: absolute;
width: 100%;
padding: 8px 10px;
margin: 0;
--
To view, visit https://gerrit.wikimedia.org/r/153543
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6de82009409a28c46b36be13f67129c30f4e0891
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Brion VIBBER <br...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
