bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scroll language settings on all changes

Browse Source 
Change-Id: I550f309d713cb6aac6b18b326379b879dc0b9589
This commit is contained in:
Amir E. Aharoni
2013-05-15 15:33:26 +03:00
parent 3b2e39d822
commit 73e6e01c22
2 changed files with 70 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/ext.uls.displaysettings.js
View File

@@ -532,7 +532,14 @@
} ); } );
$tabButtons.on( 'click', function () { $tabButtons.on( 'click', function () {
var $button = $( this ); var scrollPosition,
panelHeight, panelTop, panelBottom,
padding,
$window,
windowHeight,
windowScrollTop,
windowBottom,
$button = $( this );
if ( $button.hasClass( 'down' ) ) { if ( $button.hasClass( 'down' ) ) {
return; return;
@@ -550,6 +557,33 @@
$tabButtons.filter( '.down' ).removeClass( 'down'); $tabButtons.filter( '.down' ).removeClass( 'down');
$button.addClass( 'down' ); $button.addClass( 'down' );
padding = 10;
$window = $( window );
windowHeight = $window.height();
windowScrollTop = $window.scrollTop();
windowBottom = windowScrollTop + windowHeight;
panelHeight = displaySettings.$parent.$window.height();
panelTop = displaySettings.$parent.$window.offset().top;
panelBottom = panelTop + panelHeight;
// If the ULS panel is out of the viewport,
// scroll the window to show it
if ( ( panelTop < windowScrollTop ) || ( panelBottom > windowBottom ) ) {
if ( panelHeight > windowHeight ) {
// Scroll to show as much of the upper
// part of ULS as possible
scrollPosition = panelTop - padding;
} else {
// Scroll just enough to show the ULS panel
scrollPosition = panelBottom - windowHeight + padding;
}
$( 'html, body' ).stop().animate( {
scrollTop: scrollPosition
}, 500 );
}
} ); } );
}, },

39
resources/js/ext.uls.languagesettings.js
View File

@@ -96,10 +96,11 @@
* @param active boolean Make this module active and show by default * @param active boolean Make this module active and show by default
*/ */
renderModule: function ( moduleName, active ) { renderModule: function ( moduleName, active ) {
var $settingsMenuItems, module, $settingsText, $settingsTitle, $settingsLink; var $settingsMenuItems, module, $settingsText, $settingsTitle, $settingsLink,
languageSettings = this;
$settingsMenuItems = this.$window.find( '.settings-menu-items' ); $settingsMenuItems = languageSettings.$window.find( '.settings-menu-items' );
module = new $.fn.languagesettings.modules[moduleName]( this ); module = new $.fn.languagesettings.modules[moduleName]( languageSettings );
$settingsTitle = $( '<div>' ) $settingsTitle = $( '<div>' )
.addClass( 'settings-title' ) .addClass( 'settings-title' )
.text( module.name ); .text( module.name );
@@ -116,8 +117,38 @@
$settingsMenuItems.append( $settingsLink ); $settingsMenuItems.append( $settingsLink );
$settingsLink.on( 'click', function () { $settingsLink.on( 'click', function () {
var module = $( this ).data( 'module' ); var scrollPosition,
panelHeight, panelTop, panelBottom,
padding = 10,
$window = $( window ),
windowHeight = $window.height(),
windowScrollTop = $window.scrollTop(),
windowBottom = windowScrollTop + windowHeight,
module = $( this ).data( 'module' );
module.render(); module.render();
panelHeight = languageSettings.$window.height();
panelTop = languageSettings.$window.offset().top;
panelBottom = panelTop + panelHeight;
// If the ULS panel is out of the viewport,
// scroll the window to show it
if ( ( panelTop < windowScrollTop ) || ( panelBottom > windowBottom ) ) {
if ( panelHeight > windowHeight ) {
// Scroll to show as much of the upper
// part of ULS as possible
scrollPosition = panelTop - padding;
} else {
// Scroll just enough to show the ULS panel
scrollPosition = panelBottom - windowHeight + padding;
}
$( 'html, body' ).stop().animate( {
scrollTop: scrollPosition
}, 500 );
}
$settingsMenuItems.find( '.menu-section' ).removeClass( 'active' ); $settingsMenuItems.find( '.menu-section' ).removeClass( 'active' );
$( this ).addClass( 'active' ); $( this ).addClass( 'active' );
} ); } );