Light

zzarcon / focusable Goto Github PK

View Code? Open in Web Editor NEW

1.1K 28.0 50.0 718 KB

:flashlight: Set a spotlight focus on DOM element adding a overlay layer to the rest of the page

Home Page: http://zzarcon.github.io/focusable/

License: MIT License

JavaScript 97.88% HTML 0.76% CSS 1.36%

focusable's Introduction

Focusable

An awesome and lightweight library for performing spotlight in your DOM elements, setting an animated overlay to the rest of the page. You can find a live demo here.

Showcase

Installation

$ npm i focusable-element --save

$ bower i focusable-element

API

Set spotlight (jQuery style)

$('#my-element').setFocus(options);

Set spotlight (through library)

Focusable.setFocus($('#my-element'), options);

Refresh current focused element

Focusable.refresh();

Hide spotlight

Focusable.hide();

Get focused element

Focusable.getActiveElement();

Get options

Focusable.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.
circle	Boolean	false	Have the spotlight in a circle shape

Runing tests

npm install
grunt
See the result of testsuite in http://localhost:9092

Dependencies

jQuery

Contributing

Check open issues
Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create a new Pull Request

Author

You can follow me on Twitter - https://twitter.com/zzarcon

focusable's People

Contributors

Stargazers

Watchers

Forkers

joanromano leandromoreira adambutler yllus jasonwilliams shidel-dev aaaliua edwinyzh piglittle 345seizeit shabeer-ali-m wilson-tom zeeputra13 credosam hbehkamal techmind iamike codelivery aldogeno axelcureno hexeption kriptontr gitter-badger h2non aalishanmatrix nozzlegear eric-seekas vetesii ptbrowne jejung imnitinnayar7 antrepo kanevk parti-coop nueramina dependencies jymbob cawabunga josecarloscanova dsizomin ws-js ws-os james-mallory hanshou101 bismareeo jhbsa suryatmodulus ajunlonglive bnbyuii996

focusable's Issues

Remove jQuery dependency

or at least make it optional

Minified File Is incorrect

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.

[FEATURE] Add border-radius/blur effect to focused element

Creating a div that overlays the current element and later add effects to this element

Create testsuite

Acceptance tests
Unit tests

Overlay does not hide after click or pressing ESC key.

This was tested on Safari 5.1.10 and the latest stable Firefox.

Add comments to code

Add to bower

Support multiple elements at same time

Artifacts when spotlighting images

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

Overlay does not work as expected

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

Create github page with live demo

Add hightlight option

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.