JavaScript
Module
Der Großteil des JavaSript-Codes wird in JavaScript-Modulen geschrieben und verwendet ES6 Syntax. Der Code wird nicht in ältere ECMAScript-Versionen kompiliert. JavaScript-Module werden nur in Browsern ausgeführt, die Module unterstützen.
Bei der Einbindung muss das type="module" Attribut angegeben werden.
<script src="/assets/130/js/components/modal.min.js" type="module" crossorigin="use-credentials"></script>Übersicht der Module
| Name | Anwendung | Version |
|---|---|---|
| accordion | Akkordeon-Komponente | 1.0.0 |
| announcement | Ankündigung-Komponente | 1.0.0 |
| block-link | Global | 1.0.0 |
| breaking-news | Ankündigung-Komponente | 1.0.0 |
| card | Card-Komponente | 1.0.0 |
| carousel | Karussell-Komponente | 1.0.0 |
| copyright | Bei Bildern | 1.0.0 |
| copy-to-clipboard | Global | 1.0.0 |
| dropdown | Dropdown-Komponente | 1.0.0 |
| flip-card | Card-Komponente | 1.0.0 |
| footnote | Fußnoten-Komponente | 1.0.0 |
| forms | In Formularen | 1.0.0 |
| map | Map-Komponente | 1.0.0 |
| modal | Lightbox-Komponente | 1.0.0 |
| nav-inpage | In-Page-Navigation-Komponente | 1.0.0 |
| quicklinks | Quicklinks-Komponente | 1.0.0 |
| scrollspy | Global | 1.0.0 |
| search | Suche im Header | 1.0.0 |
| search-toggle | Suche im Header | 1.0.0 |
| skip-links | Skip Links | 1.0.0 |
| tables | Global | 1.0.0 |
| tabs | Reiter-Komponente | 1.0.0 |
| toggle | Toggle-Komponente | 1.0.0 |
| toggle-button | Toggle Button-Komponente | 1.0.0 |
| anchor | Global | 1.0.0 |
| alpine.min | Global | 1.0.0 |
| alpine.persist.min | Global | 1.0.0 |
| alpine.focus.min | Global | 1.0.0 |
| alpine.morph.min | Global | 1.0.0 |
| alpine.collapse.min | Global | 1.0.0 |
| alpine.intersect.min | Global | 1.0.0 |
Nicht-Module
Die Datei main-1.x.x.min.js wird nicht als Modul eingebunden, weil sie Kernfunktionalität beinhaltet, die an alle Browser geliefert werden soll. Die Datei hat folgende Aufgaben:
- Lazy-Loading von Bildern (Natives Lazy-Loading mit Fallback auf
Intersection Observerbeziehungsweisescroll-Event) - Funktionalität der Hauptnavigation mobil und am Desktop
- Abspielen von Videos in der Stage
- Darstellung von Hinweis-Bannern
- Setzen der
--vhCustom Property für die optimierte Darstellung von full-height Overlays auf Smartphones - Initialisierung von
wmBodyLock, um Scrolling des Hintergrundes bei Overlays zu verhindern
<script src="/assets/130/js/main.min.js"></script>Third-Party JavaScript
Auf die Abhängigkeit von Third-Party Skripten wird so gut es geht verzichtet, wobei es 2 Ausnahmen gibt.
- Im Map-Modul wird Leaflet geladen.
- Im Karussell-Modul wird tiny-slider geladen.
Polyfills
Bei der Entwicklung von Patterns werden die „Rule of Least Power” und Progressive Enhancement Prinzipien verfolgt (mehr dazu in den Anforderungen). In seltenen Ausnahmen, wenn die Verwendung Vorteile für die Barrierefreiheit oder Performance bringt, kommen Polyfills zum Einsatz.
Polyfills für Legacy Browser
Wenn Polyfills nur für Legacy Browser, wie Internet Explorer, gedacht sind, müssen diese mit dem nomodule Attribut gekennzeichnet werden.
Polyfill für externe Icon Sprite Sheets
<script src="/assets/130/js/polyfill/svgxuse.js" nomodule async></script>BenutzerInnen-definiertes JavaScript
Die mit dem Theme mitgelieferten JavaScript-Dateien dürfen unter keinen Umständen verändert werden. Wenn das Theme die gewünschten Anforderungen nicht erfüllt, wenden Sie sich bitte an die Redaktion, die Ihnen Alternativen oder Lösungsmöglichkeiten vorschlagen wird.