• 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ý
• UPDATE: vlastně stačí přidat CLASS vrstvě 🙂