@devzwo/ngx-magic-scroll 1.0.0 → 1.1.1

package/fesm2022/devzwo-ngx-magic-scroll.mjs

@@ -139,8 +139,13 @@ var ScrollService = class ScrollService {
 		const isTopInView = rect.top >= containerTop + topOffset - 1 && rect.top < containerTop + viewportHeight;
 		const isBottomInView = rect.bottom <= containerTop + viewportHeight && rect.bottom > containerTop;
 		if (ignoreWhenInView == "top" && isTopInView || ignoreWhenInView == "full" && isTopInView && isBottomInView || ignoreWhenInView == "always" && (isTopInView || isBottomInView)) return false;
+		const displacement = options?.displacement ?? 0;
+		const delta = rect.top - containerTop - topOffset - displacement;
+		const maxScrollTop = scrollable.scrollHeight > 0 && viewportHeight > 0 ? Math.max(0, scrollable.scrollHeight - viewportHeight) : Infinity;
+		const targetScrollTop = Math.min(Math.max(scrollable.scrollTop + delta, 0), maxScrollTop);
+		if (Math.abs(targetScrollTop - scrollable.scrollTop) < 1) return true;
 		scrollable.scrollTo({
-			top: scrollable.scrollTop + rect.top - containerTop - topOffset,
+			top: targetScrollTop,
 			behavior
 		});
 		return true;
@@ -185,7 +190,8 @@ const defaults = {
 	debounceTime: 500,
 	ignoreWhenInView: "none",
 	restoreOnDataChange: true,
-	preserveOnResize: true
+	preserveOnResize: true,
+	preserveOnLayoutChange: false
 };
 function resolveMagicScrollOptions(parent, options) {
 	return {
@@ -202,7 +208,8 @@ function resolveMagicScrollOptions(parent, options) {
 		debounceTime: options.debounceTime ?? parent.debounceTime,
 		ignoreWhenInView: options.ignoreWhenInView ?? parent.ignoreWhenInView,
 		restoreOnDataChange: options.restoreOnDataChange ?? parent.restoreOnDataChange,
-		preserveOnResize: options.preserveOnResize ?? parent.preserveOnResize
+		preserveOnResize: options.preserveOnResize ?? parent.preserveOnResize,
+		preserveOnLayoutChange: options.preserveOnLayoutChange ?? parent.preserveOnLayoutChange
 	};
 }
 const MAGIC_SCROLL_OPTIONS = new InjectionToken("Magic scroll defaults", {
@@ -255,6 +262,15 @@ const SCROLL_KEYS = /* @__PURE__ */ new Set([
 	"Spacebar",
 	"Space"
 ]);
+function isNaturallyFocusable(el) {
+	if (el.hasAttribute("tabindex")) return true;
+	const tag = el.tagName.toLowerCase();
+	if (tag === "button" || tag === "select" || tag === "textarea") return !el.disabled;
+	if (tag === "input") return el.type !== "hidden" && !el.disabled;
+	if (tag === "a" || tag === "area") return el.hasAttribute("href");
+	if (tag === "iframe") return true;
+	return false;
+}
 function isEditableTarget(target) {
 	if (!target || !(target instanceof Element)) return false;
 	const tagName = target.tagName.toLowerCase();
@@ -285,12 +301,25 @@ var MagicScrollDirective = class MagicScrollDirective {
 	scrollRevision = signal(0, ...ngDevMode ? [{ debugName: "scrollRevision" }] : /* istanbul ignore next */ []);
 	initialized = false;
 	userInterrupted = false;
+	savedDisplacement = 0;
 	pendingDestination = this.initialAnchor ?? null;
 	lastProcessedFragment = void 0;
 	target;
 	timer;
 	retryObserver;
 	retryTimeoutTimer;
+	layoutCorrectionFrameId;
+	temporaryTabindexCleanups = /* @__PURE__ */ new Set();
+	pendingFocusTarget;
+	scrollEndHandler;
+	scrollEndTarget;
+	focusTimeoutTimer;
+	focusInitiator;
+	isSmoothNavigating = false;
+	pendingLayoutPreservation = false;
+	smoothNavEndHandler;
+	smoothNavTarget;
+	smoothNavTimeoutTimer;
 	constructor() {
 		const destroyRef = inject(DestroyRef);
 		afterNextRender(() => {
@@ -302,6 +331,11 @@ var MagicScrollDirective = class MagicScrollDirective {
 			this.document.defaultView?.removeEventListener("resize", this.onResize);
 			clearTimeout(this.timer);
 			this.cancelDestinationRetry();
+			this.cancelScheduledFocus();
+			this.cancelLayoutPreservation();
+			this.cancelSmoothNavigation();
+			for (const cleanup of this.temporaryTabindexCleanups) cleanup();
+			this.temporaryTabindexCleanups.clear();
 			this.pendingDestination = null;
 		});
 		afterRenderEffect((onCleanup) => {
@@ -321,6 +355,55 @@ var MagicScrollDirective = class MagicScrollDirective {
 				onCleanup(() => observer.disconnect());
 			}
 		});
+		afterRenderEffect((onCleanup) => {
+			this.scrollSource();
+			if (this.options().preserveOnLayoutChange && typeof ResizeObserver !== "undefined" && typeof window !== "undefined") {
+				const observedDimensions = /* @__PURE__ */ new Map();
+				const measureAndStore = (el) => {
+					const rect = el.getBoundingClientRect();
+					const dims = {
+						width: rect.width,
+						height: rect.height
+					};
+					observedDimensions.set(el, dims);
+					return dims;
+				};
+				const observer = new ResizeObserver((entries) => {
+					let hasRealChange = false;
+					if (!entries || !Array.isArray(entries) || entries.length === 0) hasRealChange = true;
+					else for (const entry of entries) {
+						const target = entry.target;
+						const prev = observedDimensions.get(target);
+						const rect = target.getBoundingClientRect?.();
+						const width = entry.contentRect?.width ?? rect?.width ?? 0;
+						const height = entry.contentRect?.height ?? rect?.height ?? 0;
+						if (!prev) observedDimensions.set(target, {
+							width,
+							height
+						});
+						else if (prev.width !== width || prev.height !== height) {
+							observedDimensions.set(target, {
+								width,
+								height
+							});
+							hasRealChange = true;
+						}
+					}
+					if (hasRealChange) this.scheduleLayoutPreservation();
+				});
+				measureAndStore(this.host);
+				observer.observe(this.host);
+				for (const anchor of this.anchors()) {
+					measureAndStore(anchor);
+					observer.observe(anchor);
+				}
+				onCleanup(() => {
+					observer.disconnect();
+					observedDimensions.clear();
+					this.cancelLayoutPreservation();
+				});
+			}
+		});
 		afterRenderEffect(() => {
 			const source = this.scrollSource();
 			if (!readScrollSource(source).ready) return;
@@ -332,15 +415,14 @@ var MagicScrollDirective = class MagicScrollDirective {
 							if (this.pendingDestination) this.scheduleDestinationRetry();
 						}
 					} else {
-						this.liveAnchor.set(this.calculateNearestAnchor() ?? null);
+						const nearest = this.calculateNearestAnchor() ?? null;
+						this.liveAnchor.set(nearest);
+						if (nearest) this.updateSavedDisplacement(nearest);
 						this.cancelDestinationRetry();
 					}
-				} else if (!this.userInterrupted) {
-					if (!this.tryExecutePendingDestination(this.options().behavior.restoration)) {
-						if (this.pendingDestination) this.scheduleDestinationRetry();
-						else if (source !== NO_SCROLL_SOURCE && this.options().restoreOnDataChange) this.preserve("top");
-					}
-				}
+				} else if (this.pendingDestination && !this.userInterrupted) {
+					if (!this.tryExecutePendingDestination(this.options().behavior.restoration)) this.scheduleDestinationRetry();
+				} else if (source !== NO_SCROLL_SOURCE && this.options().restoreOnDataChange) this.preserve();
 			});
 		});
 		effect(() => {
@@ -352,7 +434,12 @@ var MagicScrollDirective = class MagicScrollDirective {
 				if (prev === void 0) return;
 				if (frag) {
 					if (!this.isInternalNavigation()) {
+						this.cancelScheduledFocus();
+						this.cancelLayoutPreservation();
+						this.cancelSmoothNavigation();
+						this.pendingLayoutPreservation = false;
 						this.userInterrupted = false;
+						this.savedDisplacement = 0;
 						this.pendingDestination = frag;
 						const state = readScrollSource(this.scrollSource());
 						if (this.initialized && state.ready) {
@@ -360,6 +447,11 @@ var MagicScrollDirective = class MagicScrollDirective {
 						} else this.cancelDestinationRetry();
 					}
 				} else {
+					this.cancelScheduledFocus();
+					this.cancelLayoutPreservation();
+					this.cancelSmoothNavigation();
+					this.pendingLayoutPreservation = false;
+					this.savedDisplacement = 0;
 					this.pendingDestination = null;
 					this.cancelDestinationRetry();
 				}
@@ -378,23 +470,44 @@ var MagicScrollDirective = class MagicScrollDirective {
 		return nav?.extras?.info?.[MAGIC_SCROLL_ORIGIN_KEY] === "scroll-spy" || nav?.trigger !== "popstate" && stateOrigin === "scroll-spy";
 	}
 	scrollTo(anchor, options = {}) {
+		this.refreshTarget();
+		this.cancelScheduledFocus();
+		const clean = anchor.replace(/^#/, "");
+		const targetEl = this.anchors().find((el) => el.id === clean);
+		const willScroll = targetEl ? this.willScroll(targetEl, options) : false;
+		const behavior = options.behavior ?? this.options().behavior.interaction;
+		if (willScroll && this.hasSmoothScrollBehavior(behavior)) this.beginSmoothNavigation();
+		else this.cancelSmoothNavigation();
 		const executed = this.execute(anchor, {
 			behavior: this.options().behavior.interaction,
 			ignoreWhenInView: this.options().ignoreWhenInView,
-			...options
+			...options,
+			displacement: 0
 		});
 		if (executed) {
-			const clean = anchor.replace(/^#/, "");
 			this.liveAnchor.set(clean);
+			this.savedDisplacement = 0;
 			this.pendingDestination = null;
 			this.cancelDestinationRetry();
+			this.cancelLayoutPreservation();
 			this.fragment.set(clean);
 		}
+		if (options.focus && targetEl) {
+			if (executed && willScroll && this.hasSmoothScrollBehavior(behavior)) this.scheduleFocus(targetEl);
+			else this.applyFocus(targetEl);
+		}
 		return executed;
 	}
 	tryExecutePendingDestination(behavior) {
 		if (!this.pendingDestination) return false;
-		if (this.execute(this.pendingDestination, { behavior })) {
+		const clean = this.pendingDestination.replace(/^#/, "");
+		const targetEl = this.anchors().find((el) => el.id === clean);
+		if ((targetEl ? this.willScroll(targetEl, { behavior }) : false) && this.hasSmoothScrollBehavior(behavior)) this.beginSmoothNavigation();
+		if (this.execute(this.pendingDestination, {
+			behavior,
+			displacement: 0
+		})) {
+			this.savedDisplacement = 0;
 			this.pendingDestination = null;
 			this.cancelDestinationRetry();
 			return true;
@@ -455,12 +568,63 @@ var MagicScrollDirective = class MagicScrollDirective {
 			...options
 		});
 	}
-	preserve(ignoreWhenInView = "none") {
-		if (this.initialized) this.execute(this.liveAnchor(), {
-			behavior: "instant",
-			ignoreWhenInView
+	willScroll(targetEl, options) {
+		const scrollable = this.scrollable() ?? this.document.scrollingElement ?? this.document.documentElement;
+		const isDocument = scrollable === this.document.documentElement || scrollable === this.document.body;
+		const containerTop = isDocument ? 0 : scrollable.getBoundingClientRect().top;
+		const viewportHeight = isDocument ? this.document.documentElement.clientHeight : scrollable.clientHeight;
+		const topOffset = options.topOffset ?? this.offset();
+		const delta = targetEl.getBoundingClientRect().top - containerTop - topOffset;
+		const maxScrollTop = scrollable.scrollHeight > 0 && viewportHeight > 0 ? Math.max(0, scrollable.scrollHeight - viewportHeight) : Infinity;
+		const targetScrollTop = Math.min(Math.max(scrollable.scrollTop + delta, 0), maxScrollTop);
+		return Math.abs(targetScrollTop - scrollable.scrollTop) >= 1;
+	}
+	hasSmoothScrollBehavior(behavior) {
+		if (behavior === "smooth") return true;
+		if (behavior !== "auto") return false;
+		const scrollable = this.scrollable() ?? this.document.documentElement;
+		return this.document.defaultView?.getComputedStyle(scrollable).scrollBehavior === "smooth";
+	}
+	preserve() {
+		if (this.initialized) {
+			if (this.isSmoothNavigating) {
+				this.pendingLayoutPreservation = true;
+				return;
+			}
+			const anchor = this.liveAnchor();
+			if (!anchor) return;
+			this.execute(anchor, {
+				behavior: "instant",
+				displacement: this.savedDisplacement
+			});
+		}
+	}
+	scheduleLayoutPreservation() {
+		if (!this.initialized || typeof window === "undefined") return;
+		if (this.isSmoothNavigating) {
+			this.pendingLayoutPreservation = true;
+			return;
+		}
+		if (this.layoutCorrectionFrameId !== void 0) return;
+		this.layoutCorrectionFrameId = window.requestAnimationFrame(() => {
+			this.layoutCorrectionFrameId = void 0;
+			this.preserve();
 		});
 	}
+	cancelLayoutPreservation() {
+		if (this.layoutCorrectionFrameId !== void 0 && typeof window !== "undefined") {
+			window.cancelAnimationFrame(this.layoutCorrectionFrameId);
+			this.layoutCorrectionFrameId = void 0;
+		}
+	}
+	updateSavedDisplacement(anchorId) {
+		const clean = anchorId.replace(/^#/, "");
+		const anchorEl = this.anchors().find((el) => el.id === clean);
+		if (!anchorEl) return;
+		const scrollable = this.scrollable();
+		const topBoundary = (!scrollable || scrollable === this.document.documentElement || scrollable === this.document.body ? 0 : scrollable.getBoundingClientRect().top) + this.offset();
+		this.savedDisplacement = anchorEl.getBoundingClientRect().top - topBoundary;
+	}
 	refreshTarget() {
 		const target = this.scrollable() ?? this.document;
 		if (target !== this.target) {
@@ -477,8 +641,66 @@ var MagicScrollDirective = class MagicScrollDirective {
 		target.addEventListener("keydown", this.onKeyDown);
 		this.document.addEventListener("keydown", this.onKeyDown);
 	}
+	applyFocus(targetEl) {
+		if (!this.document.defaultView || typeof targetEl.focus !== "function" || !targetEl.isConnected || !this.anchors().includes(targetEl)) return;
+		const addedTabindex = !isNaturallyFocusable(targetEl);
+		let cleanup;
+		if (addedTabindex) {
+			targetEl.setAttribute("tabindex", "-1");
+			const onBlur = () => cleanupFn();
+			const cleanupFn = () => {
+				targetEl.removeEventListener("blur", onBlur);
+				if (targetEl.getAttribute("tabindex") === "-1") targetEl.removeAttribute("tabindex");
+				this.temporaryTabindexCleanups.delete(cleanupFn);
+			};
+			cleanup = cleanupFn;
+			this.temporaryTabindexCleanups.add(cleanupFn);
+			targetEl.addEventListener("blur", onBlur, { once: true });
+		}
+		targetEl.focus({ preventScroll: true });
+		if (this.document.activeElement !== targetEl && cleanup) cleanup();
+	}
+	scheduleFocus(targetEl) {
+		this.refreshTarget();
+		this.cancelScheduledFocus();
+		this.pendingFocusTarget = targetEl;
+		this.focusInitiator = this.document.activeElement;
+		this.document.addEventListener("focusin", this.onFocusIn);
+		this.document.addEventListener("keydown", this.onFocusTransferKeyDown);
+		this.document.addEventListener("pointerdown", this.onFocusTransferPointerDown, true);
+		this.document.addEventListener("wheel", this.onFocusScrollIntent, { passive: true });
+		this.document.addEventListener("touchstart", this.onFocusScrollIntent, { passive: true });
+		this.document.addEventListener("touchmove", this.onFocusScrollIntent, { passive: true });
+		const target = this.target;
+		this.scrollEndTarget = target;
+		this.scrollEndHandler = () => {
+			this.cancelScheduledFocus();
+			this.applyFocus(targetEl);
+		};
+		target.addEventListener("scrollend", this.scrollEndHandler, { once: true });
+		this.focusTimeoutTimer = setTimeout(() => this.cancelScheduledFocus(), 5e3);
+	}
+	cancelScheduledFocus() {
+		if (this.scrollEndHandler && this.scrollEndTarget) {
+			this.scrollEndTarget.removeEventListener("scrollend", this.scrollEndHandler);
+			this.scrollEndHandler = void 0;
+			this.scrollEndTarget = void 0;
+		}
+		clearTimeout(this.focusTimeoutTimer);
+		this.focusTimeoutTimer = void 0;
+		this.document.removeEventListener("focusin", this.onFocusIn);
+		this.document.removeEventListener("keydown", this.onFocusTransferKeyDown);
+		this.document.removeEventListener("pointerdown", this.onFocusTransferPointerDown, true);
+		this.document.removeEventListener("wheel", this.onFocusScrollIntent);
+		this.document.removeEventListener("touchstart", this.onFocusScrollIntent);
+		this.document.removeEventListener("touchmove", this.onFocusScrollIntent);
+		this.focusInitiator = void 0;
+		this.pendingFocusTarget = void 0;
+	}
 	detachListeners() {
 		if (!this.target) return;
+		this.cancelScheduledFocus();
+		this.cancelSmoothNavigation();
 		this.target.removeEventListener("scroll", this.onScroll);
 		this.target.removeEventListener("wheel", this.onUserIntent);
 		this.target.removeEventListener("touchstart", this.onUserIntent);
@@ -490,6 +712,10 @@ var MagicScrollDirective = class MagicScrollDirective {
 		this.userInterrupted = true;
 		this.pendingDestination = null;
 		this.cancelDestinationRetry();
+		this.cancelScheduledFocus();
+		this.cancelLayoutPreservation();
+		this.cancelSmoothNavigation();
+		this.pendingLayoutPreservation = false;
 	};
 	onKeyDown = (event) => {
 		if (!(event instanceof KeyboardEvent)) return;
@@ -501,12 +727,40 @@ var MagicScrollDirective = class MagicScrollDirective {
 			this.userInterrupted = true;
 			this.pendingDestination = null;
 			this.cancelDestinationRetry();
+			this.cancelScheduledFocus();
+			this.cancelLayoutPreservation();
+			this.cancelSmoothNavigation();
+			this.pendingLayoutPreservation = false;
 		}
 	};
+	onFocusScrollIntent = () => {
+		this.cancelScheduledFocus();
+	};
+	onFocusIn = (event) => {
+		if (this.pendingFocusTarget && event.target !== this.focusInitiator) this.cancelScheduledFocus();
+	};
+	onFocusTransferKeyDown = (event) => {
+		if (!(event instanceof KeyboardEvent)) return;
+		if (event.key === "Tab") {
+			this.cancelScheduledFocus();
+			return;
+		}
+		if (isEditableTarget(event.target)) return;
+		if (SCROLL_KEYS.has(event.key)) this.cancelScheduledFocus();
+	};
+	onFocusTransferPointerDown = (event) => {
+		const target = event.target;
+		if (this.pendingFocusTarget && target instanceof Node && target !== this.focusInitiator && !this.focusInitiator?.contains(target)) this.cancelScheduledFocus();
+	};
 	onScroll = () => {
 		if (!this.initialized) return;
-		const anchor = this.calculateNearestAnchor();
-		if (anchor) this.liveAnchor.set(anchor);
+		if (!this.isSmoothNavigating) {
+			const anchor = this.calculateNearestAnchor();
+			if (anchor) {
+				this.liveAnchor.set(anchor);
+				this.updateSavedDisplacement(anchor);
+			}
+		}
 		clearTimeout(this.timer);
 		this.timer = setTimeout(() => this.scrollRevision.update((revision) => revision + 1), this.options().debounceTime);
 	};
@@ -514,6 +768,42 @@ var MagicScrollDirective = class MagicScrollDirective {
 		this.refreshTarget();
 		if (this.options().preserveOnResize) this.preserve();
 	};
+	beginSmoothNavigation() {
+		this.cancelSmoothNavigation();
+		this.isSmoothNavigating = true;
+		this.refreshTarget();
+		const target = this.target;
+		this.smoothNavTarget = target;
+		this.smoothNavEndHandler = () => {
+			this.endSmoothNavigation();
+		};
+		target.addEventListener("scrollend", this.smoothNavEndHandler, { once: true });
+		this.smoothNavTimeoutTimer = setTimeout(() => {
+			this.endSmoothNavigation();
+		}, 3e3);
+	}
+	endSmoothNavigation() {
+		this.cancelSmoothNavigation();
+		const anchor = this.calculateNearestAnchor();
+		if (anchor) {
+			this.liveAnchor.set(anchor);
+			this.updateSavedDisplacement(anchor);
+		}
+		if (this.pendingLayoutPreservation) {
+			this.pendingLayoutPreservation = false;
+			this.scheduleLayoutPreservation();
+		}
+	}
+	cancelSmoothNavigation() {
+		if (this.smoothNavEndHandler && this.smoothNavTarget) {
+			this.smoothNavTarget.removeEventListener("scrollend", this.smoothNavEndHandler);
+			this.smoothNavEndHandler = void 0;
+			this.smoothNavTarget = void 0;
+		}
+		clearTimeout(this.smoothNavTimeoutTimer);
+		this.smoothNavTimeoutTimer = void 0;
+		this.isSmoothNavigating = false;
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",