Skip to content

Commit 0ebba1f

Browse files
committed
feat: use one API to handle events
1 parent c7400b0 commit 0ebba1f

File tree

4 files changed

+54
-21
lines changed

4 files changed

+54
-21
lines changed

src/components/vertical-nav/vertical-nav.ts

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import cdIcon from "/img/common/cd_icon_green.png"
33
import githubIcon from './assets/github-icon.svg'
44
import linkedIcon from './assets/linkedin-icon.svg'
55
import instagramIcon from './assets/instagram-icon.svg'
6-
6+
import {EventBus} from "../../event-bus";
7+
import {Events} from "../../consts/events";
8+
import {handlers} from "../../consts/handlers";
79

810
const menuTitle: string = "CD-BASH";
911

@@ -13,47 +15,73 @@ const instagramProfile: string = "https://www.instagram.com/charlesdouc/"
1315
const footerCopyrights: string = "© 2025 Charles Doucet - All Rights Reserved";
1416

1517

18+
const EVENT_BUS = new EventBus<Events>();
19+
EVENT_BUS.subscribe('button_test', handlers.button_test);
20+
21+
1622
export function VerticalNav() {
1723
const menuBox = document.createElement("div");
1824
menuBox.id = "vertical-nav";
1925

20-
menuBox.innerHTML += navHeader;
26+
menuBox.appendChild(navHeaderBlock());
2127
menuBox.appendChild(testButtons());
22-
menuBox.innerHTML += navFooter;
28+
//menuBox.innerHTML += navFooter;
2329

2430
return menuBox;
2531
}
2632

2733
// ----------------------------------------------------------------------
2834

29-
const navHeader = `
30-
<div class="header">
31-
<div class="top-triangle"></div>
32-
<div class="info">
33-
<img class="icon" src="${cdIcon}" class="logo vanilla" alt="CD-Bash logo" />
34-
<h5>${menuTitle}</h5>
35-
</div>
36-
</div>
37-
`
35+
function navHeaderBlock() {
36+
const headerContainer = document.createElement("div");
37+
const topTriangle = document.createElement("div");
38+
const info = document.createElement("div");
39+
const icon = document.createElement("img");
40+
const title = document.createElement("h5");
41+
42+
headerContainer.className = "header";
43+
topTriangle.className = "top-triangle";
44+
45+
info.className = "info";
46+
icon.className = "icon";
47+
icon.src = cdIcon;
48+
49+
title.textContent = menuTitle;
50+
51+
headerContainer.appendChild(topTriangle);
52+
headerContainer.appendChild(info);
53+
info.appendChild(icon);
54+
info.appendChild(title);
55+
56+
return headerContainer;
57+
}
58+
3859

3960
function testButtons() {
4061
const buttonContainer = document.createElement("div");
41-
buttonContainer.className = "button-container";
42-
4362
const buttonA = document.createElement("button");
4463
const buttonB = document.createElement("button");
4564

65+
buttonContainer.className = "button-container";
66+
67+
buttonA.id = "button-a";
4668
buttonA.className = "button";
4769
buttonA.textContent = "Button A";
70+
buttonB.id = "button-b";
4871
buttonB.className = "button";
4972
buttonB.textContent = "Button B";
5073

74+
75+
buttonA.addEventListener('click', () => EVENT_BUS.dispatch('button_test', {path: "Button A"}));
76+
buttonB.addEventListener('click', () => EVENT_BUS.dispatch('button_test', {path: "Button B"}));
77+
5178
buttonContainer.appendChild(buttonA);
5279
buttonContainer.appendChild(buttonB);
5380

5481
return buttonContainer;
5582
}
5683

84+
5785
const navFooter = `
5886
<div class="nav-footer">
5987
<ul class="socials">
@@ -63,4 +91,7 @@ const navFooter = `
6391
</ul>
6492
<p class="copyrights">${footerCopyrights}</p>
6593
</div>
66-
`
94+
`
95+
96+
97+

src/consts/events/events.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
export type Events = {
2-
readonly nav_event: {
2+
readonly button_test: {
33
readonly path: string;
4-
readonly name: number
54
};
65
};

src/consts/handlers/handlers.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Events} from "../events";
22

33
export const handlers = {
4-
nav_event: (value: Events['nav_event']): void => {
5-
console.log(`Handling foo_event: ${JSON.stringify(value, null, 2)}`);
4+
button_test: (value: Events['button_test']): void => {
5+
console.log(value);
66
},
77
};

src/index.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import './views/home-view/styles.css'
22
import { ProjectPage } from "./content/projects/tank";
3-
import { VerticalNav } from "./components/vertical-nav/vertical-nav";
3+
import { VerticalNav } from "./components/vertical-nav";
4+
5+
const nav = VerticalNav();
46

57
function init() {
68
document.querySelector<HTMLBodyElement>('.home-page')!.appendChild(ProjectPage());
7-
document.querySelector<HTMLBodyElement>('.home-page')!.appendChild(VerticalNav());
9+
document.querySelector<HTMLBodyElement>('.home-page')!.appendChild(nav);
10+
811
}
912

1013
init();

0 commit comments

Comments
 (0)