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

Delay compact language links language selector creation until click

Browse Source 
No point constructing the selector when it is used.

Task: T122341
Change-Id: I928f9041a95e2c48625dba6e11550ac6bbdcb7fd
This commit is contained in:
Niklas Laxström
2016-04-22 11:04:17 +02:00
committed by Nikerabbit
parent d2ef6405cb
commit 85f7ebdd4b
2 changed files with 82 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
extension.json
View File

@@ -233,8 +233,6 @@
"scripts": "js/ext.uls.compactlinks.js", "scripts": "js/ext.uls.compactlinks.js",
"styles": "css/ext.uls.compactlinks.less", "styles": "css/ext.uls.compactlinks.less",
"dependencies": [ "dependencies": [
"ext.uls.mediawiki",
"ext.uls.init",
"jquery.uls.compact", "jquery.uls.compact",
"mediawiki.language", "mediawiki.language",
"mediawiki.ui.button" "mediawiki.ui.button"

147
resources/js/ext.uls.compactlinks.js
View File

@@ -89,87 +89,104 @@
}, },
/** /**
* Bind to event handlers and listen for events * Attaches the actual selector to the trigger.
*
* @param {jQuery} $trigger Element to use as trigger.
*/ */
listen: function () { createSelector: function ( $trigger ) {
var languages, var languages,
compactLinks = this, self = this,
dir = $( 'html' ).prop( 'dir' ), dir = $( 'html' ).prop( 'dir' ),
ulsLanguageList = {}; ulsLanguageList = {};
languages = $.map( compactLinks.interlanguageList, function ( language, languageCode ) { languages = $.map( this.interlanguageList, function ( language, languageCode ) {
ulsLanguageList[ languageCode ] = language.autonym; ulsLanguageList[ languageCode ] = language.autonym;
return languageCode; return languageCode;
} ); } );
// Attach ULS to the trigger return mw.loader.using( 'ext.uls.mediawiki' ).then( function () {
compactLinks.$trigger.uls( { // Attach ULS to the trigger
onReady: function () { $trigger.uls( {
this.$menu.addClass( 'interlanguage-uls-menu' ); onReady: function () {
}, this.$menu.addClass( 'interlanguage-uls-menu' );
/** },
* Language selection handler /**
* * Language selection handler
* @param {string} language language code *
*/ * @param {string} language language code
onSelect: function ( language ) { */
var previousLanguages = mw.uls.getPreviousLanguages(); onSelect: function ( language ) {
var previousLanguages = mw.uls.getPreviousLanguages();
compactLinks.$trigger.removeClass( 'selector-open' ); self.$trigger.removeClass( 'selector-open' );
previousLanguages.push( language ); previousLanguages.push( language );
previousLanguages = unique( previousLanguages ); previousLanguages = unique( previousLanguages );
mw.uls.setPreviousLanguages( previousLanguages ); mw.uls.setPreviousLanguages( previousLanguages );
location.href = compactLinks.interlanguageList[ language ].href; location.href = self.interlanguageList[ language ].href;
}, },
onVisible: function () { onVisible: function () {
var offset, height, width, triangleWidth; var offset, height, width, triangleWidth;
// The panel is positioned carefully so that our pointy triangle, // The panel is positioned carefully so that our pointy triangle,
// which is implemented as a square box rotated 45 degrees with // which is implemented as a square box rotated 45 degrees with
// rotation origin in the middle. See the corresponding style file. // rotation origin in the middle. See the corresponding style file.
// These are for the trigger // These are for the trigger
offset = compactLinks.$trigger.offset(); offset = $trigger.offset();
width = compactLinks.$trigger.outerWidth(); width = $trigger.outerWidth();
height = compactLinks.$trigger.outerHeight(); height = $trigger.outerHeight();
// Triangle width is: Math.sqrt( 2 * Math.pow( 25, 2 ) ) / 2 =~ 17.7; // Triangle width is: Math.sqrt( 2 * Math.pow( 25, 2 ) ) / 2 =~ 17.7;
// Box width = 24 + 1 for border. // Box width = 24 + 1 for border.
// The resulting value is rounded up 20 to have a small space between. // The resulting value is rounded up 20 to have a small space between.
triangleWidth = 20; triangleWidth = 20;
if ( dir === 'rtl' ) { if ( dir === 'rtl' ) {
this.left = offset.left - this.$menu.outerWidth() - triangleWidth; this.left = offset.left - this.$menu.outerWidth() - triangleWidth;
} else { } else {
this.left = offset.left + width + triangleWidth; this.left = offset.left + width + triangleWidth;
} }
// Offset -250px from the middle of the trigger // Offset -250px from the middle of the trigger
this.top = offset.top + ( height / 2 ) - 250; this.top = offset.top + ( height / 2 ) - 250;
this.$menu.css( { this.$menu.css( {
left: this.left, left: this.left,
top: this.top top: this.top
} ); } );
compactLinks.$trigger.addClass( 'selector-open' ); $trigger.addClass( 'selector-open' );
}, },
languageDecorator: function ( $languageLink, language ) { languageDecorator: function ( $languageLink, language ) {
// set href and text exactly same as what was in // set href and text exactly same as what was in
// interlanguage link. The ULS autonym might be different in some // interlanguage link. The ULS autonym might be different in some
// cases like sr. In ULS it is "српски", while in interlanguage links // cases like sr. In ULS it is "српски", while in interlanguage links
// it is "српски / srpski" // it is "српски / srpski"
$languageLink $languageLink
.prop( 'href', compactLinks.interlanguageList[ language ].href ) .prop( 'href', self.interlanguageList[ language ].href )
.text( compactLinks.interlanguageList[ language ].autonym ); .text( self.interlanguageList[ language ].autonym );
}, },
onCancel: function () { onCancel: function () {
compactLinks.$trigger.removeClass( 'selector-open' ); $trigger.removeClass( 'selector-open' );
}, },
// Use compact version of ULS // Use compact version of ULS
compact: true, compact: true,
languages: ulsLanguageList, languages: ulsLanguageList,
// Show common languages // Show common languages
quickList: compactLinks.filterByCommonLanguages( languages ) quickList: self.filterByCommonLanguages( languages )
} );
} );
},
/**
* Bind to event handlers and listen for events
*/
listen: function () {
var self = this;
this.$trigger.one( 'click', function () {
self.createSelector( self.$trigger ).then( function () {
self.$trigger.click();
} );
} ); } );
}, },