Hacker News Reader

Comment by zzarcon | Hacker News Reader

You can find a live demo here (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/031j3p283235

View on HN

That 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.

Sorry 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

Awesome, 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.

Here'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);
  }

Create 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.)

That's sounds good and easy, and can accomplish the goal, I'll open a PR for try your approach, thanks!

no need to manually handle clicks, https://stackoverflow.com/questions/3680429/click-through-a-...

Yeah! is the approach I also follow in the library, you can check it here https://github.com/zzarcon/focusable/blob/master/app/focus-e...

Reply on news.ycombinator.com