jjj 0.2.1

A modal interface for Jujutsu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

---
/*
  This component is designed to wrap the tree of `<SidebarSublist>` components in the sidebar.

  It does the following:
  - Wraps the tree in an `<sl-sidebar-state-persist>` custom element
  - Before the tree renders, adds an inline script which loads state and defines
  the behaviour for the `<sl-sidebar-restore>` custom element.
  - After the tree renders, adds an inline script which restores the sidebar scroll state.

  Notes:
  - On smaller viewports, restoring state is skipped as the sidebar is collapsed inside a menu.
  - The state is parsed from session storage and restored.
  - This is a progressive enhancement, so any errors are swallowed silently.

  The `aria-hidden` attribute on script tags is used to prevent a Safari/VoiceOver bug where the
  script is read out loud due to them being inside a container with `display: contents`.
  @see https://bugs.webkit.org/show_bug.cgi?id=283645
  @see https://github.com/withastro/starlight/pull/2633
*/

import { getSidebarHash } from '../utils/navigation';

const hash = getSidebarHash(Astro.locals.starlightRoute.sidebar);

declare global {
	interface Window {
		/** Restored scroll position. Briefly stored on the `window` global to pass between inline scripts. */
		_starlightScrollRestore?: number;
	}
}
---

<sl-sidebar-state-persist data-hash={hash}>
	<script is:inline aria-hidden="true">
		(() => {
			try {
				if (!matchMedia('(min-width: 50em)').matches) return;
				/** @type {HTMLElement | null} */
				const target = document.querySelector('sl-sidebar-state-persist');
				const state = JSON.parse(sessionStorage.getItem('sl-sidebar-state') || '0');
				if (!target || !state || target.dataset.hash !== state.hash) return;
				window._starlightScrollRestore = state.scroll;
				customElements.define(
					'sl-sidebar-restore',
					class SidebarRestore extends HTMLElement {
						connectedCallback() {
							try {
								const idx = parseInt(this.dataset.index || '');
								const details = this.closest('details');
								if (details && typeof state.open[idx] === 'boolean') details.open = state.open[idx];
							} catch {}
						}
					}
				);
			} catch {}
		})();
	</script>

	<slot />

	<script is:inline aria-hidden="true">
		(() => {
			const scroller = document.getElementById('starlight__sidebar');
			if (!window._starlightScrollRestore || !scroller) return;
			scroller.scrollTop = window._starlightScrollRestore;
			delete window._starlightScrollRestore;
		})();
	</script>
</sl-sidebar-state-persist>

<style>
	sl-sidebar-state-persist {
		display: contents;
	}
</style>