Vollbildmodus

Seit Version 3.3 enthält die Bibliothek die fullscreen-Erweiterung. Diese Funktion ermöglicht es Ihnen, die Komponente im Vollbildmodus mithilfe der FullScreen-API zu erweitern, sofern diese unterstützt wird (überprüfen Sie die Liste der unterstützten Browser).

Für ältere Browser passt sich Gantt an, um 100 % der Fenstergröße zu belegen.

Um die Unterstützung für den Vollbildmodus zu aktivieren, aktivieren Sie das fullscreen-Plugin mit der gantt.plugins-Methode:

gantt.plugins({
    fullscreen: true
});

Die Komponente enthält keine integrierte Steuerung zum Umschalten des Vollbildmodus. Sie müssen eine auf Ihrer Seite hinzufügen oder das unten bereitgestellte Beispiel verwenden:

<input id="fullscreen_button" type="button" value="Toggle Fullscreen"/>
 
<script>
var button = document.getElementById("fullscreen_button");
    button.addEventListener("click", function(){
        if (!gantt.getState().fullscreen) {
            // Gantt auf Vollbild erweitern
            gantt.expand();
        }
        else {
            // Gantt auf normale Größe zurücksetzen
            gantt.collapse();
        }
    }, false);
</script>

Durch Klicken auf die Schaltfläche wird Gantt zwischen seiner ursprünglichen Größe und dem Vollbildmodus umgeschaltet.

Related sample:  Full Screen

API-Übersicht

Sie können zwei Methoden verwenden, um den Anzeigemodus von Gantt zu steuern:

• expand: Erweitert Gantt auf den Vollbildmodus.

gantt.expand();

• collapse: Setzt Gantt vom Vollbildmodus auf seine normale Größe zurück.

gantt.collapse();

Unterstützte Ereignisse

Diese Ereignisse stehen zur Verfügung, um vollbildbezogene Aktionen zu verarbeiten:

• onBeforeExpand
• onBeforeCollapse
• onExpand
• onCollapse

// Bevor Gantt auf Vollbild erweitert wird
gantt.attachEvent("onBeforeExpand",function(){
    // benutzerdefinierte Logik hier    
    return true;
});
 
// Bevor Gantt den Vollbildmodus verlässt
gantt.attachEvent("onBeforeCollapse",function(){
    // benutzerdefinierte Logik hier    
    return true;
});
 
// Wenn Gantt auf Vollbild erweitert wird
gantt.attachEvent("onExpand", function (){
    // benutzerdefinierte Logik hier
});
 
// Wenn Gantt den Vollbildmodus verlässt
gantt.attachEvent("onCollapse", function (){
    // benutzerdefinierte Logik hier
});

Fullscreen-API

Das fullscreen-Objekt bietet vier Methoden, um den Vollbildmodus von Gantt und seine zusätzlichen Elemente zu verwalten:

• expand(): Erweitert Gantt auf Vollbild.

gantt.ext.fullscreen.expand();

• collapse(): Setzt Gantt vom Vollbildmodus auf seine normale Größe zurück.

gantt.ext.fullscreen.collapse();

• toggle(): Wechselt zwischen Vollbild- und Normalmodus.

gantt.ext.fullscreen.toggle();

• getFullscreenElement(): Gibt das DOM-Element zurück, das auf Vollbild erweitert wird.

gantt.ext.fullscreen.getFullscreenElement();

Standardmäßig gibt getFullscreenElement() den HTML-Container des Gantt-Diagramms zurück. Sie können diese Methode ändern, wenn Sie zusätzliche Elemente im Vollbildmodus einbeziehen möchten (erfahren Sie hier, wie).

Gantt mit Kopfzeile/Toolbar im Vollbildmodus

Wenn Sie zusätzliche Elemente wie eine Kopfzeile oder Toolbar im Vollbildmodus einbeziehen möchten, definieren Sie die getFullscreenElement()-Methode neu, um einen benutzerdefinierten Container zurückzugeben:

<div id="myCover">
    <div class="gantt_control">
        <button id="toggle_fullscreen" 
                onclick="gantt.ext.fullscreen.toggle();">toggle fullscreen</button>
    </div>
        <div id="gantt_here"></div>
</div>

Dann aktualisieren Sie getFullscreenElement(), um auf Ihren benutzerdefinierten Container zu verweisen:

gantt.ext.fullscreen.getFullscreenElement = function() {
    return document.getElementById("myCover");
}
gantt.init("gantt_here");

Related sample:  Full Screen with additional elements

Fehlerbehebung im Vollbildmodus

Der Vollbildmodus funktioniert möglicherweise nicht, wenn Gantt daran gehindert wird, sich zu erweitern. Dies kann passieren, wenn:

• Das allowfullscreen-Attribut oder die allow="fullscreen"-Eigenschaft fehlt.
• Der "fullscreen"-Wert nicht in der allow-Eigenschaft angegeben ist.

Wenn diese Bedingungen nicht erfüllt sind, kann Gantt nicht in den Vollbildmodus wechseln. Sie können dies in unserem Snippet-Tool ausprobieren (Beispiel 1, Beispiel 2).

Vollbildmodus in Salesforce

Die Vollbild-Erweiterung ist nicht kompatibel mit Salesforce-Anwendungen, die den Locker Service verwenden. Der Locker Service verhindert, dass Elemente in den Vollbildmodus wechseln.

Das bedeutet, dass es nicht mit dem Lightning Aura-Framework oder Lightning Web Components funktioniert, obwohl es möglicherweise mit dem Visualforce-Framework funktioniert.

Um zu überprüfen, ob der Vollbildmodus in Ihrer App verfügbar ist, fügen Sie den folgenden Snippet zu Ihrem Konfigurationscode hinzu:

console.log("document.body.requestFullscreen", document.body.requestFullscreen)

Wenn die Ausgabe undefined anzeigt, ist die Funktion deaktiviert, und Gantt kann nicht in den Vollbildmodus wechseln.

Zurück nach oben