RGB kalkulačka v JavaScriptu podruhé

Jak jsem vám slíbil v závěru minulého článku, vrátíme se dnes k RGB kalkulačce s několika vylepšeními. Všechna se budou týkat barevných palet.

Prvním vylepšením vůči minulému článku je automatický výpočet tzv. bezpečné barvy, která je nejblíže barvě nastavené (ohledně bezpečných barev si můžete přečíst více zde). V nové verzi RGB kalkulačky, kterou najdete tady, přibyl pod řádkem s HEX hodnotou řádek se zobrazením nejbližší bezpečné barvy, kterou můžete tlačítkem „Převzít“ přepsat do ostatních polí. V prohlížeči Internet Explorer se rovněž zobrazuje aktuální bezpečná barva jako pozadí tohoto řádku tabulky.

Pro implementaci výpočtu bezpečné barvy potřebujeme pomocnou funkci GetSafe, která z barevné složky R,G nebo B vypočte nejbližší hodnotu z množiny hodnot 00,33,66,99,cc nebo ff. Funkce může být napsána například takto:

Automatický výpočet bezpečné barvy a rovněž také změnu pozadí příslušné buňky zabezpečuje několik úprav v minule uvedené funkci Redraw. Protože tato funkce obsahuje i jiné úpravy v souvislosti s dalšími novinkami, ukážeme si její kód až později. Přepis bezpečné barvy do ostatních polí formuláře zabezpečuje jednoduchá funkce recountSAFE, volaná z handleru události onclick na tlačítku „Převzít“:

Druhou úpravou RGB kalkulačky je rozšíření o paletu pojmenovaných barev, tedy barev, jejichž jména lze uvádět přímo v HTML místo HEXa vyjádření. RGB kalkulačka je upravena tak, že ve své dolní části zobrazuje tabulku těchto barev, přičemž po kliknutí na příslušnou barvu je její hodnota přepsána do horní části kalkulačky. Dále přibylo textové pole, ve kterém se zobrazuje název barvy, pokud je námi vytvořená barva shodná s některou z bezpečných barev. Posledním vylepšením je tlačítko „Test“, kterým lze barvu, jejíž název napíšeme do příslušného textového pole, zobrazit jako pozadí RGB kalkulačky a otestovat si tak správnost názvu. Všechny úpravy můžete opět vyzkoušet zde.

Všech 141 pojmenovaných barev, které se mi podařilo najít, najdete abecedně seřazeny v následujícím poli, zde pojmenovaném aWEB:

Vykreslení tabulky bezpečných barev zabezpečí JavaScriptová funkce DrawWEBTable, což jsou v podstatě pouze dvě do sebe zanořené smyčky, generující řádky a sloupce tabulky. (rozměry tabulky jsou ve skriptu kódovány „natvrdo“):

Při kliknutí „na příslušnou barvu“ (tedy na HTML odkaz, umístěný v podbarvené buňce tabulky) je volána funkce MoveColor. Ta má za úkol přepsat hodnotu z tabulky bezpečných barev do všech ostatních polí formuláře. Protože jsme si už minule definovali sadu funkcí pro převody mezi HEX a RGB vyjádřením, s jejich využitím může být funkce MoveColor docela krátká:

Stiskneme-li tlačítko „Test“, je z jeho handleru události onClick volána funkce recountWEB, která přepíše text v příslušném formulářovém políčku do pozadí stránky a zobrazí hlášení o této činnosti:

Poslední modifikací RGB kalkulačky je úprava funkce Redraw. Ta má za úkol aktualizovat všechna textová pole formuláře dle hodnoty uložené v globálním poli gRGB. Přidáme jí několik řádků, zabezpečujících s výpomocí funkce GetSafe správnou aktualizaci textového pole „Bezpečná barva“ (viz prostřední část funkce) a pro prohlížeč Internet Explorer také přenesení aktuálně zobrazené bezpečné barvy do pozadí buňky (podmínka document.all). Poslední třetina modifikované funkce Redraw zajistí vypsání správného názvu pojmenované barvy do příslušného formulářového pole, v případě, že se zadaná barva shoduje s některou z palety pojmenovaných barev. Zde je celý upravený kód funkce Redraw:

Ostatní funkce zůstávají nezměněny – jejich popis byl součástí minulého článku. Rovněž, stejně jako minule neuvádím HTML kód vlastního formuláře – zájemci jej snadno získají z ukázky. Při modifikaci či vytváření vlastního formuláře je pouze potřeba zachovat názvy jednotlivých formulářových polí (názvy nově přidaných polí jsou patrné z obslužných funkcí) pro zajištění správné vazby skriptu na formulář.

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