vue-easter-egg-trigger

Vue Easter Egg Trigger

This packages makes it nice and easy to add Easter Egg triggers to your Vue site.

Installation

npm i vue-easter-egg-trigger

Usage

import Vue from 'vue';
import EasterEggTrigger from 'vue-easter-egg-trigger';

Vue.use(EasterEggTrigger);

Plugin Options

Name	Type	Default	Description
delay	Integer	500	Determines the timeout before the event lister resets.
keys	Array	['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']	The key/click combination a user does to trigger easter egg. The default combination is the konami code.
pattern	Array	[38, 38, 40, 40, 37, 39, 37, 39, 66, 65]	The key combination a user does to trigger easter egg. (fallback for keys)
type	String	keydown	The type of action the trigger will be listening for.

Overriding the plugin default options

import Vue from 'vue';
import EasterEggTrigger from 'vue-easter-egg-trigger';

Vue.use(EasterEggTrigger, {
  delay: 1000,
  keys: ['ArrowUp', 'ArrowDown'],
  pattern: [38, 40],
  type: 'keyup'
});

Easter Egg Options

Name	Type	Default	Description
callback	Function	null	The callback function
destroyBus	Boolean	false	Determines if a bus $on event is destroyed automatically
keys	Array	false	The key/click combination a user does to trigger easter egg.
name	String	easter-egg	Identifier & used for even bus callback
pattern	Array	false	The key combination a user does to trigger easter egg. (fallback for keys)
target	String	div	Use this to target DOM elements, Id's, or Class Names. Used with click events.
withBus	Boolean	true	Determines if a bus event is emitted

Instance Methods

There are two instance methods available to use. $easterEgg $easterEggTrigger

Key Event Examples

The default key combination to trigger the easter egg is the Konami Code.

ex. ↑ ↑ ↓ ↓ ← → ← → b a

Bare Egg Example.

this.$bus.$on('easter-egg', () => {
  // do something...
});

this.$easterEgg();

Key Event with Callback & Bus Emit

this.$bus.$on('easter-egg', () => {
  // also do something...
});

this.$easterEgg({
  name: 'easter-egg',
  callback() {
    // do something ...
  },
});

Key Event with Callback only

this.$easterEgg({
  name: 'easter-egg',
  callback() {
    // do something ...
  },
  withBus: false,
});

Mouse Event Examples

First you will need to set the type in the plugin options.

Available types of Mouse Events: click, dblclick, mouseup, mousedown. When using dblclick the pattern will only work with one double click. Ex. pattern: ['dblclick']

import Vue from 'vue';
import EasterEggTrigger from 'vue-easter-egg-trigger';

Vue.use(EasterEggTrigger, {
  type: 'click'
});

Mouse Event with Callback & Bus Emit

this.$bus.$on('easter-egg', () => {
  // also do something...
});

this.$easterEgg({
  name: 'easter-egg',
  pattern: ['click', 'click'],
  callback() {
    // do something...
  },
});

Mouse Event using a DOM element target

this.$easterEgg({
  name: 'easter-egg',
  pattern: ['click', 'click'],
  target: 'h1',
});

Mouse Event using an ID target

this.$easterEgg({
  name: 'easter-egg',
  pattern: ['click', 'click'],
  target: '#foo',
});

Mouse Event using an Class target

this.$easterEgg({
  name: 'easter-egg',
  pattern: ['click', 'click'],
  target: '.foo',
});

More Examples

You can find more examples in the EasterEgg.vue file.

Demo

Coming soon to an animal santuary near you.

Change Log

CHANGELOG

License

Copyright (c) 2021 WebDevNerdStuff Licensed under the MIT license.

Changelog

v1.0.0

2022-01-26 [main] Initial release (@webdevnerdstuff)