mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider
synced 2024-12-13 07:48:37 +00:00
abfcd2c01b
Allow RevisionSlider to work properly in both LTR and RTL contexts by making sure that when the interface language is RTL, the entire interface flips. "Backwards" and "Forwards" are reversed in RTL context, and the code and behavior should respond to that. Changes made: * Make sure the container has a direction set * Change the placement of the revision divs from absolute positioning (that requires re-calculations when the page is flipped to RTL) to divs that are display: inline-block and have no right/left setting. This means that the DOM will automatically flip its own visual order when the container is set to RTL. * Flip the calculation of positioning and the calculation of which element the pointer is on when it is dragged if the document is RTL. * Mirror all scroll animations when the page is in RTL. * Rename the scroll buttons to 'backwards' and 'forwards' for clarity, as they are flipped when the interface is RTL. * Rename pointers to 'older' and 'newer' instead of trusting their order in the DOM. Bug: T136277 Change-Id: I7c903c2e9d8ee2a0ef2eeb7b99f2251f230a794e
86 lines
2.9 KiB
JavaScript
86 lines
2.9 KiB
JavaScript
( function ( mw, $ ) {
|
|
var DiffPage = function () {
|
|
};
|
|
|
|
$.extend( DiffPage.prototype, {
|
|
refresh: function ( revId1, revId2 ) {
|
|
$( 'table.diff[data-mw="interface"]' )
|
|
.append( $( '<tr>' ) )
|
|
.append( $( '<td>' ) )
|
|
.append( $( '<div>' ).attr( 'id', 'mw-revision-slider-darkness' ) );
|
|
$.ajax( {
|
|
url: mw.util.wikiScript( 'index' ),
|
|
data: {
|
|
diff: Math.max( revId1, revId2 ),
|
|
oldid: Math.min( revId1, revId2 )
|
|
},
|
|
tryCount: 0,
|
|
retryLimit: 2,
|
|
success: function ( data ) {
|
|
var $container = $( '#mw-revision-slider-container' ),
|
|
$contentText = $( '#mw-content-text' ),
|
|
scrollLeft = $container.find( '.mw-revisions-container' ).scrollLeft();
|
|
|
|
data = $( data );
|
|
data.find( '#mw-revision-slider-container' )
|
|
.replaceWith( $container );
|
|
$contentText.html( data.find( '#mw-content-text' ) )
|
|
.find( '.mw-revisions-container' ).scrollLeft( scrollLeft );
|
|
|
|
mw.hook( 'wikipage.content' ).fire( $contentText );
|
|
},
|
|
error: function ( err ) {
|
|
this.tryCount++;
|
|
console.log( err );
|
|
mw.track( 'counter.MediaWiki.RevisionSlider.error.refresh' );
|
|
if ( this.tryCount <= this.retryLimit ) {
|
|
console.log( 'Retrying request' );
|
|
$.ajax( this );
|
|
}
|
|
// TODO notify the user that we failed to update the diff?
|
|
// This could also attempt to reload the page with the correct diff loaded without ajax?
|
|
}
|
|
} );
|
|
},
|
|
|
|
pushState: function ( revId1, revId2, sliderView ) {
|
|
// IE8 and IE9 do not have history.pushState()
|
|
if ( typeof history.pushState === 'function' ) {
|
|
history.pushState(
|
|
{
|
|
revid1: revId1,
|
|
revid2: revId2,
|
|
pointerOlderPos: sliderView.pointerOlder.getPosition(),
|
|
pointerNewerPos: sliderView.pointerNewer.getPosition(),
|
|
sliderPos: sliderView.slider.getFirstVisibleRevisionIndex()
|
|
},
|
|
$( document ).find( 'title' ).text(),
|
|
mw.util.wikiScript( 'index' ) + '?diff=' + Math.max( revId1, revId2 ) + '&oldid=' + Math.min( revId1, revId2 )
|
|
);
|
|
}
|
|
},
|
|
|
|
initOnPopState: function ( sliderView ) {
|
|
var self = this;
|
|
window.addEventListener( 'popstate', function ( event ) {
|
|
if ( event.state === null ) {
|
|
return;
|
|
}
|
|
mw.track( 'counter.MediaWiki.RevisionSlider.event.historyChange' );
|
|
sliderView.pointerOlder.setPosition( event.state.pointerOlderPos );
|
|
sliderView.pointerNewer.setPosition( event.state.pointerNewerPos );
|
|
sliderView.slider.setFirstVisibleRevisionIndex( event.state.sliderPos );
|
|
sliderView.slide( 0 );
|
|
sliderView.resetPointerStylesBasedOnPosition();
|
|
sliderView.resetRevisionStylesBasedOnPointerPosition(
|
|
sliderView.$element.find( 'div.mw-revisions' )
|
|
);
|
|
self.refresh( event.state.revid1, event.state.revid2 );
|
|
} );
|
|
}
|
|
} );
|
|
|
|
mw.libs.revisionSlider = mw.libs.revisionSlider || {};
|
|
mw.libs.revisionSlider.DiffPage = DiffPage;
|
|
}( mediaWiki, jQuery ) );
|