Docs for js scripts in app/scripts

[outline4]

app/scripts

Accordion.js
TableSortable.js
AnchorNav.js
BreadcrumbNav.js
MenuMore.js
Navy.js
Popover.js

These scripts are very useful. Is there any docs on them?

I use a static version of the design system and it's hard to reverse engineer the use of js.

Especially on how to use Navy.js or MenuMore.js

This is some of the stuff I had to reverse engineer:

<!--
	Sortable table
-->
<script type="module">
	import TableSortable from '/assets/js/TableSortable.js';
	// Initialisiere TableSortable für diese Tabelle
	const sortableTable = new TableSortable('sortable-table-id');
</script>

<!--
	Accordion
-->
<script type="module">
	import Accordion from '/assets/js/Accordion.js';
	Accordion.init('#accordion-id .accordion__button');
</script>

<!--
	Gallery
-->			
<script type="module">

	import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs';

	// Initialize Swiper for this gallery
	new Swiper('#swiper-id', {
		loop: true,
		spaceBetween: 0,
		slidesPerView: 1,
		autoHeight: true,
		navigation: {
			nextEl: '#next-id',
			prevEl: '#prev-id',
		},
		pagination: {
			el: '#pagination-id',
			clickable: true,
			bulletClass: 'carousel__bullet', // Benutzerdefinierte Klasse für die Bullets
			bulletActiveClass: 'carousel__bullet--active', // Klasse für den aktiven Bullet
		},
		keyboard: {
			enabled: true, // Aktiviert Keyboard-Steuerung
			onlyInViewport: true, // Funktioniert nur, wenn die Swiper-Instanz im Viewport ist
		},
	});
</script>

<!--
	Carousel
-->			
<script type="module">

	import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs';

	document.addEventListener('DOMContentLoaded', function () {

		new Swiper(`#swiper-container-id`, {
			init: true,
			direction: 'horizontal',
			slidesPerView: 3,
			loop: false,
			spaceBetween: 40,
			navigation: {
				nextEl: `#carousel-next-id`,
				prevEl: `#carousel-prev-id`,
			},
			pagination: {
				el: `#carousel-pagination-id`,
				clickable: true,
				bulletClass: 'carousel__bullet',
				bulletActiveClass: 'carousel__bullet--active',
			},
			keyboard: {
				enabled: true,
				onlyInViewport: true,
			},
			breakpoints: {
				// Für Bildschirme unter 480px
				0: {
					slidesPerView: 1,
					spaceBetween: 10,
				},
				// Für Bildschirme unter 768px
				600: {
					slidesPerView: 2,
					spaceBetween: 20,
				},
				// Standard für größere Bildschirme
				900: {
					slidesPerView: 3,
					spaceBetween: 40,
				},
			},

		});
	});
</script>

<script>
	//
	// Mobile menu
	//
	document.getElementById('mobileMenuBurger').addEventListener('click', function() {
		document.body.classList.toggle('body--mobile-menu-is-open');
	});

	//
	// Top bar drawer
	//
	document.getElementById('top-bar-button').addEventListener('click', function() {
		var topBar = document.querySelector('.top-bar');
		var topBarDrawer = document.querySelector('.top-bar__drawer');

		// Toggle der Klasse 'top-bar--is-open' auf .top-bar
		topBar.classList.toggle('top-bar--is-open');

		// Toggle der Klasse 'hidden' auf .top-bar__drawer
		topBarDrawer.classList.toggle('hidden');
	});	
</script>

Where can I find docs on this?

Possible that I miss something very obvious.

-Stefan