Skip to content

Commit 6b9f693

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Rebuild, and I'm too lazy to list all the commit updates for this one
1 parent ee981b4 commit 6b9f693

File tree

3 files changed

+458
-59
lines changed

3 files changed

+458
-59
lines changed

‎src/components/EasterEggComponent.vue‎

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,72 @@
11
<template>
2-
<div></div>
2+
<div @callback="callback" @triggered="triggered"></div>
33
</template>
44

55
<script>
6+
import Vue from 'vue';
67
import EasterEggTriggerCore from '../plugin/index';
78
89
export default {
910
name: 'EasterEggComponent',
10-
props: {},
11+
props: {
12+
destroyBus: {
13+
default: false,
14+
type: Boolean,
15+
},
16+
name: {
17+
default: 'easter-egg-component',
18+
type: String,
19+
},
20+
pattern: {
21+
default: () => ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'],
22+
type: Array,
23+
},
24+
target: {
25+
default: 'div',
26+
type: String,
27+
},
28+
type: {
29+
default: 'keydown',
30+
type: String,
31+
},
32+
withBus: {
33+
default: true,
34+
type: Boolean,
35+
},
36+
},
1137
data: () => ({
12-
defaultOptions: {},
38+
defaultOptions: {
39+
delay: 500,
40+
},
41+
options: {},
1342
}),
14-
computed: {},
15-
watch: {},
16-
created() {
17-
console.log('EasterEggComponent created');
43+
mounted() {
44+
this.buildOptions();
1845
},
19-
mounted() { },
2046
methods: {
47+
buildOptions() {
48+
this.options = {
49+
callback: this.callback,
50+
destroyBus: this.destroyBus,
51+
name: this.name,
52+
pattern: this.pattern,
53+
target: this.target,
54+
triggered: this.triggered,
55+
type: this.type,
56+
withBus: this.withBus,
57+
};
58+
59+
this.init();
60+
},
61+
callback() {
62+
this.$emit('callback', this.options);
63+
},
64+
init() {
65+
EasterEggTriggerCore.init(Vue, this.defaultOptions, this.options);
66+
},
67+
triggered() {
68+
this.$emit('triggered', this.options);
69+
},
2170
},
2271
};
2372
</script>

‎src/components/HelloWorld.vue‎

Lines changed: 193 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,35 @@
55
<header>
66
<div>
77
<svg
8-
xmlns="http://www.w3.org/2000/svg"
9-
xmlns:xlink="http://www.w3.org/1999/xlink"
108
aria-hidden="true"
11-
role="img"
129
class="iconify iconify--logos logo vue"
13-
width="37.07"
1410
height="36"
1511
preserveAspectRatio="xMidYMid meet"
12+
role="img"
1613
viewBox="0 0 256 198"
14+
width="37.07"
15+
xmlns="http://www.w3.org/2000/svg"
16+
xmlns:xlink="http://www.w3.org/1999/xlink"
1717
>
1818
<path
19-
fill="#41B883"
2019
d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"
20+
fill="#41B883"
2121
></path>
2222
<path
23-
fill="#41B883"
2423
d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"
24+
fill="#41B883"
2525
></path>
2626
<path
27-
fill="#35495E"
2827
d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"
28+
fill="#35495E"
2929
></path>
3030
</svg>
3131
</div>
32-
<h1>Vue 2 Easter Egg Trigger</h1>
32+
<h1>
33+
Vue 2 Easter Egg Trigger
34+
<span v-if="clickH1Triggered">&nbsp;(clicked via component)</span>
35+
</h1>
36+
3337
<a href="https://github.com/webdevnerdstuff/vue-easter-egg-trigger">
3438
<img
3539
src="https://img.shields.io/github/package-json/v/webdevnerdstuff/vue-easter-egg-trigger"
@@ -41,49 +45,212 @@
4145
</header>
4246

4347
<div class="buttons">
44-
<button id="id-target" class="btn">Click Target Element by ID</button>
48+
<button id="id-target" class="btn" :disabled="clickIdTriggered">
49+
Click Target Element by ID
50+
</button>
4551

4652
<div class="callback-container">
47-
<button class="btn class-target">
53+
<button class="btn class-target" :disabled="clickClassTriggered">
4854
Click Target Element by Class w/callback
4955
</button>
5056

51-
<div class="callback-triggered">Callback Triggered</div>
57+
<div class="callback-triggered" :class="callbackTriggeredClass">
58+
Callback triggered
59+
</div>
60+
</div>
61+
62+
<div class="callback-container">
63+
<button
64+
class="btn using-component"
65+
:disabled="clickedComponentTriggered"
66+
>
67+
Click using component
68+
</button>
69+
70+
<div
71+
class="callback-triggered"
72+
:class="componentCallbackTriggeredClass"
73+
>
74+
Component callback triggered
75+
</div>
5276
</div>
5377

54-
<button class="btn double-click-target">
78+
<button class="btn double-click-target" :disabled="dblclickTriggered">
5579
Double Click Target Element by Class
5680
</button>
5781
</div>
5882

5983
<div class="konami-container">
6084
Konami Code ↑ ↑ ↓ ↓ ← → ← → b a
61-
<div class="konami-triggered">Konami Code Triggered</div>
85+
<div class="konami-triggered" :class="konamiTriggeredClass">
86+
Konami code triggered
87+
</div>
6288
</div>
6389
</div>
6490

6591
<footer>&copy; 2022 WebDevNerdStuff</footer>
6692

67-
<EasterEggComponent :pattern="['ArrowDown', 'ArrowDown']" />
93+
<EasterEggComponent
94+
:pattern="['click']"
95+
target=".using-component"
96+
type="click"
97+
@callback="callbackEvent('using-component')"
98+
@triggered="triggeredEvent('using-component')"
99+
/>
100+
101+
<component :is="activeEasterEgg" @closeEasterEgg="closeEasterEgg" />
68102
</div>
69103
</template>
70104

71105
<script>
106+
import Vue from 'vue';
107+
import EasterEgg from './EasterEgg.vue';
108+
109+
const EventBus = new Vue();
110+
Object.defineProperties(Vue.prototype, {
111+
$bus: {
112+
get() {
113+
return EventBus;
114+
},
115+
},
116+
});
72117
73118
export default {
74119
name: 'HelloWorldComponent',
75-
components: {},
120+
components: {
121+
EasterEgg,
122+
},
76123
props: {},
77-
data: () => ({}),
78-
computed: {},
79-
watch: {},
124+
data: () => ({
125+
activeEasterEgg: null,
126+
callbackTriggeredClass: '',
127+
clickClassTriggered: false,
128+
clickH1Triggered: false,
129+
clickIdTriggered: false,
130+
clickedComponentTriggered: false,
131+
componentCallbackTriggeredClass: '',
132+
dblclickTriggered: false,
133+
konamiTriggeredClass: '',
134+
logStyle: {},
135+
}),
80136
mounted() {
81-
this.$easterEgg({
82-
name: 'method name',
83-
pattern: ['ArrowUp', 'ArrowUp'],
137+
this.logStyle = [
138+
'background-color: black',
139+
`border-image: linear-gradient(to right,
140+
hsl(0, 100%, 50%),
141+
hsl(39, 100%, 50%),
142+
hsl(60, 100%, 50%),
143+
hsl(120, 100%, 50%),
144+
hsl(180, 100%, 50%),
145+
hsl(240, 100%, 50%),
146+
hsl(300, 100%, 50%),
147+
hsl(360, 100%, 50%)
148+
) 1`,
149+
'border-style: solid',
150+
'border-width: 4px',
151+
'color: #fff',
152+
'font-weight: normal',
153+
'padding: 8px',
154+
];
155+
156+
this.$bus.$on('id-target', (el) => {
157+
this.logResults(`${el} bus event`);
84158
});
159+
160+
this.buildEggs();
85161
},
86162
methods: {
163+
buildEggs() {
164+
const $this = this;
165+
166+
this.$easterEgg({
167+
name: 'id-target',
168+
pattern: ['click'],
169+
type: 'click',
170+
target: '#id-target',
171+
callback() {
172+
$this.triggered('clicked-id');
173+
},
174+
withBus: true,
175+
});
176+
177+
this.$easterEgg({
178+
name: 'class-target',
179+
pattern: ['click'],
180+
type: 'click',
181+
target: '.class-target',
182+
callback() {
183+
$this.triggered('clicked-class');
184+
$this.callbackEvent('clicked-class');
185+
},
186+
triggered() {
187+
$this.triggeredEvent('clicked-class');
188+
},
189+
});
190+
191+
this.$easterEgg({
192+
name: 'double-click-target',
193+
pattern: ['dblclick'],
194+
type: 'dblclick',
195+
target: '.double-click-target',
196+
callback() {
197+
$this.triggered('dblclick');
198+
},
199+
});
200+
201+
this.$easterEgg({
202+
name: 'konami-code',
203+
callback() {
204+
$this.triggered('konami');
205+
},
206+
});
207+
},
208+
callbackEvent(el) {
209+
this.triggered(el, `${el} callback event`);
210+
},
211+
triggeredEvent(el) {
212+
this.logResults(`${el} triggered event`);
213+
},
214+
closeEasterEgg() {
215+
this.activeEasterEgg = null;
216+
},
217+
logResults(el) {
218+
// eslint-disable-next-line no-console
219+
console.log('%c%s', this.logStyle.join(';'), `triggered: ${el}`);
220+
},
221+
triggered(el, msg = null) {
222+
const message = msg || el;
223+
224+
if (el === 'h1-clicked') {
225+
this.clickH1Triggered = true;
226+
}
227+
228+
if (el === 'clicked-id') {
229+
this.clickIdTriggered = true;
230+
}
231+
232+
if (el === 'clicked-class') {
233+
this.callbackTriggeredClass = 'active';
234+
this.clickClassTriggered = true;
235+
}
236+
237+
if (el === 'using-component') {
238+
this.clickedComponentTriggered = true;
239+
this.componentCallbackTriggeredClass = 'active';
240+
}
241+
242+
if (el === 'dblclick') {
243+
this.dblclickTriggered = true;
244+
}
245+
246+
if (el === 'konami') {
247+
this.konamiTriggeredClass = 'active';
248+
}
249+
250+
this.logResults(message);
251+
252+
this.activeEasterEgg = EasterEgg;
253+
},
87254
},
88255
};
89256
</script>
@@ -93,6 +260,11 @@ h1 {
93260
margin-bottom: 10px;
94261
}
95262
263+
h1 span {
264+
font-size: 12px;
265+
font-weight: bold;
266+
}
267+
96268
h5 {
97269
margin: 0 0 20px 0;
98270
}

0 commit comments

Comments
 (0)