Model indicators as their own template rather than a block of HTML

Bug: T251212
Change-Id: I44b1e17f21112896d2bef54d04f17df861bb3dbb

includes/SkinVector.php

@@ -139,7 +139,18 @@ class SkinVector extends SkinTemplate {
 		$out = $this->getOutput();
 		$title = $out->getTitle();
 
+		$indicators = [];
+		foreach ( $out->getIndicators() as $id => $content ) {
+			$indicators[] = [
+				'id' => "mw-indicator-$id",
+				'html' => $content,
+			];
+		}
+
 		return [
+			// Data objects:
+			'data-indicators' => $indicators,
+			// HTML strings:
 			'html-sitenotice' => $this->getSiteNotice(),
 			'html-userlangattributes' => $this->prepareUserLanguageAttributes(),
 			'html-subtitle' => $this->prepareSubtitle(),

includes/VectorTemplate.php

@@ -147,7 +147,6 @@ class VectorTemplate extends BaseTemplate {
 		// @phan-suppress-next-line PhanUndeclaredMethod
 		$commonSkinData = $skin->getTemplateData() + [
 			'html-headelement' => $out->headElement( $skin ),
-			'html-indicators' => $this->getIndicators(),
 			'page-langcode' => $title->getPageViewLanguage()->getHtmlCode(),
 			'page-isarticle' => (bool)$out->isArticle(),
 

includes/templates/Indicators.mustache

@@ -0,0 +1,6 @@
+{{! @typedef Indicator[]}}
+<div class="mw-indicators mw-body-content">
+{{#data-indicators}}
+<div class="{{id}}">{{{html}}}</div>
+{{/data-indicators}}
+</div>

includes/templates/skin-legacy.mustache

@@ -3,8 +3,8 @@
 		`</head>` and contains `meta` tags and ResourceLoader internals.
 	string|null html-sitenotice the contents of a banner defined in MediaWiki:Sitenotice.
 		Also used by CentralNotice to inject banners into Vector.
-	string html-indicators raw HTML containing wiki-defined badges such as "good article",
-		"featured article". An empty string if none are defined.
+	Indicator[] data-indicators wiki-defined badges such as "good article",
+		"featured article". An empty array if none are defined.
 	string page-langcode the content language of the article. Assumed to be escaped HTML.
 	string html-title
 	string html-prebodyhtml
@@ -42,7 +42,7 @@
 	{{#html-sitenotice}}
 		<div id="siteNotice" class="mw-body-content">{{{html-sitenotice}}}</div>
 	{{/html-sitenotice}}
-	{{{html-indicators}}}
+	{{>Indicators}}
 	<h1 id="firstHeading" class="firstHeading" lang="{{page-langcode}}">{{{html-title}}}</h1>
 	{{{html-prebodyhtml}}}
 	<div id="bodyContent" class="mw-body-content">

includes/templates/skin.mustache

@@ -3,8 +3,8 @@
 		`</head>` and contains `meta` tags and ResourceLoader internals.
 	string|null html-sitenotice the contents of a banner defined in MediaWiki:Sitenotice.
 		Also used by CentralNotice to inject banners into Vector.
-	string html-indicators raw HTML containing wiki-defined badges such as "good article",
-		"featured article". An empty string if none are defined.
+	Indicator[] data-indicators wiki-defined badges such as "good article",
+		"featured article". An empty array if none are defined.
 	string page-langcode the content language of the article. Assumed to be escaped HTML.
 	string html-title
 	string html-prebodyhtml
@@ -44,7 +44,7 @@
 	{{#html-sitenotice}}
 		<div id="siteNotice" class="mw-body-content">{{{html-sitenotice}}}</div>
 	{{/html-sitenotice}}
-	{{{html-indicators}}}
+	{{>Indicators}}
 	<h1 id="firstHeading" class="firstHeading" lang="{{page-langcode}}">{{{html-title}}}</h1>
 	{{{html-prebodyhtml}}}
 	<div id="bodyContent" class="mw-body-content">

stories/skin.stories.data.js

@@ -51,24 +51,26 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
 	Footer: footerTemplate
 } );
 
-const HTML_INDICATORS = `<div class="mw-indicators mw-body-content">
-<div id="mw-indicator-good-star" class="mw-indicator">
-	<a href="/wiki/Wikipedia:Good_articles"
+/**
+ * @type {Indicator[]}
+ */
+const DATA_INDICATORS = [ {
+	id: 'mw-indicator-good-star',
+	html: `<a href="/wiki/Wikipedia:Good_articles"
 		title="This is a good article. Follow the link for more information.">
 			<img alt="This is a good article. Follow the link for more information."
 				src="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/19px-Symbol_support_vote.svg.png" decoding="async" width="19" height="20"
 				srcset="//upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/29px-Symbol_support_vote.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/9/94/Symbol_support_vote.svg/39px-Symbol_support_vote.svg.png 2x" data-file-width="180" data-file-height="185" />
-	</a>
-</div>
-<div id="mw-indicator-pp-autoreview" class="mw-indicator">
-	<a href="/wiki/Wikipedia:Protection_policy#pending"
+	</a>`
+},
+{
+	id: 'mw-indicator-pp-autoreview',
+	html: `<a href="/wiki/Wikipedia:Protection_policy#pending"
 		title="All edits by unregistered and new users are subject to review prior to becoming visible to unregistered users">
 		<img alt="Page protected with pending changes" src="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/20px-Pending-protection-shackle.svg.png"
 			decoding="async" width="20" height="20" srcset="//upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/30px-Pending-protection-shackle.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/b/b7/Pending-protection-shackle.svg/40px-Pending-protection-shackle.svg.png 2x" data-file-width="512" data-file-height="512" />
-	</a>
-</div>
-</div>
-`;
+	</a>`
+} ];
 
 export const LEGACY_TEMPLATE_DATA = {
 	'html-title': 'Vector 2019',
@@ -90,7 +92,7 @@ export const LEGACY_TEMPLATE_DATA = {
 	// extension dependent..
 	'html-hook-vector-before-footer': placeholder( 'VectorBeforeFooter hook output', 100 ),
 	'html-dataAfterContent': placeholder( 'Extensions can add here e.g. Related Articles.', 100 ),
-	'html-indicators': HTML_INDICATORS,
+	'data-indicators': DATA_INDICATORS,
 	'html-subtitle': placeholder( 'Extensions can configure subtitle', 20 )
 };
 
@@ -107,6 +109,7 @@ export const MODERN_TEMPLATE_DATA = {
 	'html-sitenotice': placeholder( 'a site notice or central notice banner may go here', 70 ),
 
 	// article dependent
+	'data-indicators': DATA_INDICATORS,
 	'html-bodycontent': placeholder( 'Article content goes here' ),
 	'html-printfooter': `Retrieved from ‘<a dir="ltr" href="#">https://en.wikipedia.org/w/index.php?title=this&oldid=blah</a>’`,
 	'html-catlinks': placeholder( 'Category links component from mediawiki core', 50 )

stories/types.js

@@ -1,3 +1,9 @@
+/**
+ * @typedef {Object} Indicator
+ * @prop {string} html of the indicator link.
+ * @prop {string} id of the indicator.
+ */
+
 /**
  * @typedef {Object} LogoOptions
  * @prop {string} src of logo. Can be relative, absolute or data uri.