Der Styleguide bringt eine Reihe von Basisjavascripten Basisjavaskripten mit, welche die Verteilung der Inhalte auf die einzelnen Seiten übernehmen.

print-document.js

Dient als Haupteinstiegspunkt für das Javascript und übernimmt das Erstellen der Seiten und das Platzieren von Countern. Dieses Javascript kann nicht ausgetauscht werden.

print-element.js

Repräsentiert ein platzierbares Element und wird als Standardskript genutzt, falls ein Element kein eigenes Skript nutzt. Ein Element kann ein solches Skript mithilfe des HTML-Attributes data-print-module definieren. Diese Skripte müssen von der Hauptklasse PrintElement ableiten.

...

...

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.

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.

PrintSource

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

'use strict'

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

export default class PrintCustomCustomElement extends PrintElement {

	/**
	 * Diese Methode wird immer wieder aufgerufen, solange PrintResult::completed nicht "true" ist
	 * Bei jedem Ergebnis, was nicht PrintResult::completed ===  asynctrue process(page, previous) {

    // Prüfmethode für "break-before" und "vacant-before"
    if (false ==entspricht, wird zudem eine neue Seite erzeugt
	 *
	 * @param {PrintContext} context Der Kontext in welchem dieses Element platziert werden soll
	 *
	 * @returns {Promise<PrintResult>}
	 */
	async place(context) {

		// 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(page, previous)context)

		if (result instanceof PrintResult) {
			return result
		}

		// Das Originalelement steht über this.source zur Verfügung
		const element return false
    }

    // Platziermethode welche immer wieder aufgerufen wird. Sie muss entweder true oder false zurückgeben
    //   - false bedeutet "nicht fertig", das Element wurde gar nicht oder nicht abschließend platziert
    //   - true bedeutet "fertig", das Element wurde platziert und es kann mit dem nächsten forgefahren werden
    
    return true
  }

}

Puppeteer per Kommandozeile

Mit component-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:

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

...

= this.source.cloneNode(false)

		// Das Ersatzelement im Elternelement platzieren
		await context.append(element)

		// Es können Optionen des Quellelements abgefragt werden
		if(await this.is('custom-option')) {
			// Auf diese Option reagieren
		}

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

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

			// Das Element wieder entfernen
			element.remove()
			
			// 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(this, await this._exhausted(), null)
		}

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

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

PrintCounter

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

PrintPlaceholder

Hier werden die Platzhalterdefinitionen verarbeitet.