jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/335062 )
Change subject: Keep scroll position when expanding/collapsing
......................................................................
Keep scroll position when expanding/collapsing
With the help of this patch the relative scroll position of the
visible changes div will be saved before expanding or collapsing
elements and applied again after the expanding/collapsing is
finished.
Due to the fact, that recalibrating the scrollbar could only be
done after expanding/collapsing animiations finished, the
animation of these were removed. Otherwise the view would jump
during that process.
With the new callibration and sync of scrollbars and content
useres will be less confused and content does not suddenly move
out of sight.
Bug: T156471
Change-Id: Ic7fd3fa6df94e1c031d6e7b2b136a657d8b6d2fa
---
M extension.json
M modules/ext.TwoColConflict.AutoScroll.js
M modules/ext.TwoColConflict.filterOptions.js
3 files changed, 96 insertions(+), 9 deletions(-)
Approvals:
Addshore: Checked; Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index d734bf0..26a8791 100644
--- a/extension.json
+++ b/extension.json
@@ -52,6 +52,9 @@
"ext.TwoColConflict.filterOptionsJs": {
"scripts": [
"modules/ext.TwoColConflict.filterOptions.js"
+ ],
+ "dependencies": [
+ "ext.TwoColConflict.AutoScroll"
]
},
"ext.TwoColConflict.AutoScroll": {
diff --git a/modules/ext.TwoColConflict.AutoScroll.js
b/modules/ext.TwoColConflict.AutoScroll.js
index c128504..c2e06cc 100644
--- a/modules/ext.TwoColConflict.AutoScroll.js
+++ b/modules/ext.TwoColConflict.AutoScroll.js
@@ -70,6 +70,62 @@
},
/**
+ * Check if a change div element upper boundary is in view of
its scrollable
+ *
+ * @param {jQuery} $changeDiv
+ * @param {jQuery} $scrollable
+ * @return {boolean}
+ */
+ changeElementTopIsInView: function( $changeDiv, $scrollable ) {
+ return this.getDivTopOffset( $changeDiv, $scrollable )
< 0;
+ },
+
+ /**
+ * Get the first visible change div in the conflict-view
+ *
+ * @return {jQuery}
+ */
+ getFirstVisibleChangesElement: function() {
+ var $changesEditor = $(
'.mw-twocolconflict-changes-editor' ),
+ $changeDivs = $(
+ '.mw-twocolconflict-diffchange-own, ' +
+ '.mw-twocolconflict-diffchange-foreign,
' +
+ '.mw-twocolconflict-diffchange-same, ' +
+ '.mw-twocolconflict-diffchange-conflict'
+ ),
+ i = 0, count, $currentDiv;
+
+ for ( count = $changeDivs.length; i < count; i++ ) {
+ $currentDiv = $( $changeDivs[ i ] );
+
+ if ( this.changeElementTopIsInView(
$currentDiv, $changesEditor ) ) {
+ break;
+ }
+ }
+
+ return $currentDiv;
+ },
+
+ /**
+ * Scroll the conflict-view to the position of the given change
div element
+ * with an additional offset
+ *
+ * @param {jQuery} $changeDiv
+ * @param {number} manualOffset
+ */
+ scrollToChangeWithOffset: function( $changeDiv, manualOffset ) {
+ var $changesEditor = $(
'.mw-twocolconflict-changes-editor' ),
+ changeDivOffset;
+
+ changeDivOffset = this.getDivTopOffset(
+ $changesEditor,
+ $changeDiv
+ );
+
+ $changesEditor.scrollTop( changeDivOffset +
$changesEditor.scrollTop() + manualOffset );
+ },
+
+ /**
* Scroll the conflict- and editor-view to the position of the
given
* change div element
*
diff --git a/modules/ext.TwoColConflict.filterOptions.js
b/modules/ext.TwoColConflict.filterOptions.js
index 992e88b..744ada5 100644
--- a/modules/ext.TwoColConflict.filterOptions.js
+++ b/modules/ext.TwoColConflict.filterOptions.js
@@ -1,20 +1,48 @@
-( function ( $ ) {
- $( function () {
+( function( mw, $ ) {
+ var autoScroll = new mw.libs.twoColConflict.AutoScroll();
+
+ $( function() {
// show filter options when js is available
$( '.mw-twocolconflict-filter-options div' ).css( 'display',
'table-cell' );
- $( 'input[name="mw-twocolconflict-same"]' ).change( function ()
{
+ $( 'input[name="mw-twocolconflict-same"]' ).change( function() {
+ var $changeDiv =
autoScroll.getFirstVisibleChangesElement(),
+ manualOffset;
+
+ manualOffset = autoScroll.getDivTopOffset(
+ $changeDiv,
+ $( '.mw-twocolconflict-changes-editor' )
+ );
+
if ( $( this ).val() === 'show' ) {
- $(
'.mw-twocolconflict-diffchange-same-collapsed' ).slideUp();
- $( '.mw-twocolconflict-diffchange-same-full'
).slideDown();
+ $(
'.mw-twocolconflict-diffchange-same-collapsed' ).hide();
+ $( '.mw-twocolconflict-diffchange-same-full'
).show();
} else {
- $( '.mw-twocolconflict-diffchange-same-full'
).slideUp();
- $(
'.mw-twocolconflict-diffchange-same-collapsed' ).slideDown();
+ $( '.mw-twocolconflict-diffchange-same-full'
).hide();
+ $(
'.mw-twocolconflict-diffchange-same-collapsed' ).show();
}
+
+ // wait for expanding animations to be finished
+ $( '.mw-twocolconflict-diffchange-same-full'
).promise().done( function() {
+ autoScroll.scrollToChangeWithOffset(
$changeDiv, manualOffset );
+ } );
} );
- $( '.mw-twocolconflict-diffchange-same-collapsed' ).click(
function () {
+ $( '.mw-twocolconflict-diffchange-same-collapsed' ).click(
function() {
+ var $changeDiv = $( this ).parent(),
+ manualOffset;
+
+ manualOffset = autoScroll.getDivTopOffset(
+ $changeDiv,
+ $( '.mw-twocolconflict-changes-editor' )
+ );
+
$( 'input[name="mw-twocolconflict-same"]' )[ 0
].closest( 'label' ).click();
+
+ // wait for expanding animations to be finished
+ $( '.mw-twocolconflict-diffchange-same-full'
).promise().done( function() {
+ autoScroll.scrollToChangeWithOffset(
$changeDiv, manualOffset );
+ } );
} );
} );
-}( jQuery ) );
+}( mediaWiki, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/335062
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ic7fd3fa6df94e1c031d6e7b2b136a657d8b6d2fa
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/TwoColConflict
Gerrit-Branch: master
Gerrit-Owner: WMDE-Fisch <[email protected]>
Gerrit-Reviewer: Addshore <[email protected]>
Gerrit-Reviewer: Tobias Gritschacher <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
