JavaScript/Tutorials/Zusammenfassung für längere Artikel
Gerade bei längeren Artikeln ist es angebracht, vorab einige Informationen zum Artikel zu liefern, damit der Besucher der Seite entscheiden kann, ob dieser Artikel für ihn der richtige ist. Eine Zusammenfassung des Inhalts ist wichtig.
Inhaltsverzeichnis
Details? – <details>.
Wir wollen mehrere Eigenschaften nennen: die zu erwartende Lesedauer, den Schwierigkeitsgrad und das vorausgesetzte Wissen. Die Liste lässt sich beliebig erweitern. Außerdem soll es eine Zusammenfassung in leichter Sprache geben.
<article aria-describedby="article-description">
<header>
<h2>Grafikkarte im Eigenbau</h2>
<details id="article-description" open>
<summary>Informationen zu diesem Text</summary>
<dl>
<dt>Lesedauer</dt>
<dd>circa 180 Minuten</dd>
<dt>Schwierigkeitsgrad</dt>
<dd>hoch (Fachsprache - verwendet werden zahlreiche Fachbegriffe aus der Elektrotechnik)</dd>
<dt>Vorausgesetztes Wissen</dt>
<dd>Dieser Artikel richtet sich an Elektrotechniker mit abgeschlossenem Studium oder
ähnlich umfangreichem Wissen.</dd>
</dl>
</details>
<details>
<summary>Zusammenfassung in leichter Sprache</summary>
<p>Hier die Zusammenfassung</p>
</details>
</header>
<p>Und nun gehts los. Grafikkarte im Eigenbau, das klingt geradezu abenteuerlich. Ist es aber nicht …</p>
</article>
Die Charakterisierung des Artikels sowie seine Zusammenfassung in leichter Sprache werden durch details-Elemente realisiert.
Zudem teilen wir den Benutzern assistiver Technologien mit, dass eine zusammenfassende Charakterisierung des Artikels durch das details-Element mit der ID article-description erfolgt. Dazu nutzen wir im Artikel das WAI-ARIA-Attribut aria-describedby. Wir entscheiden uns außerdem dafür, die Charakterisierung initial auszuklappen (open), die Zusammenfassung in leichter Sprache hingegen nicht.
bessere Nutzererfahrung durch JavaScript
Die Nachrüstung der oben angesprochenen Interaktivität des details-Elements für Microsoft-Browser soll nicht Gegenstand dieses Artikels sein. Einen entsprechenden Polyfill finden Sie etwa unter http://html5please.com/#details.
Stattdessen soll gezeigt werden, wie die Informationen, welche Details sichtbar sind und welche nicht, im localStorage persistent gespeichert werden können.
Anpassungen des HTML
Der lokale Speicher wird durch einfachste Datenbanken realisiert, dabei wird für jede Domain eine eigene Datenbank angelegt. Das ist unter anderem dann von Bedeutung, wenn die Inhalte einmal unter example.com und einmal unter www.example.com zur Verfügung stehen. Die im localStorage gespeicherten Informationen können nicht domainübergreifendend, auch nicht subdomainübergreifend, ausgelesen werden.
Es ist dennoch davon auszugehen, dass in der Domain, möglicherweise auch auf derselben Seite, mehrere Artikel zur Verfügung stehen. Deshalb brauchen die Artikel eine domainweit eindeutige ID. Für die die über aria-describedby verknüpften Beschreibungen bietet sich das ebenfalls an, notwendig wird es jedoch nur dann, wenn mehrere Artikel mit Beschreibungen auf ein und derselben Seite zu finden sind.
Damit wir die gespeicherten Informationen über den Zustand der details-Elemente auch den richtigen Artikeln zuordnen können, geben wir jedem Details-Element zwei weitere Attribute, data-for und data-type. Im data-for-Attribut speichern wir, auf welchen Artikel sich die zusätzlichen Informationen beziehen, im data-type-Attribut geben wir die Art dieser Informationen an. Weitere Attribute sind denkbar, zum Beispiel ein Ablaufdatum (data-expires), wie man es von Cookies kennt.
<article aria-describedby="article-description-12345" id="12345">
<header>
<details id="article-description-12345" open data-for="12345" data-type="description">
</details>
<details data-for="12345" data-type="easy-speech">
</details>
</header>
</article>
das JavaScript
Im localStorage werden Informationen als Schlüssel-Wert-Paare in Form von Zeichenketten gespeichert. Eine weitere Strukturierung etwa durch Arrays ist nicht möglich.
Wir streben etwa folgende Paare an:
details-12345-description: true details-12345-easy-speech: false
true bedeutet, dass das entsprechende details-Element initial geöffnet ist, bei false ist es geschlossen.
1 function safe_changes(el) {
2 var item = "details-" + el.getAttribute("data-for") + "-" + el.getAttribute("data-type");
3 localStorage.setItem(item, el.hasAttribute("open") ? "false" : "true");
4 }
5
6 var details = document.querySelectorAll("details[data-for][data-type]");
7
8 for (var i = 0; i < details.length; i++) {
9
10 var item = "details-" + details[i].getAttribute("data-for") + "-"
11 + details[i].getAttribute("data-type");
12
13 if (localStorage.getItem(item) == null) {
14 localStorage.setItem(item, details[i].hasAttribute("open") ? "true" : "false");
15 }
16 else {
17 localStorage.getItem(item) == "true" ? details[i].setAttribute("open","true")
18 : details[i].removeAttribute("open");
19 }
20
21 details[i].addEventListener("click", function() {safe_changes(this)});
22 }
Wir sammeln zuerst in einer Liste alle details-Elemente ein, die sowohl über ein data-for- als auch über ein data-type-Attribut verfügen. (Zeile 6)
Für all diese gefundenen Elemente prüfen wir, ob es bereits einen Eintrag im lokalen Speicher gibt (Zeile 13), sollte dies der Fall sein, setzen oder entfernen wir das entsprechende open-Attribut (Zeilen 17/18), anderenfalls speichern wir den aktuellen Zustand im localStorage (Zeile 14).
Schließlich registrieren wir in Zeile 21 einen Eventhandler für jedes der gefundenen details-Elemente. Falls nun per Kick (oder auch per Tastatur!) der Zustand eines Details-Elements geändert wird, so wird diese Änderung im localStorage gespeichert (Zeilen 2/3).
