add proper resize functionalities toggle

Author: smastrom

README.md

@@ -205,11 +205,11 @@ const { isActive, setActive } = useActive(targets, {
 | -------------- | ------------------ | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | jumpToFirst    | `boolean`          | true                      | Whether to set the first target on mount as active even if not (yet) intersecting.                                                                                    |
 | jumpToLast     | `boolean`          | true                      | Whether to set the last target as active once reached the bottom.                                                                                                     |
-| boundaryOffset | `BoundaryOffset`   | { toTop: 0, toBottom: 0 } | Boundary offset in px for each scroll direction. Tweak them to "anticipate" or "delay" targets detection.                                                             |
+| boundaryOffset | `BoundaryOffset`   | { toTop: 0, toBottom: 0 } | Boundary offset in px for each scroll direction. Tweak them to "anticipate" or "delay" target detection.                                                              |
 | rootId         | `string` \| `null` | null                      | Id of the scrolling element. Set it only if your content **is not scrolled** by the window.                                                                           |
 | replaceHash    | `boolean`          | false                     | Whether to replace URL hash on scroll. First target is ignored if `jumpToFirst` is true.                                                                              |
 | overlayHeight  | `number`           | 0                         | Height in pixels of any **CSS fixed** content that overlaps the top of your scrolling area (e.g. fixed header). Must be paired with a CSS [scroll-margin-top]() rule. |
-| minWidth       | `number`           | 0                         | Viewport width in px from which scroll listeners should be toggled. Useful if hiding the sidebar with `display: none` within a specific width.                        |
+| minWidth       | `number`           | 0                         | Whether to toggle listeners and functionalities within a specific width. Useful if hiding the sidebar using `display: none`.                                          |
 
 ### Return object
 
@@ -342,7 +342,7 @@ html {
 </style>
 ```
 
-> :bulb: If you're playing with transitions or advanced styling rules simply use of _activeIndex_ and _activeId_.
+> :bulb: If you're playing with transitions or advanced styling rules simply leverage _activeIndex_ and _activeId_.
 
 <br />
 
@@ -411,7 +411,7 @@ const router = createRouter({
 })
 ```
 
-> :bulb: No need to set overlayHeight if using `scrollIntoView` as the method reads the `scroll-margin-top` target property.
+> :bulb: No need to set overlayHeight if using `scrollIntoView` as the method is aware of target's `scroll-margin-top` property.
 
 <br />
 

demo/components/Sidebar/TOC.vue

@@ -19,9 +19,9 @@ const { clickType } = inject('DemoRadios') as {
 const { activeIndex, activeId, setActive, isActive } = useActive(targets, {
 	rootId,
 	overlayHeight,
-	minWidth: 610,
-	jumpToFirst: false,
-	jumpToLast: false,
+	minWidth: 0,
+	/* 	jumpToFirst: false,
+	jumpToLast: false, */
 	boundaryOffset: {
 		toTop: 100,
 	},
@@ -44,7 +44,7 @@ function customScroll(id: string) {
 }
 
 watch(activeId, (newId) => {
-	console.log('activeId', newId);
+	/* 	console.log('activeId', newId); */
 });
 
 const onClick = computed(() => (clickType.value === 'native' ? setActive : customScroll));

src/useActive.ts

@@ -1,6 +1,16 @@
-import { ref, Ref, onMounted, computed, unref, watch, isRef, isReactive, reactive } from 'vue';
-import { useListeners } from './useListeners';
-import { getEdges, getRects, FIXED_TO_TOP_OFFSET } from './utils';
+import {
+	ref,
+	Ref,
+	onMounted,
+	computed,
+	unref,
+	watch,
+	isRef,
+	isReactive,
+	onBeforeUnmount,
+} from 'vue';
+import { useScroll } from './useScroll';
+import { getEdges, getRects, useRestrictedRef, isSSR, FIXED_TO_TOP_OFFSET } from './utils';
 
 type UseActiveTitleOptions = {
 	jumpToFirst?: boolean;
@@ -54,15 +64,19 @@ export function useActive(
 		} = defaultOpts.boundaryOffset,
 	}: UseActiveTitleOptions = defaultOpts
 ): UseActiveTitleReturn {
+	const media = `(min-width: ${minWidth}px)`;
+
 	// Internal
 	const root = ref<HTMLElement | null>(null);
 	const rootTop = ref(0);
 	const targets = ref<HTMLElement[]>([]);
+	const matchMedia = ref(isSSR || window.matchMedia(media).matches);
+
 	const isHTML = computed(() => typeof rootId !== 'string');
 	const ids = computed(() => targets.value.map(({ id }) => id));
 
 	// Returned values
-	const activeId = ref('');
+	const activeId = useRestrictedRef(matchMedia, '');
 	const activeIndex = computed(() => ids.value.indexOf(activeId.value));
 
 	// Runs onMount and whenever the user array changes
@@ -85,7 +99,8 @@ export function useActive(
 
 		if (isTop && jumpToFirst) {
 			return (activeId.value = ids.value[0]), true;
-		} else if (isBottom && jumpToLast) {
+		}
+		if (isBottom && jumpToLast) {
 			return (activeId.value = ids.value.at(-1)!), true;
 		}
 	}
@@ -108,15 +123,16 @@ export function useActive(
 		}
 	}
 
-	// Sets first target that left the top of the viewport
+	// Sets first target that LEFT the top
 	function onScrollDown({ isCancel } = { isCancel: false }) {
-		// OverlayHeight not needed as 'scroll-margin-top' should be set instead.
+		// overlayHeight not needed as 'scroll-margin-top' is set instead
 		const offset = rootTop.value + toBottom!;
 
 		const firstOut =
 			[...getRects(targets.value, 'OUT', offset).keys()].at(-1) ??
 			(jumpToFirst ? ids.value[0] : '');
 
+		// Prevent innatural highlighting with smoothscroll/custom easings
 		if (ids.value.indexOf(firstOut) > ids.value.indexOf(activeId.value)) {
 			return (activeId.value = firstOut);
 		}
@@ -126,7 +142,7 @@ export function useActive(
 		}
 	}
 
-	// Sets first target that entered the top of the viewport
+	// Sets first target that ENTERED the top
 	function onScrollUp() {
 		const offset = overlayHeight + rootTop.value + toTop!;
 		const firstIn = getRects(targets.value, 'IN', offset).keys().next().value ?? '';
@@ -143,6 +159,11 @@ export function useActive(
 		}
 	}
 
+	function onResize() {
+		rootTop.value = isHTML.value ? 0 : root.value!.getBoundingClientRect().top;
+		matchMedia.value = window.matchMedia(media).matches;
+	}
+
 	// Returned
 	function setActive(id: string) {
 		if (id !== activeId.value) {
@@ -171,24 +192,43 @@ export function useActive(
 		await new Promise((resolve) => setTimeout(resolve));
 		setTargets();
 
-		const hashId = targets.value.find(({ id }) => id === location.hash.slice(1))?.id;
-		if (hashId) {
-			return (activeId.value = hashId);
+		window.addEventListener('resize', onResize, { passive: true });
+
+		if (matchMedia.value) {
+			const hashId = targets.value.find(({ id }) => id === location.hash.slice(1))?.id;
+			if (hashId) {
+				return (activeId.value = hashId);
+			}
+
+			if (!jumpToEdges()) {
+				onScrollDown();
+			}
 		}
+	});
+
+	onBeforeUnmount(() => {
+		window.removeEventListener('resize', onResize);
+	});
+
+	const isClick = useScroll({
+		isHTML,
+		root,
+		matchMedia,
+		_setActive,
+	});
 
-		if (!jumpToEdges()) {
+	watch(isRef(userIds) || isReactive(userIds) ? userIds : () => null, setTargets, {
+		flush: 'post',
+	});
+
+	watch(matchMedia, (_matchMedia) => {
+		if (_matchMedia) {
 			onScrollDown();
+		} else {
+			activeId.value = '';
 		}
 	});
 
-	watch(
-		isRef(userIds) || isReactive(userIds) ? userIds : () => null,
-		() => {
-			setTargets();
-		},
-		{ flush: 'post' }
-	);
-
 	watch(activeId, (newId) => {
 		if (replaceHash) {
 			const start = jumpToFirst ? 0 : -1;
@@ -197,14 +237,6 @@ export function useActive(
 		}
 	});
 
-	const isClick = useListeners({
-		isHTML,
-		root,
-		rootTop,
-		_setActive,
-		minWidth,
-	});
-
 	return {
 		isActive,
 		setActive,

src/useListeners.ts src/useScroll.tssrc/useListeners.ts renamed to src/useScroll.ts

@@ -1,38 +1,18 @@
-import { watch, onMounted, ref, Ref, ComputedRef, onBeforeUnmount, computed, customRef } from 'vue';
-import { isSSR } from './utils';
+import { watch, onMounted, ref, Ref, ComputedRef, computed } from 'vue';
+import { isSSR, useRestrictedRef } from './utils';
 
 type UseListenersOptions = {
 	isHTML: ComputedRef<boolean>;
 	root: Ref<HTMLElement | null>;
-	rootTop: Ref<number>;
+	matchMedia: Ref<boolean>;
 	_setActive: (prevY: number, isCancel?: { isCancel: boolean }) => void;
-	minWidth: number;
 };
 
 const ONCE = { once: true };
 
-export function useListeners({ isHTML, root, rootTop, _setActive, minWidth }: UseListenersOptions) {
-	const isClick = customRef<boolean>((track, trigger) => {
-		let value = false;
-		return {
-			get() {
-				track();
-				return value;
-			},
-			set(newValue) {
-				value = matchMedia.value ? newValue : false;
-				trigger();
-			},
-		};
-	});
-
-	if (isSSR) {
-		return isClick;
-	}
-
-	const media = `(min-width: ${minWidth}px)`;
-	const matchMedia = ref(window.matchMedia(media).matches);
-	const isIdle = ref(false);
+export function useScroll({ isHTML, root, _setActive, matchMedia }: UseListenersOptions) {
+	const isClick = useRestrictedRef(matchMedia, false);
+	const isReady = ref(false);
 	const clickY = computed(() => (isClick.value ? getNextY() : 0));
 
 	let prevY: number;
@@ -57,7 +37,7 @@ export function useListeners({ isHTML, root, rootTop, _setActive, minWidth }: Us
 			// When equal, wait for 20 frames to be sure is idle
 			frameCount++;
 			if (frameCount === 20) {
-				isIdle.value = true;
+				isReady.value = true;
 				isClick.value = false;
 				console.log('Scroll end.');
 				cancelAnimationFrame(rafId);
@@ -69,11 +49,6 @@ export function useListeners({ isHTML, root, rootTop, _setActive, minWidth }: Us
 		rafId = requestAnimationFrame(scrollEnd);
 	}
 
-	function onResize() {
-		rootTop.value = isHTML.value ? 0 : root.value!.getBoundingClientRect().top;
-		matchMedia.value = window.matchMedia(media).matches;
-	}
-
 	function onScroll() {
 		// Do not "update" results if scrolling from click
 		if (!isClick.value) {
@@ -86,7 +61,7 @@ export function useListeners({ isHTML, root, rootTop, _setActive, minWidth }: Us
 		}
 	}
 
-	// Restore main listener "updating" functionalities if scrolling again while scrolling from click...
+	// Restore "updating" functionalities if scrolling again while scrolling from click...
 	function reScroll() {
 		isClick.value = false;
 	}
@@ -108,35 +83,37 @@ export function useListeners({ isHTML, root, rootTop, _setActive, minWidth }: Us
 	}
 
 	onMounted(() => {
-		window.addEventListener('resize', onResize, { passive: true });
-		if (matchMedia.value) {
+		if (matchMedia.value && location.hash) {
 			// Wait for any eventual scroll to hash triggered by browser to end
 			setReady();
 		} else {
-			isIdle.value = true;
+			isReady.value = true;
 		}
 	});
 
-	onBeforeUnmount(() => {
-		window.removeEventListener('resize', onResize);
-	});
-
 	watch(
-		[isIdle, matchMedia, root],
-		([_isIdle, _matchMedia, root], [], onCleanup) => {
-			const rootEl = isHTML.value ? document : root;
+		[isReady, matchMedia, root],
+		([_isReady, _matchMedia, _root], [], onCleanup) => {
+			if (isSSR) {
+				return;
+			}
+
+			const rootEl = isHTML.value ? document : _root;
+			const isActive = rootEl && _isReady && _matchMedia;
 
-			if (_isIdle && rootEl && _matchMedia) {
+			if (isActive) {
 				console.log('Adding main listener...');
 				rootEl.addEventListener('scroll', onScroll, {
 					passive: true,
 				});
+			}
 
-				onCleanup(() => {
+			onCleanup(() => {
+				if (isActive) {
 					console.log('Removing main listener...');
 					rootEl.removeEventListener('scroll', onScroll);
-				});
-			}
+				}
+			});
 		},
 		{ immediate: true, flush: 'sync' }
 	);

src/utils.ts

@@ -1,8 +1,28 @@
+import { customRef, Ref } from 'vue';
+
 export const isSSR = typeof window === 'undefined';
 
 export const FIXED_TO_TOP_OFFSET = 10;
 export const FIXED_BOUNDARY_OFFSET = 5;
 
+export function useRestrictedRef<T>(matchMedia: Ref<boolean>, defaultValue: T): Ref<T> {
+	const _customRef = customRef<T>((track, trigger) => {
+		let value = defaultValue;
+		return {
+			get() {
+				track();
+				return value;
+			},
+			set(newValue) {
+				value = matchMedia.value ? newValue : defaultValue;
+				trigger();
+			},
+		};
+	});
+
+	return _customRef;
+}
+
 export function getRects(targets: HTMLElement[], filter: 'IN' | 'OUT' | 'ALL', userOffset = 0) {
 	const extOffset = FIXED_BOUNDARY_OFFSET + userOffset;
 	const map = new Map<string, number>();
@@ -27,7 +47,7 @@ export function getRects(targets: HTMLElement[], filter: 'IN' | 'OUT' | 'ALL', u
 	return map;
 }
 
-export function getEdges(root = document.documentElement) {
+export function getEdges(root: HTMLElement) {
 	const isTopReached = root.scrollTop <= FIXED_TO_TOP_OFFSET;
 	const isBottomReached = Math.abs(root.scrollHeight - root.clientHeight - root.scrollTop) < 1;
 	const isOverscrollTop = root.scrollTop < 0;