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 PrintContext from '/plugin/remote/brandbox-styleguide/print-styleguide/javascript/print-context.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)

		  	// Wurde der Seiteninhalt zu groß? 
			if(await context.overflowing()) {

			// Das Element wieder entfernen
		reference	element.remove()
			
				return new PrintResult(null, false)
			}

				return new PrintResult(reference, true)
// 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._element, true, element)
	}
}

Die nachfolgenden Methoden können zusätzlich implementiert werden, wenn diese benötigt werden.

...