wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-09-23 18:29:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove VectorComponentTableOfContentsContainer in favor of directly using VectorComponentPinnableContainer,

Browse source 
- Remove all TOC components from markup when TOC isnt available
- Ensure TOC components have a consistent naming convention

Follow-up: Icd871e1bdf4ab0c7aa5b906b913416f4b1747750
Change-Id: I63519b5e5392b9eb546876e7eea060b9a6c147dc
This commit is contained in:
bwang 2023-01-12 15:40:14 -06:00
parent 96ff431213
commit 0032b7b970
7 changed files with 77 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
includes/Components/VectorComponentStickyHeader.php
View file

@ -77,8 +77,6 @@ class VectorComponentStickyHeader implements VectorComponent {
/** @var MessageLocalizer */
private $localizer;
/** @var VectorComponent */
private $toc;
/** @var VectorComponent */
private $search;
/** @var VectorComponent|null */
private $langButton;
@ -133,17 +131,6 @@ class VectorComponentStickyHeader implements VectorComponent {
* @inheritDoc
*/
public function getTemplateData(): array {
$tocID = 'vector-sticky-header-toc';
$pinnableContainer = new VectorComponentTableOfContentsContainer(
$this->localizer,
$tocID
);
$tocDropdown = new VectorComponentDropdown(
$tocID,
'',
'mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc mw-ui-icon-flush-left',
'listBullet'
);
$btns = [
self::TALK_ICON,
self::SUBJECT_ICON,
@ -159,8 +146,6 @@ class VectorComponentStickyHeader implements VectorComponent {
$searchBoxData = $this->search->getTemplateData();
return [
'data-sticky-header-toc-pinnable-container' => $pinnableContainer->getTemplateData(),
'data-sticky-header-toc-dropdown' => $tocDropdown->getTemplateData(),
'data-buttons' => $btns,
'data-primary-action' => $this->langButton ?
$this->langButton->getTemplateData() : null,

18
includes/Components/VectorComponentTableOfContents.php
View file

@ -24,7 +24,7 @@ class VectorComponentTableOfContents implements VectorComponent {
/** @var VectorComponentPinnableHeader */
private $pinnableHeader;
/** @var string */
/** @var string */
public const ID = 'vector-toc';
/**
@ -42,6 +42,21 @@ class VectorComponentTableOfContents implements VectorComponent {
// ToC is pinned by default, hardcoded for now
$this->isPinned = true;
$this->config = $config;
$this->pinnableHeader = new VectorComponentPinnableHeader(
$this->localizer,
$this->isPinned,
self::ID,
null,
false,
'h2'
);
}
/**
* @return bool
*/
public function isPinned(): bool {
return $this->isPinned;
}
/**
@ -73,6 +88,7 @@ class VectorComponentTableOfContents implements VectorComponent {
$this->tocData[ 'number-section-count'] >= $this->config->get(
'VectorTableOfContentsCollapseAtCount'
),
'data-pinnable-header' => $this->pinnableHeader->getTemplateData(),
] );
}
}

44
includes/Components/VectorComponentTableOfContentsContainer.php
View file

@ -1,44 +0,0 @@
<?php
namespace MediaWiki\Skins\Vector\Components;
use MessageLocalizer;
/**
* VectorComponentTableOfContentsContainer component
*/
class VectorComponentTableOfContentsContainer implements VectorComponent {
/** @var string */
private $id;
/** @var MessageLocalizer */
private $localizer;
/**
* @param MessageLocalizer $localizer
* @param string $id (optional) of the pinnable element associated
* with the pinnable header and container.
*/
public function __construct( MessageLocalizer $localizer, $id = 'vector-toc' ) {
$this->localizer = $localizer;
$this->id = $id;
}
/**
* In tableOfContents.js we have tableOfContents::getTableOfContentsSectionsData(),
* that yields the same result as this function, please make sure to keep them in sync.
* @inheritDoc
*/
public function getTemplateData(): array {
$pinnableHeader = new VectorComponentPinnableHeader(
$this->localizer,
true,
$this->id,
null,
false,
'h2'
);
$pinnableContainer = new VectorComponentPinnableContainer( $this->id );
return $pinnableContainer->getTemplateData() + [
'data-pinnable-header' => $pinnableHeader->getTemplateData(),
];
}
}

67
includes/SkinVector22.php
View file

@ -17,7 +17,6 @@ use MediaWiki\Skins\Vector\Components\VectorComponentPinnableContainer;
use MediaWiki\Skins\Vector\Components\VectorComponentSearchBox;
use MediaWiki\Skins\Vector\Components\VectorComponentStickyHeader;
use MediaWiki\Skins\Vector\Components\VectorComponentTableOfContents;
use MediaWiki\Skins\Vector\Components\VectorComponentTableOfContentsContainer;
use MediaWiki\Skins\Vector\Components\VectorComponentUserLinks;
use RuntimeException;
use SkinMustache;
@ -307,11 +306,52 @@ class SkinVector22 extends SkinMustache {
$loginLinkData = $this->buildLoginData( $returnto, $this->useCombinedLoginLink() );
$createAccountData = $this->buildCreateAccountData( $returnto );
$localizer = $this->getContext();
$tocData = $parentData['data-toc'];
$tocComponents = [];
// If the table of contents has no items, we won't output it.
// empty array is interpreted by Mustache as falsey.
$isTocUnavailable = empty( $tocData ) || empty( $tocData[ 'array-sections' ] );
$components = [
$isTocAvailable = !empty( $tocData ) && !empty( $tocData[ 'array-sections' ] );
if ( $isTocAvailable ) {
$dataToc = new VectorComponentTableOfContents(
$parentData['data-toc'],
$localizer,
$this->getConfig()
);
$tocComponents = [
'data-toc' => $dataToc,
'data-toc-pinnable-container' => new VectorComponentPinnableContainer(
VectorComponentTableOfContents::ID,
$dataToc->isPinned()
),
'data-page-titlebar-toc-dropdown' => new VectorComponentDropdown(
'vector-page-titlebar-toc',
// no label,
'',
// class
'vector-page-titlebar-toc mw-ui-icon-flush-left',
// icon
'listBullet',
),
'data-page-titlebar-toc-pinnable-container' => new VectorComponentPinnableContainer(
'vector-page-titlebar-toc',
$dataToc->isPinned()
),
'data-sticky-header-toc-dropdown' => new VectorComponentDropdown(
'vector-sticky-header-toc',
'',
'mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc mw-ui-icon-flush-left',
'listBullet'
),
'data-sticky-header-toc-pinnable-container' => new VectorComponentPinnableContainer(
'vector-sticky-header-toc',
$dataToc->isPinned()
),
];
}
$components = $tocComponents + [
'data-vector-variants' => new VectorComponentMenuVariants(
$parentData['data-portlets']['data-variants'],
$this->getTitle()->getPageLanguage(),
@ -376,14 +416,6 @@ class SkinVector22 extends SkinMustache {
$langData['html-after-portal'] ?? '',
$this->getTitle()
) : null,
'data-toc-container' => $isTocUnavailable ? null : new VectorComponentTableOfContentsContainer(
$localizer,
),
'data-toc' => $isTocUnavailable ? null : new VectorComponentTableOfContents(
$tocData,
$localizer,
$this->getConfig()
),
'data-search-box' => new VectorComponentSearchBox(
$parentData['data-search-box'],
true,
@ -421,19 +453,6 @@ class SkinVector22 extends SkinMustache {
$this->msg( 'toolbox' )->text(),
VectorComponentPageTools::ID . '-dropdown',
) : null,
'data-page-titlebar-toc-dropdown' => $isTocUnavailable ? null : new VectorComponentDropdown(
'vector-page-titlebar-toc',
// no label,
'',
// class
'vector-page-titlebar-toc mw-ui-icon-flush-left',
// icon
'listBullet',
),
'data-page-titlebar-pinnable-container' => new VectorComponentPinnableContainer(
'vector-page-titlebar-toc',
true
),
'data-vector-sticky-header' => $featureManager->isFeatureEnabled(
Constants::FEATURE_STICKY_HEADER
) ? new VectorComponentStickyHeader(

10
includes/templates/PageTitlebar.mustache
View file

@ -17,14 +17,12 @@
</label>
{{! TOC is moved into this dropdown from the sidebar in stickyHeader.js. }}
{{#data-page-titlebar-toc-dropdown}}
{{>Dropdown/Open}}
{{#data-page-titlebar-pinnable-container}}
{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Open}}{{/data-page-titlebar-toc-dropdown}}
{{#data-page-titlebar-toc-pinnable-container}}
{{>PinnableContainer/Unpinned/Open}}
{{>PinnableContainer/Close}}
{{/data-page-titlebar-pinnable-container}}
{{>Dropdown/Close}}
{{/data-page-titlebar-toc-dropdown}}
{{/data-page-titlebar-toc-pinnable-container}}
{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Close}}{{/data-page-titlebar-toc-dropdown}}
{{{html-title-heading}}}

6
includes/templates/TableOfContentsContainer.mustache
View file

@ -1,10 +1,10 @@
{{#data-toc-container}}
<nav id="mw-panel-toc" role="navigation" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container">
{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
{{#data-toc-pinnable-container}}
{{>PinnableContainer/Pinned/Open}}
{{#is-pinned}}
{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
{{#data-toc}}{{>TableOfContents}}{{/data-toc}}
{{/is-pinned}}
{{>PinnableContainer/Close}}
{{/data-toc-pinnable-container}}
</nav>
{{/data-toc-container}}

11
tests/phpunit/unit/components/VectorComponentTableOfContentsTest.php
View file

@ -109,7 +109,16 @@ class VectorComponentTableOfContentsTest extends \MediaWikiUnitTestCase {
'is-vector-toc-beginning-enabled' => $config[ 'VectorTableOfContentsBeginning' ],
'vector-is-collapse-sections-enabled' =>
$tocData[ 'number-section-count' ] >= $config[ 'VectorTableOfContentsCollapseAtCount' ],
'id' => 'vector-toc'
'id' => 'vector-toc',
'data-pinnable-header' => [
'is-pinned' => true,
'data-name' => 'vector-toc',
'data-feature-name' => null,
'label' => 'vector-toc-label',
'unpin-label' => 'vector-unpin-element-label',
'pin-label' => 'vector-pin-element-label',
'label-tag-name' => 'h2'
]
];
$expectedNestedTocData = array_merge( $nestedTocData, $expectedConfigData );