diff --git a/resources/skins.vector.es6/main.js b/resources/skins.vector.es6/main.js index 894934b1..b5b593c4 100644 --- a/resources/skins.vector.es6/main.js +++ b/resources/skins.vector.es6/main.js @@ -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' ); } diff --git a/resources/skins.vector.es6/tableOfContents.js b/resources/skins.vector.es6/tableOfContents.js index df57a483..17fccf68 100644 --- a/resources/skins.vector.es6/tableOfContents.js +++ b/resources/skins.vector.es6/tableOfContents.js @@ -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(); } ); } ); diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less index 275170eb..51b3adaf 100644 --- a/resources/skins.vector.styles/components/StickyHeader.less +++ b/resources/skins.vector.styles/components/StickyHeader.less @@ -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; } diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less index 088e2582..bcce8761 100644 --- a/resources/skins.vector.styles/components/TableOfContents.less +++ b/resources/skins.vector.styles/components/TableOfContents.less @@ -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; - } } } diff --git a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less index f95328eb..d61c1b72 100644 --- a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less +++ b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less @@ -142,7 +142,7 @@ } } - body:not( .vector-toc-collapsed ) { + .vector-toc-not-collapsed { .vector-toc-collapse-button { display: inline-block; }