Der Styleguide bringt eine Reihe von Basisjavascripten Basisjavaskripten mit, welche die Verteilung der Inhalte auf die einzelnen Seiten übernehmen. Hierbeit gibt es ein übergeordnetes Steuerungsskript aber auch einzelne Aufgabenskripte welche verschiedene Aufgaben für den Aufbau der Einzelseiten 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 Elementskripte Elementskript kann pro Styleguidekomponente über das Attribut data-print-module
definiert werden.
Drawio |
---|
border | true |
---|
| |
---|
diagramName | Javascript (print-styleguide) |
---|
simpleViewer | false |
---|
width | |
---|
links | auto |
---|
tbstyle | top |
---|
lbox | true |
---|
diagramWidth | 841 |
---|
revision | 2 |
---|
|
Codeblock |
---|
language | js |
---|
theme | RDark |
---|
title | Basisimplementation für Elementskript |
---|
|
'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)
}
} |
Puppeteer per Kommandozeile
Mit componentbrandbox-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 |
---|
|
node puppeteer.js --source="[Quelle]" --target="[Zielverzeichnis]" |
Parametername | Beschreibung |
---|
source | Definiert die Quelle für Puppeteer und damit dem Browser innerhalb von Puppeteer. Es kann hier eine normale URL, wie auch in einem Browser, definiert werden. |
target | Definiert das Zielverzeichnis für die erstellten HTML-Dateien. Wenn das Verzeichnis nicht exisitiert, wird das Javascript versuchen dieses zu erstellen. |
timeout | Legt die maximale Zeit in Millisekunden fest die das Puppeteer-Javascript Inaktivität durch das Styleguide-Javascript dudelt, bevor das Puppeteer-Javascript den Prozess mit einem Fehler beendet. |
abort | Wenn dieser Parameter gesetzt wurde, bricht das Puppeteer-Javascript beim ersten Fehler ab, ansonsten werden Fehler zwar geloggt aber das Puppeteer-Javascript läuft bis zum Ende. |