fa0ad11222
This fixes the same issue as 1d395d4966,
but for the little language change popup (shown after you change the
language) instead of the main interface.
Change-Id: I28d3e8baeebf4619f4f810869c8a2a3fb60496d9
527 lines
15 KiB
JavaScript
527 lines
15 KiB
JavaScript
/*!
|
|
* ULS interface integration logic
|
|
*
|
|
* Copyright (C) 2012-2013 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
|
|
* Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
|
|
* contributors. See CREDITS for a list.
|
|
*
|
|
* UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't
|
|
* have to do anything special to choose one license or the other and you don't
|
|
* have to notify anyone which license you are using. You are free to use
|
|
* UniversalLanguageSelector in commercial projects as long as the copyright
|
|
* header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.
|
|
*
|
|
* @file
|
|
* @ingroup Extensions
|
|
* @licence GNU General Public Licence 2.0 or later
|
|
* @licence MIT License
|
|
*/
|
|
|
|
( function ( $, mw ) {
|
|
'use strict';
|
|
|
|
/**
|
|
* Construct the display settings link
|
|
*
|
|
* @return {jQuery}
|
|
*/
|
|
function displaySettings() {
|
|
var $displaySettingsTitle, displaySettingsText, $displaySettings;
|
|
|
|
displaySettingsText = $.i18n( 'ext-uls-display-settings-desc' );
|
|
$displaySettingsTitle = $( '<div data-i18n="ext-uls-display-settings-title">' )
|
|
.addClass( 'settings-title' )
|
|
.attr( 'title', displaySettingsText );
|
|
$displaySettings = $( '<div>' )
|
|
.addClass( 'display-settings-block' )
|
|
.prop( 'id', 'display-settings-block' )
|
|
.append( $displaySettingsTitle.i18n() );
|
|
|
|
return $displaySettings;
|
|
}
|
|
|
|
/**
|
|
* Construct the input settings link
|
|
*
|
|
* @return {jQuery}
|
|
*/
|
|
function inputSettings() {
|
|
var $inputSettingsTitle, inputSettingsText, $inputSettings;
|
|
|
|
inputSettingsText = $.i18n( 'ext-uls-input-settings-desc' );
|
|
$inputSettingsTitle = $( '<div data-i18n="ext-uls-input-settings-title">' )
|
|
.addClass( 'settings-title' )
|
|
.attr( 'title', inputSettingsText );
|
|
$inputSettings = $( '<div>' )
|
|
.addClass( 'input-settings-block' )
|
|
.prop( 'id', 'input-settings-block' )
|
|
.append( $inputSettingsTitle.i18n() );
|
|
|
|
return $inputSettings;
|
|
}
|
|
|
|
/**
|
|
* Add display settings link to the settings bar in ULS
|
|
*
|
|
* @param {Object} uls The ULS object
|
|
*/
|
|
function addDisplaySettings( uls ) {
|
|
var $displaySettings = displaySettings();
|
|
|
|
uls.$menu.find( '#uls-settings-block' ).append( $displaySettings );
|
|
|
|
// Initialize the trigger
|
|
$displaySettings.one( 'click', function () {
|
|
var displaySettingsOptions = {
|
|
defaultModule: 'display'
|
|
},
|
|
ulsPosition = mw.config.get( 'wgULSPosition' ),
|
|
anonMode = ( mw.user.isAnon() &&
|
|
!mw.config.get( 'wgULSAnonCanChangeLanguage' ) );
|
|
|
|
// If the ULS trigger is shown in the top personal menu,
|
|
// closing the display settings must show the main ULS
|
|
// languages list, unless we are in anon mode and thus
|
|
// cannot show the language list
|
|
if ( ulsPosition === 'personal' && !anonMode ) {
|
|
displaySettingsOptions.onClose = function () {
|
|
uls.show();
|
|
};
|
|
}
|
|
$.extend( displaySettingsOptions, uls.position() );
|
|
$displaySettings.languagesettings( displaySettingsOptions ).click();
|
|
} );
|
|
|
|
// On every click
|
|
$displaySettings.on( 'click', function () {
|
|
mw.hook( 'mw.uls.settings.open' ).fire( 'uls' );
|
|
uls.hide();
|
|
} );
|
|
}
|
|
|
|
/**
|
|
* Add input settings link to the settings bar in ULS
|
|
*
|
|
* @param {Object} uls The ULS object
|
|
*/
|
|
function addInputSettings( uls ) {
|
|
var $inputSettings = inputSettings();
|
|
|
|
uls.$menu.find( '#uls-settings-block' ).append( $inputSettings );
|
|
|
|
// Initialize the trigger
|
|
$inputSettings.one( 'click', function () {
|
|
var position = uls.position();
|
|
|
|
$inputSettings.languagesettings( {
|
|
defaultModule: 'input',
|
|
onClose: function () {
|
|
uls.show();
|
|
},
|
|
top: position.top,
|
|
left: position.left
|
|
} ).click();
|
|
} );
|
|
|
|
// On every click
|
|
$inputSettings.on( 'click', function () {
|
|
mw.hook( 'mw.uls.settings.open' ).fire( 'uls' );
|
|
uls.hide();
|
|
} );
|
|
}
|
|
|
|
/**
|
|
* Helper function to make the uls triggers accessible with the keyboard.
|
|
*
|
|
* @param {jQuery} $target One or more jQuery elements.
|
|
* @since 2013.07
|
|
*/
|
|
function addAccessibilityFeatures( $target ) {
|
|
// tabindex=0 makes it appear when tabbing targets.
|
|
// See also http://www.w3.org/TR/wai-aria/roles#button
|
|
$target.attr( {
|
|
tabIndex: 0,
|
|
role: 'button',
|
|
'aria-haspopup': true
|
|
} );
|
|
// TODO:
|
|
// * aria-pressed true/false when popup is open
|
|
// * aria-controls to reference to the popup
|
|
|
|
// Remove outline when clicking
|
|
$target.click( function () {
|
|
$( this ).css( 'outline', 'none' );
|
|
} );
|
|
// Allow outline to appear again if keyboard activated
|
|
$target.blur( function () {
|
|
$( this ).css( 'outline', '' );
|
|
} );
|
|
|
|
// Make Enter act the same as clicking. This has the unfortunate side
|
|
// effect of removing the outline.
|
|
$target.keydown( function ( event ) {
|
|
// Enter
|
|
if ( event.keyCode === 13 ) {
|
|
$( this ).click();
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
} );
|
|
}
|
|
|
|
function userCanChangeLanguage() {
|
|
return mw.config.get( 'wgULSAnonCanChangeLanguage' ) || !mw.user.isAnon();
|
|
}
|
|
|
|
/**
|
|
* The tooltip to be shown when language changed using ULS.
|
|
* It also allows to undo the language selection.
|
|
*
|
|
* @param {string} previousLang
|
|
* @param {string} previousAutonym
|
|
*/
|
|
function showUndoTooltip( previousLang, previousAutonym ) {
|
|
var $ulsTrigger, ulsPopup, ulsPopupPosition,
|
|
ulsPosition = mw.config.get( 'wgULSPosition' );
|
|
|
|
$ulsTrigger = ( ulsPosition === 'interlanguage' ) ?
|
|
$( '.uls-settings-trigger' ) :
|
|
$( '.uls-trigger' );
|
|
|
|
function hideTipsy() {
|
|
ulsPopup.toggle( false );
|
|
}
|
|
|
|
function showTipsy( timeout ) {
|
|
var offset, tipsyTimer = 0;
|
|
|
|
// BC for MW 1.27
|
|
if ( ulsPopup.setFloatableContainer === undefined ) {
|
|
offset = $ulsTrigger.offset();
|
|
ulsPopup.$element.css( {
|
|
top: offset.top + 24,
|
|
left: offset.left + $ulsTrigger.outerWidth() / 2
|
|
} );
|
|
}
|
|
|
|
ulsPopup.toggle( true );
|
|
ulsPopup.toggleClipping( false );
|
|
|
|
// if the mouse is over the tooltip, do not hide
|
|
$( '.uls-tipsy' ).on( 'mouseover', function () {
|
|
window.clearTimeout( tipsyTimer );
|
|
} ).on( 'mouseout', function () {
|
|
tipsyTimer = window.setTimeout( hideTipsy, timeout );
|
|
} );
|
|
|
|
// hide the tooltip when clicked on it
|
|
$( '.uls-tipsy' ).on( 'click', hideTipsy );
|
|
|
|
// Event handler for links in the tooltip.
|
|
// It looks like the tipsy is always created from scratch so that
|
|
// there wont be multiple event handlers bound to same click.
|
|
$( 'a.uls-prevlang-link' ).on( 'click.ulstipsy', function ( event ) {
|
|
var deferred = $.Deferred();
|
|
|
|
event.preventDefault();
|
|
deferred.done( function () {
|
|
mw.uls.changeLanguage( event.target.lang );
|
|
} );
|
|
|
|
mw.hook( 'mw.uls.language.revert' ).fire( deferred );
|
|
|
|
// Delay is zero if event logging is not enabled
|
|
window.setTimeout( function () {
|
|
deferred.resolve();
|
|
}, mw.config.get( 'wgULSEventLogging' ) * 500 );
|
|
} );
|
|
tipsyTimer = window.setTimeout( hideTipsy, timeout );
|
|
}
|
|
|
|
// remove any existing popups
|
|
if ( ulsPopup ) {
|
|
ulsPopup.$element.remove();
|
|
}
|
|
if ( ulsPosition === 'interlanguage' ) {
|
|
if ( $ulsTrigger.offset().left > $( window ).width() / 2 ) {
|
|
ulsPopupPosition = 'before';
|
|
} else {
|
|
ulsPopupPosition = 'after';
|
|
}
|
|
// Reverse for RTL
|
|
if ( $( 'html' ).prop( 'dir' ) === 'rtl' ) {
|
|
ulsPopupPosition = ( ulsPopupPosition === 'after' ) ? 'before' : 'after';
|
|
}
|
|
} else {
|
|
ulsPopupPosition = 'below';
|
|
}
|
|
ulsPopup = new OO.ui.PopupWidget( {
|
|
padded: true,
|
|
width: 300,
|
|
classes: [ 'uls-tipsy' ],
|
|
// Automatically positioned relative to the trigger
|
|
$floatableContainer: $ulsTrigger,
|
|
position: ulsPopupPosition,
|
|
$content: ( function () {
|
|
var link = $( '<a>' ).text( previousAutonym )
|
|
.attr( {
|
|
href: '#',
|
|
'class': 'uls-prevlang-link',
|
|
lang: previousLang,
|
|
// We could get dir from uls.data,
|
|
// but we are trying to avoid loading it
|
|
// and 'auto' is safe enough in this context.
|
|
// T130390: must use attr
|
|
dir: 'auto'
|
|
} );
|
|
|
|
// Get the html of the link by wrapping it in div first
|
|
link = $( '<div>' ).html( link ).html();
|
|
|
|
return $( '<p>' )
|
|
.html(
|
|
mw.message( 'ext-uls-undo-language-tooltip-text', '$1' )
|
|
.escaped().replace( '$1', link )
|
|
);
|
|
}() )
|
|
} );
|
|
|
|
ulsPopup.$element.appendTo( 'body' );
|
|
|
|
// The interlanguage position needs some time to settle down
|
|
window.setTimeout( function () {
|
|
// Show the tipsy tooltip on page load.
|
|
showTipsy( 6000 );
|
|
}, 700 );
|
|
|
|
// manually show the tooltip
|
|
$ulsTrigger.on( 'mouseover', function () {
|
|
// show only if the ULS panel is not shown
|
|
if ( !$( '.uls-menu:visible' ).length ) {
|
|
showTipsy( 3000 );
|
|
}
|
|
} );
|
|
}
|
|
|
|
function initInterface() {
|
|
var $triggers,
|
|
$pLang,
|
|
$ulsTrigger = $( '.uls-trigger' ),
|
|
anonMode = ( mw.user.isAnon() &&
|
|
!mw.config.get( 'wgULSAnonCanChangeLanguage' ) ),
|
|
ulsPosition = mw.config.get( 'wgULSPosition' );
|
|
|
|
if ( ulsPosition === 'interlanguage' ) {
|
|
// TODO: Refactor this block
|
|
// The interlanguage links section
|
|
$pLang = $( '#p-lang' );
|
|
// Add an element near the interlanguage links header
|
|
$ulsTrigger = $( '<span>' ).addClass( 'uls-settings-trigger' );
|
|
// Append ULS cog to languages section.
|
|
$pLang.prepend( $ulsTrigger );
|
|
// Take care of any other elements with this class.
|
|
$ulsTrigger = $( '.uls-settings-trigger' );
|
|
|
|
if ( !$pLang.find( 'div ul' ).children().length ) {
|
|
// Replace the title of the interlanguage links area
|
|
// if there are no interlanguage links
|
|
$pLang.find( 'h3' )
|
|
.text( mw.msg( 'uls-plang-title-languages' ) );
|
|
}
|
|
|
|
$ulsTrigger.attr( {
|
|
title: mw.msg( 'ext-uls-select-language-settings-icon-tooltip' )
|
|
} );
|
|
|
|
$ulsTrigger.on( 'click', function ( e, eventParams ) {
|
|
var languagesettings = $ulsTrigger.data( 'languagesettings' ),
|
|
languageSettingsOptions;
|
|
|
|
if ( languagesettings ) {
|
|
if ( !languagesettings.shown ) {
|
|
mw.hook( 'mw.uls.settings.open' ).fire( eventParams && eventParams.source || 'interlanguage' );
|
|
}
|
|
} else {
|
|
// Initialize the Language settings window
|
|
languageSettingsOptions = {
|
|
defaultModule: 'display',
|
|
onVisible: function () {
|
|
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();
|
|
|
|
// Add the callout caret triangle
|
|
// pointing to the trigger icon
|
|
this.$window.addClass( 'callout' );
|
|
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 ( ulsTriggerOffset.left > $( window ).width() / 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();
|
|
}
|
|
|
|
// 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.
|
|
this.top = ulsTriggerOffset.top +
|
|
( ulsTriggerHeight / 2 ) -
|
|
( caretRadius + caretPosition.top + 2 );
|
|
|
|
this.position();
|
|
}
|
|
};
|
|
|
|
mw.loader.using( mw.uls.languageSettingsModules, function () {
|
|
$ulsTrigger.languagesettings( languageSettingsOptions ).click();
|
|
} );
|
|
|
|
e.stopPropagation();
|
|
}
|
|
} );
|
|
} else if ( anonMode ) {
|
|
$ulsTrigger.on( 'click', function ( e, eventParams ) {
|
|
var languagesettings = $ulsTrigger.data( 'languagesettings' );
|
|
|
|
e.preventDefault();
|
|
|
|
if ( languagesettings ) {
|
|
if ( !languagesettings.shown ) {
|
|
mw.hook( 'mw.uls.settings.open' ).fire( eventParams && eventParams.source || 'personal' );
|
|
}
|
|
} else {
|
|
mw.loader.using( mw.uls.languageSettingsModules, function () {
|
|
$ulsTrigger.languagesettings();
|
|
|
|
$ulsTrigger.trigger( 'click', eventParams );
|
|
} );
|
|
}
|
|
} );
|
|
} else {
|
|
$ulsTrigger.on( 'click', function ( e, eventParams ) {
|
|
var uls = $ulsTrigger.data( 'uls' );
|
|
|
|
e.preventDefault();
|
|
|
|
if ( uls ) {
|
|
if ( !uls.shown ) {
|
|
mw.hook( 'mw.uls.settings.open' ).fire( eventParams && eventParams.source || 'personal' );
|
|
}
|
|
} else {
|
|
mw.loader.using( 'ext.uls.mediawiki', function () {
|
|
$ulsTrigger.uls( {
|
|
quickList: function () {
|
|
return mw.uls.getFrequentLanguageList();
|
|
},
|
|
onReady: function () {
|
|
var uls = this;
|
|
mw.loader.using( mw.uls.languageSettingsModules, function () {
|
|
addDisplaySettings( uls );
|
|
addInputSettings( uls );
|
|
} );
|
|
},
|
|
onSelect: function ( language ) {
|
|
mw.uls.changeLanguage( language );
|
|
}
|
|
} );
|
|
|
|
// Allow styles to apply first and position to work by
|
|
// delaying the activation after them.
|
|
window.setTimeout( function () {
|
|
$ulsTrigger.trigger( 'click', eventParams );
|
|
}, 0 );
|
|
} );
|
|
}
|
|
} );
|
|
}
|
|
|
|
// At this point we don't care which kind of trigger it is
|
|
$triggers = $( '.uls-settings-trigger, .uls-trigger' );
|
|
addAccessibilityFeatures( $triggers );
|
|
|
|
// Bind language settings to preferences page link
|
|
$( '#uls-preferences-link' )
|
|
.text( mw.msg( 'ext-uls-language-settings-preferences-link' ) )
|
|
.click( function () {
|
|
$ulsTrigger.trigger( 'click', {
|
|
source: 'preferences'
|
|
} );
|
|
|
|
return false;
|
|
} );
|
|
}
|
|
|
|
function initTooltip() {
|
|
var module, previousLanguage, currentLanguage, previousAutonym, currentAutonym;
|
|
|
|
if ( !userCanChangeLanguage() ) {
|
|
return;
|
|
}
|
|
|
|
previousLanguage = mw.storage.get( 'uls-previous-language-code' );
|
|
currentLanguage = mw.config.get( 'wgUserLanguage' );
|
|
previousAutonym = mw.storage.get( 'uls-previous-language-autonym' );
|
|
currentAutonym = mw.config.get( 'wgULSCurrentAutonym' );
|
|
|
|
// If storage is empty, i.e. first visit, then store the current language
|
|
// immediately so that we know when it changes.
|
|
if ( !previousLanguage || !previousAutonym ) {
|
|
mw.storage.set( 'uls-previous-language-code', currentLanguage );
|
|
mw.storage.set( 'uls-previous-language-autonym', currentAutonym );
|
|
return;
|
|
}
|
|
|
|
if ( previousLanguage !== currentLanguage ) {
|
|
// Use oojs-ui-core only after MediaWiki 1.26 is no longer supported
|
|
module = mw.loader.getState( 'oojs-ui-core' ) === null ? 'oojs-ui' : 'oojs-ui-core';
|
|
mw.loader.using( module ).done( function () {
|
|
showUndoTooltip( previousLanguage, previousAutonym );
|
|
} );
|
|
mw.storage.set( 'uls-previous-language-code', currentLanguage );
|
|
mw.storage.set( 'uls-previous-language-autonym', currentAutonym );
|
|
// Store this language in a list of frequently used languages
|
|
mw.uls.addPreviousLanguage( currentLanguage );
|
|
}
|
|
}
|
|
|
|
function initIme() {
|
|
var imeSelector = mw.config.get( 'wgULSImeSelectors' ).join( ', ' );
|
|
|
|
$( 'body' ).on( 'focus.imeinit', imeSelector, function () {
|
|
var $input = $( this );
|
|
$( 'body' ).off( '.imeinit' );
|
|
mw.loader.using( 'ext.uls.ime', function () {
|
|
mw.ime.setup();
|
|
mw.ime.handleFocus( $input );
|
|
} );
|
|
} );
|
|
}
|
|
|
|
function init() {
|
|
initInterface();
|
|
initTooltip();
|
|
initIme();
|
|
}
|
|
|
|
// Early execute of init
|
|
if ( document.readyState === 'interactive' ) {
|
|
init();
|
|
} else {
|
|
$( init );
|
|
}
|
|
}( jQuery, mediaWiki ) );
|