rwsdk 0.1.29 → 0.1.30
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/runtime/clientNavigation.js +19 -65
- package/package.json +1 -1
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
function saveScrollPosition(x, y) {
|
|
2
|
+
window.history.replaceState({
|
|
3
|
+
...window.history.state,
|
|
4
|
+
scrollX: x,
|
|
5
|
+
scrollY: y,
|
|
6
|
+
}, "", window.location.href);
|
|
7
|
+
}
|
|
1
8
|
export function validateClickEvent(event, target) {
|
|
2
9
|
// should this only work for left click?
|
|
3
10
|
if (event.button !== 0) {
|
|
@@ -31,7 +38,6 @@ export function validateClickEvent(event, target) {
|
|
|
31
38
|
return true;
|
|
32
39
|
}
|
|
33
40
|
export function initClientNavigation(opts = {}) {
|
|
34
|
-
// Merge user options with defaults
|
|
35
41
|
const options = {
|
|
36
42
|
onNavigate: async function onNavigate() {
|
|
37
43
|
// @ts-expect-error
|
|
@@ -41,63 +47,7 @@ export function initClientNavigation(opts = {}) {
|
|
|
41
47
|
scrollBehavior: "instant",
|
|
42
48
|
...opts,
|
|
43
49
|
};
|
|
44
|
-
|
|
45
|
-
if ("scrollRestoration" in history) {
|
|
46
|
-
history.scrollRestoration = "manual";
|
|
47
|
-
}
|
|
48
|
-
// Set up scroll behavior management
|
|
49
|
-
let popStateWasCalled = false;
|
|
50
|
-
let savedScrollPosition = null;
|
|
51
|
-
const observer = new MutationObserver(() => {
|
|
52
|
-
if (popStateWasCalled && savedScrollPosition) {
|
|
53
|
-
// Restore scroll position for popstate navigation (always instant)
|
|
54
|
-
window.scrollTo({
|
|
55
|
-
top: savedScrollPosition.y,
|
|
56
|
-
left: savedScrollPosition.x,
|
|
57
|
-
behavior: "instant",
|
|
58
|
-
});
|
|
59
|
-
savedScrollPosition = null;
|
|
60
|
-
}
|
|
61
|
-
else if (options.scrollToTop && !popStateWasCalled) {
|
|
62
|
-
// Scroll to top for anchor click navigation (configurable)
|
|
63
|
-
window.scrollTo({
|
|
64
|
-
top: 0,
|
|
65
|
-
left: 0,
|
|
66
|
-
behavior: options.scrollBehavior,
|
|
67
|
-
});
|
|
68
|
-
// Update the current history entry with the new scroll position (top)
|
|
69
|
-
// This ensures that if we navigate back and then forward again,
|
|
70
|
-
// we return to the top position, not some previous scroll position
|
|
71
|
-
window.history.replaceState({
|
|
72
|
-
...window.history.state,
|
|
73
|
-
scrollX: 0,
|
|
74
|
-
scrollY: 0,
|
|
75
|
-
}, "", window.location.href);
|
|
76
|
-
}
|
|
77
|
-
popStateWasCalled = false;
|
|
78
|
-
});
|
|
79
|
-
const handleScrollPopState = (event) => {
|
|
80
|
-
popStateWasCalled = true;
|
|
81
|
-
// Save the scroll position that the browser would have restored to
|
|
82
|
-
const state = event.state;
|
|
83
|
-
if (state &&
|
|
84
|
-
typeof state === "object" &&
|
|
85
|
-
"scrollX" in state &&
|
|
86
|
-
"scrollY" in state) {
|
|
87
|
-
savedScrollPosition = { x: state.scrollX, y: state.scrollY };
|
|
88
|
-
}
|
|
89
|
-
else {
|
|
90
|
-
// Fallback: try to get scroll position from browser's session history
|
|
91
|
-
// This is a best effort since we can't directly access the browser's stored position
|
|
92
|
-
savedScrollPosition = { x: window.scrollX, y: window.scrollY };
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
const main = document.querySelector("main") || document.body;
|
|
96
|
-
if (main) {
|
|
97
|
-
window.addEventListener("popstate", handleScrollPopState);
|
|
98
|
-
observer.observe(main, { childList: true, subtree: true });
|
|
99
|
-
}
|
|
100
|
-
// Intercept all anchor tag clicks
|
|
50
|
+
history.scrollRestoration = "auto";
|
|
101
51
|
document.addEventListener("click", async function handleClickEvent(event) {
|
|
102
52
|
// Prevent default navigation
|
|
103
53
|
if (!validateClickEvent(event, event.target)) {
|
|
@@ -107,17 +57,21 @@ export function initClientNavigation(opts = {}) {
|
|
|
107
57
|
const el = event.target;
|
|
108
58
|
const a = el.closest("a");
|
|
109
59
|
const href = a?.getAttribute("href");
|
|
110
|
-
|
|
111
|
-
window.history.replaceState({
|
|
112
|
-
path: window.location.pathname,
|
|
113
|
-
scrollX: window.scrollX,
|
|
114
|
-
scrollY: window.scrollY,
|
|
115
|
-
}, "", window.location.href);
|
|
60
|
+
saveScrollPosition(window.scrollX, window.scrollY);
|
|
116
61
|
window.history.pushState({ path: href }, "", window.location.origin + href);
|
|
117
62
|
await options.onNavigate();
|
|
63
|
+
if (options.scrollToTop && history.scrollRestoration === "auto") {
|
|
64
|
+
window.scrollTo({
|
|
65
|
+
top: 0,
|
|
66
|
+
left: 0,
|
|
67
|
+
behavior: options.scrollBehavior,
|
|
68
|
+
});
|
|
69
|
+
saveScrollPosition(0, 0);
|
|
70
|
+
}
|
|
71
|
+
history.scrollRestoration = "auto";
|
|
118
72
|
}, true);
|
|
119
|
-
// Handle browser back/forward buttons
|
|
120
73
|
window.addEventListener("popstate", async function handlePopState() {
|
|
74
|
+
saveScrollPosition(window.scrollX, window.scrollY);
|
|
121
75
|
await options.onNavigate();
|
|
122
76
|
});
|
|
123
77
|
// Return a handleResponse function for use with initClient
|