90 lines
2.4 KiB
JavaScript
90 lines
2.4 KiB
JavaScript
import { Utility } from '../../core/utility';
|
|
import './navbar.sass';
|
|
import * as throttle from 'lodash.throttle';
|
|
|
|
export const HEADER_CONTAINER_UTIL_SELECTOR = '.navbar__list-item--container-selector .navbar__link-wrapper';
|
|
const HEADER_CONTAINER_INITIALIZED_CLASS = '.navbar-header-container--initialized';
|
|
|
|
@Utility({
|
|
selector: HEADER_CONTAINER_UTIL_SELECTOR,
|
|
})
|
|
export class NavHeaderContainerUtil {
|
|
_element;
|
|
radioButton;
|
|
closeButton;
|
|
container;
|
|
|
|
wasOpen;
|
|
|
|
_throttleUpdateWasOpen;
|
|
|
|
constructor(element) {
|
|
if (!element) {
|
|
throw new Error('Navbar Header Container utility needs to be passed an element!');
|
|
}
|
|
|
|
if (element.classList.contains(HEADER_CONTAINER_INITIALIZED_CLASS)) {
|
|
return false;
|
|
}
|
|
|
|
this._element = element;
|
|
this.radioButton = document.getElementById(`${this._element.id}-radio`);
|
|
if (!this.radioButton) {
|
|
throw new Error('Navbar Header Container utility could not find associated radio button!');
|
|
}
|
|
|
|
this.closeButton = document.getElementById('container-radio-none');
|
|
if (!this.closeButton) {
|
|
throw new Error('Navbar Header Container utility could not find radio button for closing!');
|
|
}
|
|
|
|
this.container = document.getElementById(`${this._element.id}-container`);
|
|
if (!this.container) {
|
|
throw new Error('Navbar Header Container utility could not find associated container!');
|
|
}
|
|
|
|
const closer = this.container.querySelector('.navbar__container-list-closer');
|
|
if (closer) {
|
|
closer.classList.add('navbar__container-list-closer--hidden');
|
|
}
|
|
|
|
this.updateWasOpen();
|
|
this.throttleUpdateWasOpen = throttle(this.updateWasOpen.bind(this), 100, { leading: false, trailing: true });
|
|
|
|
this._element.classList.add(HEADER_CONTAINER_INITIALIZED_CLASS);
|
|
}
|
|
|
|
start() {
|
|
window.addEventListener('click', this.clickHandler.bind(this));
|
|
this.radioButton.addEventListener('change', this.throttleUpdateWasOpen.bind(this));
|
|
}
|
|
|
|
clickHandler() {
|
|
if (!this.container.contains(event.target) && window.document.contains(event.target) && this.wasOpen) {
|
|
this.close();
|
|
}
|
|
}
|
|
|
|
close() {
|
|
this.radioButton.checked = false;
|
|
this.closeButton.checked = true;
|
|
this.throttleUpdateWasOpen();
|
|
}
|
|
|
|
isOpen() {
|
|
return this.radioButton.checked;
|
|
}
|
|
|
|
updateWasOpen() {
|
|
this.wasOpen = this.isOpen();
|
|
}
|
|
|
|
destroy() { /* TODO */ }
|
|
}
|
|
|
|
|
|
|
|
export const NavbarUtils = [
|
|
NavHeaderContainerUtil,
|
|
];
|