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

Determine callout directionality based on position as opposed to language

Browse Source 
For interlanguage toggle, interlanguage position is no longer assumed to be a
left sidebar, and is determined on the fly in order to appear correctly
regardless of where it is, and not go off the side of the page. This works
across most skins, and regardless of language directionality.

Does not necessarily resolve issues with interlanguage links appearing in the
middle of the page (header/footer), or the callout just plain not fitting for
other reasons (mobile devices).

bug: T161586
Change-Id: Icd55498a945e12c0ff79ba891c094d60ce791115
This commit is contained in:
Isarra
2017-05-19 04:50:08 +00:00
parent deddd88851
commit 1d395d4966
3 changed files with 53 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -294,7 +294,6 @@
var $triggers,
$pLang,
$ulsTrigger = $( '.uls-trigger' ),
rtlPage = $( 'body' ).hasClass( 'rtl' ),
anonMode = ( mw.user.isAnon() &&
!mw.config.get( 'wgULSAnonCanChangeLanguage' ) ),
ulsPosition = mw.config.get( 'wgULSPosition' );
@@ -337,6 +336,7 @@
var caretRadius, caretPosition,
$caretBefore = $( '<span>' ).addClass( 'caret-before' ),
$caretAfter = $( '<span>' ).addClass( 'caret-after' ),
$caretWrapper = $( '<span>' ),
ulsTriggerHeight = this.$element.height(),
ulsTriggerWidth = this.$element.width(),
ulsTriggerOffset = this.$element.offset();
@@ -344,20 +344,24 @@
// Add the callout caret triangle
// pointing to the trigger icon
this.$window.addClass( 'callout' );
this.$window.prepend( $caretBefore, $caretAfter );
this.$window.prepend( $caretWrapper.prepend( $caretBefore, $caretAfter ) );
// Calculate the positioning of the panel
// according to the position of the trigger icon
caretRadius = parseInt( $caretBefore.css( 'border-top-width' ), 10 );
if ( rtlPage ) {
if ( ulsTriggerOffset.left > ( this.$window.width() - caretRadius ) / 2 ) {
this.left = ulsTriggerOffset.left - this.$window.width() - caretRadius;
$caretWrapper.addClass( 'caret-right' );
caretPosition = $caretBefore.position();
} else {
this.left = ulsTriggerOffset.left + ulsTriggerWidth + caretRadius;
$caretWrapper.addClass( 'caret-left' );
caretPosition = $caretAfter.position();
}
caretPosition = $caretBefore.position();
// The top of the dialog is aligned in relation to
// the middle of the trigger, so that middle of the
// caret aligns with it. 2 is for border and margin.