Standardmässig hat eine Wiki-Seite einen Sidebar-Bereich, in dem zum Beispiel das Inhaltsverzeichnis angezeigt wird. Wenn man den ganzen Seitenbereich nutzen und allenfalls den schmalen Header-Text-Bereich durch ein grosses Bild ersetzen will, so kann man dies mit dem Makro FullScreen erreichen. Es ist auch eine Steuerung per JavaScript möglich.

{{FullScreen|framed}}

framed (optional)

Wenn framed angegeben wird, so bekommt die Seite einen Seitenrahmen. Wird framed weggelassen, so hat die Seite keinen Rahmen und alle Seitenelemente werden bis an den Rand gezeichnet.

Mit dem Makro FullScreen wird der Sidebar deaktiviert. Die Wiki-Seite verwendet die volle Breite der Seite.

Um selbst ein zweispaltiges Layout zu erzeugen, das dem Standard-Layout gleicht, verwende das Makro: LayoutCol.

Um die Seite so breit wie das Browserfenster zu machen, kann das Makro MaxScreenWidth verwendet werden.

Rahmen um Inhalt im FullScreen Modus erzeugen

Wenn man ein Bild auf einer Seite haben möchte, das die ganze Breite der Seite einnimmt, muss mit dem Makro FullScreen die Seite in den FullScreen Mode geschaltet werden. Dabei darf das Argumen framed nicht angegeben werden.

Wenn nun nach diesem Bild Text oder andere Elemente folgen sollen, die wieder einen Abstand zum Seitenrahmen haben, so müssen diese Elemente in ein Div-Element mit der Klasse $pageFrame eingeschlossen werden:

{{FullScreen}}
  :
{{div|$pageFrame}}

  Elemente mit Seitenrahmen

{{end div}}

Steuerung per JavaScript

Es gibt zwei Funktionen, mit welchen über JavaScript die Seitenbegrenzung gesteuert werden kann:

LayoutMaximize(removeLimitWidth)

Blendet den Sidebar aus und setzt den Hauptbereich auf die volle Breite des Dokumentes. Wenn removeLimitWidth true ist, wird zusätzlich die Begrenzung der Breite des Dokumentes entfernt, indem die Klasse limitWidth des Dom-Elementes Layout-Root entfernt wird.

Wenn removeLimitWidth nicht angegeben wird, gilt der Wert der globalen Variable OnLayoutMaxRemoveLimitWidth. Ist diese nicht definiert, wird false angenommen.

LayoutNormal()

Blendet den Sidebar wieder ein. Dabei wird die Klasse limitWidth wieder hinzugefügt, wenn sie vorher mit LayoutMaximize() entfernt worden ist.

IsLayoutMaximized()

Gibt true zurück, wenn das Layout mit LayoutMaximaize() oder mit dem entsprechenden Button neben dem Titel maximiert worden ist.

OnLayoutMaxRemoveLimitWidth: boolean (Optional); Default = false

Über diese globale Variable kann gesteuert werden, ob beim Maximieren des Layouts per LayoutMaximize() oder per Klick auf die Maximieren-Schaltfläche oben rechts im Seiten-Titel, auch die Begrenzung der Breite des Dokumentes entfernt werden soll.

Diese Funktionen werden auch über die Schaltfläche am rechten Rand auf Titelhöhe aufgerufen.

Die beiden obigen Funktionen rufen als letzt Aktion xTriggerEventLayoutChange() auf. Damit werden mit xAddEventLayoutChange() registrierte Funktionen aufgerufen, welche Elemente der Seite dem neuen Layout anpassen können.

Bevor die beiden obigen Funktionen sich ausführen, testen sie, ob folgende Funktionen existieren und rufen diese auf:

OnLayoutMaximize()

Falls diese globale Funktion existiert, wird sie von LayoutMaximize() aufgerufen, bevor diese weitere Aktionen veranlasst. In OnLayoutMaximize() können zum Beispiel Klassen von Dom-Elementen ausgetauscht werden, um das Layout der Seite zu verändern. Diese Änderungen können in der folgenden Funktion wieder rückgängig gemacht werden.

OnLayoutNormal()

Falls diese globale Funktion existiert, wird sie von LayoutNormal() aufgerufen, bevor diese weitere Aktionen veranlasst. Hier können Änderungen rückgängig gemacht werden, die in OnLayoutMaximize() vorgenommen wurden.

Layout Events

Wenn Elemente auf der Seite angezeigt werden sollen, welche vom Layout abhängig sind, können diese Elemente einen OnLayoutChange-Eventhandler registrieren. Dieser wird gerufen, wenn das Layout geändert wurde oder wenn die Grösse des Browser-Fensters verändert wurde.

xAddEventLayoutChange( HandleLayoutChanges );

function HandleLayoutChanges() {
  // ..
}

Wenn in einem JavaScript Layout-Veränderungen vorgenommen werden, können davon abhängige Objekte, welche einen OnLayoutChange-Handler registriert haben, mit dem Aufruf von xTriggerEventLayoutChange(args) davon in Kenntnis gesetzt werden.

function ChangPageLayout() {
  // make layout changes here
  xTriggerEventLayoutChange();

Layout Klasse

Wenn einem Element die Klasse ShowWithSidebar zugewiesen wird, wird das Element nur angezeigt, falls der Sidebar angezeigt wird oder, wenn er ausgeblendet wurde, wenn noch Platz für den Sidebar vorhanden ist. Damit kann zum Beispiel ein Button erzeugt werden, der nur angezeigt wird, wenn der Content-Bereich durch Ausblenden des Sidebars vergrössert werden kann.

[javascript:ToggleLayoutSize()|{{ButtonText|Max Size|id=LayoutButton|$ShowWithSidebar}}]

<jscript>
function ToggleLayoutSize() {
  if (IsLayoutMaximized()) {
    LayoutNormal();
    xInnerHTML( 'LayoutButton', 'Max Size' );
  } else {
    LayoutMaximize();
    xInnerHTML( 'LayoutButton', 'Normal Size' );
  }
}
</jscript>