@domql/router 2.3.134 → 2.3.136
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/index.js +37 -33
- package/index.js +32 -30
- package/package.json +2 -2
package/dist/cjs/index.js
CHANGED
|
@@ -26,8 +26,12 @@ __export(router_exports, {
|
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(router_exports);
|
|
28
28
|
var import_globals = require("@domql/globals");
|
|
29
|
-
|
|
30
|
-
const
|
|
29
|
+
const getActiveRoute = (level = 0, route = import_globals.window.location.pathname) => {
|
|
30
|
+
const routeArray = route.split("/");
|
|
31
|
+
const activeRoute = routeArray[level + 1];
|
|
32
|
+
if (activeRoute)
|
|
33
|
+
return `/${activeRoute}`;
|
|
34
|
+
};
|
|
31
35
|
let lastPathname;
|
|
32
36
|
let lastLevel = 0;
|
|
33
37
|
const defaultOptions = {
|
|
@@ -38,52 +42,52 @@ const defaultOptions = {
|
|
|
38
42
|
scrollToNode: false,
|
|
39
43
|
scrollNode: import_globals.document && import_globals.document.documentElement,
|
|
40
44
|
scrollBody: false,
|
|
41
|
-
scrollDocument: true,
|
|
42
45
|
useFragment: false,
|
|
43
46
|
updateState: true,
|
|
44
47
|
scrollToOffset: 0,
|
|
45
48
|
scrollToOptions: { behavior: "smooth" }
|
|
46
49
|
};
|
|
47
|
-
const router = (path, element, state = {},
|
|
48
|
-
|
|
50
|
+
const router = (path, element, state = {}, passedOptions = {}) => {
|
|
51
|
+
const options = { ...defaultOptions, ...passedOptions };
|
|
49
52
|
lastLevel = options.lastLevel;
|
|
50
53
|
const [pathname, hash] = path.split("#");
|
|
51
54
|
const rootNode = element.node;
|
|
52
|
-
const route = getActiveRoute(
|
|
53
|
-
const content = element.routes[route] || element.routes["/*"];
|
|
54
|
-
const scrollNode = options.
|
|
55
|
+
const route = getActiveRoute(options.level, pathname);
|
|
56
|
+
const content = element.routes[route || "/"] || element.routes["/*"];
|
|
57
|
+
const scrollNode = options.scrollToNode ? rootNode : options.scrollNode;
|
|
55
58
|
const hashChanged = hash && hash !== import_globals.window.location.hash.slice(1);
|
|
56
59
|
const pathChanged = pathname !== lastPathname;
|
|
57
60
|
lastPathname = pathname;
|
|
58
|
-
if (content)
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
if (options.scrollToTop) {
|
|
70
|
-
scrollNode.scrollTo({
|
|
71
|
-
...options.scrollToOptions || {},
|
|
72
|
-
top: 0,
|
|
73
|
-
left: 0
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
if (options.scrollToNode) {
|
|
77
|
-
content.content.node.scrollTo({
|
|
78
|
-
...options.scrollToOptions || {},
|
|
79
|
-
top: 0,
|
|
80
|
-
left: 0
|
|
81
|
-
});
|
|
61
|
+
if (!content)
|
|
62
|
+
return;
|
|
63
|
+
if (options.pushState) {
|
|
64
|
+
import_globals.window.history.pushState(state, null, pathname + (hash ? `#${hash}` : ""));
|
|
65
|
+
}
|
|
66
|
+
if (pathChanged || !hashChanged) {
|
|
67
|
+
if (options.updateState) {
|
|
68
|
+
element.state.update({ route, hash }, { preventContentUpdate: true });
|
|
82
69
|
}
|
|
70
|
+
element.set({
|
|
71
|
+
tag: options.useFragment && "fragment",
|
|
72
|
+
extend: content
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
if (options.scrollToTop) {
|
|
76
|
+
scrollNode.scrollTo({
|
|
77
|
+
...options.scrollToOptions || {},
|
|
78
|
+
top: 0,
|
|
79
|
+
left: 0
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
if (options.scrollToNode) {
|
|
83
|
+
content.content.node.scrollTo({
|
|
84
|
+
...options.scrollToOptions || {},
|
|
85
|
+
top: 0,
|
|
86
|
+
left: 0
|
|
87
|
+
});
|
|
83
88
|
}
|
|
84
89
|
if (hash) {
|
|
85
90
|
const activeNode = import_globals.document.getElementById(hash);
|
|
86
|
-
console.log(hash, activeNode);
|
|
87
91
|
if (activeNode) {
|
|
88
92
|
const top = activeNode.getBoundingClientRect().top + rootNode.scrollTop - options.scrollToOffset || 0;
|
|
89
93
|
scrollNode.scrollTo({
|
package/index.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
|
|
3
3
|
import { document, window } from '@domql/globals'
|
|
4
|
-
import { merge } from '@domql/utils'
|
|
5
4
|
|
|
6
|
-
export const getActiveRoute = (
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
export const getActiveRoute = (level = 0, route = window.location.pathname) => {
|
|
6
|
+
const routeArray = route.split('/')
|
|
7
|
+
const activeRoute = routeArray[level + 1]
|
|
8
|
+
if (activeRoute) return `/${activeRoute}`
|
|
9
|
+
}
|
|
9
10
|
|
|
10
11
|
export let lastPathname
|
|
11
12
|
export let lastLevel = 0
|
|
@@ -18,7 +19,6 @@ const defaultOptions = {
|
|
|
18
19
|
scrollToNode: false,
|
|
19
20
|
scrollNode: document && document.documentElement,
|
|
20
21
|
scrollBody: false,
|
|
21
|
-
scrollDocument: true,
|
|
22
22
|
useFragment: false,
|
|
23
23
|
updateState: true,
|
|
24
24
|
scrollToOffset: 0,
|
|
@@ -29,48 +29,50 @@ export const router = (
|
|
|
29
29
|
path,
|
|
30
30
|
element,
|
|
31
31
|
state = {},
|
|
32
|
-
|
|
32
|
+
passedOptions = {}
|
|
33
33
|
) => {
|
|
34
|
-
|
|
34
|
+
const options = { ...defaultOptions, ...passedOptions }
|
|
35
35
|
lastLevel = options.lastLevel
|
|
36
36
|
|
|
37
37
|
const [pathname, hash] = path.split('#')
|
|
38
38
|
|
|
39
39
|
const rootNode = element.node
|
|
40
|
-
const route = getActiveRoute(
|
|
41
|
-
const content = element.routes[route] || element.routes['/*']
|
|
42
|
-
const scrollNode = options.
|
|
40
|
+
const route = getActiveRoute(options.level, pathname)
|
|
41
|
+
const content = element.routes[route || '/'] || element.routes['/*']
|
|
42
|
+
const scrollNode = options.scrollToNode ? rootNode : options.scrollNode
|
|
43
43
|
const hashChanged = hash && hash !== window.location.hash.slice(1)
|
|
44
44
|
const pathChanged = pathname !== lastPathname
|
|
45
45
|
lastPathname = pathname
|
|
46
46
|
|
|
47
|
-
if (content)
|
|
48
|
-
|
|
47
|
+
if (!content) return
|
|
48
|
+
if (options.pushState) {
|
|
49
|
+
window.history.pushState(state, null, pathname + (hash ? `#${hash}` : ''))
|
|
50
|
+
}
|
|
49
51
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
element.state.update({ route, hash }, {
|
|
54
|
-
preventContentUpdate: !options.stateContentUpdate
|
|
55
|
-
})
|
|
56
|
-
}
|
|
52
|
+
if (pathChanged || !hashChanged) {
|
|
53
|
+
if (options.updateState) {
|
|
54
|
+
element.state.update({ route, hash }, { preventContentUpdate: true })
|
|
57
55
|
}
|
|
58
56
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
})
|
|
68
|
-
}
|
|
57
|
+
element.set({
|
|
58
|
+
tag: options.useFragment && 'fragment',
|
|
59
|
+
extend: content
|
|
60
|
+
})
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
if (options.scrollToTop) {
|
|
64
|
+
scrollNode.scrollTo({
|
|
65
|
+
...(options.scrollToOptions || {}), top: 0, left: 0
|
|
66
|
+
})
|
|
67
|
+
}
|
|
68
|
+
if (options.scrollToNode) {
|
|
69
|
+
content.content.node.scrollTo({
|
|
70
|
+
...(options.scrollToOptions || {}), top: 0, left: 0
|
|
71
|
+
})
|
|
69
72
|
}
|
|
70
73
|
|
|
71
74
|
if (hash) {
|
|
72
75
|
const activeNode = document.getElementById(hash)
|
|
73
|
-
console.log(hash, activeNode)
|
|
74
76
|
if (activeNode) {
|
|
75
77
|
const top = activeNode.getBoundingClientRect().top + rootNode.scrollTop - options.scrollToOffset || 0
|
|
76
78
|
scrollNode.scrollTo({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@domql/router",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.136",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"@domql/globals": "latest",
|
|
26
26
|
"@domql/utils": "latest"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "4014d9ecfc6c7b6c1dd7019848786c9b6a0e41e3",
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@babel/core": "^7.12.0"
|
|
31
31
|
}
|