luke-chang / js-spatial-navigation

A javascript-based implementation of Spatial Navigation.
Mozilla Public License 2.0
371 stars 117 forks source link

Add new option to fix issues with offset dimensions #15

Open ExoAndy opened 7 years ago

ExoAndy commented 7 years ago

Elements which have no offsetWidth and no offsetHeight aren't navigable and therefore it isn't possible to set the focus on those elements even though they're visible to the viewer. To fix that behaviour without breaking anything I have added a new option that will ignore that validation in case it's active and behave as usual in case it isn't active.

Also changed a little the folder structure and added a NPM package configuration file to be able to install Grunt. With the help of Grunt it's quite easy to create minified version of the library now.

Every change was document within the README file.

luke-chang commented 7 years ago

What amazing patches! Thanks for raising this issue. It'll take me some time to study them. BTW, it would be great if you could provide some code snippets containing visible elements with no innerWidth and innerHeight, so I won't miss any edge case. Thanks a lot.

ExoAndy commented 7 years ago

You're welcome! Unfortunately I did a really bad mistake and defined the issue as a innerWidth and innerHeight issue but what I was really meaning was the offsetWidth and offsetHeight check in the isNavigable function. The feature works as intended just uses the wrong description. I'll fix it asap and also provide a test case for that issue. Sorry about that!

ExoAndy commented 7 years ago

Fixed those issues in the source files. Test cases will follow later.

ExoAndy commented 7 years ago

Added the missing test case file to the repository. In that simple HTML file I have added a case where it isn't possible to focus a particular element and also cases where it works by using the new option as well as a solution using CSS.