vanilla-pattern-lock

Android like pattern unlock.

Features

• Converts pattern to number
• Vanilla JS - no external libs required
• Support for touch devices
• Small size (less than 10KB)
• TS typings

Demo

https://maxwroc.github.io/vanilla-pattern-lock/

Usage

const lock = new PatternLock({ 
    vibrate: true // whether to vibrate on dot/node selection (mobile devices)
});

lock
  .render(document.getElementById("lockContainer"))
  .on("complete", pattern => { // triggers when user stops swiping
      if (pattern == 12345) {
          lock.success(); // green markers
      }
      else {
          lock.failure(); // red markers
          setTimeout(() => {
              lock.clear();
          }, 2000);
      }
  })

Documentation

Methods

Method interface	Return value	Description
render(container: Element)	PatternLock	Renders pattern lock SVG element container - Element in which SVG will be rendered
clear()	PatternLock	Clears existing selection and resets internal state
getPattern()	number	Returns current pattern
success()	PatternLock	Shows success markers/indicators
failure()	PatternLock	Shows failure markers/indicators

Event related methods

Method interface	Return value	Description
on(name: string, func: Function)	PatternLock	Sets handler for an event (for handler interface look below)
off(name: string, func: Function)	PatternLock	Removes handler for an event

Events

Event name	Handler interface	Description
complete	(pattern: number): void	Fired when user finished entering pattern
select	(index: number, elem: Element): void	Fired when the dot/node is selected. index - Index of the dot/node elem - Dot element (SVG image element)
selectionStart	(): void	Fired when user starts entering pattern
selectionEnd	(): void	Fired when user ends entering pattern
clear	(): void	Fired when clear method is called (current pattern is erased)

Settings

Name	Type	Description
vibrate	boolean	Whether to vibrate when dot is selected

Installation / download

• Install via NMP

  npm install vanilla-pattern-lock
  

• Github releases: vanilla-pattern-lock/releases

Like it? Star it!

If you like it please consider leaving star on github.

Credits

This code is based on Tympanix/pattern-lock-js. The original library depends on JQuery and it is written in plain JS. I have rewritten the original code in TypeScript and I've added few additional features.