User:Minh Nguyen/language button.js

/**
 * Move [[Template:Languages]] links to the Universal Language Selector content
 * language selection control, which is also at the top of the page in the
 * Vector 2022 skin.
 */
$.when(mw.loader.using("mediawiki.util"), $.ready).then(function () { 
	if (mw.config.get("skin") !== "vector-2022") return;
	
	var langLinks = $("#Languages li > span > a:not(.new, .mw-selflink)");
	var numLangs = langLinks.length;
	langLinks.each(function () {
		var lang = $(this).parent().attr("lang");
		var portletItem = $(mw.util.addPortletLink("p-lang-btn", this.href, this.textContent, null, this.textContent));
		portletItem
			.addClass("interlanguage-link")
			.addClass("interwiki-" + lang);
		portletItem.find("a")
			.addClass("interlanguage-link-target")
			.attr("hreflang", lang)
			.attr("lang", lang);
	});
	
	if (numLangs > 0) {
		// By default, nothing loads this message, but we’ve stuffed it into [[Template:Languages]] for convenience.
		mw.messages.set({
			"vector-language-button-label": $("#Languages").data("vector-language-button-label"),
		});
		var langsMsg = mw.message("vector-language-button-label", numLangs).text();
		
		$("#p-lang-btn-label")
			.removeClass("mw-portlet-lang-heading-0")
			.addClass("mw-portlet-lang-heading-" + numLangs);
		$("#p-lang-btn-label .vector-menu-heading-label, #p-lang-btn-sticky-header > span:last-of-type")
			.text(langsMsg);
	}
	
	var redLinks = $("#Languages li > span > a.new");
	var addedMissingLangs = false;
	if (redLinks.length > 0) {
		// https://github.com/wikimedia/mediawiki-extensions-ContentTranslation/blob/c9e87f803da4b0c17e1dea712378d79cc1467117/modules/entrypoints/ext.cx.entrypoints.uls.relevantlanguages.js#L84
		mw.hook("mw.uls.compact_language_links.open").add(function (button) {
			if (addedMissingLangs) return;
			var uls = button.data("uls");
			
			var missingLangs = redLinks.parent().map(function () {
				return this.lang;
			}).get();
			var relevantMissingLangs = mw.uls.getFrequentLanguageList().filter(function (lang) {
				return missingLangs.indexOf(lang) !== -1;
			}).slice(0, 2);
			var missingLangMsg = $("<div>")
				// .addClass("cx-uls-relevant-languages-banner__text")
				.css("padding-inline-start", 32);
			if (relevantMissingLangs.length > 0) {
				missingLangMsg.append("Missing in ");
				relevantMissingLangs.forEach(function (lang) {
					missingLangMsg.append($("<strong>").text($.uls.data.getAutonym(lang)));
					missingLangMsg.append(mw.message("comma-separator").text());
				});
				missingLangMsg.append(mw.message("and").text(),
					mw.message("word-separator").text(),
					(missingLangs.length - relevantMissingLangs.length).toLocaleString() + " more");
			} else {
				missingLangMsg = "Missing in " + missingLangs.length.toLocaleString() + " languages";
			}
			
			var missingLanguagesPanel = $("<div>")
				.addClass("mw-interlanguage-selector")
				// .addClass("cx-uls-relevant-languages-banner")
				.css({
					cursor: "pointer",
					display: "flex",
					justifyContent: "space-between",
					alignItems: "center",
					fontWeight: "normal",
					padding: 16,
					backgroundColor: "#f8f9fa",
					color: "#54595d",
				});
			missingLanguagesPanel.append(missingLangMsg);
			uls.$resultsView.before(missingLanguagesPanel);
			
			missingLanguagesPanel.click(function () {
				
			});
			
			addedMissingLangs = true;
		});
	}
	
	$(".languages").hide();
});