• Stars
    star
    1,073
  • Rank 41,331 (Top 0.9 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated about 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿ”ฆ Set a spotlight focus on DOM element adding a overlay layer to the rest of the page

Focusable Build Status Awesome

Gitter 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
Dependencies
  • jQuery
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 'Add some feature')
  5. Push to the branch (git push origin my-new-feature)
  6. Create a new Pull Request
Author

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

More Repositories

1

react-circle

Renders a svg circle + progress, it just works ๐Ÿ’˜
TypeScript
959
star
2

microm

๐ŸŽต Beautiful library to convert browser microphone to mp3 in Javascript ๐ŸŽต
JavaScript
878
star
3

default-passive-events

Makes {passive: true} by default when EventListenerOptions are supported
JavaScript
357
star
4

chaosocket

๐Ÿ’ฅ Mock WebSockets and create chaos ๐Ÿ’ฅ
JavaScript
255
star
5

react-scroll-shadow

Pure CSS shadow to indicate more content in scrollable area
TypeScript
232
star
6

gh-emoji

Github emoji parsing done right โ˜๏ธ ๐Ÿ™ ๐Ÿ‘† ๐Ÿ‘ ๐Ÿ‘Œ
JavaScript
158
star
7

nodegram

๐Ÿค˜ Simplest Instagram Api library in Javascript
JavaScript
146
star
8

react-video-renderer

Build custom video players effortless
TypeScript
115
star
9

react-resize-observer-hook

ResizeObserver + React hooks
TypeScript
103
star
10

psaux

๐Ÿ“ฆ Process status in Node.js as you've always wanted
JavaScript
92
star
11

video-snapshot

Get snapshots from a video file in the browser ๐ŸŽฅ ๐ŸŒ…
TypeScript
86
star
12

maggie

๐ŸŒ… Get precious image info from an input file
JavaScript
75
star
13

react-keypress

๐Ÿ”ฅ multi Keypress detection handlers for React.js
JavaScript
61
star
14

run-when

Run tasks based on "Git diff" changes ๐Ÿƒ โž• โž–
JavaScript
61
star
15

react-cute

Render cute JSON in React
TypeScript
54
star
16

walter.js

:squirrel: Preload images with a Promise flavor
JavaScript
46
star
17

react-gh-corner

React portals + Github corners + Styled component = ๐Ÿ’˜
TypeScript
38
star
18

animotion

๐Ÿ’ซ Tiny module to listen for animation events in any element ๐Ÿ’ซ
JavaScript
38
star
19

clay

๐Ÿ’ƒ Resize your elements so simply it hurts
JavaScript
35
star
20

growy

โ†ช๏ธ Textarea-like web component which expands as the user types something โ†ฉ๏ธ
JavaScript
34
star
21

wallapop-webapp

๐Ÿ’ˆ Wallapop webapp
JavaScript
32
star
22

react-cristal

Beautiful window manager for React
TypeScript
30
star
23

html5-slug

Copy of the Metal Slug using canvas and javascript
JavaScript
26
star
24

react-assign

Update React state without boilerplate
JavaScript
24
star
25

ts-react-toolbox

Opinionated toolbox boilerplate to create Typescript React components ๐Ÿ› ๐Ÿ“ฆ
TypeScript
23
star
26

ember-delegations

โฌ…๏ธ โžก๏ธ Plugin for delegating ember properties in a very descriptive and easy way
JavaScript
20
star
27

superagent-serializer

Superagent plugin to convert server payload into different cases
JavaScript
18
star
28

react-smart-key

Pass anything as key without re-renders
TypeScript
17
star
29

saffy

๐Ÿ™ Safest way to get and set properties in Javascript
JavaScript
16
star
30

ember-cli-Mutation-Observer

๐Ÿ‘ฝ The easiest way to subscribe to Dom changes in your ember components
JavaScript
12
star
31

browserify-starter-kit

๐Ÿ‘ป A simple boilerplate for writing Javascript using Browserify, Karma.js, PhantomJS and Mocha
JavaScript
12
star
32

asynz

๐ŸŽฉ Hipster way of load async scripts in the browser
JavaScript
10
star
33

rxjs-async-map

Map an observable using an async function with a configurable concurreny level, while preserving element order.
TypeScript
10
star
34

chainable-api

๐Ÿผ Make your API calls chainables!
JavaScript
9
star
35

react-preview-file

Efficient image preview rendering from files โšก
TypeScript
9
star
36

ember-meme-generator

Awesome meme generator made with Ember.js
JavaScript
8
star
37

palindrome

Know if a string is a palindrome using Node.js with C++ native implementation
Python
7
star
38

react-observable-hook

Generic utility to get free updates from a RXJS observable using React hooks
TypeScript
7
star
39

spotyness

๐ŸŽต Spotify + Youtube + Ember.js ๐ŸŽต
JavaScript
7
star
40

observable

๐Ÿ‘€ Native and pure 100% html and javascript template bindings with Object.observe
JavaScript
5
star
41

skatepark.js

Curated set of components built with Skate.js
JavaScript
4
star
42

flat-files

Get a flatten array of dropped files using FileSystem api
TypeScript
4
star
43

runtastic-app

Runtastic loves Ember
JavaScript
4
star
44

react-memo

React.memo polyfill
TypeScript
4
star
45

react-progressive-img

Progressive image rendering made easy ๐Ÿ”ฎ
TypeScript
3
star
46

reactular

Angular directive for render React components
JavaScript
3
star
47

Leaflet.smoothzoom

Fixes the default leaflet zoom on OSX
JavaScript
3
star
48

page-ogtags

Get any website OG tags using Puppeteer
JavaScript
3
star
49

ember-cli-base64-converter

๐ŸŽˆ Convert imageUrl to base64 effortless
JavaScript
3
star
50

react-start-transition

React 18 startTransition polyfill
TypeScript
3
star
51

reemitter

Type safe event emitter
TypeScript
2
star
52

use-thread

Runs a function in a separate thread by using a Web Worker not blocking UI
TypeScript
2
star
53

porlabocamuereelpez

Por la boca muere el pez
CSS
2
star
54

node-palindrome-benchmark

Benchmark of palindrome algorithm in Node using Javascript vs C implementation
JavaScript
2
star
55

relaser

Javascript command line tool for release Node and Bower packages
JavaScript
2
star
56

prototype-tools

Set of utilities for Javascript Objects
JavaScript
2
star
57

stringifile

Stupid module to require file content wrapped in xml tags
JavaScript
2
star
58

chrome-ace-editor

Simple extension for Google Chrome browser that allow to use the "ACE" Javascript editor
JavaScript
2
star
59

audio-cover

Get the cover from an audio file in the browser
TypeScript
2
star
60

react-video-snapshot

Get a video snapshot with ease
1
star
61

react-above

Render children above the current component
1
star
62

heic-preview

Converts HEIC into something the browser can preview
TypeScript
1
star
63

react-zipizape

Read zips with ZipiZape and React
TypeScript
1
star
64

zipizape

Extract zip contents in the browser with ease
TypeScript
1
star
65

best-word

Returns the best word for "Words with friends" game
TypeScript
1
star
66

tacit-dom

virtual DOM implementation just for fun
1
star
67

cake.js

A set of utilities for share and create common components without dependencies
1
star
68

ig-stats-client

The UI of ig-stats
TypeScript
1
star
69

nooti

Favicon animation
JavaScript
1
star
70

effectus

micro reactive state management - just for fun
TypeScript
1
star
71

sloth-mode

Make all images lazy by default
1
star
72

unsuspense

Suspense like way of accessing data without waiting for its resolution
1
star
73

protobufun

playing with ProtoBuf
1
star
74

babel-plugin-promote-class-properties

Babel plugin to replace old code taking advantage of ClassProperties feature
JavaScript
1
star
75

web-stalker-server

Web scrapper server
JavaScript
1
star
76

react-mounted

Safely perform actions without worrying if the component is mounted
TypeScript
1
star
77

react-submenu

Unopinionated right click context menu so simple it hurts ๐Ÿ‘บ
TypeScript
1
star
78

zzarcon.github.io

Personal site
TypeScript
1
star
79

file-state-debugger

Chrome extension to debug file states
TypeScript
1
star
80

save-image

Save remote images locally with ease ๐ŸŒˆ๐Ÿ’พ
JavaScript
1
star
81

page-favicon

Get any website favicon using Puppeteer
JavaScript
1
star
82

zzarcon

Inception
TypeScript
1
star
83

map-marketer

Visualize and interact with markers on a map
TypeScript
1
star
84

url-attrs

Safely extract url query params into an object
TypeScript
1
star
85

react-blanket

Minimalistic Blanket in React, it just works ๐Ÿ’˜
TypeScript
1
star
86

unsplash-client

lightweight, opinionated, type safe, dependency free Unsplash client
TypeScript
1
star
87

react-devrender

Conditionally renders when DevTools are enabled
1
star
88

edyson

๐Ÿ’ก Visually edit any json object - powered by Web Componentsโ„ข๏ธ
JavaScript
1
star
89

xtore

General purpose lib to subscribe and handle state
TypeScript
1
star