jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace body:not( .vector-toc-collapsed ) with .vector-toc-not-collapsed class 

Follow up to Ibf837775d972deb29e9619cc6c12c919aae5155a

Change-Id: Ib50f6e4a61a09f54763a740bd12cdae3ee63abef
This commit is contained in:
bwang 2022-08-23 11:21:11 -05:00 committed by Jdlrobson
parent b6a6296636
commit 1c8af16dfb
5 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/skins.vector.es6/main.js
View File

@ -120,9 +120,8 @@ const updateTocLocation = () => {
const isTocCollapsed = document.body.classList.contains( TOC_COLLAPSED_CLASS );
const isStickyHeaderVisible = document.body.classList.contains( STICKY_HEADER_VISIBLE_CLASS );
const isBelowDesktop = belowDesktopMedia.matches;
if ( isTocCollapsed ) {
const tocLocation = isStickyHeaderVisible && !isBelowDesktop ? 'stickyheader' : 'sidebar';
stickyHeader.moveToc( tocLocation );
if ( isTocCollapsed && isStickyHeaderVisible && !isBelowDesktop ) {
stickyHeader.moveToc( 'stickyheader' );
} else {
stickyHeader.moveToc( 'sidebar' );
}

6
resources/skins.vector.es6/tableOfContents.js
View File

@ -7,6 +7,7 @@ const PARENT_SECTION_CLASS = 'sidebar-toc-level-1';
const LINK_CLASS = 'sidebar-toc-link';
const TOGGLE_CLASS = 'sidebar-toc-toggle';
const TOC_COLLAPSED_CLASS = 'vector-toc-collapsed';
const TOC_NOT_COLLAPSED_CLASS = 'vector-toc-not-collapsed';
const TOC_ID = 'mw-panel-toc';
/**
* TableOfContents Mustache templates
@ -332,10 +333,15 @@ module.exports = function tableOfContents( props ) {
* Bind event listener for clicking on show/hide Table of Contents links.
*/
function bindCollapseToggleListeners() {
// Initialize toc collapsed status
document.body.classList.add( TOC_NOT_COLLAPSED_CLASS );
const showHideTocElement = document.querySelectorAll( '#sidebar-toc-label button' );
showHideTocElement.forEach( function ( btn ) {
btn.addEventListener( 'click', () => {
document.body.classList.toggle( TOC_COLLAPSED_CLASS );
document.body.classList.toggle( TOC_NOT_COLLAPSED_CLASS );
props.onToggleCollapse();
} );
} );

14
resources/skins.vector.styles/components/StickyHeader.less
View File

@ -79,18 +79,16 @@
min-width: 0;
}
// Hide TOC in sticky header by default
&-toc-container {
display: none;
}
.vector-toc-collapsed &-toc-container {
display: block;
position: relative;
margin-left: -@icon-padding-md;
.vector-menu-heading {
display: none;
.vector-toc-collapsed & {
display: block;
}
}
.sidebar-toc {
margin: 0;
}

10
resources/skins.vector.styles/components/TableOfContents.less
View File

@ -19,7 +19,7 @@
// Needed to align TOC with bottom of title
// 1.5em from .mw-table-of-contents-container + 1.5em from .sidebar-toc = 3em
@media ( min-width: @min-width-desktop ) {
body:not(.vector-toc-collapsed) @{selector-main-menu-closed} ~ & {
.vector-toc-not-collapsed @{selector-main-menu-closed} ~ & {
margin-top: 1.5em;
}
}
@ -105,9 +105,9 @@
}
// T302076: Add fade scrollable indicator when TOC is in sidebar
// Avoid showing indicator when the TOC is collapsed in the page title, sticky header, or floating
// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
@media ( min-width: @min-width-desktop ) {
@{sidebar-toc-selector}:after {
.vector-toc-not-collapsed .sidebar-toc:after {
content: '';
display: block;
position: absolute;
@ -119,10 +119,6 @@
background-repeat: no-repeat;
background-position: -@sidebar-toc-right-padding; // T311436 Hacky way to prevent the fade from covering the scrollbar
pointer-events: none; // Make the link below the fade clickable
.vector-toc-collapsed & {
display: none;
}
}
}

2
resources/skins.vector.styles/components/TableOfContentsCollapsed.less
View File

@ -142,7 +142,7 @@
}
}
body:not( .vector-toc-collapsed ) {
.vector-toc-not-collapsed {
.vector-toc-collapse-button {
display: inline-block;
}