diff --git a/src/js/processPage.js b/src/js/processPage.js index 0edbac4d2..497688d1a 100644 --- a/src/js/processPage.js +++ b/src/js/processPage.js @@ -46,6 +46,11 @@ async function prepare({ messagesRequest }) { } cd.g.rootElement = cd.g.$root.get(0); + cd.g.$toc = cd.g.$root.find('.toc'); + const $closestFloating = cd.g.$toc + .closest('[style*="float: right"], [style*="float:right"], [style*="float: left"], [style*="float:left"]'); + cd.g.isTocFloating = Boolean($closestFloating.length && cd.g.$root.has($closestFloating).length); + /** * Collection of all comments on the page ordered the same way as in the DOM. * diff --git a/src/js/toc.js b/src/js/toc.js index 3405d6106..661960b93 100644 --- a/src/js/toc.js +++ b/src/js/toc.js @@ -17,11 +17,10 @@ export default { * native method does it. */ possiblyHide() { - const $toc = $('.toc'); - if (!$toc.length) return; + if (!cd.g.$toc.length) return; if (mw.cookie.get('hidetoc') === '1') { - $toc.find('.toctogglecheckbox').prop('checked', true); + cd.g.$toc.find('.toctogglecheckbox').prop('checked', true); } }, @@ -29,13 +28,10 @@ export default { * Highlight (bold) watched sections. */ highlightWatchedSections() { - if (!cd.settings.modifyToc) return; - - const $toc = $('.toc'); - if (!$toc.length) return; + if (!cd.settings.modifyToc || !cd.g.$toc.length) return; const headlines = cd.sections.map((section) => section.headline); - const $allLinks = $toc + const $allLinks = cd.g.$toc .find('a') .each((i, el) => { el.cdTocText = $(el).find('.toctext').text(); @@ -78,16 +74,13 @@ export default { * @param {SectionSkeletonLike[]} sections All sections on the page. */ addNewSections(sections) { - if (!cd.settings.modifyToc) return; - - const $toc = $('.toc'); - if (!$toc.length) return; + if (!cd.settings.modifyToc || !cd.g.$toc.length) return; - $toc + cd.g.$toc .find('.cd-toc-notLoadedSectionList, .cd-toc-notLoadedSection') .remove(); - const tocSections = $toc + const tocSections = cd.g.$toc .find('li > a') .toArray() .map((el) => { @@ -139,7 +132,7 @@ export default { }); let currentTree = []; - const $topUl = $toc.children('ul'); + const $topUl = cd.g.$toc.children('ul'); sections.forEach((section) => { let match = tocSections.find((tocSection) => ( // Anchor check is included as a fallback in case of minor differences in how MediaWIki and @@ -229,10 +222,7 @@ export default { * @param {CommentSkeletonLike[]|Comment[]} commentsBySection */ addNewComments(commentsBySection) { - if (!cd.settings.modifyToc) return; - - const $toc = $('.toc'); - if (!$toc.length) return; + if (!cd.settings.modifyToc || !cd.g.$toc.length) return; const firstAnchor = Object.keys(commentsBySection)[0]; if (!firstAnchor) return; @@ -241,7 +231,7 @@ export default { saveScrollPosition(!areCommentsLoaded || !cd.g.hasPageBeenReloaded); - $toc + cd.g.$toc .find('.cd-toc-notLoadedCommentList') .remove(); @@ -249,7 +239,7 @@ export default { .filter((anchor) => anchor !== '_') .forEach((anchor) => { // .first() in case of a collision with a section we added above with toc.addNewSections(). - const $sectionLink = $toc.find(`a[href="#${$.escapeSelector(anchor)}"]`).first(); + const $sectionLink = cd.g.$toc.find(`a[href="#${$.escapeSelector(anchor)}"]`).first(); if (!$sectionLink.length) return; let $target = $sectionLink; diff --git a/src/js/util.js b/src/js/util.js index 6f721aa9b..90a0b9664 100644 --- a/src/js/util.js +++ b/src/js/util.js @@ -360,14 +360,14 @@ export function unhideText(text, hidden) { */ export function saveScrollPosition(saveTocHeight = true) { keptScrollPosition = window.pageYOffset; - const $toc = $('.toc'); keptTocHeight = ( (saveTocHeight || keptTocHeight) && - $toc.length && + cd.g.$toc.length && + !cd.g.isTocFloating && window.pageYOffset !== 0 && - window.pageYOffset + window.innerHeight > $toc.offset().top + $toc.outerHeight() + window.pageYOffset + window.innerHeight > cd.g.$toc.offset().top + cd.g.$toc.outerHeight() ) ? - $toc.outerHeight() : + cd.g.$toc.outerHeight() : null; } @@ -381,7 +381,7 @@ export function restoreScrollPosition(resetTocHeight = true) { if (keptScrollPosition === null) return; if (keptTocHeight) { - keptScrollPosition += ($('.toc').outerHeight() || 0) - keptTocHeight; + keptScrollPosition += (cd.g.$toc.outerHeight() || 0) - keptTocHeight; } window.scrollTo(0, keptScrollPosition);