Fix handling floating TOCs when saving/restoring scroll position

jwbth · Nov 11, 2020 · f8f314d · f8f314d
1 parent a39c54a
commit f8f314d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 26 deletions.
diff --git 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
@@ -17,25 +17,21 @@ 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);
     }
   },
 
   /**
    * 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,15 +231,15 @@ export default {
 
     saveScrollPosition(!areCommentsLoaded || !cd.g.hasPageBeenReloaded);
 
-    $toc
+    cd.g.$toc
       .find('.cd-toc-notLoadedCommentList')
       .remove();
 
     Object.keys(commentsBySection)
       .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
@@ -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);