https://github.com/maxwroc/vanilla-pattern-lock
Android like pattern unlock
https://github.com/maxwroc/vanilla-pattern-lock
alarm-panel android pattern-lock
Last synced: 5 months ago
JSON representation
Android like pattern unlock
- Host: GitHub
- URL: https://github.com/maxwroc/vanilla-pattern-lock
- Owner: maxwroc
- License: mit
- Created: 2021-12-08T21:38:31.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-12-10T20:06:26.000Z (over 4 years ago)
- Last Synced: 2025-05-11T17:45:38.991Z (11 months ago)
- Topics: alarm-panel, android, pattern-lock
- Language: TypeScript
- Homepage: https://maxwroc.github.io/vanilla-pattern-lock/
- Size: 64.5 KB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vanilla-pattern-lock
[](https://www.npmjs.com/package/vanilla-pattern-lock)
[](https://www.npmjs.com/package/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
```javascript
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](https://github.com/maxwroc/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](https://github.com/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.