#

Javascript dialog stylování a polyfill




JS modul jako polyfill pro nativní funkci HTML5 dialog elementu. Jednoduché k použití, žádné závislosti, čistý javascript. Aby bylo hned jasné o čem je řeč, tak repositář je na githubu: https://github.com/iiic/dialogic-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.

Úplně k zahození nejsou ani ukázky použití a stylování. Totiž jsou sestaveny s ohledem na přístupnost, používání bez myši jen s pomocí klávesnice je v tomto případě opravdu snadné. A díky focusu na obsah dialogu i hlasové čtečky budou dialogu rozumět.
<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>

Od původního <dialog open>…</dialog> už se to pořádně vzdálilo :) . Ale je potřeba si uvědomit že právě takovéto dynamické prvky jsou tím největším problémem pro asistenční technologie, bez nějakého toho řádku kódu navíc se neobjedou.

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 );

Javascript je pak více než vypovídající, kromě základního show() a close() je tam i možnost zavřít otevřený a současně aktivní dialog ESC klávesou. Jinak by na ni jen sedal prach :) .

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

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

CC BY-SA 4.0

This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.


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

ic