Vytváříme nová efektní okna prohlížeče 2.

Druhý díl miniseriálu o vytváření uživatelsky definovaných oknech prohlížeče. V dnešním článku se tentokrát budeme věnovat funkcím a vlastnostem modulu Topbar.

V předchozí části jsme si popsali, jak otevřít nové okno a jak jej oprostit od implicitních ovládacích prvků. Dále jsme si vysvětlili principy funkcí hlavní knihovny a strukturu objektů celého okna, jenž jsme nazvali moduly. Dnes si popíšeme nejsložitější z nich – topBar.

Jak je patrné z obrázku z předešlého dílu, tento modul je nahrazením vrchní lišty okna. Obvykle se na něm nachází text s názvem a navigační prvky minimalizace, maximalizace a zavření okna. Další jeho důležitou úlohou je zprostředkování přesunu okna. Všechny tyto funkce je nutné přenést také na vytvářenou náhradu. Začneme všem již známou procedurou získání parametrů (pro zjednodušení je uvedena pouze hlavička).

Důležitou operací bude samotné vykreslení topBaru. Prvním nezbytným krokem je nastavení atributu scroll v tagu body na hodnotu no, abychom se vyhnuli nežádoucím posuvníkům. Poté přistoupíme k zápisu topBaru, který je tvořen dvěma vnořenými tabulkami, s nichž první reprezentuje okraj, a druhá samotné tělo objektu (tak jak je znáte např. z okolních tabulek Intervalu). Obsah první datové části tabulky včetně názevu okna a dekorativní ikony je celý překryt průhledným obrázkem s absolutní pozicí. Jednak proto aby nedocházelo k změně kursoru při přesunu myši na text názvu okna, a k rušivému označování textu či ovládacích prvků při přesunu okna.V druhé datové části toto není možné aplikovat, neboť musíme mít přístup na jednotlivé ovládací prvky maximalizace a zavření okna (apropos tímto způsobem, lze primitivně chránit obrázky).V kódu je také patrné jakým způsobem se v inline stylech využívají získané parametry.

Samotný objekt je tedy na světě, nyní mu přiřadíme jednotlivé funkce. Začneme těmi jednoduchými – zavřením a maximalizací okna. První je věc triviální a nemá cenu se ji podrobněji zabývat. Druhá není o moc složitější. Po testování proměnné max, jejichž hodnota (0 nebo 1) říká, zdali je okno již maximalizováno, se provede sekvence příkazů, která okno zvětší na hodnotu rozlišení obrazovky (screen.width, screen.height). Je třeba si také uvědomit, že se nacházíme ve FRAME a k celému oknu musíme přistupovat přes objekt parent.

Poslední vlastností, kterou naše okno bude disponovat bude možnost změny pozice „chytnutím“ za topBar, o kterém jsme si říkali v předchozím odstavci. Tady již půjde o složitější konstrukci. Předně musíme zjistit kdy chce vlastně uživatel okno přesouvat – čili nastavení event událostí.

Logika běhu je následující. Je-li uživatelem kdekoliv na topBaru stisknuto tlačítko na myši (dokumentu), pravděpodobně hodlá změnit pozici okna. Je tedy volána funkce mdown, která změní pozadí dokumentu a zaznamená pozici klinutí do proměnných clix,cliy od nichž se bude vypočítávat relativní posunutí celého okna. Od této chvíle, dokud nebude tlačítko uvolněno, musíme zaznamenávat pohyb myši. Proto přiřadíme události onmousemove funkci mmove. Ta jednoduchým výpočtem zajistí v závislosti na pohybu myši celý přesun okna. Jakmile dojde k uvolnění tlačítka, změní se pozadí na původní barvu a přestane se sledovat pohyb myši. Jelikož obsah topBaru však překrývá obrázek (viz. výše), systém by popisované počínání chápal jako snaha o přesun respektive označení obrázku. Proto je také nutné přiřadit událostem onselectstart a ondragstart funkci vracející hodnotu false. Tímto defacto nařídíme jejich ignoraci.

Vlastnost změny velikosti okna programovat nemusíme. Tu, v případě, že fullscreen okno otevřeme s parametrem resize=1, obstará operační systém. Topbar máme vytvořen, příště se podíváme na zbylé moduly a celou knihovnu dokončíme.