LOCK 🔒︎ JS

Lock.js is a javaScript library for generating numbers lock.

Demo

chalda.github.io/lock.js

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/
  • styles/
    • lock.scss — Core styles
  • js/
    • lock.js — Full version

You can install this module as a component from NPM:

npm install @chalda/lock.js

You 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 | FunctionArray 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 | Functionnumber attempts | | This function is called when the lock opens (i.e. the code option matches)
| onClose | Functionnumber 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