Zkusil jsem si naprogramovat jednoduché vykreslování vrstev.
Jednak chci ukázat, proč mi příjde oblast programování naprosto mimo realitu (minimálně v oblasti jednoduchých, aplikací). A také když jsem si prošel několik ukázek pro inspiraci – bylo řešeno pokaždé jinak.
Zkusil jsem i pár pluginů do wordpressu. Použitelný jsem objevil jeden.
Pokaždé někde něco chybí, nejde, je zbytečně složité.
S největší pravděpodobností si řeknete: Takových skriptů jsou desítky. Nic nového. Avšak: Jednak právě to je jeden z problémů = vzniká prostor pro chyby a hlavně – vše bude více zřejmé společně s plnou funkčností + další “moduly” a způsobem jejich používání.
Já na to šel takto
Pokud se nastaví některému elementu zadaná class – připojí se na něj addEventListener – tedy posluchač. V případě kliknutí na element se vykreslí požadovaná vrstva.
Vrstvě lze nastavit, zda bude jako sidebar (postranní okno), zvrchu, zespodu, nebo přes celou obrazovku.
Elementy vykresluji pomocí Javascriptu. Element se vytvoří až na základě požadavku na zobrazení vrstvy.
V ukázce je VRSTVA jako POSTRANNÍ OKNO VPRAVO
Funguje podobně jako Toggle.
Během animace (vyjíždění / zajíždění okna, 500ms) vrstva nereaguje na podněty. To proto, že když se kliklo na tlačítko 2x rychle po sobě, došlo k nepěknému poskočení animace a mohla nastat chyba ve vykreslování.
Taky jsem si všiml detailu – v řadě BEST OF řešení se používá smyčka FOR společně s pole.length což je na W3 SCHOOLS popsáno červeně jako špatné řešení, které zbytečně zvyšuje náročnost aplikace, jelikož se v takovém případě musí při každém opakování musí počítat délka pole. A to často znamená i getElementsByClassName, tedy DOM objekty = žere výkon. Velikost pole lze jednoduše zjistit před samotnou smyčkou a hodnotu uložit do proměnné, která je použita jako podmínka.
Ukázka
Klikněte na tlačítko a zprava vyjede okno. Jelikož jsem zatím neoptimalizoval pro mobily, nevím zda zbude místo pro zavření 😀 (opět stejným tlačítkem). Až bude čas, doplním i postranní BAREVNÝ PRUH, který bude sloužit jako ovládácí rozhraní. Tedy např při otevření vrstvy pruh zčervená = zavřit vrstvu. Pokud bude třeba potvrzení, bude pruh do půlky zelený (jakožto uložení po provedení nějaké akce) a poté červený
