From b28d8026933e9625676aff263f8175998eb2461a Mon Sep 17 00:00:00 2001
From: Jon Robson <jdlrobson@gmail.com>
Date: Thu, 12 Jan 2023 09:17:15 -0800
Subject: [PATCH] Add languages to Minerva HTML

Bug: T331905
Change-Id: I55a25dfb8aba3d1b589a36ba4cba3bba0fe710a1
---
 .../Menu/Entries/LanguageSelectorEntry.php    |  6 +----
 includes/Skins/LanguageSection.mustache       | 14 ++++++++++
 includes/Skins/SkinMinerva.php                | 11 ++++----
 includes/Skins/footer.mustache                |  1 +
 .../LanguageSection.less                      | 27 +++++++++++++++++++
 .../skins.minerva.base.styles/footer.less     |  8 ++++++
 resources/skins.minerva.base.styles/skin.less |  1 +
 skin.json                                     |  3 +++
 8 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 includes/Skins/LanguageSection.mustache
 create mode 100644 resources/skins.minerva.base.styles/LanguageSection.less

diff --git a/includes/Menu/Entries/LanguageSelectorEntry.php b/includes/Menu/Entries/LanguageSelectorEntry.php
index 6cbe579cc..959296057 100644
--- a/includes/Menu/Entries/LanguageSelectorEntry.php
+++ b/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';
 		}
diff --git a/includes/Skins/LanguageSection.mustache b/includes/Skins/LanguageSection.mustache
new file mode 100644
index 000000000..7a9c0beba
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/includes/Skins/SkinMinerva.php b/includes/Skins/SkinMinerva.php
index 263d9ee99..d15309bf2 100644
--- a/includes/Skins/SkinMinerva.php
+++ b/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()
 		];
diff --git a/includes/Skins/footer.mustache b/includes/Skins/footer.mustache
index ece200ffd..e66718dcf 100644
--- a/includes/Skins/footer.mustache
+++ b/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}}
diff --git a/resources/skins.minerva.base.styles/LanguageSection.less b/resources/skins.minerva.base.styles/LanguageSection.less
new file mode 100644
index 000000000..d7651e9eb
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/resources/skins.minerva.base.styles/footer.less b/resources/skins.minerva.base.styles/footer.less
index d2e1b697e..2adc35806 100644
--- a/resources/skins.minerva.base.styles/footer.less
+++ b/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;
diff --git a/resources/skins.minerva.base.styles/skin.less b/resources/skins.minerva.base.styles/skin.less
index 2256745a0..4f3fec5de 100644
--- a/resources/skins.minerva.base.styles/skin.less
+++ b/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';
diff --git a/skin.json b/skin.json
index 0ab6e555b..8268266ed 100644
--- a/skin.json
+++ b/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",