Javascript dialog stylování a polyfill

Celý polyfill je v jediné souboru dialogicPolyfill.mjs. Do stránky ho vložíte například takto:

<script type="module" src="/dialogicPolyfill.mjs" crossorigin="anonymous" integrity="sha256-tcuKQ/zHdgYxhMhX4ouXfqnqtOMXek83f//3owjsOe0="></script>

Zdroják? Jasně vypadá takto: https://iiic.dev/js/dialogicPolyfill.mjs

A to je vše! Teď už používáte html dialog element jak je popsáno ve specifikaci (například) na MDN: The Dialog element bude to fungovat i v prohlížečích které jinak podporu nemají.

Další soubory v repositáři jako example-usage.html a example.css jsou tam jako ukázka, snad někomu pomohou se lépe zorientovat.

O dialog elementu

Je to jednoduché stav v jakém se nachází dialog element je uložen v (bool) atributu open, pokud je tento atribut přítomen, je dialog viditelný, pokud není, dialog element je skrytý. Pro přepínání stavu se používají javascriptové funkce show() and close() na příslušném HTMLDialogElement elementu. Podívejte se do příkladového souboru.

Detailnější popis

Tím, že polyfill je ve formě javascriptového modulu volá se jako by měl nastaven atribut defer (ano, dokonce i když tam ten atribut není explicitně napsán, stejně se spouští jako defer), tedy stažení souboru asynchronně a samotné spuštění až po dokončení parsování celé stránky.

Toto chování můžete změnit na synchronní pomocí atributu async, ale nemůžete dosáhnout synchronního chování.

Všechny prohlížeče mají dialog element "ostylovaný" takovým celkem nevzhledným černým rámečkem, zarovnáním na střed stránky (ovšem pouze v ose x tedy horizontálně), zajímavé je že i prohlížeče, které zatím neimplementovaly funkce show() a close(). (Jops, teď popisuji Firefox).

Výchozí vzhled dialog elementu opravdu není nic moc a mám z toho pocit jisté nedomyšlenosti, ale stylovat jistě všichni umíme, a pokud chcete šetřit čas, jeden návrh ostylování je v příkladu.

<dialog id="my-lightbox" open role="alertdialog" aria-labelledby="add-delivery-address" aria-describedby="delivery-address-description">
	<div role="document" tabindex="0">
		<h3 id="add-delivery-address">Insert your Delivery address</h3>
		<p id="delivery-address-description">
			… imagine some form in here :)
		</p>
	</div>
	<button data-on="tap:my-lightbox.close" title="close dialog">x</button>
</dialog>

const button = document.querySelector( 'button' );
const dialog = document.querySelector( 'dialog' );
const closingButton = document.querySelector( 'dialog>button' );
const KEYCODE_ESC = 27;

button.addEventListener( 'click', () => {
	if ( dialog.open )
	{
		dialog.close();
	} else
	{
		dialog.show();
	}
}, false );

dialog.addEventListener( 'keyup', ( /** @type {KeyboardEvent} */ event ) => {
	if ( event.keyCode === KEYCODE_ESC )
	{
		dialog.close();
	}
}, false );

closingButton.addEventListener( 'click', ( /** @type {MouseEvent */ event ) => {
	/** @type {HTMLButtonElement} */
	const button = event.target;

	/** @type {HTMLDialogElement} */
	const dialog = button.parentNode;

	dialog.close();
}, false );

Pro polyfill je použit upravený HTMLUnknownElement, který prohlížeč používá pro neznámý element. Šlo by to samozřejmě řešit i jinak, například jako custom elements, kde vzniká ale problém opačný a to kolize u prohlížečů, které již dialog implementovaný mají. A protože počítám s tím, že podpora jistě přijde do všech prohlížečů přijde mi raději nechat ty prohlížeče s podporou dělat jejich práci a ty co podporu nemají si prostě provedou ten kousek javascriptu.

Živá ukázka

Jasně, bez té by to nebylo ono, takže s chutí vypusťte dialog tímto tlačítkem.

Služby

Tento polyfill je možné nasadit pomocí NPM.

Unpkg: https://unpkg.com/dialogic-polyfill

NPM: https://www.npmjs.com/package/dialogic-polyfill

Licence

Repositář na Githubu https://github.com/iiic/dialogic-polyfill