feat(core): use ULS for interwiki language menu if possible

includes/Partials/PageTools.php

@@ -26,6 +26,7 @@
 namespace Citizen\Partials;
 
 use Exception;
+use ExtensionRegistry;
 use MediaWiki\MediaWikiServices;
 use SkinTemplate;
 
@@ -126,6 +127,7 @@ public function buildPageTools( $parentData ): array {
 				'data-page-actions' => $actionshtml,
 				'data-namespaces' => $namespaceshtml,
 				'has-languages' => $this->shouldShowLanguages( $languageshtml, $variantshtml ),
+				'is-uls-ready' => $this->shouldShowULS( $variantshtml ),
 				'data-languages' => $languageshtml,
 				'data-variants' => $variantshtml,
 				'data-page-toolbox' => $toolboxhtml,
@@ -186,15 +188,32 @@ private function shouldShowLanguages( $languageshtml, $variantshtml ): bool {
 		if ( !$this->canHaveLanguages() ) {
 			return false;
 		}
-
 		// If both language and variant menu contains nothing
 		if ( $languageshtml['is-empty'] && $variantshtml['is-empty'] ) {
 			return false;
 		}
-
 		return true;
 	}
 
+	/**
+	 * Check if UniversalLanguageSelector can be used to replace the language menu
+	 *
+	 * @param array $variantshtml
+	 * @return bool
+	 */
+	private function shouldShowULS( $variantshtml ): bool {
+		// ULS does not support variants
+		if ( !$variantshtml['is-empty'] ) {
+			return false;
+		}
+		// ext.uls.interface only attaches to mw-interlanguage-selector >1.36
+		if ( version_compare( MW_VERSION, '1.36', '<' ) ) {
+			return false;
+		}
+
+		return ExtensionRegistry::getInstance()->isLoaded( 'UniversalLanguageSelector' );
+	}
+
 	/**
 	 * Count languages avaliable
 	 * TODO: Consider having an option to count for variants?

resources/skins.citizen.styles/Pagetools.less

@@ -160,6 +160,46 @@
 	}
 }
 
+.citizen-languages {
+	// Special handling for ULS
+	// ULS won't be triggered by the label button
+	// so we need to overlay the checkbox on top of it
+	.mw-interlanguage-selector {
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		left: 0;
+		display: block;
+		width: 100%;
+		height: 100%;
+		padding: 0;
+		margin: 0;
+		cursor: pointer;
+		opacity: 0;
+
+		// Hover state needs to be define because the checkbox now overlays the label
+		&:hover {
+			~ .page-actions__button {
+				background-color: var( --background-color-quiet--hover );
+
+				&:after {
+					opacity: var( --opacity-icon-base--hover );
+				}
+			}
+		}
+
+		&:active {
+			~ .page-actions__button {
+				background-color: var( --background-color-quiet--active );
+
+				&:after {
+					opacity: var( --opacity-icon-base--active );
+				}
+			}
+		}
+	}
+}
+
 // Handle icons
 .page-actions-more {
 	a {

templates/PageTools__languages.mustache

@@ -1,12 +1,13 @@
 {{!
 	object data-page-languages
 	object data-page-variants
+	bool is-uls-ready
 }}
 <div class="citizen-languages page-actions__item mw-checkbox-hack-container">
 	<input 
 		type="checkbox" 
 		id="citizen-languages__checkbox" 
-		class="mw-checkbox-hack-checkbox"
+		class="mw-checkbox-hack-checkbox {{#is-uls-ready}}mw-interlanguage-selector{{/is-uls-ready}}"
 		role="button"
 		aria-labelledby="citizen-languages__buttonCheckbox"
 		aria-haspopup="true">