mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider
synced 2024-12-19 10:20:53 +00:00
7e152e9f7c
The version numbers mentioned in the comment are from the V8 engine. The last Google Chrome version to use a 5.x version of the V8 engine was Google Chrome version 59. That was 8 years ago. See T168299. Our official support matrix asks for 3 years. https://www.mediawiki.org/wiki/Compatibility#Browser_support_matrix Notice how there is no version number in the code despite the comment explaining that it shouldn't be used in later versions. According to my local tests this is not a full fix for T352169, but notably improves the situation. I can still see the bad behavior described in T352169, but only in a narrow region on the right side of the slider. Removing the obsolete browser detection is necessary to unblock further investigation. Making the dummy text a bit longer also makes an actual difference. To keep this patch as minimal as possible all I do is to add a single character. Bug: T352169 Change-Id: I56f3c1969ce4f164f4319e5038d0f97527e6b1c0
109 lines
2.8 KiB
JavaScript
109 lines
2.8 KiB
JavaScript
// originally taken from https://stackoverflow.com/questions/1517924/javascript-mapping-touch-events-to-mouse-events
|
|
function touchEventConverter( event ) {
|
|
const first = event.changedTouches[ 0 ];
|
|
|
|
event.preventDefault();
|
|
|
|
const type = {
|
|
touchstart: 'mousedown',
|
|
touchmove: 'mousemove',
|
|
touchend: 'mouseup'
|
|
}[ event.type ];
|
|
if ( !type ) {
|
|
return;
|
|
}
|
|
|
|
let simulatedEvent;
|
|
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
|
|
function correctElementOffsets( offset ) {
|
|
const isChrome = /Chrom(e|ium)/i.test( navigator.userAgent );
|
|
|
|
// since this problem only seems to appear with Chrome just use this in Chrome
|
|
if ( !isChrome ) {
|
|
return offset;
|
|
}
|
|
|
|
// get document element width without scrollbar
|
|
const prevStyle = document.body.style.overflow || '';
|
|
document.body.style.overflow = 'hidden';
|
|
const docWidth = document.documentElement.clientWidth;
|
|
document.body.style.overflow = prevStyle;
|
|
|
|
// determine if the viewport has been scaled
|
|
if ( docWidth / window.innerWidth !== 1 ) {
|
|
const docRect = document.documentElement.getBoundingClientRect();
|
|
offset = {
|
|
top: offset.top - window.pageYOffset - docRect.top,
|
|
left: offset.left - window.pageXOffset - docRect.left
|
|
};
|
|
}
|
|
|
|
return offset;
|
|
}
|
|
|
|
/**
|
|
* Based on jQuery RTL Scroll Type Detector plugin by othree: https://github.com/othree/jquery.rtl-scroll-type
|
|
*
|
|
* @return {string} - 'default', 'negative' or 'reverse'
|
|
*/
|
|
function determineRtlScrollType() {
|
|
const $dummy = $( '<div>' )
|
|
.css( {
|
|
dir: 'rtl',
|
|
width: '4px',
|
|
height: '1px',
|
|
position: 'absolute',
|
|
top: '-1000px',
|
|
overflow: 'scroll'
|
|
} )
|
|
.text( 'ABCDE' )
|
|
.appendTo( 'body' )[ 0 ];
|
|
if ( $dummy.scrollLeft > 0 ) {
|
|
return 'default';
|
|
} else {
|
|
$dummy.scrollLeft = 1;
|
|
if ( $dummy.scrollLeft === 0 ) {
|
|
return 'negative';
|
|
}
|
|
}
|
|
return 'reverse';
|
|
}
|
|
|
|
function calculateRevisionsPerWindow( margin, revisionWidth ) {
|
|
return Math.floor( ( $( '#mw-content-text' ).width() - margin ) / revisionWidth );
|
|
}
|
|
|
|
module.exports = {
|
|
calculateRevisionsPerWindow: calculateRevisionsPerWindow,
|
|
correctElementOffsets: correctElementOffsets,
|
|
determineRtlScrollType: determineRtlScrollType,
|
|
touchEventConverter: touchEventConverter
|
|
};
|