Tool zur Berechnung der Öffnungsflächen für die Rauchableitung

Das Tool zur Berechnung der Öffnungsflächen für die Rauchableitung (kurz: RauchABL-Tool) können Sie auf Ihrer Website wie folgt einbinden:

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

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-rauchabl {
    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. Beachten Sie dabei, dass Sie für das RauchABL-Tool eine explizite Breite angeben müssen (beispielsweise einen absoluten Wert von width: 80vw; oder width: 500px; oder auch einen relativen Wert wie width: 100%;), die explizite Angabe einer Höhe ist hingegen optional. Wenn Sie keine Höhe angeben (oder height: auto setzen), wird das Tool sich auf die von ihm benötigte Höhe 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.

Standardmäßig wird für die Speicherung der eingegeben Daten im Tool der Query-Parameter q-rauchabl 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-rauchabl" 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-rauchabl" 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:

Sie können nun in Ihren Stylesheets über das Shadow-Host-Element (das div-Element mit der id root-rauchabl) mit Hilfe des ::part-CSS-Selektors auf die in der Tabelle genannten Elemente zugreifen. So können Sie beispielsweise die Farbe der auszuwählenden Elemente auf der Auswahlübersichtsseite anpassen:

#root-rauchabl::part(selectionItem) {
     background-color: red;
}

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-rauchabl. Dieses Element wird dann durch das RauchABL-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 von allen select-Elementen zu ändern:

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

Das Aussehen der im RauchABL-Tool verwendeten Bilder kann mittels eines eigenen style-Elements (wie oben beschrieben) ebenfalls flexibel angepasst werden. Dabei können Sie sogar bestimmte einzelne Teile der Bilder nach Ihren Wünschen gestalten. Dazu stehen Ihnen bestimmte CSS-Klassennamen zur Verfügung, die die entsprechenden Bildelemente bezeichnen. In Ihren Styles können Sie diese Klassennamen als Selektor verwenden und darauf entsprechende Anpassungen vornehmen. Die folgenden Klassen sind verfügbar:

Beachten Sie, dass nicht jedes dieser Bildelemente auch in jedem Bild des RauchABL-Tools enthalten ist. Sie können diese Klassennamen nur in dem spezifischen RauchABL-style-Element verwenden. Um die Bildelemente wie gewünscht zu gestalten, benutzen Sie CSS-Attribute, die für das Styling von SVG-Bildern zuständig sind, wie etwa stroke, fill und andere verwandte Attribute. Beispielsweise können Sie folgendes auf Ihrer Seite einbauen, um die Öffnungsflächen in den Bildern rot zu färben:

<style id="styles-rauchabl">
    svg .openingArea {
        fill: red;
    }
</style>