API / data-fwt-*

Utilities / API

Die FWT-API ist eine kleine HTML- und JavaScript-Grundlage. Sie nutzt data-fwt-*-Attribute, um einfache Komfortfunktionen einheitlich auszulösen.

Das ist keine Server-API. Es geht um kleine Frontend-Funktionen wie Ein-/Ausblenden, Schließen, Kopieren, Scrollen, Fokus setzen und automatische Initialisierung.

Wichtig: JavaScript ergänzt die Oberfläche. Grundlegende Inhalte sollten nicht ausschließlich von JavaScript abhängig sein.

Einbindung

fwt-core.js einbinden

Die zentrale Datei sollte vor spezialisierten FWT-Skripten geladen werden.

<script src="../assets/js/fwt-core.js?v=20260602-1" defer></script>

Spezialskripte wie Navigation oder MiniEditor können danach geladen werden.

Toggle

data-fwt-toggle

data-fwt-toggle öffnet oder schließt einen Zielbereich. Das Ziel wird über data-fwt-target angegeben.

Live-Beispiel

Toggle-Beispiel

Der Button öffnet oder schließt den Zielbereich. Der eingeblendete Bereich ist absichtlich deutlich gestaltet, damit die Funktion sofort sichtbar wird.

HTML-Code anzeigen

<div class="fwt-card fwt-bg-accent-left">
    <h3 class="fwt-card-title">Toggle-Beispiel</h3>

    <p class="fwt-card-text">
        Der Button öffnet oder schließt den Zielbereich. Der eingeblendete Bereich
        ist absichtlich deutlich gestaltet, damit die Funktion sofort sichtbar wird.
    </p>

    <button
        class="fwt-btn fwt-btn-primary"
        type="button"
        data-fwt-toggle
        data-fwt-target="#api-toggle-panel"
        aria-controls="api-toggle-panel"
    >
        Bereich ein-/ausblenden
    </button>

    <div
        id="api-toggle-panel"
        class="fwt-alert fwt-alert-success fwt-alert-with-icon fwt-mt-4"
        hidden
    >
        <span class="fwt-alert-icon" aria-hidden="true">✓</span>

        <div class="fwt-alert-body">
            <h4 class="fwt-alert-title">Jetzt sichtbar</h4>

            <p class="fwt-alert-text">
                Dieser Bereich wurde über <code>data-fwt-toggle</code> eingeblendet.
                Beim nächsten Klick wird er wieder versteckt.
            </p>
        </div>
    </div>
</div>

Dismiss

data-fwt-dismiss

data-fwt-dismiss blendet einen Hinweis, Alert oder anderen schließbaren Bereich aus.

Live-Beispiel

Schließbarer Hinweis

Klicke auf das Kreuz. Der komplette Hinweis wird ausgeblendet.

HTML-Code anzeigen

<div
    id="api-dismiss-panel"
    class="fwt-alert fwt-alert-warning fwt-alert-with-icon"
    data-fwt-dismissable
>
    <span class="fwt-alert-icon" aria-hidden="true">!</span>

    <div class="fwt-alert-body">
        <div class="fwt-alert-header">
            <div>
                <h3 class="fwt-alert-title">Schließbarer Hinweis</h3>

                <p class="fwt-alert-text">
                    Klicke auf das Kreuz. Der komplette Hinweis wird ausgeblendet.
                </p>
            </div>

            <button
                class="fwt-alert-close"
                type="button"
                data-fwt-dismiss
                data-fwt-target="#api-dismiss-panel"
                aria-label="Hinweis schließen"
            >
                ×
            </button>
        </div>
    </div>
</div>

Copy

data-fwt-copy

data-fwt-copy kopiert Text aus einem Zielbereich in die Zwischenablage. Das ist praktisch für Codebeispiele, Klassenlisten oder Konfigurationswerte.

Live-Beispiel

Code kopieren

<button data-fwt-toggle data-fwt-target="#panel">
    Öffnen
</button>

Das Kopieren nutzt die Clipboard-API des Browsers. Je nach Browser und Umgebung kann dafür eine sichere Verbindung nötig sein.

HTML-Code anzeigen

<div class="fwt-card">
    <div class="fwt-label-row fwt-label-row-between">
        <h3 class="fwt-card-title">Code kopieren</h3>

        <button
            class="fwt-btn fwt-btn-secondary"
            type="button"
            data-fwt-copy="#api-copy-code"
            data-fwt-copy-success="Kopiert"
            data-fwt-copy-error="Nicht möglich"
        >
            Code kopieren
        </button>
    </div>

    <pre id="api-copy-code" class="fwt-bg-readable fwt-overflow-auto fwt-mt-4"><code>&lt;button data-fwt-toggle data-fwt-target="#panel"&gt;
    Öffnen
&lt;/button&gt;</code></pre>

    <p class="fwt-card-text">
        Das Kopieren nutzt die Clipboard-API des Browsers. Je nach Browser und Umgebung
        kann dafür eine sichere Verbindung nötig sein.
    </p>
</div>

Ehrlicher Hinweis: Die Clipboard-API funktioniert nicht in jeder Umgebung gleich. Auf manchen internen HTTP-Seiten kann das Kopieren vom Browser blockiert werden.

Scroll

data-fwt-scroll

data-fwt-scroll springt zu einem Zielbereich. Wenn Nutzer reduzierte Bewegung eingestellt haben, wird ohne weiches Scrollen gesprungen.

Live-Beispiel

Scroll-Ziel

Der Button springt zum Zielbereich. Bei reduzierter Bewegung wird nicht weich gescrollt.

Zielbereich

Dieser Bereich kann nach dem Scrollen fokussiert werden.

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Scroll-Ziel</h3>

    <p class="fwt-card-text">
        Der Button springt zum Zielbereich. Bei reduzierter Bewegung wird nicht weich gescrollt.
    </p>

    <button
        class="fwt-btn fwt-btn-primary"
        type="button"
        data-fwt-scroll="#api-scroll-target"
    >
        Zum Ziel springen
    </button>

    <div
        id="api-scroll-target"
        class="fwt-alert fwt-alert-success fwt-mt-5"
        tabindex="-1"
    >
        <h4 class="fwt-alert-title">Zielbereich</h4>
        <p class="fwt-alert-text">
            Dieser Bereich kann nach dem Scrollen fokussiert werden.
        </p>
    </div>
</div>

Current Year

data-fwt-current-year

data-fwt-current-year setzt automatisch das aktuelle Jahr. Das ist nützlich für Footer und Copyright-Zeilen.

Live-Beispiel

HTML-Code anzeigen

<footer class="fwt-card">
    <h3 class="fwt-card-title">Aktuelles Jahr</h3>

    <p class="fwt-card-text">
        © <span data-fwt-current-year></span> Freie Webtools
    </p>
</footer>

Fokus

data-fwt-focus-target

data-fwt-focus-target setzt den Fokus auf ein bestimmtes Element. Das ist besonders hilfreich für Suchfelder, geöffnete Panels oder Dialoge.

Live-Beispiel

Fokus setzen

Der Button setzt den Fokus direkt in das Suchfeld.

Suche

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Fokus setzen</h3>

    <p class="fwt-card-text">
        Der Button setzt den Fokus direkt in das Suchfeld.
    </p>

    <div class="fwt-btn-group">
        <button
            class="fwt-btn fwt-btn-secondary"
            type="button"
            data-fwt-focus-target="#api-focus-search"
        >
            Suche fokussieren
        </button>
    </div>

    <div class="fwt-form-group fwt-mt-4">
        <label class="fwt-label" for="api-focus-search">
            Suche
        </label>

        <input
            class="fwt-input"
            id="api-focus-search"
            type="search"
            placeholder="Suchbegriff eingeben"
        >
    </div>
</div>

Kombiniert

Toggle und Fokus kombinieren

Toggle und Fokus lassen sich kombinieren. Dadurch kann ein Bereich geöffnet und direkt ein Eingabefeld fokussiert werden.

Live-Beispiel

Kombiniertes Beispiel

Toggle öffnet den Bereich und setzt danach den Fokus in das Eingabefeld.

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Kombiniertes Beispiel</h3>

    <p class="fwt-card-text">
        Toggle öffnet den Bereich und setzt danach den Fokus in das Eingabefeld.
    </p>

    <button
        class="fwt-btn fwt-btn-primary"
        type="button"
        data-fwt-toggle
        data-fwt-target="#api-combined-panel"
        data-fwt-focus-target="#api-combined-input"
        aria-controls="api-combined-panel"
    >
        Suche öffnen
    </button>

    <div id="api-combined-panel" class="fwt-card fwt-mt-4" hidden>
        <div class="fwt-form-group">
            <label class="fwt-label" for="api-combined-input">
                Suchbegriff
            </label>

            <input
                class="fwt-input"
                id="api-combined-input"
                type="search"
                placeholder="Direkt fokussiert"
            >
        </div>
    </div>
</div>

Initialisierung

window.FWT.init()

Beim Laden der Seite initialisiert FWT automatisch alle bekannten data-fwt-*-Elemente. Wenn später Inhalte nachgeladen werden, kann window.FWT.init(container) erneut aufgerufen werden.

Code-Beispiel

Nachgeladenen Inhalt initialisieren

Wenn Inhalte später per Ajax oder Fetch eingefügt werden, kann FWT erneut für diesen Bereich gestartet werden.

const container = document.querySelector('#neuer-inhalt');

window.FWT.init(container);

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Nachgeladenen Inhalt initialisieren</h3>

    <p class="fwt-card-text">
        Wenn Inhalte später per Ajax oder Fetch eingefügt werden, kann FWT erneut
        für diesen Bereich gestartet werden.
    </p>

    <pre class="fwt-bg-readable fwt-overflow-auto"><code>const container = document.querySelector('#neuer-inhalt');

window.FWT.init(container);</code></pre>
</div>

Hinweise

API richtig verwenden

Kein JavaScript-Zwang

Inhalte sollten grundsätzlich sinnvoll bleiben, auch wenn JavaScript ausfällt.

HTML zuerst, JS als Komfort

Ziele eindeutig benennen

Zielbereiche sollten klare IDs haben, damit data-fwt-target zuverlässig funktioniert.

data-fwt-target="#mein-panel"

ARIA mitdenken

Buttons sollten bei Toggle-Bereichen mit aria-controls ergänzt werden.

aria-controls="mein-panel"

Nachladen initialisieren

Dynamisch eingefügte Inhalte brauchen erneut eine Initialisierung.

window.FWT.init(container);

Nicht alles in Core packen

Der Core bleibt klein. Größere Funktionen gehören in eigene Module.

fwt-navigation.js / fwt-minieditor.js

Fehler still vermeiden

Ungültige Selector oder fehlende Ziele sollen nicht die ganze Seite kaputt machen.

robuste Initialisierung