js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix remember scroll (#148)

Browse Source 
* add data-turbo-track

* add data-turbo-track

* add debugging

* add debugging

* remove nopreview

* move top level

* move top level

* move top level

* remove data-turbo-track

* add comment to base.njk

* prettier
This commit is contained in:
Konnor Rogers
2024-06-25 15:57:43 -04:00
committed by GitHub
parent 1175b02d29
commit 236ecd0240
3 changed files with 32 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/_includes/base.njk
View File

@@ -13,6 +13,9 @@
<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
{# Scripts #}
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.4/+esm"></script>
<script type="module" src="/assets/scripts/code-examples.js"></script>
<script type="module" src="/assets/scripts/color-scheme.js"></script>
<script type="module" src="/assets/scripts/copy-code.js"></script>
@@ -41,8 +44,8 @@
</script>
</head>
<body class="layout-{{ layout | stripExtension }}">
<wa-page>
<!-- use view="desktop" as default to reduce layout jank on desktop site. -->
<wa-page view="desktop">
<header slot="header">
{# Logo #}
<div id="docs-branding">

37
docs/assets/scripts/turbo.js
View File

@@ -1,5 +1,3 @@
import 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm';
if (!window.___turboScrollPositions___) {
window.___turboScrollPositions___ = {};
}
@@ -7,11 +5,11 @@ if (!window.___turboScrollPositions___) {
const positions = window.___turboScrollPositions___;
function saveScrollPosition() {
document.querySelectorAll('[data-remember-scroll]').forEach(el => {
if (el.id) {
positions[el.id] = {
top: el.scrollTop,
left: el.scrollLeft
document.querySelectorAll('[data-remember-scroll]').forEach(element => {
if (element.id) {
positions[element.id] = {
top: element.scrollTop,
left: element.scrollLeft
};
} else {
console.warn(`Can't save scroll position for elements without an id.`, el);
@@ -20,13 +18,28 @@ function saveScrollPosition() {
}
function restoreScrollPosition(event) {
const el = event.detail?.newBody || document;
if (event.detail && event.detail.newBody) {
event.detail.newBody.querySelectorAll('[data-remember-scroll]').forEach(element => {
if (!positions[element.id]) {
return;
}
el.querySelectorAll('[data-remember-scroll]').forEach(el => {
if (positions[el.id]) {
el.scrollTop = positions[el.id].top;
el.scrollLeft = positions[el.id].left;
const { top, left } = positions[element.id];
element.scrollTop = top;
element.scrollLeft = left;
});
}
document.querySelectorAll('[data-remember-scroll]').forEach(element => {
if (!positions[element.id]) {
return;
}
const { top, left } = positions[element.id];
element.scrollTop = top;
element.scrollLeft = left;
});
}

4
docs/assets/styles/docs.css
View File

@@ -98,11 +98,11 @@ wa-page[view='desktop']::part(navigation) {
}
wa-page[view='desktop'] > #sidebar {
overflow: auto;
max-height: 100%;
min-width: 300px;
padding: var(--wa-space-xl);
max-width: 300px;
overflow: auto;
max-height: 100%;
}
#sidebar,