From a6dd9b25c5a9a0e98b928df40962c4c567d53b00 Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Wed, 3 Jun 2020 12:41:59 -0700 Subject: [PATCH] Model indicators as their own template rather than a block of HTML This reverts commit be3843e2a323f543ec0f190d1e0afa6d5cc04b03 and makes a few corrections. Bug: T251212 Change-Id: Icb17f94e7fa4a70b0a0ea0b9cb9a12f2e727946f --- includes/SkinVector.php | 11 ++++++++++ includes/VectorTemplate.php | 1 - includes/templates/Indicators.mustache | 6 +++++ includes/templates/skin-legacy.mustache | 6 ++--- includes/templates/skin.mustache | 6 ++--- stories/skin.stories.data.js | 29 +++++++++++++++---------- stories/types.js | 7 ++++++ 7 files changed, 47 insertions(+), 19 deletions(-) create mode 100644 includes/templates/Indicators.mustache diff --git a/includes/SkinVector.php b/includes/SkinVector.php index 3696b2262..a3dbccea1 100644 --- a/includes/SkinVector.php +++ b/includes/SkinVector.php @@ -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() ), diff --git a/includes/VectorTemplate.php b/includes/VectorTemplate.php index 93678de39..291b878a1 100644 --- a/includes/VectorTemplate.php +++ b/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(), diff --git a/includes/templates/Indicators.mustache b/includes/templates/Indicators.mustache new file mode 100644 index 000000000..8f1925e86 --- /dev/null +++ b/includes/templates/Indicators.mustache @@ -0,0 +1,6 @@ +{{! @typedef Indicator[]}} +
+{{#data-indicators}} +
{{{html}}}
+{{/data-indicators}} +
diff --git a/includes/templates/skin-legacy.mustache b/includes/templates/skin-legacy.mustache index 40ab681e1..d22ce351a 100644 --- a/includes/templates/skin-legacy.mustache +++ b/includes/templates/skin-legacy.mustache @@ -3,8 +3,8 @@ `` 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}}
{{{html-sitenotice}}}
{{/html-sitenotice}} - {{{html-indicators}}} + {{>Indicators}}

{{{html-title}}}

{{{html-prebodyhtml}}}
diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache index fba1022ac..348a45b46 100644 --- a/includes/templates/skin.mustache +++ b/includes/templates/skin.mustache @@ -3,8 +3,8 @@ `` 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}}
{{{html-sitenotice}}}
{{/html-sitenotice}} - {{{html-indicators}}} + {{>Indicators}}

{{{html-title}}}

{{{html-prebodyhtml}}}
diff --git a/stories/skin.stories.data.js b/stories/skin.stories.data.js index 883913f9a..ac66c6e4e 100644 --- a/stories/skin.stories.data.js +++ b/stories/skin.stories.data.js @@ -51,24 +51,28 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, { Footer: footerTemplate } ); -const HTML_INDICATORS = `
-
- This is a good article. Follow the link for more information. - -
- -
-`; + ` +} ]; 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 ‘https://en.wikipedia.org/w/index.php?title=this&oldid=blah’`, 'html-catlinks': placeholder( 'Category links component from mediawiki core', 50 ) diff --git a/stories/types.js b/stories/types.js index f540b450f..21758ed69 100644 --- a/stories/types.js +++ b/stories/types.js @@ -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.