jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/351642 )
Change subject: Convert touch events to mouse events on pointers
......................................................................
Convert touch events to mouse events on pointers
This will make the pointers work on touch devices. The events responsible
for the touch drag and move are converted to mouse actions that will
trigger the draggable.
When using Chrome on touch devices and zooming the offset of elements
calculated by jQuery is wrong. There is a workaround that seems to work
and also seems to not break behavior with normal browsers and on other
devices. Since this only seems to be a problem in Chrome the fix will
only applied to Chrome browsers to avoid performance los on others.
Also introduced a script file for static utility methods.
Bug: T164249
Change-Id: I245f77eb836afded249f3b5ebb7129dab08d0017
---
M extension.json
M modules/ext.RevisionSlider.SliderView.js
M modules/ext.RevisionSlider.SliderViewTwo.js
A modules/ext.RevisionSlider.util.js
4 files changed, 104 insertions(+), 5 deletions(-)
Approvals:
Tobias Gritschacher: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index 6d4add9..65b016a 100644
--- a/extension.json
+++ b/extension.json
@@ -55,6 +55,7 @@
"dependencies": [
"oojs-ui",
"mediawiki.jqueryMsg",
+ "ext.RevisionSlider.util",
"ext.RevisionSlider.Settings",
"ext.RevisionSlider.Slider",
"ext.RevisionSlider.Revision",
@@ -80,6 +81,11 @@
},
"ext.RevisionSlider.noscript": {
"styles": "modules/ext.RevisionSlider.noscript.css"
+ },
+ "ext.RevisionSlider.util": {
+ "scripts": [
+ "modules/ext.RevisionSlider.util.js"
+ ]
},
"ext.RevisionSlider.Api": {
"scripts": [
@@ -141,6 +147,7 @@
"jquery.ui.draggable",
"mediawiki.util",
"oojs-ui",
+ "ext.RevisionSlider.util",
"ext.RevisionSlider.DiffPage",
"ext.RevisionSlider.HelpDialog",
"ext.RevisionSlider.Pointer"
diff --git a/modules/ext.RevisionSlider.SliderView.js
b/modules/ext.RevisionSlider.SliderView.js
index bcb470d..9de8dd6 100644
--- a/modules/ext.RevisionSlider.SliderView.js
+++ b/modules/ext.RevisionSlider.SliderView.js
@@ -196,6 +196,10 @@
} );
$pointers.draggable( this.buildDraggableOptions(
escapePressed, $revisions, '.mw-revslider-pointer-container' ) );
+ $pointers.on(
+ 'touchstart touchmove touchend',
+ mw.libs.revisionSlider.touchEventConverter
+ );
},
/**
@@ -905,8 +909,4 @@
mw.libs.revisionSlider = mw.libs.revisionSlider || {};
mw.libs.revisionSlider.SliderView = SliderView;
-
- mw.libs.revisionSlider.calculateRevisionsPerWindow = function ( margin,
revisionWidth ) {
- return Math.floor( ( $( '#mw-content-text' ).width() - margin )
/ revisionWidth );
- };
}( mediaWiki, jQuery ) );
diff --git a/modules/ext.RevisionSlider.SliderViewTwo.js
b/modules/ext.RevisionSlider.SliderViewTwo.js
index ca516a6..32490b7 100644
--- a/modules/ext.RevisionSlider.SliderViewTwo.js
+++ b/modules/ext.RevisionSlider.SliderViewTwo.js
@@ -103,6 +103,15 @@
'.mw-revslider-pointer-container-newer'
) );
+ $pointerNewer.on(
+ 'touchstart touchmove touchend touchcancel
touchleave',
+ mw.libs.revisionSlider.touchEventConverter
+ );
+ $pointerOlder.on(
+ 'touchstart touchmove touchend touchcancel
touchleave',
+ mw.libs.revisionSlider.touchEventConverter
+ );
+
SliderViewTwo.super.prototype.resetPointerStylesBasedOnPosition.call( this );
},
@@ -189,7 +198,7 @@
getRevisionPositionFromLeftOffset: function ( leftOffset ) {
var $revisions = this.getRevisionsElement(),
- revisionsX = $revisions.offset().left,
+ revisionsX =
mw.libs.revisionSlider.correctElementOffsets( $revisions.offset() ).left,
pos = Math.ceil( Math.abs( leftOffset -
revisionsX ) / this.revisionWidth );
if ( this.dir === 'rtl' ) {
diff --git a/modules/ext.RevisionSlider.util.js
b/modules/ext.RevisionSlider.util.js
new file mode 100644
index 0000000..d161897
--- /dev/null
+++ b/modules/ext.RevisionSlider.util.js
@@ -0,0 +1,83 @@
+( function ( mw, $ ) {
+ mw.libs.revisionSlider = mw.libs.revisionSlider || {};
+
+ // originally taken from
https://stackoverflow.com/questions/1517924/javascript-mapping-touch-events-to-mouse-events
+ mw.libs.revisionSlider.touchEventConverter = function ( event ) {
+ var first = event.changedTouches[ 0 ],
+ type, simulatedEvent;
+
+ event.preventDefault();
+
+ switch ( event.type ) {
+ case 'touchstart':
+ type = 'mousedown';
+ break;
+ case 'touchmove':
+ type = 'mousemove';
+ break;
+ case 'touchend':
+ type = 'mouseup';
+ break;
+ default:
+ return;
+ }
+
+ if ( typeof MouseEvent !== 'undefined' ) {
+ simulatedEvent = new MouseEvent( type, {
+ bubbles: true,
+ cancelable: true,
+ view: window,
+ detail: 1,
+ screenX: first.screenX,
+ screenY: first.screenY,
+ clientX: first.clientX,
+ clientY: first.clientY,
+ button: 0,
+ relatedTarget: null
+ } );
+ } else {
+ simulatedEvent = document.createEvent( 'MouseEvent' );
+ simulatedEvent.initMouseEvent(
+ type, true, true, window, 1,
+ first.screenX, first.screenY,
+ first.clientX, first.clientY,
+ false, false, false, false,
+ 0, null
+ );
+ }
+
+ first.target.dispatchEvent( simulatedEvent );
+ };
+
+ // fixes issues with zoomed Chrome on touch see
https://github.com/jquery/jquery/issues/3187
+ mw.libs.revisionSlider.correctElementOffsets = function ( offset ) {
+ var prevStyle, docWidth, docRect,
+ isChrome = /chrom(e|ium)/.test(
navigator.userAgent.toLowerCase() );
+
+ // since this problem only seems to appear with Chrome just use
this in Chrome
+ if ( !isChrome ) {
+ return offset;
+ }
+
+ // get document element width without scrollbar
+ prevStyle = document.body.style.overflow || '';
+ document.body.style.overflow = 'hidden';
+ docWidth = document.documentElement.clientWidth;
+ document.body.style.overflow = prevStyle;
+
+ // determine if the viewport has been scaled
+ if ( docWidth / window.innerWidth !== 1 ) {
+ docRect =
document.documentElement.getBoundingClientRect();
+ offset = {
+ top: offset.top - window.pageYOffset -
docRect.top,
+ left: offset.left - window.pageXOffset -
docRect.left
+ };
+ }
+
+ return offset;
+ };
+
+ mw.libs.revisionSlider.calculateRevisionsPerWindow = function ( margin,
revisionWidth ) {
+ return Math.floor( ( $( '#mw-content-text' ).width() - margin )
/ revisionWidth );
+ };
+}( mediaWiki, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/351642
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I245f77eb836afded249f3b5ebb7129dab08d0017
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/RevisionSlider
Gerrit-Branch: master
Gerrit-Owner: WMDE-Fisch <[email protected]>
Gerrit-Reviewer: Tobias Gritschacher <[email protected]>
Gerrit-Reviewer: WMDE-Fisch <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
