Florianschmidtwelzow has uploaded a new change for review.
https://gerrit.wikimedia.org/r/198763
Change subject: Allow swiping in ImageOverlayNew
......................................................................
Allow swiping in ImageOverlayNew
It's an intuitive gesture to swipe through the images, instead of using the
arrows.
Change-Id: I1301ac8f8c1443ea899a649410ca9912eef942ee
---
M javascripts/modules/mediaViewer/ImageOverlayNew.js
1 file changed, 37 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/63/198763/1
diff --git a/javascripts/modules/mediaViewer/ImageOverlayNew.js
b/javascripts/modules/mediaViewer/ImageOverlayNew.js
index b2040b2..bab1b0c 100644
--- a/javascripts/modules/mediaViewer/ImageOverlayNew.js
+++ b/javascripts/modules/mediaViewer/ImageOverlayNew.js
@@ -15,16 +15,51 @@
},
events: $.extend( {}, ImageOverlay.prototype.events, {
// Click tracking for table of contents so we can see
if people interact with it
- 'click .slider-button': 'onSlide'
+ 'click .slider-button': 'onSlide',
+ touchstart: 'onTouchStart',
+ touchend: 'onTouchEnd'
} ),
/**
* Event handler for slide event
* @param {jQuery.Event} ev
*/
onSlide: function ( ev ) {
- var thumbnail = $( ev.target ).closest(
'.slider-button' ).data( 'thumbnail' );
+ this.setNewImage(
+ $( ev.target ).closest( '.slider-button'
).data( 'thumbnail' )
+ );
+ },
+ /**
+ * Replace the current image with a new one
+ * @param {Thumbnail} thumbnail
+ */
+ setNewImage: function ( thumbnail ) {
window.location.hash = '#/media/' +
thumbnail.getFileName();
},
+ /**
+ * Event handler for swipe start event (touchstart)
+ * @param {jQuery.Event} ev
+ */
+ onTouchStart: function ( ev ) {
+ this.startTouch = ev.originalEvent.changedTouches[0];
+ },
+ /**
+ * Event handler for swipe finished event (touchend)
+ * @param {jQuery.Event} ev
+ */
+ onTouchEnd: function ( ev ) {
+ this.endTouch = ev.originalEvent.changedTouches[0];
+ // we want a long horizontal swipe
+ if ( Math.abs( this.startTouch.pageX -
this.endTouch.pageX ) > 200 ) {
+ // select the correct direction for the next
image
+ if ( this.startTouch.pageX <
this.endTouch.pageX ) {
+ // swiped to the right side
+ this.setNewImage( $(
'.slider-button.prev' ).data( 'thumbnail' ) );
+ } else {
+ // otherwise to the left side
+ this.setNewImage( $(
'.slider-button.next' ).data( 'thumbnail' ) );
+ }
+ }
+ },
defaults: $.extend( {}, ImageOverlay.prototype.defaults, {
slideLeftButton: new Icon( {
name: 'previous'
--
To view, visit https://gerrit.wikimedia.org/r/198763
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1301ac8f8c1443ea899a649410ca9912eef942ee
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <florian.schmidt.wel...@t-online.de>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
