Seitenvergleich

Der Styleguide bringt eine Reihe von Basisjavaskripten mit, welche die Verteilung der Inhalte auf die einzelnen Seiten übernehmen. Hierbeit Hierbei gibt es ein übergeordnetes Steuerungsskript aber auch einzelne Aufgabenskripte Einzelskripte welche verschiedene Aufgaben für den Aufbau der Einzelseiten 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.

'use strict'

import PrintElement from './print-element.js'
import PrintContent from './print-content.js'
import PrintSource from './print-source.js'
import PrintResult from './print-result.js'

export default class CustomElement extends PrintElement {

	/**
	 * Diese Methode wird immer wieder aufgerufen, solange PrintResult::complete nicht "true" ist
	 * Bei jedem Ergebnis was nicht PrintResult::complete === true entspricht wird zudem eine neue Seite erzeugt
	 *
	 * @param {Element} [parent]   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, previous) {

		// Allgemeine Prüfmethode für Standardoptionen (bspw. vacant-before oder break-before)
		const result = await this._preflight(parent, previous)

		if (result instanceof PrintResult) {
			return result
		}

		// Kann das Originalelement nicht direkt platziert werden?
		if(false === await this._place(place)) {

			// Das Originalelement steht über this._element zur Verfügung
			const reference = this._element.cloneNode(false)

			// Ein Element im Elternelement platzieren
			const container = await PrintSource.get(parent)

			if(container instanceof PrintContent) {
				await container.append(reference)

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

					return new PrintResult(null, false)
				}

				return new PrintResult(reference, true)
			}
		}

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

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:

...