@zachleat/table-of-contents 2.0.0 → 2.1.0

package/README.md

@@ -39,6 +39,7 @@ TableOfContents.define("my-toc");
 ## Attributes
 
 - `selector`: headings to include (default `main :is(h2, h3, h4, h5, h6)`). Headings without an `id` are listed without a link.
+- `best-match`: when multiple sections are in view, highlight only the one taking up the most vertical space in the viewport.
 
 ## Styling
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zachleat/table-of-contents",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "A zero-dependency web component that progressively enhances (or optionally client renders) a table of contents from the headings on the page and highlights visible sections.",
   "type": "module",
   "main": "table-of-contents.js",

package/table-of-contents.js

@@ -172,19 +172,36 @@ export class TableOfContents extends HTMLElement {
 
 		let headingSet = new Set(headings);
 		let targets = new Map();
-		let visible = new Set();
+		let visible = new Map();
+		let bestMatch = this.hasAttribute("best-match");
 
 		this.observer = new IntersectionObserver(entries => {
 			for(let entry of entries) {
-				visible[entry.isIntersecting ? "add" : "delete"](entry.target);
+				if(entry.isIntersecting) {
+					visible.set(entry.target, entry.intersectionRect.height);
+				} else {
+					visible.delete(entry.target);
+				}
+			}
+
+			let heights = new Map();
+			for(let [el, height] of visible) {
+				let id = targets.get(el);
+				heights.set(id, (heights.get(id) || 0) + height);
+			}
+
+			let activeIds = new Set(heights.keys());
+			if(bestMatch && activeIds.size > 1) {
+				// Ties go to the earlier heading.
+				let best = headings.map(h => h.id).filter(id => heights.has(id)).reduce((a, b) => heights.get(b) > heights.get(a) ? b : a);
+				activeIds = new Set([best]);
 			}
 
-			let activeIds = new Set(Array.from(visible, el => targets.get(el)));
 			for(let link of this.list.querySelectorAll("a[href^='#']")) {
 				let id = link.getAttribute("href").slice(1);
 				link.classList.toggle(TableOfContents.defaults.activeClass, activeIds.has(id));
 			}
-		});
+		}, bestMatch ? { threshold: Array.from({ length: 21 }, (_, i) => i / 20) } : undefined);
 
 		for(let heading of headings) {
 			if(!heading.id) {