Tool für die Risikobewertung und Schutzklassenermittlung für kraftbetätigte Fenster

Einsatz auf Ihrer Website

Das Tool für die Risikobewertung und Schutzklassenermittlung für kraftbetätigte Fenster (kurz: MaschVO-Tool) können Sie auf Ihrer Website wie folgt einbinden:

<script type="module" src="srcText" />
<div id="root-maschvo" />

Fügen Sie einfach diese Zeilen im Body Ihrer Seite ein. Platzieren Sie das div-Element dabei an der Stelle, an der das Tool dargestellt werden soll. Außerdem können Sie diesem Element explizit eine Höhe und Breite zuweisen, beispielsweise so:

#root-maschvo {
    width: 80vw;
    height: 60vh;
    overflow: auto;
}

Auf diese Weise können Sie festlegen, wie hoch und breit das Tool auf Ihrer Seite angezeigt werden soll. Wenn Sie keine Höhe und Breite angeben (oder height: auto bzw. width: auto setzen), wird das Tool sich in beide Richtungen auf den von ihm benötigten Bereich ausbreiten. Ein Beispiel für die Einbindung können Sie auf dieser Seite sehen:

Bitte beachten Sie, dass für das Einbinden des Tools auf Ihrer Website bestimmte Anforderungen an die Content-Security-Policy (CSP) Ihrer Seite bestehen. Damit das Tool korrekt funktioniert, müssen folgende Punkte in Ihrer CSP berücksichtigt werden:

Die Herkunft (Origin) des Tool-Skripts muss bei script-src und connect-src erlaubt sein, damit das Laden und die Kommunikation mit dem Server funktionieren.
Beispiel: script-src ; und connect-src ;
Für style-src muss 'unsafe-inline' erlaubt werden, da das Tool einige Inline-Styles direkt im Shadow DOM verwendet.
Beispiel: style-src 'unsafe-inline';
Für img-src müssen sowohl data:-URLs als auch die Herkunft des Tool-Skripts zugelassen werden.
Beispiel: img-src data: ;

Dies sind die Mindestanforderungen, damit das Tool eingebettet werden kann. Die CSP kann natürlich auch weniger restriktiv gestaltet werden, solange mindestens die genannten Quellen erlaubt sind. Sollten Sie für Ihre Seite keine CSP definiert haben, müssen Sie nichts weiter tun und können dies dabei belassen. Die Skripte und Styles des Tools können dann standardmäßig geladen werden.

Styling- und Anpassungsmöglichkeiten

Standardmäßig wird für die Speicherung der eingegeben Daten im Tool der Query-Parameter q-maschvo in der URL verwendet. Sollten Sie dies ändern wollen, fügen Sie das Attribut data-queryparam zu dem root-div-Element hinzu und geben Sie als Wert den gewünschten Query-Parameternamen an. Beispiel:

<div id="root-maschvo" data-queryparam="new-q" />

Als Element für die Überschrift bzw. den Titel wird standardmäßig ein h1-Element verwendet. Sollten Sie dies ändern wollen, fügen Sie das Attribut data-title-element zu dem root-div-Element hinzu und geben Sie als Wert das gewünschte Überschrift-Element an. Gültige Werte sind h1, h2, h3, h4, h5, h6 und div. Beispiel:

<div id="root-maschvo" data-title-element="h2" />

Für die visuelle Anpassung des Tools kann CSS genutzt werden. Da die Anwendung komplett innerhalb eines Shadow-DOM aufgebaut wird, können nur bestimmte Teile direkt per CSS auf Ihrer Seite gestylt werden, die durch die Anwendung als part des Shadow Tree freigegeben werden. Sie haben dazu folgende part-Namen zur Auswahl:

`part`-Name	Beschreibung
heading	Das Element oben im Tool, das den Titel enthält (inklusive des Subtitels)
logo	img-Element mit dem Logo in der oberen rechten Ecke der gedruckten Seite
explanation	Die verschiedenen Erklärungstexte auf der Schutzklassenermittlungsseite
decisionTreeContainer	Das Containerelement, das das Entscheidungsbaum-SVG-Element enthält
optionCheckboxIcon	Icon-Container-Element für die Checkbox-Icons einer Option (auf beiden Seiten des Tools)
optionText	Text/Beschreibung einer Option (auf beiden Seiten des Tools)
questionCheckboxIcon	Icon-Container-Element für die Checkbox-Icons einer Ja/Nein-Frage
questionText	Text/Beschreibung einer Ja/Nein-Frage, inklusive der "Ja"- und "Nein"-Labels
accordionHeader	Kopfzeile eines aufklappbaren Elements auf der Schutzklassenermittlungsseite
subsectionHeader	Kopfzeile der Unterabschnitte im unteren Teil der Schutzklassenermittlungsseite
noProtectiveClassAlert	Hinweis auf der Schutzklassenermittlungsseite, wenn noch keine Schutzklasse bestimmt werden kann, weil Eingaben fehlen
protectiveClassDescription	Text in den verschiedenen Tabs, der die unterschiedlichen Schutzklassen beschreibt
improvementExplanation	Text in den Kästen, der mögliche Verbesserungen zum Erreichen einer besseren Schutzklasse erklärt
improvementTitle	Titel der Kästen, die mögliche Verbesserungen zum Erreichen einer besseren Schutzklasse erklären
startAssessmentButton	Button am unteren Rand der Schutzklassenermittlungsseite, der die Risikobewertung erstellt und zur nächsten Seite führt
restartButton	Button oben auf der Risikobewertungsseite, mit dem die Schutzklassenermittlung neu gestartet werden kann
textInput	Alle einzeiligen Texteingabefelder auf der Risikobewertungsseite
textareaInput	Das mehrzeilige Texteingabefeld für zusätzliche Bemerkungen auf der Risikobewertungsseite
dataLabel	Alle Labels/Namen für Daten-Ein-/Ausgaben auf der Risikobewertungsseite
dataOutput	Alle Texte auf der rechten Seite, die (nicht editierbare) Datenausgaben enthalten
noProtectiveMeasureAlert	Hinweis auf der Risikobewertungsseite, wenn keine Schutzmaßnahme ergriffen wurde, obwohl eine solche aufgrund der Schutzklasse erforderlich ist
qrImg	img-Element mit dem QR-Code am unteren Rand der Risikobewertungs- und Druckseite
qrHelp	Text am unteren Rand der Risikobewertungs- und Druckseite mit Hinweisen zum QR-Code
advertising	Text am unteren Rand der Druckseite, der auf die Mitwirkung des VFE an diesem Tool hinweist
legalText	Text am unteren Rand der Risikobewertungs- und Druckseite mit rechtlichen Hinweisen
pdfButton	Button, mit dem der Nutzer ein PDF generieren kann

Sie können nun in Ihren Stylesheets über das Shadow-Host-Element (das div-Element mit der id root-maschvo) mit Hilfe des ::part-CSS-Selektors auf die in der Tabelle genannten Elemente zugreifen. So können Sie beispielsweise den Button auf der Risikobewertungsseite zum Neustarten der Schutzklassenermittlung blau färben:

#root-maschvo::part(restartButton) {
    background-color: blue;
}

Sollten Sie noch präzisere/spezifischere Styling-Möglichkeiten benötigen, so können Sie auf Ihrer Seite ein style-Element einbauen und darin beliebige Anpassungen vornehmen. Vergeben Sie für dieses Element die id styles-maschvo. Dieses Element wird dann durch das MaschVO-Tool automatisch in den Shadow-DOM verlegt, sodass die darin enthaltenen Styles auf die Elemente des Tools angewendet werden. Auf diese Weise können Sie beliebige CSS-Anpassungen vornehmen und die Elemente des Tools höchst flexibel gestalten, auch die Elemente, die nicht direkt als part des Shadow Tree freigegeben werden. Beispielsweise können Sie folgendes auf Ihrer Seite einbauen, um die Schriftfarbe in allen Buttons grün zu färben:

<style id="styles-maschvo">
    button {
        color: green !important;
    }
</style>