@@ -15,6 +15,8 @@ export class App implements AppListener {
15
15
get_selected_component ( ) : Component < any , HTMLElement > | null { return this . selected_comp ; }
16
16
17
17
selected_component ( component : Component < any , HTMLElement > | null ) : void {
18
+ if ( this . selected_comp )
19
+ this . selected_comp . remove ( ) ;
18
20
this . selected_comp = component ;
19
21
for ( const listener of this . app_listeners ) { listener . selected_component ( component ) ; }
20
22
}
@@ -93,12 +95,60 @@ export abstract class ListComponent<P, E extends HTMLElement, L extends HTMLElem
93
95
}
94
96
}
95
97
96
- export class AppComponent extends Component < App , HTMLDivElement > {
98
+ export class AppComponent extends Component < App , HTMLDivElement > implements AppListener {
97
99
98
- private constructor ( ) {
100
+ private main : HTMLDivElement ;
101
+
102
+ constructor ( ) {
99
103
super ( App . get_instance ( ) , document . querySelector ( '#app' ) as HTMLDivElement ) ;
100
104
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 ) ;
101
142
}
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 ) ; }
102
152
}
103
153
104
154
export class AnchorComponent < P > extends Component < P , HTMLAnchorElement > {
0 commit comments