Versionen im Vergleich

Schlüssel

  • Diese Zeile wurde hinzugefügt.
  • Diese Zeile wurde entfernt.
  • Formatierung wurde geändert.

Der Styleguide bringt eine Reihe von Basisjavaskripten mit, welche die Verteilung der Inhalte auf die einzelnen Seiten übernehmen. Hierbei gibt es ein übergeordnetes Steuerungsskript aber auch Einzelskripte welche verschiedene Aufgaben für den Aufbau der Seiten ausführen. Diese Basisskripte können nur durch eine Überschreibung über einen eigenen Styleguide ausgetauscht werden. Zudem gibt es die Elementskripte welche die Aufteilung und Platzierung von Styleguidekomponenten übernehmen. Diese Skripte leiten alle von der Basisklasse PrintElement ab und sind für jeweils eine Styleguidekomponente verantwortlich. Ein solches Elementskript kann pro Styleguidekomponente über das Attribut data-print-module definiert werden.

Drawio
bordertrue
diagramNameJavascript (print-styleguide)
simpleViewerfalse
width
linksauto
tbstyletop
lboxtrue
revision2
diagramWidth841

...

PrintLoader

Diese Basisklasse lädt per HTML-Attribut definierte Javascriptdateien nach und versucht diese auszuführen. Hierbei wird keine Seitenaufteilung vorgenommen sondern nur das definierte Javascript ausgeführt um bspw. Diagramme zu erzeugen. Das zu nutzende HTML-Attribut ist data-styleguide-module. Hier muss wie bei anderen HTML-Attributen (bspw. data-js, data-module, etc.) der Pfad zur Javascriptdatei angegeben werden.

...

Hier findet die Aufteilung auf einzelne Seitenelemente statt. Es werden nacheindander alle Basisseiten (data-print-element="source") verarbeitet. Jedes zu verarbeitende Element kann über das HTML-Attribut data-print-module eine eigene Javascriptklasse definieren. Diese Klassen müssen alle von der Basisklasse PrintElement ableiten.

Basisimplementation für Elementskript
Codeblock
languagejs
themeRDark
titleBasisimplementation für Elementskript
collapsetrue
'use strict'

import PrintElement from './plugin/remote/brandbox-styleguide/print-styleguide/javascript/print-element.js'
import PrintContentPrintResult from './print-content.js'
import PrintSource from './print-source.js'
import PrintResult from './plugin/remote/brandbox-styleguide/print-styleguide/javascript/print-result.js'

export default class CustomElement extends PrintElement {

	/**
	 * Diese Methode wird immer wieder aufgerufen, solange PrintResult::completecompleted nicht "true" ist
	 * Bei jedem Ergebnis, was nicht PrintResult::completecompleted === true entspricht, wird zudem eine neue Seite erzeugt
	 *
	 * @param {ElementPrintContext} [parent]context Der Kontext Das HTMLElement in welchem dieses Element platziert werden soll
	 * @param {Element} [previous] Das HTMLElement welches zuvor
im selben Elternelement platziert wurde
	 *
	 * @returns {Promise<PrintResult>}
	 */
	async place(parent, previouscontext) {

		// Allgemeine Prüfmethode für Standardoptionen (bspw. vacant-before oder break-before)
        // Zudem wird versucht, das Quellelement direkt zu platzieren
		const result = await this._preflight(parent, previouscontext)

		if (result instanceof PrintResult) {
			return result
		}

		// KannDas dasOriginalelement Originalelementsteht nichtüber direktthis.source platziertzur werden?Verfügung
		if(false === awaitconst element = this.source._placecloneNode(place)false) {

			// Das Ersatzelement im OriginalelementElternelement stehtplatzieren
über		await thiscontext._append(element zur)
Verfügung
			const reference = this._element.cloneNode(false)
// Es können Optionen des Quellelements abgefragt werden
		if(await this.is('custom-option')) {
			// Auf Eindiese ElementOption imreagieren
Elternelement		}
platzieren
			const container = await PrintSource.get(parent)

	// Es können auch Optionen des Kontextes abgefragt werden
		if(container instanceof PrintContentawait context.is('custom-context-option')) {
				await container.append(reference)
// Auf diese Option reagieren
		}

	  	// Wurde der Seiteninhalt zu groß? 
				if(await containercontext.overflowing(parent)) {

			// Das Element wieder entfernen
			referenceelement.remove()

			
			return new PrintResult(null, false)
				}

				// Die Methode this._exhausted() überprüft ob das Elements bereits zu oft nicht platziert werden konnte
			// und gibt bei Bedarf eine Fehlermeldung in der Konsole aus. Zudem wird damit ein erneutes Platzieren
			// nach zu vielen Versuchen verhindert.
			return new PrintResult(referencethis, true)
			}await this._exhausted(), null)
		}

		return new PrintResult(this._element, true, element)
	}
}

PrintCounter

Hier werden die Zählerdefinitionen verarbeitet und die Ergebnisse ausgegeben.

PrintPlaceholder

Hier werden die Platzhalterdefinitionen verarbeitet.

Puppeteer per Kommandozeile

Mit brandbox-saas/puppeteer steht eine Implementation von Puppeteer zur Verfügung welche mit dem Javascript des Styleguides zusammenarbeitet. Dieses Javascript verfügt über Parameter welche nachfolgend erklärt werden:

Codeblock
languagetext
themeRDark
node puppeteer.js --source="[Quelle]" --target="[Zielverzeichnis]"

...

Die nachfolgenden Methoden können zusätzlich implementiert werden, wenn diese benötigt werden.

Methodendefinition

Beschreibung

PrintElement::height(element)

Diese Methode wird abgerufen um die Höhe des in element übergebenen Elements zu ermitteln.

PrintElement::update(element)

Diese Methode wird vor einer Höhenermittlung ausgeführt und kann genutzt werden um bspw. Inhalte des element-Elements ein-/auszublenden.

PrintCounter

Hier werden die Zählerdefinitionen verarbeitet und die Ergebnisse ausgegeben.

PrintPlaceholder

Hier werden die Platzhalterdefinitionen verarbeitet.