Vue Easter Egg Trigger

 

Description

The vue-easter-egg-trigger component makes it nice and easy to add Easter Egg triggers to your Vue site. Also available for Vue 3 at vue3-easter-egg-trigger.

Installation

pnpm

pnpm add vue-easter-egg-trigger

npm

npm i vue-easter-egg-trigger

Register

Plugin Registration

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

Vue.use(EasterEggTrigger);

Component Registration

import { EasterEggComponent } from 'vue-easter-egg-trigger';

Usage

Demo

See it in action on the Demo Page

Options

Plugin Global Options

Name	Type	Default	Description
delay	Integer	500	Determines the timeout before the event lister resets.

Overriding the plugin default delay option

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

Vue.use(EasterEggTrigger, {
  delay: 1000,
});

Easter Egg Options

Name	Type	Default	Description
callback	Function	null	The callback function.
destroyBus	Boolean	true	Determines if a bus $on event is destroyed automatically.
name	String	easter-egg	Identifier & used for even bus callback.
pattern	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.
target	String	div	Use this to target DOM elements, Id's, or Class Names. Used with click events.
triggered	Function	null	Same functionality as the callback option.
type	String	keydown	The type of action the trigger will be listening for.
withBus	Boolean	false	Determines if a bus event is emitted.

Events Handlers (component only)

Name	Response	Description
callback	$event	The callback event handler. If you use $event it will return the easter egg options object.
triggered	$event	Same functionality as the callback event handler.

Example

<EasterEggComponent
  @callback="callbackEvent($event)"
/>

Component

When using the component you will setup VueEasterEggTrigger using the Component Registration.

Events

Instead of using :callback and :triggered as an option you can use the @callback and @triggered event handlers.

Examples

Key Event Examples

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

Bare Egg Example.

<template>
  <EasterEggComponent
    type="click"
    @callback="callbackEvent('using-component')"
  />
</template>

Key Event with Callback & Bus Emit

<EasterEggComponent
  :withBus"true"
  type="keydown"
  @callback="callbackEvent('using-component')"
/>

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

export default {
  methods: {
    callbackEvent(name) {
      // do something ...
    },
  },
};
</script>

Key Event with Callback only

<EasterEggComponent
  type="keydown"
  @callback="callbackEvent('using-component')"
/>

<script>
export default {
  methods: {
    callbackEvent(name) {
      // do something ...
    },
  },
};
</script>

Key Event with Triggered only

<EasterEggComponent
  type="keydown"
  @triggered="triggeredEvent('using-component')"
/>

<script>
export default {
  methods: {
    triggeredEvent(name) {
      // do something ...
    },
  },
};
</script>

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']

<EasterEggComponent
  type="click"
  @callback="callbackEvent('using-component')"
/>

<script>
export default {
  methods: {
    callbackEvent(name) {
      // do something ...
    },
  },
};
</script>

Mouse Event with Callback & Bus Emit

<EasterEggComponent
  type="click"
  @callback="callbackEvent('using-component')"
/>

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

export default {
  methods: {
    callbackEvent(name) {
      // do something ...
    },
  },
};
</script>

Mouse Event using a DOM element target

<EasterEggComponent
  type="click"
  target="h1"
  @callback="callbackEvent('using-component')"
/>

<script>
export default {
  methods: {
    callbackEvent(name) {
      // do something ...
    },
  },
};
</script>

Mouse Event using an ID target

<EasterEggComponent
  type="click"
  target="#foo"
  pattern="['click', 'click']"
  @callback="callbackEvent('using-component')"
/>

<script>
export default {
  methods: {
    callbackEvent(name) {
      // do something ...
    },
  },
};
</script>

Mouse Event using an Class target

<EasterEggComponent
  type="click"
  target=".foo"
  pattern="['click', 'click', 'click']"
  @callback="callbackEvent('using-component')"
/>

<script>
export default {
  methods: {
    callbackEvent(name) {
      // do something ...
    },
  },
};
</script>

Instance Methods

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

When using an instance method you will setup VueEasterEggTrigger using the Plugin Registration.

Examples

Key Event Examples

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

Bare Egg Example.

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

this.$easterEgg({
  withBus: true,
});

Key Event with Callback & Bus Emit

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

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

Key Event with Callback only

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

Key Event with Triggered only

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

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',
  callback() {
    // do something ...
  },
});

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...
  },
  withBus: true,
});

Mouse Event using a DOM element target

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

Mouse Event using an ID target

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

Mouse Event using an Class target

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

Practical Usage Example

You can find a real world example on how to use the plugin in the HelloWorld.vue file.

Change Log

CHANGELOG

License

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