Adding back stuff I thought wasn't used, but was... whoospies

Author: webdevnerdstuff

src/plugin/VEasterEggTrigger.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import {
-	// Entry,
 	Props,
-	// Targets,
+	Targets,
 } from '@/plugin/types';
 import {
-	// findIndex,
+	includes,
 	isEqual,
+	uniq,
 } from 'lodash';
 import { globalOptions } from './';
 
@@ -16,56 +16,60 @@ const emit = defineEmits(['triggered']);
 // -------------------------------------------------- Props //
 const props = withDefaults(defineProps<Props>(), {
 	delay: 500,
-	destroy: true,
 	pattern: () => ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'],
+	persist: false,
 	target: 'body',
 	type: 'keydown',
 });
 
-
 const injectedOptions = inject(globalOptions, {});
 const settings = reactive<Props>({ ...props, ...injectedOptions });
 
 watchEffect(() => {
 	Object.assign(settings, { ...props, ...injectedOptions });
 });
 
-let timeout: ReturnType<typeof setTimeout> = setTimeout(() => { });
 let input = reactive<string[]>([]);
 let listenElement = null as HTMLElement | null;
-
-
-onMounted(() => {
-	layEggs();
+let timeout: ReturnType<typeof setTimeout> = setTimeout(() => { });
+const mouseEvents: string[] = reactive([
+	'click', // Works with multiple single clicks pattern
+	'dblclick', // Only works with single double click pattern set
+	'mouseup', // Works with multiple mouseup clicks pattern
+	'mousedown', // Works with multiple mousedown clicks pattern
+]);
+const targets: Targets = reactive({
+	classNames: [],
+	ids: [],
+	nodes: [],
 });
 
 
-// Initiate the plugin //
-function layEggs() {
+onMounted(() => {
 	addListener();
-}
+});
 
 
 // Add event listeners //
-function addListener() {
+function addListener(): void {
 	const type = settings.type as keyof Props;
-	listenElement = document.querySelector(settings.target as string);
+	listenElement = document.querySelector(settings.target as keyof Props);
 
 	if (!listenElement) {
 		throw new Error(`Element not found: ${settings.target}`);
 	}
 
 	if (settings.target === 'body') {
-		listenElement.addEventListener(type, capturePattern as EventListener, false);
+		listenElement.addEventListener(type, capturePattern as EventListener, true);
 		return;
 	}
 
-	listenElement.addEventListener(type, emitMouseEvent as EventListener, false);
+	listenElement.addEventListener(type, capturePattern as EventListener, true);
 }
 
 
 // Capture the Keys Pattern //
-function capturePattern(e: KeyboardEvent) {
+function capturePattern(e: KeyboardEvent): void {
 	const key = ref('');
 
 	if (timeout !== null) {
@@ -77,14 +81,29 @@ function capturePattern(e: KeyboardEvent) {
 		key.value = e.key;
 	}
 
+	// -------------------- Mouse Events //
+	if (includes(mouseEvents, e.type)) {
+		const target = e.currentTarget as HTMLTextAreaElement;
+		key.value = e.type;
+
+		targets.nodes.push(target.nodeName.toLowerCase());
+		targets.ids.push(target.id);
+		targets.classNames.push(target.classList.value);
+	}
+
 	input.push(key.value);
-	checkPattern();
+	checkPattern(e);
 }
 
 
 // Check the Keys Pattern //
-function checkPattern() {
+function checkPattern(e: Event | MouseEvent | KeyboardEvent): void {
 	if (isEqual(settings.pattern, input)) {
+		if (includes(mouseEvents, e.type)) {
+			checkTarget();
+			return;
+		}
+
 		emitEvent();
 		return;
 	}
@@ -93,8 +112,33 @@ function checkPattern() {
 }
 
 
+// Check Click Targets //
+function checkTarget(): void {
+	// Get clean egg target //
+	const node = settings.target as keyof Props;
+	const id = node.replace('#', '');
+	const className = node.replace('.', '');
+
+	// Reduce targets to unique values //
+	const nodes = uniq(targets.nodes);
+	const ids = uniq(targets.ids);
+	const classNames = uniq(targets.classNames);
+
+	// Targets array should reduce down to one value, and match the clean egg target //
+	const nodeTargetsMatch = ref(nodes.length === 1 && nodes[0] === node);
+	const idTargetsMatch = ref(ids.length === 1 && ids[0] === id);
+	const classTargetsMatch = ref(classNames.length === 1 && includes(classNames[0], className));
+
+	if (nodeTargetsMatch.value || idTargetsMatch.value || classTargetsMatch.value) {
+		emitEvent();
+	}
+
+	reset();
+}
+
+
 // Reset //
-function reset() {
+function reset(): void {
 	// Reset timeout and clear input keys //
 	timeout = setTimeout(() => {
 		clearTimeout(timeout);
@@ -106,25 +150,23 @@ function reset() {
 
 
 // Emit Event and/or Callback //
-function emitEvent() {
-	completeHatching(capturePattern as EventListener);
-}
-
-function emitMouseEvent() {
-	completeHatching(emitMouseEvent);
-}
-
-
-// Complete the process //
-function completeHatching(event: EventListener) {
+function emitEvent(): void {
 	if (settings.callback) {
 		settings.callback(settings);
 	}
 
 	emit('triggered', props);
 
-	if (props.destroy) {
-		listenElement?.removeEventListener(settings.type as keyof Props, event, false);
+	if (!settings.persist) {
+		destroyEvent(capturePattern as EventListener);
+	}
+}
+
+
+// Destroy the event listener //
+function destroyEvent(event: EventListener): void {
+	if (listenElement) {
+		listenElement.removeEventListener(settings.type as keyof Props, event, true);
 	}
 }
 </script>

src/plugin/index.ts

@@ -16,6 +16,9 @@ export function createVEasterEggTrigger(options: Props = {}) {
 
 export default VEasterEggTrigger;
 
+const EasterEggTrigger = VEasterEggTrigger;
+
 export {
+	EasterEggTrigger,
 	VEasterEggTrigger,
 };

src/plugin/types/index.ts

@@ -9,6 +9,13 @@ export interface Props {
 	destroy?: boolean | undefined;
 	delay?: number;
 	pattern?: string[];
+	persist?: boolean;
 	target?: string;
 	type?: string;
 }
+
+export interface Targets {
+	nodes: string[];
+	ids: string[];
+	classNames: string[];
+}