2.0.1 • Published 3 years ago
@chalda/lock.js v2.0.1
LOCK 🔒︎ JS
Lock.js is a javaScript library for generating numbers lock.
Demo
Features
- Interactive - You can change combination by clicking, dragging or using the mouse wheel
- Events - There are events on change and when the entered code is the correct one or not
- Shuffle — You can randomize the lock procedurally
- Customizzable — It's easy to change the look via CSS
Installation and files
<link rel="stylesheet" href="dist/lock.css">
<script src="dist/lock.min.js"></script><div id="lock"></div>
<script>
new Lock();
</script>All pre-built files needed to use Lock can be found in the "dist" folder.
If you're looking to get started with minimal fuss, include dist/lock.min.js and dist/lock.css.
- dist/
- lock.min.js — Minimized version
- lock.css — Core style
- src/
You can install this module as a component from NPM:
npm install @chalda/lock.jsYou can also include this library in your HTML page directly from a CDN:
<link rel="stylesheet" href="https://unpkg.com/@chalda/lock.js/dist/lock.css">
<script src="https://unpkg.com/@chalda/lock.js/dist/lock.min.js"></script>Usage
new Lock(options);Options
The Lock parameter is a single optional options object, which has the following properties:
| Option | Type | Default | Description |
|---|---|---|---|
id | string | lock | The id of the div where insert the lock |
wheels | number | 5 | The numbers of wheels. If not specified then take the length of code option (if specified) |
items | number|string[] | 10 | The number of digits that can be chosen or an array of elements or an array of strings |
code | number|string|string[] | 00000 | The code to open the lock. If not specified then take the first element of items repeated wheels times |
encoded | boolean | false | If true the code option is considered obfuscated by the encode method |
timeout | number | 500 | The amount of time before the code can be changed again |
diameter | number | 80 | The diameter of the lock |
onChange | Function_Array code boolean isOpen number attempts _ | This function is called upon every change to the lock. Pass the current code (code), if the lock is open (isOpen) and the number of attempts made (attempts) | |
onOpen | Function_number attempts _ | This function is called when the lock opens (i.e. the code option matches) | |
onClose | Function_number attempts _ | This function is called when the lock closes (only when it's already open) |
Methods
| Method | Params | Return | Description |
|---|---|---|---|
getCode | string[] | Return the current codeExample:let lock = new Lock();lock.getCode(); | |
getAttempts | number | Return the number of attemptsExample:let lock = new Lock();lock.getAttempts(); | |
isOpen | boolean | Return true if the lock is openExample:let lock = new Lock();lock.isOpen(); | |
setCode | number|string|string[] code : The new code to set(optional) boolean animation : If true the code changes with an animation, default:true | Lock | Set the code of lockExample:let lock = new Lock();lock.setCode('12345'); |
shuffle | (optional) number min : Minimum number of rotations, default:10(optional) number max : Max number of rotations, default:100(optional) number time : Time of rotations in milliseconds, default:2500 | string[] | Shuffle the lock by turning each wheel betweenmin and max times taking time milliseconds.The method returns the new codeExample:let lock = new Lock();lock.shuffle(50,150,1000); |
encode | number|string|string[] text : The text to encode | string | Encode a stringExample:// Returns 'JD13TWo0bk1qNFhN'Lock.encode("123"); |
decode | number|string|string[] text : The text to decode | string[] | Decode a stringExample:// Returns ['1','2','3']Lock.encode("JD13TWo0bk1qNFhN"); |
License
ISC License (ISC) - Copyright ©2021 Chalda Pnuzig. See the file LICENSE