From ab6decae1133abe3350db1bfe45dd69221a9b54f Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Thu, 22 Oct 2020 11:15:10 -0700 Subject: [PATCH] Allow skins to register their own button and disable compact Example usage: Iabd4688c6081b4de391b9655b92a16f3a414e018 We will skip loading the compact link if we don't need to compact the languages. Note special handling is known for Timeless which stops propagation of events. This will be fixed in Timeless at a later date. Bug: T264824 Change-Id: I0518ecdf402ebf5eb6bad2c430f6462322c0d8e1 --- extension.json | 8 ++-- includes/UniversalLanguageSelectorHooks.php | 10 ++-- resources/js/ext.uls.compactlinks.js | 31 +----------- resources/js/ext.uls.interface.js | 52 ++++++++++++++++++++- 4 files changed, 63 insertions(+), 38 deletions(-) diff --git a/extension.json b/extension.json index 90e859b6..dea015e2 100644 --- a/extension.json +++ b/extension.json @@ -159,8 +159,7 @@ }, "ext.uls.compactlinks": { "packageFiles": [ - "js/ext.uls.compactlinks.js", - "js/ext.uls.launch.js" + "js/ext.uls.compactlinks.js" ], "styles": "css/ext.uls.compactlinks.less", "dependencies": [ @@ -224,7 +223,10 @@ }, "ext.uls.interface": { "targets": [ "desktop", "mobile" ], - "scripts": "js/ext.uls.interface.js", + "packageFiles": [ + "js/ext.uls.interface.js", + "js/ext.uls.launch.js" + ], "styles": "css/ext.uls.interface.less", "dependencies": [ "mediawiki.jqueryMsg", diff --git a/includes/UniversalLanguageSelectorHooks.php b/includes/UniversalLanguageSelectorHooks.php index a532d416..62bf4746 100644 --- a/includes/UniversalLanguageSelectorHooks.php +++ b/includes/UniversalLanguageSelectorHooks.php @@ -106,9 +106,10 @@ class UniversalLanguageSelectorHooks { // Soft dependency to Wikibase client. Don't enable CLL if links are managed manually. $excludedLinks = $out->getProperty( 'noexternallanglinks' ); $override = is_array( $excludedLinks ) && in_array( '*', $excludedLinks ); - if ( !$override && self::isCompactLinksEnabled( $out->getUser() ) ) { - $out->addModules( 'ext.uls.compactlinks' ); - } + $config = [ + 'wgULSPosition' => $wgULSPosition, + 'wgULSCompactLinksEnabled' => !$override && self::isCompactLinksEnabled( $out->getUser() ), + ]; if ( is_string( $wgULSGeoService ) ) { $out->addModules( 'ext.uls.geoclient' ); @@ -121,7 +122,8 @@ class UniversalLanguageSelectorHooks { // This is added here, and not in addConfig to allow skins and extensions to vary it // For example, ContentTranslation special pages depend on being able to change it. - $out->addJsConfigVars( 'wgULSPosition', $wgULSPosition ); + $out->addJsConfigVars( $config ); + if ( $wgULSPosition === 'personal' ) { $out->addModuleStyles( 'ext.uls.pt' ); } else { diff --git a/resources/js/ext.uls.compactlinks.js b/resources/js/ext.uls.compactlinks.js index 122cd317..269bf402 100644 --- a/resources/js/ext.uls.compactlinks.js +++ b/resources/js/ext.uls.compactlinks.js @@ -20,8 +20,7 @@ ( function () { 'use strict'; - var DEFAULT_LIST_SIZE = 9, - launchULS = require( './ext.uls.launch.js' ); + var DEFAULT_LIST_SIZE = 9; /** * @param {Array} target @@ -179,7 +178,6 @@ this.compactList = this.getCompactList(); this.hideOriginal(); this.render(); - this.listen(); }; /** @@ -197,33 +195,6 @@ mw.hook( 'mw.uls.compactlinks.initialized' ).fire( true ); }; - /** - * Attaches the actual selector to the trigger. - * - * @param {jQuery} $trigger Element to use as trigger. - */ - CompactInterlanguageList.prototype.createSelector = function ( $trigger ) { - launchULS( - $trigger, - this.interlanguageList - ); - }; - - /** - * Bind to event handlers and listen for events - */ - CompactInterlanguageList.prototype.listen = function () { - var self = this; - - this.$trigger.one( 'click', function () { - // Load the ULS now. - mw.loader.using( 'ext.uls.mediawiki' ).then( function () { - self.createSelector( self.$trigger ); - self.$trigger.trigger( 'click' ); - } ); - } ); - }; - /** * Get the compacted interlanguage list as associative array * diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js index a89a5e07..3cd82d75 100644 --- a/resources/js/ext.uls.interface.js +++ b/resources/js/ext.uls.interface.js @@ -19,7 +19,8 @@ ( function () { 'use strict'; - var languageSettingsModules = [ 'ext.uls.displaysettings' ]; + var languageSettingsModules = [ 'ext.uls.displaysettings' ], + launchULS = require( './ext.uls.launch.js' ); /** * Construct the display settings link @@ -442,10 +443,59 @@ } ); } + /** + * Compact the language list if necessary + */ + function compactLanguageLinksList() { + if ( + // Allow skins to register their own button, in which case no need to compact + !document.querySelector( '.mw-interlanguage-selector' ) && ( + // This line is for cached HTML where the JS config variable is not available + // it can be removed a week after this code has been in production. + mw.loader.getState( 'ext.uls.compactlinks' ) !== 'registered' || + mw.config.get( 'wgULSCompactLinksEnabled' ) + ) + ) { + mw.loader.using( 'ext.uls.compactlinks' ); + } + } + + /** + * Event handler for the language button + * @param {jQuery.Event} ev + */ + function clickLanguageButton( ev ) { + var $target = $( ev.currentTarget ); + ev.preventDefault(); + // Load the ULS now. + mw.loader.using( 'ext.uls.mediawiki' ).then( function () { + launchULS( + $target, + mw.uls.getInterlanguageListFromNodes( + document.querySelectorAll( '#p-lang .interlanguage-link-target' ) + ) + ); + $target.trigger( 'click' ); + } ); + } + /** + * Sets up the interlanguage selector button if present + */ + function initInterlanguageSelector() { + // Special handling for Timeless which stops propagation on links in this menu + if ( $( '.sidebar-inner' ).length ) { + $( '.sidebar-inner #p-lang' ).one( 'click', '.mw-interlanguage-selector', clickLanguageButton ); + } else { + $( document ).one( 'click', '.mw-interlanguage-selector', clickLanguageButton ); + } + } + function init() { initInterface(); initTooltip(); initIme(); + compactLanguageLinksList(); + initInterlanguageSelector(); } // Early execute of init