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	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 code Example: let lock = new Lock(); lock.getCode();
getAttempts		number	Return the number of attempts Example: let lock = new Lock(); lock.getAttempts();
isOpen		boolean	Return true if the lock is open Example: 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 lock Example: 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 code Example: let lock = new Lock(); lock.shuffle(50,150,1000);
encode	number|string|string[] text : The text to encode	string	Encode a string Example: // Returns 'JD13TWo0bk1qNFhN' Lock.encode("123");
decode	number|string|string[] text : The text to decode	string[]	Decode a string Example: // Returns ['1','2','3'] Lock.encode("JD13TWo0bk1qNFhN");

---

License

ISC License (ISC) - Copyright ©2021 Chalda Pnuzig. See the file LICENSE