Výběr barvy ve formuláři pomocí JavaScriptu

Čas od času se při tvorbě stránky přihodí situace, kdy potřebujeme nechat návštěvníka, pokud možno komfortním způsobem, zadat barvu jako jedno ze vstupních polí formuláře. Zadávání barvy se řeší nejrůznějšími způsoby, tento článek ukazuje jeden z nich: vytvoření tabulky barev pomocí JavaScriptu a její provázání s formulářem.

Jako obvykle si nejprve předvedeme ukázku. V následující tabulce zvolíte požadovanou barvu jednoduše kliknutím na příslušné barevné políčko tabulky. Po stisku tlačítka OK (odeslání formuláře) se zobrazí okénko se zprávou, která barva byla vybrána (je uveden HTML kód barvy ve tvaru RGB):

Ze všeho nejdříve si ukážeme použitý HTML kód formuláře:

Důležité je především skryté pole formuláře, nazvané color, do nějž se při klepnutí na barevné okénko tabulky přepisuje RGB hodnota barvy. Skriptem uvnitř formuláře voláme funkci WriteColorTable, která vykresluje barevnou tabulku. Krátký skript v handleru události onSubmit je zde pouze pro účely ukázky a má za úkol zobrazit vybranou barvu a zamezit odeslání formuláře serveru.

Nyní si prohlédněme funkci WriteColorTable. Její jediný parametr – step – určuje, po jakých krocích se bude zvětšovat hodnota jednotlivých barevných složek R,G a B. Protože se pohybujeme v rozsahu hodnot 0 až 255, je potřeba nastavovat tento parametr šetrně – nastavení na příliš malou hodnotu (8 a méně) způsobí v lepším případě vypsání obrovské tabulky s desetitisíci políček, v tom horším zhroucení prohlížeče.

Přes svou délku je funkce WriteColorTable docela jednoduchá, jde víceméně jen o vypisování tabulky pomocí série document.write. Proměnná cols, počítaná na začátku, určuje počet sloupců tabulky – zde je nastaven poměr šířka:výška na cca 1:2, lze nastavit i jiný. Tři zanořené smyčky postupně zvyšují hodnotu jednotlivých barevných složek (horní mez 256 musíme ale vždy upravit na 255). Proměnná colswritten hlídá počet vypsaných sloupců a případné zalomení – vypsání nového řádku tabulky. Poněkud krkolomná výroba řetězce colstr vytváří HTML kód barvy – ten je hned vzápětí použit při vypsání buňky tabulky jako atribut pro pozadí, zároveň je i (pomocí volání funkce setColor) předáván do skrytého pole formuláře. Poslední for smyčka ve funkci už jen doplní poslední řádek tabulky prázdnými políčky, na které už nevyšla barva.

Po kliknutí do příslušného barevného políčka tabulky (respektive na odkaz v něm obsažený) je volána funkce setColor, která zvolenou barvu přepíše do skrytého pole formuláře. Zde je její kód jednoduchý…

…lze však také, podle požadované funkčnosti, přidat složitější akce – například zobrazit vybranou barvu na větší ploše v poli „Ukázka“, odstranit z řetězce předaného jako parametr znak plotu (dvojité mřížky), rozdělit zpět barvu na jednotlivé atributy a tak dále dle potřeby.

Závěrem

Uvedenou funkci lze samozřejmě použít „tak jak je“, podle mého názoru je však lépe se na ni dívat jako na polotovar, který si autor pro svou HTML stránku vždy poněkud upraví. Především se toto týká zarovnání barev do tabulky: jinak by měla vypadat tabulka pro výběr ze 16-ti a jinak z 512-ti barev – uživatelskému komfortu by prospělo, mít barvy lépe srovnané pod sebou podle odstínů. Rovněž se pro mnoho aplikací bude hodit vyloučit některé barvy, nebo naopak v určitém rozsahu zjemnit dělení atd. atd. A samozřejmě je nutno mít na paměti, že návštěvníci mají nastaveny různé barevné hloubky a že se jim tedy nemusí barvy zobrazit tak, jak nám při návrhu na firemním 21 palcovém monitoru.

Přeji vám příjemný den.