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

This reverts commit be3843e2a3 and
makes a few corrections.

Bug: T251212
Change-Id: Icb17f94e7fa4a70b0a0ea0b9cb9a12f2e727946f
This commit is contained in:
jdlrobson 2020-06-03 12:41:59 -07:00
parent 31fd25b43d
commit a6dd9b25c5
7 changed files with 47 additions and 19 deletions

View file

@ -140,7 +140,18 @@ class SkinVector extends SkinTemplate {
$out = $this->getOutput();
$title = $out->getTitle();
$indicators = [];
foreach ( $out->getIndicators() as $id => $content ) {
$indicators[] = [
'id' => Sanitizer::escapeIdForAttribute( "mw-indicator-$id" ),
'class' => 'mw-indicator',
'html' => $content,
];
}
return [
// Data objects:
'data-indicators' => $indicators,
// HTML strings:
'html-printtail' => WrappedString::join( "\n", [
MWDebug::getDebugHTML( $this->getContext() ),

View file

@ -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(),

View file

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

View file

@ -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">

View file

@ -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
@ -45,7 +45,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">

View file

@ -51,24 +51,28 @@ 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',
class: 'mw-indicator',
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',
class: 'mw-indicator',
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 +94,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 +111,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 )

View file

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