@schukai/monster 4.136.18 → 4.136.19

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.136.18"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.136.19"}

package/source/components/navigation/table-of-content.mjs

@@ -286,12 +286,8 @@ function calcAndSetNavigationTopScrollableParentContext() {
 
 	const parentRect = this[scrollableParentSymbol].getBoundingClientRect();
 	const rect = this.getBoundingClientRect();
-	const thisTop = rect.top - parentRect.top;
 	const thisBottom = rect.bottom - parentRect.top;
-	let top = 0;
-	if (thisTop < 0) {
-		top = -1 * thisTop;
-	}
+	let top = this[scrollableParentSymbol].scrollTop || 0;
 
 	const offset = this.getOption("offset");
 	if (offset > 0) {
@@ -536,6 +532,20 @@ function initEventHandler() {
  * @return {HTMLElement|Window} - The found scrollable parent or the Window object.
  */
 function findScrollableParent(element) {
+	function isScrollable(elementToCheck) {
+		const styles = window.getComputedStyle(elementToCheck);
+		const overflowY = styles.overflowY;
+		const canScrollY =
+			(overflowY === "scroll" || overflowY === "auto") &&
+			elementToCheck.scrollHeight > elementToCheck.clientHeight;
+		const overflowX = styles.overflowX;
+		const canScrollX =
+			(overflowX === "scroll" || overflowX === "auto") &&
+			elementToCheck.scrollWidth > elementToCheck.clientWidth;
+
+		return canScrollY || canScrollX;
+	}
+
 	// Helper function to find the next parent element, checking for Shadow DOM
 	function getNextParent(elem) {
 		// If the element is in a Shadow DOM, attempt to climb up to the host
@@ -551,9 +561,7 @@ function findScrollableParent(element) {
 
 	let parent = getNextParent(element);
 	while (parent) {
-		// Check the scroll properties of the element
-		const overflowY = window.getComputedStyle(parent).overflowY;
-		if (overflowY === "scroll" || overflowY === "auto") {
+		if (isScrollable(parent)) {
 			return parent;
 		}
 		parent = getNextParent(parent); // Move to the next parent element

package/test/cases/components/navigation/table-of-content.mjs

@@ -0,0 +1,115 @@
+'use strict';
+
+import * as chai from 'chai';
+import { getDocument } from "../../../../source/dom/util.mjs";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+describe('TableOfContent', function () {
+	this.timeout(10000);
+
+	let document;
+
+	before(async function () {
+		await initJSDOM({});
+		globalThis.IntersectionObserver = class {
+			observe() {}
+			disconnect() {}
+			unobserve() {}
+		};
+		globalThis.HTMLHeadingElement ??= globalThis.HTMLElement;
+		await import("../../../../source/components/navigation/table-of-content.mjs");
+		document = getDocument();
+	});
+
+	beforeEach(() => {
+		let mocks = document.getElementById('mocks');
+		mocks.innerHTML = '<div id="target"></div>';
+	});
+
+	afterEach(() => {
+		let mocks = document.getElementById('mocks');
+		mocks.innerHTML = '';
+	});
+
+	it('should bind to the first actually scrollable parent', function (done) {
+		const target = document.getElementById('target');
+		const outerScroller = document.createElement('div');
+		const innerWrapper = document.createElement('div');
+		const tableOfContent = document.createElement('monster-table-of-content');
+		const heading = document.createElement('h2');
+		const paragraph = document.createElement('p');
+
+		heading.textContent = 'Introduction';
+		paragraph.textContent = 'Content';
+		tableOfContent.appendChild(heading);
+		tableOfContent.appendChild(paragraph);
+
+		Object.defineProperties(outerScroller, {
+			clientHeight: { configurable: true, value: 200 },
+			scrollHeight: { configurable: true, value: 600 },
+			clientWidth: { configurable: true, value: 300 },
+			scrollWidth: { configurable: true, value: 300 },
+		});
+
+		Object.defineProperties(innerWrapper, {
+			clientHeight: { configurable: true, value: 400 },
+			scrollHeight: { configurable: true, value: 400 },
+			clientWidth: { configurable: true, value: 300 },
+			scrollWidth: { configurable: true, value: 300 },
+		});
+
+		outerScroller.style.overflowY = 'auto';
+		innerWrapper.style.overflowY = 'auto';
+
+		outerScroller.getBoundingClientRect = () => ({
+			top: 0,
+			bottom: 200,
+			left: 0,
+			right: 300,
+			width: 300,
+			height: 200,
+			x: 0,
+			y: 0,
+		});
+
+		tableOfContent.getBoundingClientRect = () => ({
+			top: outerScroller.scrollTop ? -20 : 100,
+			bottom: outerScroller.scrollTop ? 80 : 200,
+			left: 0,
+			right: 300,
+			width: 300,
+			height: 100,
+			x: 0,
+			y: outerScroller.scrollTop ? -20 : 100,
+		});
+
+		innerWrapper.appendChild(tableOfContent);
+		outerScroller.appendChild(innerWrapper);
+		target.appendChild(outerScroller);
+
+		setTimeout(() => {
+			try {
+				const navigation = tableOfContent.shadowRoot.querySelector('.navigation');
+				expect(navigation.style.top).to.equal('50px');
+
+				outerScroller.scrollTop = 120;
+				outerScroller.dispatchEvent(new window.Event('scroll'));
+
+				setTimeout(() => {
+					try {
+						expect(navigation.style.top).to.equal('170px');
+						done();
+					} catch (error) {
+						done(error);
+					}
+				}, 20);
+			} catch (error) {
+				done(error);
+			}
+		}, 30);
+	});
+});