The minified file in app/focus-element-overlay.min.js is 281.586 kb in size. The non-minified source is 4.579 kb in size.

It seems like there is a compilation error here.

Note that this PR is still a work in progress, since there's a lot of improvements, features and API changes that requires a deep test coverage. This PR is oriented to a next library version release (0.1.0)

I made several major improvements/refactors, follow better conventions and adding support for some nice-to-have features, detailed below:

• Simplified and normalized project files and folders structure (convention focused)
• Simplified dev workflow. Removes Grunt and uses a simple Makefile
• #19 Add support for Bower/Component web package managers (but it's still required package publishing)
• #4 - Removes jQuery dependency (but also supports it a DOM nodes wrapper). Based on #11
• #5 Support multiple elements focus (still experimental, it's a bit rudimentary implementation. There's also missing the spotlight animation)
• Uses semver versioning convention
• New and clean test suite: uses mocha instead of qunit. Removes git code and dependencies.
• Better documentation

IMPORTANT: note that there's still required some refactors and better code design and clean API, but the existent code and features are an initial good point to start with

This will close issue #13

The issue was in the way that the js task was set up. It was doing unneeded concatenation, and not minifying correctly.

I also added all of the grunt dependancies to the dev section of your package.json, and created a simple .gitignore.

Using issues could be more friendly for open source community to help you. And you even can use great tools such waffle.io https://waffle.io/zzarcon/focusable (you got a kanban)!

Instead of using todo, you could make contributing section.

Adds a scrollToElement option to scroll to the focused element if it's not visible in the user's viewport. Use scrollTopPadding and scrollBottomPadding to compensate for floating navbars or other fixed elements attached to the screen.

The .min and .map files were created automatically by Visual Studio. I'm not too familiar with JS build tools, my apologies if it messes something up.

zzarcon/focusable now has a Chat Room on Gitter

@zzarcon has just created a chat room. You can visit it here: https://gitter.im/zzarcon/focusable.

This pull-request adds this badge to your README.md:

Happy chatting.

PS: Click here if you would prefer not to receive automatic pull-requests from Gitter in future.

Remove the CSS pointer-events property dependency for improve compatibility with older browsers.

The problem right now was that the columns are wrapped into a div positioned absolute filling the whole window, and with pointer-events: none, later the columns has pointer-events: all for disable interaction with the covered content.

Please check the where you can use this feature http://caniuse.com/#feat=pointer-events.

Also re-add the sample-app folder for test the lib in local

Hi, I need to set the context of the opaque overlay in a project I'm working on, so I think it was useful to have an option that can be passed to specify the context of this area. In real life I had to show a tutorial in a sidebar and guide the user through the app by highlighting the element in the app container leaving sidebar fully visible. I hope my effort is appreciated. Thanks.

Hi Hector, I attempted to use Focusable on http://www.coupons.com. When I focus on an element while at the top of the page, focusable works fine. However, if I scroll down and then attempt to focus on an element on that section of the page, the overlay does not cover that part of page. I am suspecting it has something to do with the heights of of the columns? If you can take a look, that would be great!

Thank you. Nick

On the demo website there are vertical white artifacts when spotlighting the black and white image.

Chrome for Android version 39.0.21.71.93. Samsung Galaxy S5. Android version 4.4.2

screenshot