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

Simplify the language settings display

Browse Source 
Directly show language settings instead of showing ULS language selector
and then simulating click on language settings

Change-Id: Iafb15ac9a7140fcce9e71ed933be6c55be81dc7e
This commit is contained in:
Santhosh Thottingal
2013-05-15 17:20:07 +05:30
parent 1ccfcb7989
commit bb3e72f5a0
5 changed files with 72 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
resources/css/ext.uls.css
View File

@@ -7,7 +7,7 @@
padding-left: 30px; padding-left: 30px;
} }
#p-lang .uls-trigger { #p-lang .uls-settings-trigger {
/* @embed */ /* @embed */
background: transparent url('../images/cog-sprite.png') right top no-repeat; background: transparent url('../images/cog-sprite.png') right top no-repeat;
background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg'); background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
@@ -16,16 +16,17 @@
background-size: 14px auto; background-size: 14px auto;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
height: 14px; height: 14px;
width: 14px;
float: right; float: right;
cursor: pointer; cursor: pointer;
} }
.skin-vector #p-lang .uls-trigger { .skin-vector #p-lang .uls-settings-trigger {
/* Put it in the middle of the first row of the section title */ /* Put it in the middle of the first row of the section title */
margin-top: 4px; margin-top: 4px;
} }
#p-lang .uls-trigger:hover { #p-lang .uls-settings-trigger:hover {
background-position: right -18px; background-position: right -18px;
} }
@@ -63,6 +64,7 @@ x:-o-prefocus, body.rtl li#pt-uls {
border-bottom: 20px solid transparent; border-bottom: 20px solid transparent;
display: inline-block; display: inline-block;
left: -21px; left: -21px;
top: 30px;
position: absolute; position: absolute;
} }
@@ -72,6 +74,7 @@ x:-o-prefocus, body.rtl li#pt-uls {
border-bottom: 20px solid transparent; border-bottom: 20px solid transparent;
display: inline-block; display: inline-block;
left: -20px; left: -20px;
top: 30px;
position: absolute; position: absolute;
} }

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

@@ -299,15 +299,13 @@
}, },
onVisible: function () { onVisible: function () {
var $parent = $( '#language-settings-dialog' ); var $parent = $( '#language-settings-dialog' );
// Re-position the element according to the window that called it // Re-position the element according to the window that called it
this.top = $parent.css( 'top' ); if ( parseInt( $parent.css( 'left' ), 10 ) ) {
this.left = $parent.css( 'left' ); this.$menu.css( 'left', $parent.css( 'left' ) );
this.$menu.css( this.position() ); }
if ( parseInt( $parent.css( 'top' ), 10 ) ) {
this.$menu.find( '.caret-before, .caret-after' ).css( 'top', this.$menu.css( 'top', $parent.css( 'top' ) );
this.$menu.find( '.row' ).height() }
);
}, },
onSelect: function ( langCode ) { onSelect: function ( langCode ) {
displaySettings.enableApplyButton(); displaySettings.enableApplyButton();

14
resources/js/ext.uls.inputsettings.js
View File

@@ -320,15 +320,13 @@
}, },
onVisible: function () { onVisible: function () {
var $parent = $( '#language-settings-dialog' ); var $parent = $( '#language-settings-dialog' );
// Re-position the element according to the window that called it // Re-position the element according to the window that called it
this.top = $parent.css( 'top' ); if ( parseInt( $parent.css( 'left' ), 10 ) ) {
this.left = $parent.css( 'left' ); this.$menu.css( 'left', $parent.css( 'left' ) );
this.$menu.css( this.position() ); }
if ( parseInt( $parent.css( 'top' ), 10 ) ) {
this.$menu.find( '.caret-before, .caret-after' ).css( 'top', this.$menu.css( 'top', $parent.css( 'top' ) );
this.$menu.find( '.row' ).height() }
);
}, },
onSelect: function ( langCode ) { onSelect: function ( langCode ) {
inputSettings.enableApplyButton(); inputSettings.enableApplyButton();

94
resources/js/ext.uls.interface.js
View File

@@ -21,7 +21,9 @@
'use strict'; 'use strict';
$( document ).ready( function () { $( document ).ready( function () {
var $ulsTrigger, $pLang, var $ulsTrigger,
$ulsSettingsTrigger,
$pLang,
ulsOptions, ulsOptions,
previousLanguages, previousLang, previousLanguages, previousLang,
anonMode, anonMode,
@@ -40,10 +42,10 @@
// The interlanguage links section // The interlanguage links section
$pLang = $( '#p-lang' ); $pLang = $( '#p-lang' );
// Add an element near the interlanguage links header // Add an element near the interlanguage links header
$pLang.prepend( $( '<span>' ) $ulsSettingsTrigger = $( '<span>' )
.addClass( 'uls-trigger' ) .addClass( 'uls-settings-trigger' )
.attr( 'title', $.i18n( 'ext-uls-language-settings-title' ) ) .attr( 'title', $.i18n( 'ext-uls-language-settings-title' ) );
); $pLang.prepend( $ulsSettingsTrigger );
// Remove the dummy link that was added to make sure that the section appears // Remove the dummy link that was added to make sure that the section appears
$pLang.find( '.uls-p-lang-dummy' ).remove(); $pLang.find( '.uls-p-lang-dummy' ).remove();
@@ -159,82 +161,26 @@
}; };
if ( ulsPosition === 'interlanguage' ) { if ( ulsPosition === 'interlanguage' ) {
$ulsTrigger.attr( 'title', $.i18n( 'ext-uls-select-language-settings-icon-tooltip' ) ); $ulsSettingsTrigger.attr( 'title', $.i18n( 'ext-uls-select-language-settings-icon-tooltip' ) );
$ulsSettingsTrigger.languagesettings( {
// This is a hook that runs in the ULS scope onVisible: function () {
ulsOptions.onVisible = function () { var ulsTriggerOffset = $ulsSettingsTrigger.offset();
var scrollPosition, this.left = rtlPage ? ulsTriggerOffset.left - 30
$currentMenu, :ulsTriggerOffset.left + 30;
ulsHeight, ulsTop, ulsBottom, this.top = ulsTriggerOffset.top - 50;
correctedPosition, this.position();
$languageSettingsTrigger = this.$menu.find( '#display-settings-block' ),
padding = 10,
$window = $( window ),
windowHeight = $window.height(),
windowScrollTop = $window.scrollTop(),
windowBottom = windowScrollTop + windowHeight,
ulsTriggerOffset = this.$element.offset();
// Reposition the element -
// the sidebar elements may have changed
this.top = ulsTriggerOffset.top - 45;
this.left = rtlPage ?
ulsTriggerOffset.left - 22 - this.$menu.width() :
ulsTriggerOffset.left + 50;
correctedPosition = this.position();
this.$menu.css( correctedPosition );
// Show the Display settings panel:
// We are using the ULS trigger in the sidebar,
// so we don't want to switch the language, but
// to change the settings.
$languageSettingsTrigger.click();
$currentMenu = $( '.uls-menu:visible' );
$currentMenu.css( correctedPosition );
ulsHeight = $currentMenu.height();
ulsTop = $currentMenu.offset().top;
ulsBottom = ulsTop + ulsHeight;
// If the ULS panel is out of the viewport,
// scroll the window to show it
if ( ( ulsTop < windowScrollTop ) || ( ulsBottom > windowBottom ) ) {
if ( ulsHeight > windowHeight ) {
// Scroll to show as much of the upper
// part of ULS as possible
scrollPosition = ulsTop - padding;
} else {
// Scroll just enough to show the ULS panel
scrollPosition = ulsBottom - windowHeight + padding;
}
$( 'html, body' ).stop().animate( {
scrollTop: scrollPosition
}, 500 );
} }
} );
// Set the position of the caret according to the height
// of the top row of the menu
$currentMenu.find( '.caret-before, .caret-after' ).css( 'top',
$currentMenu.find( '.row' ).height()
);
};
} else if ( anonMode ) {
ulsOptions.onVisible = function () {
this.$menu.find( '#display-settings-block' ).click();
};
}
$ulsTrigger.uls( ulsOptions );
if ( ulsPosition === 'interlanguage' ) {
$( '.uls-menu' ).each( function () { $( '.uls-menu' ).each( function () {
$( this ).prepend( $( this ).prepend(
$( '<span>' ).addClass( 'caret-before' ), $( '<span>' ).addClass( 'caret-before' ),
$( '<span>' ).addClass( 'caret-after' ) $( '<span>' ).addClass( 'caret-after' )
); );
} ); } );
} else if ( anonMode ) {
$ulsTrigger.languagesettings();
} else {
$ulsTrigger.uls( ulsOptions );
} }
if ( previousLang === currentLang ) { if ( previousLang === currentLang ) {

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

@@ -157,28 +157,44 @@
} }
}, },
show: function () { position: function () {
if ( !this.initialized ) { var top, pos, left;
var top, pos, left; pos = $.extend( {}, this.$element.offset(), {
this.render();
this.initialized = true;
pos = $.extend( {}, this.$element.offset(), {
height: this.$element[0].offsetHeight height: this.$element[0].offsetHeight
} ); } );
top = this.top || pos.top + pos.height; top = this.top || pos.top + pos.height;
left = this.left || '25%'; left = this.left || '25%';
// FIXME this is not exactly correct. position may not // FIXME this is not exactly correct. position may not
// be relative to the trigger. // be relative to the trigger.
this.$window.css( { this.$window.css( {
top: top, top: top,
left: left left: left
} ); } );
} },
show: function () {
if ( !this.initialized ) {
this.render();
this.initialized = true;
}
this.$window.i18n(); this.$window.i18n();
this.shown = true; this.shown = true;
this.$window.show(); this.$window.show();
this.position();
this.visible();
},
/**
* A "hook" that runs after the ULS panel becomes visible
* by using the show method.
*
* To use it, pass a function as the onVisible parameter
* in the options when initializing ULS.
*/
visible: function () {
if ( this.options.onVisible ) {
this.options.onVisible.call( this );
}
}, },
/** /**
@@ -230,7 +246,8 @@
defaultModule: false, // Name of the default module defaultModule: false, // Name of the default module
onClose: null, // An onClose event handler. onClose: null, // An onClose event handler.
top: null, // Top position of this window top: null, // Top position of this window
left: null // Left position of this window left: null, // Left position of this window
onVisible: null // A callback that runs after the ULS panel becomes visible
}; };
$.fn.languagesettings.Constructor = LanguageSettings; $.fn.languagesettings.Constructor = LanguageSettings;