43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
|
export class Sidebar {
|
||
|
|
element: HTMLElement | null;
|
||
|
|
trigger: string;
|
||
|
|
contentWrapper: HTMLElement| null;
|
||
|
|
closeBtn: any;
|
||
|
|
overlay: HTMLElement| null;
|
||
|
|
isOpen: boolean;
|
||
|
|
|
||
|
|
constructor(trigger: string) {
|
||
|
|
this.trigger = trigger;
|
||
|
|
this.element = document.getElementById(trigger);
|
||
|
|
this.contentWrapper = document.querySelector('body');
|
||
|
|
this.overlay = document.querySelector('.sidebar-overlay[data-trigger='+ this.trigger + ']');
|
||
|
|
if(this.element) {
|
||
|
|
this.closeBtn = this.element.querySelector('[data-trigger='+ this.trigger + ']');
|
||
|
|
}
|
||
|
|
this.isOpen = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
toggle() {
|
||
|
|
this.isOpen = !this.isOpen;
|
||
|
|
if(this.trigger) {
|
||
|
|
document.getElementById(this.trigger)?.classList.toggle('open');
|
||
|
|
}
|
||
|
|
if( this.contentWrapper) {
|
||
|
|
this.contentWrapper.classList.toggle('overlay');
|
||
|
|
}
|
||
|
|
if(this.overlay) {
|
||
|
|
this.overlay.classList.toggle('show');
|
||
|
|
}
|
||
|
|
if(this.element) {
|
||
|
|
this.element.ariaModal = (this.element.ariaModal === 'true') ? 'false' : 'true';
|
||
|
|
if(this.isOpen){
|
||
|
|
const focusElement= this.element.querySelector('.focus-js') as HTMLElement | null;
|
||
|
|
if(focusElement) {
|
||
|
|
focusElement.focus();
|
||
|
|
} else {
|
||
|
|
this.closeBtn.focus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|