feat(core): set toc-enabled through Mustache template

Since somewhere around MW 1.37, buildSkinFeatures() no longer have access to OutputPage.
That causes $out->isTOCenabled always return null, which makes ToC
broken for any wikis since 1.37. This should fix the issue for now.
More optimizations on the loading behavior will come soon.
This commit is contained in:
alistair3149 2022-05-12 17:01:01 -04:00
parent d92267f239
commit e0d5eb9657
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
5 changed files with 7 additions and 11 deletions

View file

@ -102,6 +102,7 @@ class SkinCitizen extends SkinMustache {
$newTalksHtml = $this->getNewtalks() ?: null;
return $parentData + [
'toc-enabled' => $out->isTOCEnabled(),
'msg-sitetitle' => $this->msg( 'sitetitle' )->text(),
'html-mainpage-attributes' => Xml::expandAttributes(
Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [
@ -306,13 +307,8 @@ class SkinCitizen extends SkinMustache {
}
// Table of content highlight
// Load if ToC presents
if ( $out->isTOCEnabled() ) {
// Add class to body that notifies the page has TOC
$out->addBodyClasses( 'skin-citizen-has-toc' );
$options['scripts'][] = 'skins.citizen.scripts.toc';
$options['styles'][] = 'skins.citizen.styles.toc';
}
$options['scripts'][] = 'skins.citizen.scripts.toc';
$options['styles'][] = 'skins.citizen.styles.toc';
// Drawer sitestats
if ( $this->getConfigValue( 'CitizenEnableDrawerSiteStats' ) === true ) {

View file

@ -43,7 +43,7 @@ function intersectionHandler() {
*/
function initTOC() {
// Check for has-toc class since it is loaded way before #toc is present
if ( document.body.classList.contains( 'skin-citizen-has-toc' ) ) {
if ( document.querySelector( '.citizen-toc-enabled' ) ) {
intersectionHandler();
}
}

View file

@ -55,7 +55,7 @@ function initCheckboxHack( window ) {
// This should be in ToC script
// And the media query needs to be synced with the less variable
// Also this does not monitor screen size changes
if ( document.body.classList.contains( 'skin-citizen-has-toc' ) &&
if ( document.querySelector( '.citizen-toc-enabled' ) &&
window.matchMedia( 'screen and (max-width: 1300px)' ) ) {
const tocContainer = document.getElementById( 'toc' );
if ( tocContainer ) {

View file

@ -236,7 +236,7 @@
}
@media ( min-width: @width-breakpoint-desktop-wide ) {
.skin-citizen-has-toc {
.citizen-toc-enabled {
.mw-body-header,
.citizen-body {
margin-right: ~'max( var( --margin-layout ), 0 )';

View file

@ -23,7 +23,7 @@
}}
{{#data-header}}{{>Header}}{{/data-header}}
<main class="mw-body" id="content">
<main class="mw-body {{#toc-enabled}}citizen-toc-enabled{{/toc-enabled}}" id="content">
<div id="siteNotice">{{{html-site-notice}}}</div>
{{{html-newtalk}}}
<header class="mw-body-header">