Skip to content

Commit 3adcede

Browse files
authored
Fix scrollTop when navigating through pages (#698)
* Fix `scrollTop` when navigating through pages * Other small fixes
1 parent f050e84 commit 3adcede

File tree

2 files changed

+13
-14
lines changed

2 files changed

+13
-14
lines changed

docs/_docset.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ subs:
1111
eck: "Elastic Cloud on Kubernetes"
1212

1313
features:
14-
primary-nav: true
14+
primary-nav: false
1515

1616
toc:
1717
- file: index.md

src/Elastic.Markdown/Assets/main.ts

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// @ts-nocheck
12
import "htmx.org"
23
import "htmx-ext-preload"
34
import {initTocNav} from "./toc-nav";
@@ -6,7 +7,6 @@ import {initTabs} from "./tabs";
67
import {initCopyButton} from "./copybutton";
78
import {initNav} from "./pages-nav";
89
import {$, $$} from "select-dom"
9-
import htmx from "htmx.org";
1010

1111
document.addEventListener('htmx:load', function() {
1212
initTocNav();
@@ -16,33 +16,32 @@ document.addEventListener('htmx:load', function() {
1616
initNav();
1717
});
1818

19-
document.body.addEventListener('htmx:oobAfterSwap', function(event) {
20-
if (event.target.id === 'markdown-content') {
19+
document.body.addEventListener('htmx:oobBeforeSwap', function(event) {
20+
// This is needed to scroll to the top of the page when the content is swapped
21+
if (event.target.id === 'markdown-content' || event.target.id === 'content-container') {
2122
window.scrollTo(0, 0);
2223
}
2324
});
2425

2526
document.body.addEventListener('htmx:pushedIntoHistory', function(event) {
26-
const currentNavItem = $$('.current');
27+
const pagesNav = $('#pages-nav');
28+
const currentNavItem = $$('.current', pagesNav);
2729
currentNavItem.forEach(el => {
2830
el.classList.remove('current');
2931
})
30-
// @ts-ignore
31-
const navItems = $$('a[href="' + event.detail.path + '"]');
32+
const navItems = $$('a[href="' + event.detail.path + '"]', pagesNav);
3233
navItems.forEach(navItem => {
3334
navItem.classList.add('current');
3435
});
3536
});
3637

3738
document.body.addEventListener('htmx:responseError', function(event) {
38-
// event.preventDefault();
39-
39+
// If you get a 404 error while clicking on a hx-get link, actually open the link
40+
// This is needed because the browser doesn't update the URL when the response is a 404
41+
// In production, cloudfront handles serving the 404 page.
42+
// Locally, the DocumentationWebHost handles it.
43+
// On previews, a generic 404 page is shown.
4044
if (event.detail.xhr.status === 404) {
4145
window.location.assign(event.detail.pathInfo.requestPath);
4246
}
43-
44-
// const rootPath = $('body').dataset.rootPath;
45-
// window.history.pushState({ path: event.detail.pathInfo.requestPath }, '', event.detail.pathInfo.requestPath);
46-
// htmx.ajax('get', rootPath + 'not-found', { select: '#main-container', target: '#main-container' }).then(() => {
47-
// });
4847
});

0 commit comments

Comments
 (0)