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	Determins the timeout before the event lister resets
keys	Array	['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']	The keys a user needs to enter to trigger the easter egg. The default combination is the konami code.
pattern	Array	[38, 38, 40, 40, 37, 39, 37, 39, 66, 65]	The keyCode a user enters to trigger the easter egg. This is a fallback for the keys option as it is depreciated.
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	html	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.

Change Log

CHANGELOG

License

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