Skip to content

Commit 44859fd

Browse files
refactor AppComponent to implement AppListener; enhance component selection and add dynamic navbar
1 parent f2efbd8 commit 44859fd

File tree

1 file changed

+52
-2
lines changed

1 file changed

+52
-2
lines changed

src/app.ts

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export class App implements AppListener {
1515
get_selected_component(): Component<any, HTMLElement> | null { return this.selected_comp; }
1616

1717
selected_component(component: Component<any, HTMLElement> | null): void {
18+
if (this.selected_comp)
19+
this.selected_comp.remove();
1820
this.selected_comp = component;
1921
for (const listener of this.app_listeners) { listener.selected_component(component); }
2022
}
@@ -93,12 +95,60 @@ export abstract class ListComponent<P, E extends HTMLElement, L extends HTMLElem
9395
}
9496
}
9597

96-
export class AppComponent extends Component<App, HTMLDivElement> {
98+
export class AppComponent extends Component<App, HTMLDivElement> implements AppListener {
9799

98-
private constructor() {
100+
private main: HTMLDivElement;
101+
102+
constructor() {
99103
super(App.get_instance(), document.querySelector('#app') as HTMLDivElement);
100104
this.element.classList.add('d-flex', 'flex-column', 'h-100');
105+
106+
const fragment = document.createDocumentFragment();
107+
108+
// Add the Navbar..
109+
const navbar = document.createElement('nav');
110+
navbar.classList.add('navbar', 'navbar-expand-lg', 'bg-body-tertiary');
111+
const nav_container = document.createElement('div');
112+
nav_container.classList.add('container-fluid');
113+
114+
const toggler = document.createElement('button');
115+
toggler.classList.add('navbar-toggler');
116+
toggler.type = 'button';
117+
toggler.setAttribute('data-bs-toggle', 'collapse');
118+
toggler.setAttribute('data-bs-target', '#navbarNav');
119+
toggler.setAttribute('aria-controls', 'navbarNav');
120+
toggler.setAttribute('aria-expanded', 'false');
121+
toggler.setAttribute('aria-label', 'Toggle navigation');
122+
const toggler_span = document.createElement('span');
123+
toggler_span.classList.add('navbar-toggler-icon');
124+
toggler.appendChild(toggler_span);
125+
nav_container.appendChild(toggler);
126+
127+
const navbar_collapse = document.createElement('div');
128+
navbar_collapse.classList.add('collapse', 'navbar-collapse');
129+
navbar_collapse.id = 'navbarNav';
130+
this.populate_navbar(navbar_collapse);
131+
nav_container.appendChild(navbar_collapse);
132+
133+
navbar.appendChild(nav_container);
134+
fragment.appendChild(navbar);
135+
136+
// Add the Main..
137+
this.main = document.createElement('div');
138+
this.main.classList.add('d-flex', 'flex-column', 'flex-grow-1');
139+
fragment.appendChild(this.main);
140+
141+
this.element.appendChild(fragment);
101142
}
143+
144+
selected_component(component: Component<any, HTMLElement> | null): void {
145+
if (component)
146+
this.main.appendChild(component.element);
147+
}
148+
149+
populate_navbar(container: HTMLDivElement): void { }
150+
151+
unmounting(): void { App.get_instance().remove_app_listener(this); }
102152
}
103153

104154
export class AnchorComponent<P> extends Component<P, HTMLAnchorElement> {

0 commit comments

Comments
 (0)