domlight

A lightweight and dependency-free micro library to easily spotlight DOM elements

domlight was originally based on Focusable, but it includes missing features such as multiple elements spotlight, several refactors and uses pure DOM API (no jQuery dependency)

Showcase

Installation

Install via Bower

bower install domlight

Install via Component

component install h2non/domlight

Install via npm

npm install domlight

Or loading the script remotely

<script src="//cdn.rawgit.com/h2non/domlight/0.1.1/domlight.js"></script>

Browser Support

| | | | --- | --- | --- | --- | --- | +5 | +3.5 | +9 | +10 | +5 |

API

Set spotlight using jQuery/Zepto selector

Domlight($('#my-element'))

Set spotlight

Domlight(document.querySelector('#my-element'), options)

Hide spotlight

Domlight.hideAll()

Get focused DOM elements

Domlight.getActiveElements()

Get options

Domlight.getOptions()

Options

Property | Value | Default | Description ------------ | ------------- | ------------- | ------------- fadeDuration | Number | 700 | Duration of the overlay transition (milliseconds). hideOnClick | Boolean | false | Hides the overlay when the user click into it. hideOnESC | Boolean | false | Hides the overlay when the user press Esc. findOnResize | Boolean | false | Refind the element in the DOM in case that the element don't still exists.

Development

Clone this repository and switch into it

git clone https://github.com/h2non/domlight && cd domlight

Install development dependencies

npm install

Run tests

make test

Run the example demo and open localhost:8000

make demo

Contributing

0. Check open issues

1. Fork it

2. Create your feature branch (git checkout -b my-new-feature)

3. Commit your changes (git commit -am 'feat(name): description')

4. Push to the branch (git push origin my-new-feature)

5. Create a new Pull Request

Authors

• Hector Zarcon - Focusable author
• Tomas Aparicio

License

MIT (c) 2015 - Tomas Aparicio and contributors