Versionen im Vergleich

Schlüssel

  • Diese Zeile wurde hinzugefügt.
  • Diese Zeile wurde entfernt.
  • Formatierung wurde geändert.

...

Codeblock
languagejs
themeRDark
titleBasisimplementation für Elementskript
collapsetrue
'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 CustomElement extends PrintElement {

	/**
	 * Diese Methode wird immer wieder aufgerufen, solange PrintResult::completed nicht "true" ist
	 * Bei jedem Ergebnis was nicht PrintResult::completed === true 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(context)

		if (result instanceof PrintResult) {
			return result
		}

		// Das Originalelement steht über this.source zur Verfügung
		const element = 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)
	}
}

...