Add languages to Minerva HTML

Bug: T331905
Change-Id: I55a25dfb8aba3d1b589a36ba4cba3bba0fe710a1

includes/Menu/Entries/LanguageSelectorEntry.php

@@ -19,7 +19,6 @@ namespace MediaWiki\Minerva\Menu\Entries;
 
 use MediaWiki\Minerva\MinervaUI;
 use MessageLocalizer;
-use SpecialPage;
 use Title;
 
 /**
@@ -107,10 +106,7 @@ class LanguageSelectorEntry implements IMenuEntry {
 		$switcherClasses = ' language-selector';
 
 		if ( $this->doesPageHaveLanguages ) {
-			$switcherLink = SpecialPage::getTitleFor(
-				'MobileLanguages',
-				$this->title
-			)->getLocalURL();
+			$switcherLink = '#p-lang';
 		} else {
 			$switcherClasses .= ' disabled';
 		}

includes/Skins/LanguageSection.mustache

@@ -0,0 +1,14 @@
+<div id="p-lang">
+    <h4>{{msg-minerva-page-actions-language-switcher}}</h4>
+    <section>
+        {{#data-portlets.data-variants}}
+        <ul id="{{id}}" class="minerva-languages">{{{html-items}}}</ul>
+        {{/data-portlets.data-variants}}
+        {{#data-portlets.data-languages}}
+        <ul class="minerva-languages">{{{html-items}}}</ul>
+        {{/data-portlets.data-languages}}
+        {{^has-minerva-languages}}
+        <p>{{msg-mobile-frontend-languages-not-available}}</p>
+        {{/has-minerva-languages}}
+    </section>
+</div>

includes/Skins/SkinMinerva.php

@@ -329,7 +329,11 @@ class SkinMinerva extends SkinMustache {
 					'minerva-anon-talk-message'
 				);
 			}
+			$allLanguages = $data['data-portlets']['data-languages']['array-items'] ?? [];
+			$allVariants = $data['data-portlets']['data-variants']['array-items'] ?? [];
+
 			return $data + [
+				'has-minerva-languages' => !empty( $allLanguages ) || !empty( $allVariants ),
 				'array-minerva-banners' => $this->prepareBanners( $data['html-site-notice'] ),
 				'data-minerva-main-menu' => $this->getMainMenu()->getMenuData(
 					$nav,
@@ -850,15 +854,10 @@ class SkinMinerva extends SkinMustache {
 	 * @return array
 	 */
 	protected function getLanguageButton() {
-		$languageUrl = SpecialPage::getTitleFor(
-			'MobileLanguages',
-			$this->getSkin()->getTitle()
-		)->getLocalURL();
-
 		return [
 			'attributes' => [
 				'class' => 'language-selector',
-				'href' => $languageUrl,
+				'href' => '#p-lang'
 			],
 			'label' => $this->msg( 'mobile-frontend-language-article-heading' )->text()
 		];

includes/Skins/footer.mustache

@@ -6,6 +6,7 @@
 {{/data-minerva-history-link}}
 	<div class="post-content footer-content">
 	{{{html-after-content}}}
+	{{>LanguageSection}}
 	{{#data-logos}}<div class="minerva-footer-logo">{{>Logo}}</div>{{/data-logos}}
 	{{#data-info}}{{>footerItemList}}{{/data-info}}
 	{{#data-places}}{{>footerItemList}}{{/data-places}}

resources/skins.minerva.base.styles/LanguageSection.less

@@ -0,0 +1,27 @@
+@import '../../minerva.less/minerva.variables.less';
+
+/* stylelint-disable selector-max-id */
+#p-lang {
+	display: none;
+
+	h4 {
+		margin-bottom: 10px;
+	}
+
+	// If hash fragment requests it.
+	&:target {
+		display: block;
+	}
+}
+
+.minerva-languages {
+	column-count: 2;
+
+	li {
+		list-style: none;
+	}
+
+	@media all and ( min-width: @width-breakpoint-tablet ) {
+		column-count: 3;
+	}
+}

resources/skins.minerva.base.styles/footer.less

@@ -40,11 +40,19 @@
 			font-size: 1em;
 			font-weight: bold;
 
+			// FIXME: Remove when cache has cleared for I55a25dfb8aba3d1b589a36ba4cba3bba0fe710a1
 			&:first-child {
 				margin-top: 0;
 			}
 		}
 
+		// No margin top on logo needed if it follows the #p-lang element and nothing has been loaded
+		// above languages e.g. RelatedArticles.
+		/* stylelint-disable selector-max-id */
+		#p-lang:not( :target ):first-child + .minerva-footer-logo {
+			margin-top: 0;
+		}
+
 		.hlist,
 		.license {
 			font-size: 0.875em;

resources/skins.minerva.base.styles/skin.less

@@ -5,5 +5,6 @@
 @import 'anonTalkMessage.less';
 @import 'common.less';
 @import 'header.less';
+@import 'LanguageSection.less';
 @import 'footer.less';
 @import 'print/styles.less';

skin.json

@@ -104,6 +104,9 @@
 				"name": "minerva",
 				"templateDirectory": "includes/Skins",
 				"messages": [
+					"variants",
+					"mobile-frontend-languages-not-available",
+					"minerva-page-actions-language-switcher",
 					"sitetitle",
 					"mainpage",
 					"searchbutton",