@san-siva/blogkit 1.1.15 → 1.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dynamicComponents/BlogDynamic.js +32 -5
- package/dist/cjs/dynamicComponents/BlogDynamic.js.map +1 -1
- package/dist/cjs/dynamicComponents/BlogSectionDynamic.js +1 -1
- package/dist/cjs/dynamicComponents/BlogSectionDynamic.js.map +1 -1
- package/dist/cjs/dynamicComponents/lockScrollUpdates.js +24 -0
- package/dist/cjs/dynamicComponents/lockScrollUpdates.js.map +1 -0
- package/dist/cjs/index.css +1 -1
- package/dist/cjs/index.css.map +1 -1
- package/dist/cjs/styles/BlogSection.module.scss.js +1 -1
- package/dist/cjs/utils/index.js +2 -0
- package/dist/cjs/utils/index.js.map +1 -1
- package/dist/cjs/utils/lockScrollUpdates.js +24 -0
- package/dist/cjs/utils/lockScrollUpdates.js.map +1 -0
- package/dist/esm/dynamicComponents/BlogDynamic.js +32 -5
- package/dist/esm/dynamicComponents/BlogDynamic.js.map +1 -1
- package/dist/esm/dynamicComponents/BlogSectionDynamic.js +2 -2
- package/dist/esm/dynamicComponents/BlogSectionDynamic.js.map +1 -1
- package/dist/esm/dynamicComponents/lockScrollUpdates.js +20 -0
- package/dist/esm/dynamicComponents/lockScrollUpdates.js.map +1 -0
- package/dist/esm/index.css +1 -1
- package/dist/esm/index.css.map +1 -1
- package/dist/esm/styles/BlogSection.module.scss.js +1 -1
- package/dist/esm/utils/index.js +2 -1
- package/dist/esm/utils/index.js.map +1 -1
- package/dist/esm/utils/lockScrollUpdates.js +20 -0
- package/dist/esm/utils/lockScrollUpdates.js.map +1 -0
- package/dist/types/dynamicComponents/BlogDynamic.d.ts +1 -1
- package/dist/types/dynamicComponents/BlogDynamic.d.ts.map +1 -1
- package/dist/types/dynamicComponents/lockScrollUpdates.d.ts +4 -0
- package/dist/types/dynamicComponents/lockScrollUpdates.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/dynamicComponents/BlogDynamic.tsx +35 -5
- package/src/dynamicComponents/BlogSectionDynamic.tsx +6 -2
- package/src/styles/BlogSection.module.scss +16 -2
- package/src/utils/index.ts +2 -0
- package/src/utils/lockScrollUpdates.ts +29 -0
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var styles = {"margin-bottom--6":"BlogSection-module_margin-bottom--6__-hlAO","margin-bottom--9":"BlogSection-module_margin-bottom--9__xU5rE","blog-section__title":"BlogSection-module_blog-section__title__5-4Oy","blog-section":"BlogSection-module_blog-section__NTDM4"};
|
|
5
|
+
var styles = {"margin-bottom--6":"BlogSection-module_margin-bottom--6__-hlAO","margin-bottom--9":"BlogSection-module_margin-bottom--9__xU5rE","blog-section__title":"BlogSection-module_blog-section__title__5-4Oy","blog-section__title-link":"BlogSection-module_blog-section__title-link__Q4R5T","blog-section":"BlogSection-module_blog-section__NTDM4"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=BlogSection.module.scss.js.map
|
package/dist/cjs/utils/index.js
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
const generateIdForBlogTitle = (title) => title.toLowerCase().replace(/[^\w\d]/g, '-');
|
|
4
4
|
const generateUrlForBlogTitle = (title) => encodeURIComponent(title.replace(/[^\w]+/g, '-').toLowerCase());
|
|
5
|
+
const generateSectionHref = (id) => `?section=${id}`;
|
|
5
6
|
|
|
6
7
|
exports.generateIdForBlogTitle = generateIdForBlogTitle;
|
|
8
|
+
exports.generateSectionHref = generateSectionHref;
|
|
7
9
|
exports.generateUrlForBlogTitle = generateUrlForBlogTitle;
|
|
8
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["export const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\\w\\d]/g, '-');\n\nexport const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\\w]+/g, '-').toLowerCase());\n"],"names":[],"mappings":";;MAAa,sBAAsB,GAAG,CAAC,KAAa,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG;MAEvF,uBAAuB,GAAG,CAAC,KAAa,KAAK,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["export const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\\w\\d]/g, '-');\n\nexport const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\\w]+/g, '-').toLowerCase());\n\nexport const generateSectionHref = (id: string) => `?section=${id}`;\n"],"names":[],"mappings":";;MAAa,sBAAsB,GAAG,CAAC,KAAa,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG;MAEvF,uBAAuB,GAAG,CAAC,KAAa,KAAK,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE;AAEjH,MAAM,mBAAmB,GAAG,CAAC,EAAU,KAAK,CAAA,SAAA,EAAY,EAAE,CAAA;;;;;;"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const lockScrollUpdates = (id, isClickScrolling, scrollEndHandlerRef, setVisibleTitle) => {
|
|
6
|
+
if (scrollEndHandlerRef.current) {
|
|
7
|
+
document.body.removeEventListener('scrollend', scrollEndHandlerRef.current);
|
|
8
|
+
}
|
|
9
|
+
isClickScrolling.current = true;
|
|
10
|
+
scrollEndHandlerRef.current = () => {
|
|
11
|
+
isClickScrolling.current = false;
|
|
12
|
+
scrollEndHandlerRef.current = null;
|
|
13
|
+
setVisibleTitle(id);
|
|
14
|
+
const url = new URL(window.location.href);
|
|
15
|
+
url.searchParams.set('section', id);
|
|
16
|
+
window.history.replaceState({}, '', url.toString());
|
|
17
|
+
};
|
|
18
|
+
document.body.addEventListener('scrollend', scrollEndHandlerRef.current, {
|
|
19
|
+
once: true,
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
exports.default = lockScrollUpdates;
|
|
24
|
+
//# sourceMappingURL=lockScrollUpdates.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lockScrollUpdates.js","sources":["../../../src/utils/lockScrollUpdates.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\n\nconst lockScrollUpdates = (\n\tid: string,\n\tisClickScrolling: MutableRefObject<boolean>,\n\tscrollEndHandlerRef: MutableRefObject<(() => void) | null>,\n\tsetVisibleTitle: (id: string) => void\n) => {\n\tif (scrollEndHandlerRef.current) {\n\t\tdocument.body.removeEventListener('scrollend', scrollEndHandlerRef.current);\n\t}\n\n\tisClickScrolling.current = true;\n\n\tscrollEndHandlerRef.current = () => {\n\t\tisClickScrolling.current = false;\n\t\tscrollEndHandlerRef.current = null;\n\t\tsetVisibleTitle(id);\n\t\tconst url = new URL(window.location.href);\n\t\turl.searchParams.set('section', id);\n\t\twindow.history.replaceState({}, '', url.toString());\n\t};\n\n\tdocument.body.addEventListener('scrollend', scrollEndHandlerRef.current, {\n\t\tonce: true,\n\t});\n};\n\nexport default lockScrollUpdates;\n"],"names":[],"mappings":";;;;AAEA,MAAM,iBAAiB,GAAG,CACzB,EAAU,EACV,gBAA2C,EAC3C,mBAA0D,EAC1D,eAAqC,KAClC;AACH,IAAA,IAAI,mBAAmB,CAAC,OAAO,EAAE;QAChC,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,mBAAmB,CAAC,OAAO,CAAC;IAC5E;AAEA,IAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI;AAE/B,IAAA,mBAAmB,CAAC,OAAO,GAAG,MAAK;AAClC,QAAA,gBAAgB,CAAC,OAAO,GAAG,KAAK;AAChC,QAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI;QAClC,eAAe,CAAC,EAAE,CAAC;QACnB,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;QACzC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC;AACnC,QAAA,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;AACpD,IAAA,CAAC;IAED,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,mBAAmB,CAAC,OAAO,EAAE;AACxE,QAAA,IAAI,EAAE,IAAI;AACV,KAAA,CAAC;AACH;;;;"}
|
|
@@ -3,14 +3,18 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import { useRef, useState, useCallback, useEffect, Children, isValidElement, cloneElement } from 'react';
|
|
4
4
|
import { useSpring, config, animated } from '@react-spring/web';
|
|
5
5
|
import styles from '../styles/Blog.module.scss.js';
|
|
6
|
+
import lockScrollUpdates from '../utils/lockScrollUpdates.js';
|
|
6
7
|
|
|
7
|
-
const Blog = ({ children, title = 'In this article', jsonLd }) => {
|
|
8
|
+
const Blog = ({ children, title = 'In this article', jsonLd, }) => {
|
|
8
9
|
const sectionReferences = useRef(new Map());
|
|
9
10
|
const [categoryTitles, setCategoryTitles] = useState(new Map());
|
|
10
11
|
const [visibleTitle, setVisibleTitle] = useState(null);
|
|
11
12
|
const [showTOC, setShowTOC] = useState(false);
|
|
12
13
|
const updateTimerRef = useRef(null);
|
|
13
14
|
const showTOCTimerRef = useRef(null);
|
|
15
|
+
const hasScrolledToInitialSection = useRef(false);
|
|
16
|
+
const isClickScrolling = useRef(false);
|
|
17
|
+
const scrollEndHandlerRef = useRef(null);
|
|
14
18
|
const sortByDomPosition = useCallback(([, a], [, b]) => {
|
|
15
19
|
const position = a.el.compareDocumentPosition(b.el);
|
|
16
20
|
if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
|
|
@@ -63,6 +67,8 @@ const Blog = ({ children, title = 'In this article', jsonLd }) => {
|
|
|
63
67
|
const observer = new IntersectionObserver(([entry]) => {
|
|
64
68
|
if (!entry.isIntersecting)
|
|
65
69
|
return;
|
|
70
|
+
if (isClickScrolling.current)
|
|
71
|
+
return;
|
|
66
72
|
setVisibleTitle(visibleId => {
|
|
67
73
|
if (visibleId === id && !entry.isIntersecting)
|
|
68
74
|
return null;
|
|
@@ -88,8 +94,29 @@ const Blog = ({ children, title = 'In this article', jsonLd }) => {
|
|
|
88
94
|
if (showTOCTimerRef.current) {
|
|
89
95
|
clearTimeout(showTOCTimerRef.current);
|
|
90
96
|
}
|
|
97
|
+
if (scrollEndHandlerRef.current) {
|
|
98
|
+
document.body.removeEventListener('scrollend', scrollEndHandlerRef.current);
|
|
99
|
+
}
|
|
91
100
|
};
|
|
92
101
|
}, []);
|
|
102
|
+
// On initial load, scroll to section specified in URL
|
|
103
|
+
useEffect(() => {
|
|
104
|
+
if (hasScrolledToInitialSection.current)
|
|
105
|
+
return;
|
|
106
|
+
if (categoryTitles.size === 0)
|
|
107
|
+
return;
|
|
108
|
+
const url = new URL(window.location.href);
|
|
109
|
+
const section = url.searchParams.get('section');
|
|
110
|
+
if (!section)
|
|
111
|
+
return;
|
|
112
|
+
const entry = categoryTitles.get(section);
|
|
113
|
+
if (!entry)
|
|
114
|
+
return;
|
|
115
|
+
hasScrolledToInitialSection.current = true;
|
|
116
|
+
const top = entry.el.getBoundingClientRect().top + document.body.scrollTop - 100;
|
|
117
|
+
document.body.scrollTo({ top, behavior: 'smooth' });
|
|
118
|
+
lockScrollUpdates(section, isClickScrolling, scrollEndHandlerRef, setVisibleTitle);
|
|
119
|
+
}, [categoryTitles]);
|
|
93
120
|
const handleSectionReference = useCallback((element) => {
|
|
94
121
|
if (!element)
|
|
95
122
|
return;
|
|
@@ -133,14 +160,14 @@ const Blog = ({ children, title = 'In this article', jsonLd }) => {
|
|
|
133
160
|
if (!el)
|
|
134
161
|
return;
|
|
135
162
|
const top = el.getBoundingClientRect().top + document.body.scrollTop - 100;
|
|
163
|
+
const url = new URL(window.location.href);
|
|
164
|
+
url.searchParams.set('section', id);
|
|
165
|
+
window.history.replaceState({}, '', url.toString());
|
|
136
166
|
document.body.scrollTo({
|
|
137
167
|
top,
|
|
138
168
|
behavior: 'smooth',
|
|
139
169
|
});
|
|
140
|
-
|
|
141
|
-
setVisibleTitle(id);
|
|
142
|
-
clearTimeout(timer);
|
|
143
|
-
}, 1000);
|
|
170
|
+
lockScrollUpdates(id, isClickScrolling, scrollEndHandlerRef, setVisibleTitle);
|
|
144
171
|
};
|
|
145
172
|
const sidebarStyle = useSpring({
|
|
146
173
|
opacity: showTOC ? 1 : 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlogDynamic.js","sources":["../../../src/dynamicComponents/BlogDynamic.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tChildren,\n\tcloneElement,\n\tisValidElement,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { useSpring, animated, config } from '@react-spring/web';\n\nimport type { MouseEvent, ReactNode, RefAttributes } from 'react';\nimport type { Thing, WithContext } from 'schema-dts';\n\nimport styles from '../styles/Blog.module.scss';\n\ninterface BlogProperties {\n\tchildren: ReactNode;\n\ttitle?: string;\n\tjsonLd?: WithContext<Thing>;\n}\n\nexport interface ForwardedReference {\n\tparentRef: HTMLDivElement;\n\tchildRefs: HTMLDivElement[];\n}\n\ninterface SectionReferenceValue {\n\tel: HTMLElement;\n\ttitle: string;\n\tisSubSection: boolean;\n}\n\ntype SectionReference = Map<string, SectionReferenceValue>;\n\ninterface CategoryTitleValue extends SectionReferenceValue {\n\tlastUpdatedAt: number;\n}\n\ntype CategoryTitle = Map<string, CategoryTitleValue>;\n\nconst Blog = ({ children, title = 'In this article', jsonLd }: BlogProperties) => {\n\tconst sectionReferences = useRef<SectionReference>(new Map());\n\tconst [categoryTitles, setCategoryTitles] = useState<CategoryTitle>(\n\t\tnew Map()\n\t);\n\tconst [visibleTitle, setVisibleTitle] = useState<string | null>(null);\n\tconst [showTOC, setShowTOC] = useState(false);\n\n\tconst updateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\tconst showTOCTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n\tconst sortByDomPosition = useCallback(\n\t\t(\n\t\t\t[, a]: [string, SectionReferenceValue],\n\t\t\t[, b]: [string, SectionReferenceValue]\n\t\t) => {\n\t\t\tconst position = a.el.compareDocumentPosition(b.el);\n\t\t\tif (position & Node.DOCUMENT_POSITION_FOLLOWING) {\n\t\t\t\treturn -1; // a comes before b\n\t\t\t} else if (position & Node.DOCUMENT_POSITION_PRECEDING) {\n\t\t\t\treturn 1; // b comes before a\n\t\t\t}\n\t\t\treturn 0;\n\t\t},\n\t\t[]\n\t);\n\n\tconst updateCategoryTitles = useCallback(() => {\n\t\tconst now = Date.now();\n\t\tconst newCategoryTitles = new Map<string, CategoryTitleValue>();\n\n\t\t// Sort sections by their DOM position to maintain correct order\n\t\tconst sectionsArray = Array.from(sectionReferences.current.entries());\n\t\tsectionsArray.sort(sortByDomPosition);\n\n\t\tlet firstSectionId: string | null = null;\n\t\tfor (const [id, { title, el, isSubSection }] of sectionsArray) {\n\t\t\tif (!firstSectionId) {\n\t\t\t\tfirstSectionId = id;\n\t\t\t}\n\t\t\tnewCategoryTitles.set(id, {\n\t\t\t\tel,\n\t\t\t\ttitle,\n\t\t\t\tlastUpdatedAt: now,\n\t\t\t\tisSubSection,\n\t\t\t});\n\t\t}\n\n\t\tif (newCategoryTitles.size === 0) return;\n\n\t\tsetCategoryTitles(newCategoryTitles);\n\t\tif (!showTOC) setShowTOC(true);\n\n\t\tif (visibleTitle) return;\n\t\tsetVisibleTitle(firstSectionId);\n\t}, [visibleTitle, sortByDomPosition, showTOC, setShowTOC]);\n\n\tconst debounceUpdateCategoryTitles = useCallback(() => {\n\t\t// Clear existing timer and set a new one to batch updates\n\t\tif (updateTimerRef.current) {\n\t\t\tclearTimeout(updateTimerRef.current);\n\t\t}\n\t\tupdateTimerRef.current = setTimeout(() => {\n\t\t\tupdateCategoryTitles();\n\t\t}, 200);\n\t}, [updateCategoryTitles]);\n\n\tuseEffect(() => {\n\t\tconst observers = new Map<string, IntersectionObserver>();\n\t\tfor (const [id, { el }] of categoryTitles) {\n\t\t\tconst observer = new IntersectionObserver(\n\t\t\t\t([entry]) => {\n\t\t\t\t\tif (!entry.isIntersecting) return;\n\t\t\t\t\tsetVisibleTitle(visibleId => {\n\t\t\t\t\t\tif (visibleId === id && !entry.isIntersecting) return null;\n\t\t\t\t\t\tif (entry.isIntersecting) return id;\n\t\t\t\t\t\treturn visibleId;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\t{ threshold: 0.1 }\n\t\t\t);\n\t\t\tobservers.set(id, observer);\n\t\t\tobserver.observe(el);\n\t\t}\n\t\treturn () => {\n\t\t\tfor (const observer of observers.values()) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t};\n\t}, [categoryTitles.size]);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (updateTimerRef.current) {\n\t\t\t\tclearTimeout(updateTimerRef.current);\n\t\t\t}\n\t\t\tif (showTOCTimerRef.current) {\n\t\t\t\tclearTimeout(showTOCTimerRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\tconst handleSectionReference = useCallback(\n\t\t(element: ForwardedReference) => {\n\t\t\tif (!element) return;\n\t\t\tconst { parentRef, childRefs } = element;\n\n\t\t\t// Add parent section reference\n\t\t\tif (parentRef) {\n\t\t\t\tconst id = parentRef.dataset.id;\n\t\t\t\tconst title = parentRef.dataset.title;\n\t\t\t\tif (id && title) {\n\t\t\t\t\tsectionReferences.current.set(id, {\n\t\t\t\t\t\tel: parentRef,\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t\tisSubSection: false,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Add child section references\n\t\t\tif (Array.isArray(childRefs)) {\n\t\t\t\tfor (const childRef of childRefs) {\n\t\t\t\t\tif (!childRef) continue;\n\t\t\t\t\tconst id = childRef.dataset.id;\n\t\t\t\t\tconst title = childRef.dataset.title;\n\t\t\t\t\tif (id && title) {\n\t\t\t\t\t\tsectionReferences.current.set(id, {\n\t\t\t\t\t\t\tel: childRef,\n\t\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t\tisSubSection: true,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tdebounceUpdateCategoryTitles();\n\t\t},\n\t\t[debounceUpdateCategoryTitles]\n\t);\n\n\tconst handleClickCategoryTitle = (\n\t\terror: MouseEvent<HTMLParagraphElement>\n\t) => {\n\t\tconst id = error.currentTarget.dataset.id;\n\t\tconst index = error.currentTarget.dataset.idx;\n\t\tif (!id || !index) return;\n\n\t\tconst { el } = categoryTitles.get(id) || {};\n\t\tif (!el) return;\n\n\t\tconst top = el.getBoundingClientRect().top + document.body.scrollTop - 100;\n\t\tdocument.body.scrollTo({\n\t\t\ttop,\n\t\t\tbehavior: 'smooth',\n\t\t});\n\n\t\tconst timer = setTimeout(() => {\n\t\t\tsetVisibleTitle(id);\n\t\t\tclearTimeout(timer);\n\t\t}, 1000);\n\t};\n\n\tconst sidebarStyle = useSpring({\n\t\topacity: showTOC ? 1 : 0,\n\t\ttransform: showTOC ? 'translateX(0)' : 'translateX(40px)',\n\t\tconfig: config.gentle,\n\t});\n\n\treturn (\n\t\t<div className={styles.blog}>\n\t\t\t{jsonLd && (\n\t\t\t\t<script\n\t\t\t\t\ttype=\"application/ld+json\"\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<div className={styles['blog__content']}>\n\t\t\t\t{Children.map(children, child => {\n\t\t\t\t\tif (!isValidElement(child)) return child;\n\t\t\t\t\treturn cloneElement(child, {\n\t\t\t\t\t\tref: handleSectionReference,\n\t\t\t\t\t} as RefAttributes<ForwardedReference>);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t\t<animated.div className={styles['blog__sidebar']} style={sidebarStyle}>\n\t\t\t\t<p\n\t\t\t\t\tclassName={`${styles['margin-bottom--3']} ${styles['category__header']}`}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</p>\n\t\t\t\t{[...categoryTitles].map(\n\t\t\t\t\t([id, { title, isSubSection }], index, array) => {\n\t\t\t\t\t\tconst isNextSectionSubSection = array[index + 1]?.[1]?.isSubSection;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<p\n\t\t\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\t\t\tdata-idx={index}\n\t\t\t\t\t\t\t\tdata-id={id}\n\t\t\t\t\t\t\t\tclassName={`${styles['category__title']} ${\n\t\t\t\t\t\t\t\t\tid === visibleTitle ? styles['category__title--active'] : ''\n\t\t\t\t\t\t\t\t} ${isSubSection ? styles['category__title--sub'] : ''} ${\n\t\t\t\t\t\t\t\t\tisSubSection && !isNextSectionSubSection\n\t\t\t\t\t\t\t\t\t\t? styles['margin-bottom-imp--2']\n\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\tonClick={handleClickCategoryTitle}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t)}\n\t\t\t</animated.div>\n\t\t</div>\n\t);\n};\n\nexport default Blog;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BlogDynamic.js","sources":["../../../src/dynamicComponents/BlogDynamic.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tChildren,\n\tcloneElement,\n\tisValidElement,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { useSpring, animated, config } from '@react-spring/web';\n\nimport type { MouseEvent, ReactNode, RefAttributes } from 'react';\nimport type { Thing, WithContext } from 'schema-dts';\n\nimport styles from '../styles/Blog.module.scss';\nimport lockScrollUpdates from '../utils/lockScrollUpdates';\n\ninterface BlogProperties {\n\tchildren: ReactNode;\n\ttitle?: string;\n\tjsonLd?: WithContext<Thing>;\n}\n\nexport interface ForwardedReference {\n\tparentRef: HTMLDivElement;\n\tchildRefs: HTMLDivElement[];\n}\n\ninterface SectionReferenceValue {\n\tel: HTMLElement;\n\ttitle: string;\n\tisSubSection: boolean;\n}\n\ntype SectionReference = Map<string, SectionReferenceValue>;\n\ninterface CategoryTitleValue extends SectionReferenceValue {\n\tlastUpdatedAt: number;\n}\n\ntype CategoryTitle = Map<string, CategoryTitleValue>;\n\nconst Blog = ({\n\tchildren,\n\ttitle = 'In this article',\n\tjsonLd,\n}: BlogProperties) => {\n\tconst sectionReferences = useRef<SectionReference>(new Map());\n\tconst [categoryTitles, setCategoryTitles] = useState<CategoryTitle>(\n\t\tnew Map()\n\t);\n\tconst [visibleTitle, setVisibleTitle] = useState<string | null>(null);\n\tconst [showTOC, setShowTOC] = useState(false);\n\n\tconst updateTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\tconst showTOCTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\tconst hasScrolledToInitialSection = useRef(false);\n\tconst isClickScrolling = useRef(false);\n\tconst scrollEndHandlerRef = useRef<(() => void) | null>(null);\n\n\tconst sortByDomPosition = useCallback(\n\t\t(\n\t\t\t[, a]: [string, SectionReferenceValue],\n\t\t\t[, b]: [string, SectionReferenceValue]\n\t\t) => {\n\t\t\tconst position = a.el.compareDocumentPosition(b.el);\n\t\t\tif (position & Node.DOCUMENT_POSITION_FOLLOWING) {\n\t\t\t\treturn -1; // a comes before b\n\t\t\t} else if (position & Node.DOCUMENT_POSITION_PRECEDING) {\n\t\t\t\treturn 1; // b comes before a\n\t\t\t}\n\t\t\treturn 0;\n\t\t},\n\t\t[]\n\t);\n\n\tconst updateCategoryTitles = useCallback(() => {\n\t\tconst now = Date.now();\n\t\tconst newCategoryTitles = new Map<string, CategoryTitleValue>();\n\n\t\t// Sort sections by their DOM position to maintain correct order\n\t\tconst sectionsArray = Array.from(sectionReferences.current.entries());\n\t\tsectionsArray.sort(sortByDomPosition);\n\n\t\tlet firstSectionId: string | null = null;\n\t\tfor (const [id, { title, el, isSubSection }] of sectionsArray) {\n\t\t\tif (!firstSectionId) {\n\t\t\t\tfirstSectionId = id;\n\t\t\t}\n\t\t\tnewCategoryTitles.set(id, {\n\t\t\t\tel,\n\t\t\t\ttitle,\n\t\t\t\tlastUpdatedAt: now,\n\t\t\t\tisSubSection,\n\t\t\t});\n\t\t}\n\n\t\tif (newCategoryTitles.size === 0) return;\n\n\t\tsetCategoryTitles(newCategoryTitles);\n\t\tif (!showTOC) setShowTOC(true);\n\n\t\tif (visibleTitle) return;\n\t\tsetVisibleTitle(firstSectionId);\n\t}, [visibleTitle, sortByDomPosition, showTOC, setShowTOC]);\n\n\tconst debounceUpdateCategoryTitles = useCallback(() => {\n\t\t// Clear existing timer and set a new one to batch updates\n\t\tif (updateTimerRef.current) {\n\t\t\tclearTimeout(updateTimerRef.current);\n\t\t}\n\t\tupdateTimerRef.current = setTimeout(() => {\n\t\t\tupdateCategoryTitles();\n\t\t}, 200);\n\t}, [updateCategoryTitles]);\n\n\tuseEffect(() => {\n\t\tconst observers = new Map<string, IntersectionObserver>();\n\t\tfor (const [id, { el }] of categoryTitles) {\n\t\t\tconst observer = new IntersectionObserver(\n\t\t\t\t([entry]) => {\n\t\t\t\t\tif (!entry.isIntersecting) return;\n\t\t\t\t\tif (isClickScrolling.current) return;\n\t\t\t\t\tsetVisibleTitle(visibleId => {\n\t\t\t\t\t\tif (visibleId === id && !entry.isIntersecting) return null;\n\t\t\t\t\t\tif (entry.isIntersecting) return id;\n\t\t\t\t\t\treturn visibleId;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\t{ threshold: 0.1 }\n\t\t\t);\n\t\t\tobservers.set(id, observer);\n\t\t\tobserver.observe(el);\n\t\t}\n\t\treturn () => {\n\t\t\tfor (const observer of observers.values()) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t};\n\t}, [categoryTitles.size]);\n\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (updateTimerRef.current) {\n\t\t\t\tclearTimeout(updateTimerRef.current);\n\t\t\t}\n\t\t\tif (showTOCTimerRef.current) {\n\t\t\t\tclearTimeout(showTOCTimerRef.current);\n\t\t\t}\n\t\t\tif (scrollEndHandlerRef.current) {\n\t\t\t\tdocument.body.removeEventListener('scrollend', scrollEndHandlerRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\t// On initial load, scroll to section specified in URL\n\tuseEffect(() => {\n\t\tif (hasScrolledToInitialSection.current) return;\n\t\tif (categoryTitles.size === 0) return;\n\t\tconst url = new URL(window.location.href);\n\t\tconst section = url.searchParams.get('section');\n\t\tif (!section) return;\n\t\tconst entry = categoryTitles.get(section);\n\t\tif (!entry) return;\n\t\thasScrolledToInitialSection.current = true;\n\t\tconst top =\n\t\t\tentry.el.getBoundingClientRect().top + document.body.scrollTop - 100;\n\t\tdocument.body.scrollTo({ top, behavior: 'smooth' });\n\t\tlockScrollUpdates(section, isClickScrolling, scrollEndHandlerRef, setVisibleTitle);\n\t}, [categoryTitles]);\n\n\tconst handleSectionReference = useCallback(\n\t\t(element: ForwardedReference) => {\n\t\t\tif (!element) return;\n\t\t\tconst { parentRef, childRefs } = element;\n\n\t\t\t// Add parent section reference\n\t\t\tif (parentRef) {\n\t\t\t\tconst id = parentRef.dataset.id;\n\t\t\t\tconst title = parentRef.dataset.title;\n\t\t\t\tif (id && title) {\n\t\t\t\t\tsectionReferences.current.set(id, {\n\t\t\t\t\t\tel: parentRef,\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t\tisSubSection: false,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Add child section references\n\t\t\tif (Array.isArray(childRefs)) {\n\t\t\t\tfor (const childRef of childRefs) {\n\t\t\t\t\tif (!childRef) continue;\n\t\t\t\t\tconst id = childRef.dataset.id;\n\t\t\t\t\tconst title = childRef.dataset.title;\n\t\t\t\t\tif (id && title) {\n\t\t\t\t\t\tsectionReferences.current.set(id, {\n\t\t\t\t\t\t\tel: childRef,\n\t\t\t\t\t\t\ttitle,\n\t\t\t\t\t\t\tisSubSection: true,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tdebounceUpdateCategoryTitles();\n\t\t},\n\t\t[debounceUpdateCategoryTitles]\n\t);\n\n\tconst handleClickCategoryTitle = (\n\t\terror: MouseEvent<HTMLParagraphElement>\n\t) => {\n\t\tconst id = error.currentTarget.dataset.id;\n\t\tconst index = error.currentTarget.dataset.idx;\n\t\tif (!id || !index) return;\n\n\t\tconst { el } = categoryTitles.get(id) || {};\n\t\tif (!el) return;\n\n\t\tconst top = el.getBoundingClientRect().top + document.body.scrollTop - 100;\n\n\t\tconst url = new URL(window.location.href);\n\t\turl.searchParams.set('section', id);\n\t\twindow.history.replaceState({}, '', url.toString());\n\n\t\tdocument.body.scrollTo({\n\t\t\ttop,\n\t\t\tbehavior: 'smooth',\n\t\t});\n\n\t\tlockScrollUpdates(id, isClickScrolling, scrollEndHandlerRef, setVisibleTitle);\n\t};\n\n\tconst sidebarStyle = useSpring({\n\t\topacity: showTOC ? 1 : 0,\n\t\ttransform: showTOC ? 'translateX(0)' : 'translateX(40px)',\n\t\tconfig: config.gentle,\n\t});\n\n\treturn (\n\t\t<div className={styles.blog}>\n\t\t\t{jsonLd && (\n\t\t\t\t<script\n\t\t\t\t\ttype=\"application/ld+json\"\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<div className={styles['blog__content']}>\n\t\t\t\t{Children.map(children, child => {\n\t\t\t\t\tif (!isValidElement(child)) return child;\n\t\t\t\t\treturn cloneElement(child, {\n\t\t\t\t\t\tref: handleSectionReference,\n\t\t\t\t\t} as RefAttributes<ForwardedReference>);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t\t<animated.div className={styles['blog__sidebar']} style={sidebarStyle}>\n\t\t\t\t<p\n\t\t\t\t\tclassName={`${styles['margin-bottom--3']} ${styles['category__header']}`}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</p>\n\t\t\t\t{[...categoryTitles].map(\n\t\t\t\t\t([id, { title, isSubSection }], index, array) => {\n\t\t\t\t\t\tconst isNextSectionSubSection = array[index + 1]?.[1]?.isSubSection;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<p\n\t\t\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\t\t\tdata-idx={index}\n\t\t\t\t\t\t\t\tdata-id={id}\n\t\t\t\t\t\t\t\tclassName={`${styles['category__title']} ${\n\t\t\t\t\t\t\t\t\tid === visibleTitle ? styles['category__title--active'] : ''\n\t\t\t\t\t\t\t\t} ${isSubSection ? styles['category__title--sub'] : ''} ${\n\t\t\t\t\t\t\t\t\tisSubSection && !isNextSectionSubSection\n\t\t\t\t\t\t\t\t\t\t? styles['margin-bottom-imp--2']\n\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\tonClick={handleClickCategoryTitle}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t)}\n\t\t\t</animated.div>\n\t\t</div>\n\t);\n};\n\nexport default Blog;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef, useRef, useImperativeHandle, Children, isValidElement, cloneElement } from 'react';
|
|
4
4
|
import styles from '../styles/BlogSection.module.scss.js';
|
|
5
|
-
import { generateIdForBlogTitle } from '../utils/index.js';
|
|
5
|
+
import { generateIdForBlogTitle, generateSectionHref } from '../utils/index.js';
|
|
6
6
|
|
|
7
7
|
const BlogSection = forwardRef(({ title = '', category = '', children = null, increaseMarginBottom = false, }, forwardedReference) => {
|
|
8
8
|
const titleWithCategory = category ? `${category} - ${title}` : title;
|
|
@@ -33,7 +33,7 @@ const BlogSection = forwardRef(({ title = '', category = '', children = null, in
|
|
|
33
33
|
return (jsxs("div", { className: `${styles['blog-section']}
|
|
34
34
|
${increaseMarginBottom
|
|
35
35
|
? styles['margin-bottom--9']
|
|
36
|
-
: styles['margin-bottom--6']}`, "data-title": title, "data-id": id, ref: parentReference, children: [title ? (jsx("h4", { className: styles['blog-section__title'], children: title })) : null, Children.map(children, child => {
|
|
36
|
+
: styles['margin-bottom--6']}`, "data-title": title, "data-id": id, ref: parentReference, children: [title ? (jsx("h4", { className: styles['blog-section__title'], children: jsx("a", { href: generateSectionHref(id), className: styles['blog-section__title-link'], onClick: e => e.preventDefault(), children: title }) })) : null, Children.map(children, child => {
|
|
37
37
|
if (!isValidElement(child))
|
|
38
38
|
return child;
|
|
39
39
|
return cloneElement(child, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlogSectionDynamic.js","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tChildren,\n\tcloneElement,\n\tforwardRef,\n\tisValidElement,\n\tuseImperativeHandle,\n\tuseRef,\n} from 'react';\n\nimport type { ReactNode, RefAttributes } from 'react';\n\nimport styles from '../styles/BlogSection.module.scss';\n\nimport type { ForwardedReference } from './BlogDynamic';\nimport { generateIdForBlogTitle } from '../utils';\n\ninterface BlogProperties {\n\ttitle?: string;\n\tcategory?: string;\n\tchildren?: ReactNode;\n\tincreaseMarginBottom?: boolean;\n}\n\nconst BlogSection = forwardRef<ForwardedReference, BlogProperties>(\n\t(\n\t\t{\n\t\t\ttitle = '',\n\t\t\tcategory = '',\n\t\t\tchildren = null,\n\t\t\tincreaseMarginBottom = false,\n\t\t}: BlogProperties,\n\t\tforwardedReference\n\t) => {\n\t\tconst titleWithCategory = category ? `${category} - ${title}` : title;\n\t\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\t\tconst parentReference = useRef<ForwardedReference['parentRef']>(null);\n\t\tconst childReferences = useRef<ForwardedReference['childRefs']>([]);\n\t\tconst imperativeHandleRef = useRef<ForwardedReference | null>(null);\n\n\t\tuseImperativeHandle(forwardedReference, () => {\n\t\t\tconst handle = {\n\t\t\t\tparentRef: parentReference.current!,\n\t\t\t\tchildRefs: childReferences.current!,\n\t\t\t};\n\t\t\timperativeHandleRef.current = handle;\n\t\t\treturn handle;\n\t\t});\n\n\t\tconst handleChildReferences = (element: ForwardedReference | null) => {\n\t\t\tif (!element) return;\n\t\t\tconst { parentRef: subParentReference } = element;\n\t\t\tif (!subParentReference) return;\n\t\t\tchildReferences.current.push(subParentReference);\n\n\t\t\t// Re-trigger parent ref callback with updated children\n\t\t\tif (typeof forwardedReference === 'function' && imperativeHandleRef.current) {\n\t\t\t\tforwardedReference(imperativeHandleRef.current);\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={`${styles['blog-section']}\n\t\t\t\t\t${\n\t\t\t\t\t\tincreaseMarginBottom\n\t\t\t\t\t\t\t? styles['margin-bottom--9']\n\t\t\t\t\t\t\t: styles['margin-bottom--6']\n\t\t\t\t\t}`}\n\t\t\t\tdata-title={title}\n\t\t\t\tdata-id={id}\n\t\t\t\tref={parentReference}\n\t\t\t>\n\t\t\t\t{title ? (\n\t\t\t\t\t<h4 className={styles['blog-section__title']}
|
|
1
|
+
{"version":3,"file":"BlogSectionDynamic.js","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tChildren,\n\tcloneElement,\n\tforwardRef,\n\tisValidElement,\n\tuseImperativeHandle,\n\tuseRef,\n} from 'react';\n\nimport type { ReactNode, RefAttributes } from 'react';\n\nimport styles from '../styles/BlogSection.module.scss';\n\nimport type { ForwardedReference } from './BlogDynamic';\nimport { generateIdForBlogTitle, generateSectionHref } from '../utils';\n\ninterface BlogProperties {\n\ttitle?: string;\n\tcategory?: string;\n\tchildren?: ReactNode;\n\tincreaseMarginBottom?: boolean;\n}\n\nconst BlogSection = forwardRef<ForwardedReference, BlogProperties>(\n\t(\n\t\t{\n\t\t\ttitle = '',\n\t\t\tcategory = '',\n\t\t\tchildren = null,\n\t\t\tincreaseMarginBottom = false,\n\t\t}: BlogProperties,\n\t\tforwardedReference\n\t) => {\n\t\tconst titleWithCategory = category ? `${category} - ${title}` : title;\n\t\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\t\tconst parentReference = useRef<ForwardedReference['parentRef']>(null);\n\t\tconst childReferences = useRef<ForwardedReference['childRefs']>([]);\n\t\tconst imperativeHandleRef = useRef<ForwardedReference | null>(null);\n\n\t\tuseImperativeHandle(forwardedReference, () => {\n\t\t\tconst handle = {\n\t\t\t\tparentRef: parentReference.current!,\n\t\t\t\tchildRefs: childReferences.current!,\n\t\t\t};\n\t\t\timperativeHandleRef.current = handle;\n\t\t\treturn handle;\n\t\t});\n\n\t\tconst handleChildReferences = (element: ForwardedReference | null) => {\n\t\t\tif (!element) return;\n\t\t\tconst { parentRef: subParentReference } = element;\n\t\t\tif (!subParentReference) return;\n\t\t\tchildReferences.current.push(subParentReference);\n\n\t\t\t// Re-trigger parent ref callback with updated children\n\t\t\tif (typeof forwardedReference === 'function' && imperativeHandleRef.current) {\n\t\t\t\tforwardedReference(imperativeHandleRef.current);\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={`${styles['blog-section']}\n\t\t\t\t\t${\n\t\t\t\t\t\tincreaseMarginBottom\n\t\t\t\t\t\t\t? styles['margin-bottom--9']\n\t\t\t\t\t\t\t: styles['margin-bottom--6']\n\t\t\t\t\t}`}\n\t\t\t\tdata-title={title}\n\t\t\t\tdata-id={id}\n\t\t\t\tref={parentReference}\n\t\t\t>\n\t\t\t\t{title ? (\n\t\t\t\t\t<h4 className={styles['blog-section__title']}>\n\t\t\t\t\t\t<a href={generateSectionHref(id)} className={styles['blog-section__title-link']} onClick={e => e.preventDefault()}>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</h4>\n\t\t\t\t) : null}\n\t\t\t\t{Children.map(children, child => {\n\t\t\t\t\tif (!isValidElement(child)) return child;\n\t\t\t\t\treturn cloneElement(child, {\n\t\t\t\t\t\tref: handleChildReferences,\n\t\t\t\t\t} as RefAttributes<ForwardedReference>);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nBlogSection.displayName = 'BlogSection';\n\nexport default BlogSection;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAyBA,MAAM,WAAW,GAAG,UAAU,CAC7B,CACC,EACC,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,IAAI,EACf,oBAAoB,GAAG,KAAK,GACZ,EACjB,kBAAkB,KACf;AACH,IAAA,MAAM,iBAAiB,GAAG,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,GAAA,EAAM,KAAK,CAAA,CAAE,GAAG,KAAK;AACrE,IAAA,MAAM,EAAE,GAAG,sBAAsB,CAAC,iBAAiB,CAAC;AAEpD,IAAA,MAAM,eAAe,GAAG,MAAM,CAAkC,IAAI,CAAC;AACrE,IAAA,MAAM,eAAe,GAAG,MAAM,CAAkC,EAAE,CAAC;AACnE,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAA4B,IAAI,CAAC;AAEnE,IAAA,mBAAmB,CAAC,kBAAkB,EAAE,MAAK;AAC5C,QAAA,MAAM,MAAM,GAAG;YACd,SAAS,EAAE,eAAe,CAAC,OAAQ;YACnC,SAAS,EAAE,eAAe,CAAC,OAAQ;SACnC;AACD,QAAA,mBAAmB,CAAC,OAAO,GAAG,MAAM;AACpC,QAAA,OAAO,MAAM;AACd,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,qBAAqB,GAAG,CAAC,OAAkC,KAAI;AACpE,QAAA,IAAI,CAAC,OAAO;YAAE;AACd,QAAA,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,OAAO;AACjD,QAAA,IAAI,CAAC,kBAAkB;YAAE;AACzB,QAAA,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC;;QAGhD,IAAI,OAAO,kBAAkB,KAAK,UAAU,IAAI,mBAAmB,CAAC,OAAO,EAAE;AAC5E,YAAA,kBAAkB,CAAC,mBAAmB,CAAC,OAAO,CAAC;QAChD;AACD,IAAA,CAAC;IAED,QACCA,cACC,SAAS,EAAE,GAAG,MAAM,CAAC,cAAc,CAAC;OAElC;AACC,cAAE,MAAM,CAAC,kBAAkB;AAC3B,cAAE,MAAM,CAAC,kBAAkB,CAC7B,CAAA,CAAE,EAAA,YAAA,EACS,KAAK,EAAA,SAAA,EACR,EAAE,EACX,GAAG,EAAE,eAAe,EAAA,QAAA,EAAA,CAEnB,KAAK,IACLC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,YAC3CA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,mBAAmB,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,cAAc,EAAE,EAAA,QAAA,EAC/G,KAAK,EAAA,CACH,EAAA,CACA,IACF,IAAI,EACP,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,IAAG;AAC/B,gBAAA,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;AAAE,oBAAA,OAAO,KAAK;gBACxC,OAAO,YAAY,CAAC,KAAK,EAAE;AAC1B,oBAAA,GAAG,EAAE,qBAAqB;AACW,iBAAA,CAAC;YACxC,CAAC,CAAC,CAAA,EAAA,CACG;AAER,CAAC;AAGF,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const lockScrollUpdates = (id, isClickScrolling, scrollEndHandlerRef, setVisibleTitle) => {
|
|
2
|
+
if (scrollEndHandlerRef.current) {
|
|
3
|
+
document.body.removeEventListener('scrollend', scrollEndHandlerRef.current);
|
|
4
|
+
}
|
|
5
|
+
isClickScrolling.current = true;
|
|
6
|
+
scrollEndHandlerRef.current = () => {
|
|
7
|
+
isClickScrolling.current = false;
|
|
8
|
+
scrollEndHandlerRef.current = null;
|
|
9
|
+
setVisibleTitle(id);
|
|
10
|
+
const url = new URL(window.location.href);
|
|
11
|
+
url.searchParams.set('section', id);
|
|
12
|
+
window.history.replaceState({}, '', url.toString());
|
|
13
|
+
};
|
|
14
|
+
document.body.addEventListener('scrollend', scrollEndHandlerRef.current, {
|
|
15
|
+
once: true,
|
|
16
|
+
});
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export { lockScrollUpdates as default };
|
|
20
|
+
//# sourceMappingURL=lockScrollUpdates.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lockScrollUpdates.js","sources":["../../../src/dynamicComponents/lockScrollUpdates.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { generateSectionHref } from '../utils';\n\nconst lockScrollUpdates = (\n\tid: string,\n\tisClickScrolling: MutableRefObject<boolean>,\n\tscrollEndHandlerRef: MutableRefObject<(() => void) | null>,\n\tsetVisibleTitle: (id: string) => void\n) => {\n\tif (scrollEndHandlerRef.current) {\n\t\tdocument.body.removeEventListener('scrollend', scrollEndHandlerRef.current);\n\t}\n\n\tisClickScrolling.current = true;\n\n\tscrollEndHandlerRef.current = () => {\n\t\tisClickScrolling.current = false;\n\t\tscrollEndHandlerRef.current = null;\n\t\tsetVisibleTitle(id);\n\t\tconst url = new URL(window.location.href);\n\t\turl.searchParams.set('section', id);\n\t\twindow.history.replaceState({}, '', url.toString());\n\t};\n\n\tdocument.body.addEventListener('scrollend', scrollEndHandlerRef.current, {\n\t\tonce: true,\n\t});\n};\n\nexport default lockScrollUpdates;\n"],"names":[],"mappings":"AAGA,MAAM,iBAAiB,GAAG,CACzB,EAAU,EACV,gBAA2C,EAC3C,mBAA0D,EAC1D,eAAqC,KAClC;AACH,IAAA,IAAI,mBAAmB,CAAC,OAAO,EAAE;QAChC,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,mBAAmB,CAAC,OAAO,CAAC;IAC5E;AAEA,IAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI;AAE/B,IAAA,mBAAmB,CAAC,OAAO,GAAG,MAAK;AAClC,QAAA,gBAAgB,CAAC,OAAO,GAAG,KAAK;AAChC,QAAA,mBAAmB,CAAC,OAAO,GAAG,IAAI;QAClC,eAAe,CAAC,EAAE,CAAC;QACnB,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;QACzC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC;AACnC,QAAA,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;AACpD,IAAA,CAAC;IAED,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,mBAAmB,CAAC,OAAO,EAAE;AACxE,QAAA,IAAI,EAAE,IAAI;AACV,KAAA,CAAC;AACH;;;;"}
|