mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

add turbo

new-docs
Konnor Rogers 2023-06-07 17:23:57 -04:00
rodzic b7726cd514
commit ece23c727e
3 zmienionych plików z 70 dodań i 2 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

8
docs/_includes/default.njk
Wyświetl plik

@ -11,6 +11,9 @@
<meta name="description" content="{{ meta.description }}" />
<title>{{ meta.title }}</title>
{# Opt out of Turbo caching #}
<meta name="turbo-cache-control">
{# Stylesheets #}
<link rel="stylesheet" href="{{ assetUrl('styles/docs.css') }}" />
<link rel="stylesheet" href="{{ assetUrl('styles/code-previews.css') }}" />
@ -43,6 +46,9 @@
document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (!theme && prefersDark));
})();
</script>
{# Turbo + Scroll positioning #}
<script type="module" src="{{ assetUrl('scripts/turbo.js') }}"></script>
</head>
<body>
<a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
@ -82,7 +88,7 @@
</button>
</div>
<aside id="sidebar">
<aside id="sidebar" data-preserve-scroll data-turbo-permanent>
<header>
<a href="/">
<img src="{{ assetUrl('images/wordmark.svg') }}" alt="Shoelace" />

2
docs/assets/scripts/docs.js
Wyświetl plik

@ -45,7 +45,7 @@
// Close when clicking outside of the sidebar
document.addEventListener('mousedown', event => {
if (isSidebarOpen() & !event.target.closest('#sidebar, #menu-toggle')) {
if (isSidebarOpen() & !event.target?.closest('#sidebar, #menu-toggle')) {
event.stopImmediatePropagation();
toggleSidebar();
}

62
docs/assets/scripts/turbo.js 100644
Wyświetl plik

@ -0,0 +1,62 @@
import * as Turbo from 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm'
;(() => {
if (!window.scrollPositions) {
window.scrollPositions = {};
}
function preserveScroll () {
document.querySelectorAll("[data-preserve-scroll").forEach((element) => {
scrollPositions[element.id] = element.scrollTop;
})
}
function restoreScroll () {
document.querySelectorAll("[data-preserve-scroll").forEach((element) => {
element.scrollTop = scrollPositions[element.id];
})
}
window.addEventListener("turbo:before-cache", preserveScroll)
window.addEventListener("turbo:before-render", restoreScroll)
window.addEventListener("turbo:render", restoreScroll)
// Do this to prevent jankiness on the sidebar.
// make sure it has data-turbo-permanent
function normalizePathname(pathname) {
// Remove /index.html
if (pathname.endsWith('/index.html')) {
pathname = pathname.replace(/\/index\.html/, '');
}
// Remove trailing slashes
return pathname.replace(/\/$/, '');
}
/**
* Adds a class name to links that are currently active.
*/
function markActiveLinks(_event) {
const options = {
className: 'active-link', // the class to add to active links
pathname: document.location.pathname, // the current pathname to compare
within: 'body', // element containing the target links
};
const within = document.querySelector(options.within);
if (!within) {
return doc;
}
within.querySelectorAll('a').forEach(link => {
if (normalizePathname(options.pathname) === normalizePathname(link.pathname)) {
link.classList.add(options.className);
}
});
return doc;
};
window.addEventListener("turbo:load", markActiveLinks)
})()