Čas od času najdu malou knihovnu JavaScriptu, která dělá něco velmi specifického, velmi dobře. Můj nejnovější nález, Fokus, je nástroj, který naslouchá výběru textu na stránce, a když k takové události dojde, zobrazí na pozadí celé stránky krásný modální dialog, který umožňuje zobrazit pouze zvýrazněný blok v normálním režimu.
Zobrazit ukázkuHTML
S HTML stránky není třeba dělat nic zvláštního a nevytváříte „aktivní“ zóny – jednoduše vložte soubor JavaScript do spodní části stránky:
<!-- at bottom of the page --> <script src="fokus/js/fokus.min.js" async></script>
Překrytí elegantně zaniká a odchází. K vytvoření překrytí se používá plátno a vlastnost pointer-events CSS se používá k zajištění konzistence zpracování událostí. Bylo by skvělé, kdyby byl Fokus trochu modulárnější, včetně povolení aktivních zón a přizpůsobené barvy překrytí, ale u Fokusu je těžké si stěžovat na něco jiného.
Zobrazit ukázkuFokus není nutností pro žádný web, ale byl jsem zaskočen tím, jak je Fokus hladký a přesný. S hmotností pouhých 3 kB je to působivá malá knihovna. Máte nápad, jak byste Fokus používali? Sdílejte!