Github. IO/RH… Project Address: github.com/jrainlau/r….

The original

When producing on the front end of the business, there may still be some functionality that needs to be hidden and shown only when certain conditions are met, which can be referred to as “lab functionality.” The usual approach is to set a switch at a deep level in apps like Segmentfault and Zhihu to turn on lab functions, or to enable hidden functions by entering a specific string in the dialog box like wechat. RhykeJS references many of these practices and comes up with the idea of using Morse code rhythm as a gesture code to unlock lab functions.

The principle of

RhykeJS derives its name from the combination of “rhythm” and “awake”, meaning “awake by rhythm”.

Inside RhykeJS, listen for user click events (mouse or touch events) within a specified range. By setting dashTime, you can specify a time to distinguish between “short signals” and “long signals” and convert it directly into rhythm. And -. An event is emitted when the input rhythm matches the set rhythm.

You can preview it in Codepen: codepen. IO /jrainlau/p…. Click preview

Installation and introduction

Installation through YARN or NPM is supported.

yarn add rhykeCopy the code

or

npm install rhyke --saveCopy the code

RhykeJS is packaged as a UMD module that supports ES Modules, CommonJS, and Web browser implementations.

  • ES6 modules

    import Rhyke from 'rhyke'Copy the code

  • CommonJS

    const Rhyke = require('rhyke').defaultCopy the code

  • Web broswer

    <script src="rhyke.js"></script>
<script>
    const Rhyke = window.Rhyke.default
</script>Copy the code

use

The introduced Rhyke instance is a constructor that needs to be initialized with the new operator and passed in a configuration object.

const rhyke = new Rhyke({ rhythm: '... -... ', matching (rhyArr) {/ / get the user's pace of Morse code input / / such as [". ", ""," - ", "-", "-", ""]}, matched () {/ / when the input set rhythm and the rhythm of the match trigger}, Unmatched () {// triggered when the input rhythm does not match the set rhythm}, onTimeout () {// triggered when the gesture password input times out}})Copy the code

configuration

Rhyke accepts a configuration object as a parameter

DefaultOptions = {// Listen range, default is "body" el: 'body', // define Morse code rhythm, short is ". , long as "-", default is "..." rhythm: '... DashTime: 400, // Specify the timeout period for the input. If the timeout period expires, obtain the user's rhythm input again. The default value is 2000 milliseconds timeout: 2000, // Whether to enable the mobile touch event. TabEvent: false, // Get user's Morse code rhythm input matching: (arr) => {}, // When the input rhythm is matched with the set rhythm, trigger the matched: () => {}, // When the input rhythm is not matched with the set rhythm, trigger the matched: () => {}, // Trigger onTimeout when gesture password input times out: () => {}}Copy the code

API

Sometimes, it may only need to enable the laboratory function once, and then cancel the Rhyke event in the monitored range after it is started. Then, the event can be unbound by the following methods at the end of the matched stage:

matched () {
  // something was awoke
  rhyke.removeListener()
}Copy the code

certificate

MIT