domlight

Spotlight DOM elements

Usage no npm install needed!

<script type="module">
  import domlight from 'https://cdn.skypack.dev/domlight';
</script>

README

domlight Build Status Version Gitter chat Stories in Ready

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

Chrome Firefox IE Opera Safari
+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

  1. Check open issues

  2. Fork it

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

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

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

  6. Create a new Pull Request

Authors

License

MIT (c) 2015 - Tomas Aparicio and contributors