Feature: Make members explorer highlight the current member being viewed (#187)

Author: ShukantPal

core/webdoc-default-template/src/app/index.js

@@ -1,3 +1,4 @@
+import "./toc";
 import Explorer from "./components/Explorer";
 import Footer from "./components/Footer";
 import Header from "./components/Header";

core/webdoc-default-template/src/app/toc.js

@@ -0,0 +1,51 @@
+// @flow
+
+const toc /*: Map<string, HTMLElement> */ = new Map();
+const css = "page-members-explorer__item--current";
+let current /*: HTMLElement | null */ = null;
+
+function onIntersectionChange(entries /*: IntersectionObserverEntry[] */) {
+  for (let i = entries.length - 1; i >= 0; i--) {
+    const {target, isIntersecting} = entries[i];
+    const id = target.getAttribute("data-id");
+    const explorerItemElement = toc.get(id);
+
+    explorerItemElement.setAttribute("data-visible", String(isIntersecting));
+  }
+
+  let next = null;
+  for (const [, explorerItemElement] of toc) {
+    if (explorerItemElement.getAttribute("data-visible") === "true") {
+      next = explorerItemElement;
+    }
+  }
+
+  if (next !== current) {
+    if (next) next.classList.add(css);
+    if (current) current.classList.remove(css);
+    current = next;
+  }
+}
+
+if (typeof IntersectionObserver !== "undefined") {
+  const observer = new IntersectionObserver(onIntersectionChange, {
+    root: null,
+    rootMargin: "0px",
+    threshold: [1],
+  });
+
+  document.addEventListener("DOMContentLoaded", function() {
+    for (const explorerItemElement of document.querySelectorAll(".page-members-explorer__item")) {
+      const targetId = explorerItemElement.getAttribute("data-id");
+      const targetElement = document.querySelector(`.member__title[data-id="${targetId}"]`);
+
+      if (!targetElement) {
+        console.warn(`${targetId} member not found in DOM!`);
+        continue;
+      }
+
+      toc.set(targetId, explorerItemElement);
+      observer.observe(targetElement);
+    }
+  });
+}

core/webdoc-default-template/src/styles/members-explorer.scss

@@ -41,6 +41,13 @@
     &:hover {
       background-color: rgba(0, 0, 0, 0.04);
     }
+
+    &--current {
+      a {
+        /* See toc.js */
+        color: $colorPrimary;
+      }
+    }
   }
 
   @media only screen and (max-width: 800px) {

core/webdoc-default-template/static/styles/index.css

@@ -18,10 +18,11 @@ const examples = doc.examples ? doc.examples : [];
 const modifiers = [
   doc.deprecated ? "member__title_deprecated" : ""
 ].join(" ");
+const uniqueId = this.mangled(doc);
 ?>
-<div class="member" id="<?js= doc.name ?>">
+<div class="member" id="<?js= doc.name ?>" data-id="<?js= uniqueId ?>">
   <?js if (doc.name !== "constructor") { ?>
-    <section class="member__title <?js= modifiers ?>">
+    <section class="member__title <?js= modifiers ?>" data-id="<?js= uniqueId ?>">
       <a href="<?js= this.getPlugin("linker").getURI(doc) ?>">
         <img
           src="<?js= linkSvg ?>"

core/webdoc-default-template/tmpl/components/member/index.tmpl

@@ -18,7 +18,9 @@
   <section class="page-members-explorer-category__title"><?js= title ?></section>
   <ul class="page-members-explorer-category__items">
     <?js members.forEach((member) => { ?>
-      <li class="page-members-explorer__item"><?js= this.linkTo(member.path, member.name) ?></li>
+      <li class="page-members-explorer__item" data-id="<?js= this.mangled(member) ?>">
+        <?js= this.linkTo(member.path, member.name) ?>
+      </li>
     <?js }) ?>
   </ul>
 </div>

core/webdoc-default-template/tmpl/components/members-explorer/category.tmpl

@@ -8,6 +8,7 @@ import type {
 import {tag, templateLogger} from "./Logger";
 import {SymbolLinks} from "./SymbolLinks";
 import fs from "fs";
+import {mangled} from "@webdoc/model";
 import {merge} from "lodash";
 import path from "path";
 
@@ -259,6 +260,10 @@ export class TemplateRenderer {
     return str.replace(/&/g, "&amp;").replace(/</g, "&lt;");
   };
 
+  mangled(doc: Doc): string {
+    return mangled(doc);
+  }
+
   /**
    * Finds all the members namespaces of {@code doc}.
    *