JavaScript/Anwendung und Praxis/Zusammenfassung für längere Artikel

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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 richige ist. Eine Zusammenfassung des Inhalts ist wichtig.

Inhaltsverzeichnis

[Bearbeiten] Details? – <details>.

Wir wollen mehrere Eigenschaften nennen: die zu erwartende Lesedauer, den Schwierigkeitsgrad und das vorausgetze Wissen. Die Liste lässt sich beliebig erweitern. Außerdem soll es eine Zusammenfassung in leichter Sprache geben.

Beispiel
<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.

Beachten Sie: Derzeit (Februar 2017) unterstützen die Microsoft-Browser Internetexplorer und Edge das details-Element nicht, was aber keinen wirklichen Nachteil hat. Lediglich die Einklappbarkeit geht verloren. Sollte darauf Wert gelegt werden, kann ein Polyfill verwendet werden.

[Bearbeiten] 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.

[Bearbeiten] 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.

Beispiel
<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>

[Bearbeiten] 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.

Beispiel ansehen …
  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)

Beachten Sie, dass diese Liste nicht automatisch aktualisiert wird, wenn neue Elemente hinzukommen.

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).

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML