alchemy-widget 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.2.4 (2023-01-30)
+
+* Fix the tree structure generation of the `al-toc` element
+* Make `TableOfContents#entries` return a flat list and `TableOfContents#tree` a tree structure
+* Also take siblings of heading elements into account for the `TableOfContents` scrollspy
+
 ## 0.2.3 (2023-01-23)
 
 * Fix `List` widgets not having their content saved

package/element/table_of_contents_element.js

@@ -1,3 +1,6 @@
+const RELATED_HEADING = Symbol('related_heading'),
+      RELATED_SIBLINGS = Symbol('related_siblings');
+
 /**
  * The table-of-contents element
  *
@@ -102,7 +105,7 @@ TableOfContents.setAttribute('truncate-length', {type: 'number'});
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.2.1
+ * @version  0.2.4
  */
 TableOfContents.setProperty(function entries() {
 
@@ -124,59 +127,42 @@ TableOfContents.setProperty(function entries() {
 
 	if (wrapper) {
 
-		let current_level = null,
-		    last_entry,
-		    elements = wrapper.querySelectorAll(this.elements_selector || 'h1,h2'),
-			element,
-			title,
-			i;
+		let heading_level = 0,
+		    heading,
+		    i;
 
-		for (i = 0; i < elements.length; i++) {
-			element = elements[i];
+		let headings = wrapper.querySelectorAll(this.elements_selector || 'h1, h2, h3, h4, h5, h6'),
+		    nodes = [];
 
-			if (!element.id) {
+		for (i = 0; i < headings.length; i++) {
+			heading = headings[i];
 
-				if (element.hawkejs_id) {
-					element.id = element.hawkejs_id;
+			if (!heading.id) {
+
+				if (heading.hawkejs_id) {
+					heading.id = heading.hawkejs_id;
 				}
 
-				if (!element.id) {
+				if (!heading.id) {
 					continue;
 				}
 			}
 
 			let title_element,
-			    starts_level,
-			    ends_level;
+			    title;
 
 			if (this.title_selector) {
-				title_element = element.querySelector(this.title_selector);
+				title_element = heading.querySelector(this.title_selector);
 			}
 
 			if (!title_element) {
-				title_element = element;
+				title_element = heading;
 			}
 
-			if (element.nodeName[0] == 'H' && isFinite(element.nodeName[1])) {
-				let heading_level = +element.nodeName[1];
-
-				if (current_level == null) {
-					current_level = heading_level;
-				} else if (heading_level > current_level) {
-					current_level++;
-
-					if (last_entry) {
-						last_entry.starts_level = true;
-					}
-				} else if (heading_level == current_level && last_entry) {
-					last_entry.starts_level = false;
-				} else if (heading_level < current_level) {
-					current_level--;
-
-					if (last_entry) {
-						last_entry.ends_level = true;
-					}
-				}
+			if (title_element.nodeName[0] == 'H' && isFinite(title_element.nodeName[1])) {
+				heading_level = +title_element.nodeName[1];
+			} else if (!heading_level) {
+				heading_level = 1;
 			}
 
 			title = (title_element.toc_title || title_element.textContent || '').trim();
@@ -190,86 +176,39 @@ TableOfContents.setProperty(function entries() {
 				continue;
 			}
 
-			last_entry = {
-				id           : element.id,
-				level        : current_level,
-				title        : title,
-				element      : element,
-				starts_level : starts_level,
-				ends_level   : ends_level,
+			let node = {
+				id       : heading.id,
+				level    : heading_level,
+				title    : title,
+				element  : heading,
 			};
 
-			result.push(last_entry);
+			nodes.push(node);
 		}
 
-		let ended_level = false,
-		    entries = result,
-		    current_branch,
-		    current_nodes = [];
-
-		result = current_nodes;
-		last_entry = null;
-
-		for (let entry of entries) {
-
-			if (ended_level) {
-
-				while (entry.level >= current_branch.level) {
-					current_branch = current_branch.parent;
-					current_nodes = current_branch?.children || result;
-
-					if (!current_branch) {
-						current_branch = result[result.length - 1];
-						break;
-					}
-				}
-
-				ended_level = false;
-			}
-
-			if (!current_branch) {
-				current_branch = entry;
-			} else {
-				entry.parent = current_branch;
-			}
-
-			if (entry.starts_level) {
-
-				current_branch = last_entry;
-
-				if (!current_branch.children) {
-					current_branch.children = [];
-				}
-
-				current_nodes = current_branch.children;
-			}
-			
-			current_nodes.push(entry);
-
-			if (entry.ends_level) {
-				ended_level = true;
-				current_branch = entry.parent;
-				current_nodes = current_branch.children || result;
-
-				if (!current_branch) {
-					current_branch = result[result.length - 1];
-					break;
-				}
-			}
-
-			last_entry = entry;
-		}
+		result = nodes;
 	}
 
 	return result;
 });
 
+/**
+ * Get the entries tree
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.4
+ * @version  0.2.4
+ */
+TableOfContents.setProperty(function tree() {
+	return Blast.listToTree(this.entries);
+});
+
 /**
  * Added to the dom for the first time
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.2.1
+ * @version  0.2.4
  */
 TableOfContents.setMethod(async function introduced() {
 
@@ -280,22 +219,51 @@ TableOfContents.setMethod(async function introduced() {
 		let class_name = this.intersection_class || 'visible',
 		    first_name = class_name + '-first';
 
+		let intersect_map = new Map();
+
 		for (let entry of entries) {
-			const id = entry.target.getAttribute('id');
+			const heading = entry.target[RELATED_HEADING] || entry.target;
+			const id = heading.getAttribute('id');
+
+			if (!id) {
+				continue;
+			}
 
 			let query = `a[href="#${id}"]`,
 			    element = this.querySelector(query);
-			
+
 			if (!element) {
-				return;
+				continue;
 			}
 
+			let value = intersect_map.get(element) || 0;
+
 			if (entry.intersectionRatio > 0) {
+				value++;
+			} else {
+				let siblings = heading[RELATED_SIBLINGS];
+
+				if (siblings?.length) {
+					for (let sibling of siblings) {
+						if (sibling.isVisible(-150)) {
+							value++;
+							break;
+						}
+					}
+				}
+			}
+
+			intersect_map.set(element, value);
+		};
+
+		for (let [element, value] of intersect_map) {
+
+			if (value > 0) {
 				element.classList.add(class_name);
 			} else {
 				element.classList.remove(class_name);
 			}
-		};
+		}
 
 		let is_visible,
 		    all_marked = this.querySelectorAll('.' + class_name + ', .' + first_name),
@@ -317,10 +285,31 @@ TableOfContents.setMethod(async function introduced() {
 				seen++;
 			}
 		}
-		
 	});
 
-	for (let entry of this.entries) {
+	let entries = this.entries,
+	    elements = [];
+
+	for (let entry of entries) {
 		observer.observe(entry.element);
+		elements.push(entry.element);
+	}
+
+	for (let element of elements) {
+
+		element[RELATED_SIBLINGS] = [];
+		let sibling = element.nextElementSibling;
+
+		while (sibling) {
+
+			if (elements.includes(sibling)) {
+				break;
+			}
+
+			element[RELATED_SIBLINGS].push(sibling);
+			sibling[RELATED_HEADING] = element;
+			observer.observe(sibling);
+			sibling = sibling.nextElementSibling;
+		}
 	}
 });

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-widget",
 	"description": "The widget plugin for the AlchemyMVC",
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",

package/view/elements/table_of_contents.hwk

@@ -1,4 +1,4 @@
-<% all_entries = self.entries %>
+<% all_entries = self.tree %>
 
 {% macro printEntries %}
 	<ol>