Hauptinhalt

Toolbar

letzte Aktualisierung der Seite: Version 2.17.1

Die Toolbar-Komponente wird genutzt um auf verschiedene Funktionalitäten schnell zugreifen zu können. Zum einen werden hier Funktionen zur Unterstützung der Barrierefreiheit angeboten, zum andern auch zusätzliche Dienste, die das Portal bereitstellt wie bspw. RSS und Sprachauswahl. Die Toolbar ist verpflichtend für alle Portale zu nutzen. Hierzu muss ein globales JavaScript-Objekt im Kopfbereich einer jeden Seite definiert werden. Mit der Einbindung werden die Funktionen Kontrast erhöhen und Seite vorlesen standardmäßig angeboten. Durch die seitenweise Definition besteht die Möglichkeit die Toolbar in Abhängigkeit zur angezeigten Webseite anzupassen. Es wird jedoch empfohlen die Toolbar innerhalb eines Portals identisch zu halten, um die Nutzer nicht mit verschwindenden Funktionen zu irritieren.

JavaScript-Einbindung

Folgender Quellcode muss in den Kopfbereich einer jeden Seite eingebunden werden. Diese Einbindung beinhaltet mindestens die bereits genannten Funktionen.

Quellcode

window.glohea = {
    buttons: {
        //Optionale Funktionsbuttons
        projectButtons: {
            //Projektspezifische Funktionsdefinitionen
        },
    }
};

Erläuterung

  • In Zeile 3 bis Zeile 10 ist die Standardeinbindung definiert.
  • Innerhalb der buttons-Definition ab Zeile 4 können optionale Funktionen in der Toolbar zugeschaltet werden.
  • Innerhalb der projectButtons-Definition ab Zeile 6 können projektspezifische Funktionsdefinition stattfinden.

Zuschalten optionaler Funktionen

Neben den standardmäßig eingebundenen Funktionen, Kontrast erhöhen und Seite vorlesen, existieren noch weitere Funktionen die bereits im Styleguide vordefiniert sind.

window.glohea = {
    buttons: {
        projectButtons: {
            //Einbinden einer Verlinkung zu den Videos in Zeichensprache
            signLang: './zeichensprache.html',
            //Einbinden einer Verlinkung zum Portal in leichter Sprache
            easyLang: './leichte-sprache.html',
            //Einbinden von Sprachvarianten
            language: {
                anchor: {
                    // Definition der Standardsprache
                    //Kürzel, welches in der Toolbar angezeigt wird
                    'de': {
                        // Link auf die Startseite der Sprachvariante
                        default: './index.html',
                        // Link auf die aktuell angezeigte Seite
                        site: './willkommen.html'
                    },
                    // Definition einer zusätzlichen Sprache
                    //Kürzel, welches in der Toolbar angezeigt wird
                    'en': {
                        // Link auf die Startseite der Sprachvariante
                        default: './en/index.html',
                        // Link auf die angezeigte Seite in der Sprachvariante
                        site: './en/index2.html'
                    },
                    ... //weitere Sprachdefinitionen
                },
                // Die Sprache der aktuell gewählten Seite
                label: 'de'
            }
        },
    }
};

Verlinkung zu den Videos in Zeichensprache

  • In Zeile 5 wird die Definition für die Verlinkung zu einer Übersicht der Videos in Zeichensprache dargestellt.
  • Als Wert in Zeile 5 wird der Pfad zu dieser Seite erwartet. Die Angabe sollte relativ innerhalb innerhalb des Portals erfolgen.

Verlinkung zum Portal in leichter Sprache

  • In Zeile 7 wird die Definition für die Verlinkung zu den Seiten der leichten Sprache des Portal dargestellt.
  • Als Wert in Zeile 7 wird der Pfad zu der Einstiegsseite der leichten Sprache erwartet. Die Angabe sollte relativ innerhalb innerhalb des Portals erfolgen.

Mehrsprachigkeit

  • Von Zeile 9 bis Zeile 31 wird dargestellt, wie Sprachvarianten zur Auswahl bereitgestellt werden können: Mehrsprachigkeit
  • Von Zeile 22 bis Zeile 26 sowie in Zeile 30 bis Zeile 35 findet jeweils die Definition einer Sprachvariante statt. Sprachvariante bedeutet, auf ein Verzeichnis zu Verlinken, welches die Dateien in der gewählten Sprache beinhaltet. Da sich die Sprachvariante "deutsch" im Wurzelverzeichnis des Webservers befindet, ist dies die Standardsprache. Die Sprachevariante "englisch" verweist auf Dateien in einem Verzeichnis des Namens en
  • Zeile 24 und Zeile 32  wird die Startseite des Portals in der entsprechenden Sprachvariante definiert.
  • In Zeile 26 und 34 wird aktuell angezeigte Seite in der jeweiligen Sprachvariante verlinkt.
  • In Zeile 39 muss die Sprachvariante angegeben werden, die durch diese konkrete Seite repräsentiert wird. Fehlt die Angabe wird Deutsch als "Fallback" angezeigt.

Definieren eigener Funktionen

Um eigene Funktionen in die Toolbar zu integrieren, muss eine neue JavaScript-Klasse definiert werden, welche im Namespace sachsen.navigation.button definiert ist. Weiterhin muss diese Klasse von der Klasse sachsen.navigation.button.Base erben. Die Einbindung erfolgt anhand des Klassennamens und wird innerhalb der projectButtons-Definition.

window.glohea = {
    buttons: {
         projectButtons: {
             'Klassenname':{
                 //Parameterdefinition
             }
         },
    }
};
zurück zum Seitenanfang