3 ms·
You can find a live demo here (https://github.com/zzarcon/focusable/tree/master/sample-app https://github.com/zzarcon/focusable/tree/master/sample-app). About
by zzarcon 12y ago
You can find a live demo here (https://github.com/zzarcon/focusable/tree/master/sample-app https://github.com/zzarcon/focusable/tree/master/sample-app).
About adding a border-radius, I'll love that feature, in fact I was thinking about implement it, but isn't as easy as it seems.
TLDR: Right now they are 4 divs for making the focus enable:
1- Fills the left part of the page.
2- Fills the top part of the page to the top part of the element.
3- Fills the bottom part of the element to the bottom part of the page.
4- Fills the right part of the page.
These divs are absolute positioned inside a wrapper that have disabled the pointer events to enable the interaction with the focused element.
So for that reason I can't simply add a border-radius for the active element.
This images can help me to explain you how it works http://cl.ly/image/3g2K2N1j1S3S http://cl.ly/image/3g2K2N1j1S3S http://cl.ly/image/031j3p283235 http://cl.ly/image/031j3p283235
- Rygu 12y agoCreate a 5th div that exactly overlays the focussed element, and give the overlay an inset box-shadow. (You may need to pass through mouse events programmatically.)
- zzarcon 12y agoThat's sounds good and easy, and can accomplish the goal, I'll open a PR for try your approach, thanks!
- RubyPinch 12y agono need to manually handle clicks, https://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements https://stackoverflow.com/questions/3680429/click-through-a-...
- zzarcon 12y agoYeah! is the approach I also follow in the library, you can check it here https://github.com/zzarcon/focusable/blob/master/app/focus-element-overlay.js#L165 https://github.com/zzarcon/focusable/blob/master/app/focus-e...
- Domenic_S 12y agoThat isn't a live demo. Once again we find on HN a UI project with no link to a live demo on the project page.
- zzarcon 12y agoSorry man, you're right, I updated the Readme and put there a live demo link. Hope you like http://www.mrdrozdov.com/focusable/sample-app/index.html http://www.mrdrozdov.com/focusable/sample-app/index.html
- Domenic_S 12y agoAwesome, thanks. After you focus a non-header area, how do you get back to a normal state? Clicking around doesn't remove the black area, ESC doesn't either. Mac/Chrome.
- WiseWeasel 12y agoHere's kind of a way to do it: #overlay-layer .column:nth-child(2):after, #overlay-layer .column:nth-child(2):before, #overlay-layer .column:nth-child(3):after, #overlay-layer .column:nth-child(3):before { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 5px; } #overlay-layer .column:nth-child(2):after { right: 0; bottom: -10px; box-shadow: 5px -5px 1px rgba(0,0,0,0.8); } #overlay-layer .column:nth-child(2):before { left: 0; bottom: -10px; box-shadow: -5px -5px 1px rgba(0,0,0,0.8); } #overlay-layer .column:nth-child(3):after { right: 0; top: -10px; box-shadow: 5px 5px 1px rgba(0,0,0,0.8); } #overlay-layer .column:nth-child(3):before { left: 0; top: -10px; box-shadow: -5px 5px 1px rgba(0,0,0,0.8); }