54 lines
1.6 KiB
JavaScript
54 lines
1.6 KiB
JavaScript
class DetailsDisclosure extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.mainDetailsToggle = this.querySelector('details');
|
|
this.content = this.mainDetailsToggle.querySelector('summary').nextElementSibling;
|
|
|
|
this.mainDetailsToggle.addEventListener('focusout', this.onFocusOut.bind(this));
|
|
this.mainDetailsToggle.addEventListener('toggle', this.onToggle.bind(this));
|
|
}
|
|
|
|
onFocusOut() {
|
|
setTimeout(() => {
|
|
if (!this.contains(document.activeElement)) this.close();
|
|
});
|
|
}
|
|
|
|
onToggle() {
|
|
if (!this.animations) this.animations = this.content.getAnimations();
|
|
|
|
if (this.mainDetailsToggle.hasAttribute('open')) {
|
|
this.animations.forEach((animation) => animation.play());
|
|
} else {
|
|
this.animations.forEach((animation) => animation.cancel());
|
|
}
|
|
}
|
|
|
|
close() {
|
|
this.mainDetailsToggle.removeAttribute('open');
|
|
this.mainDetailsToggle.querySelector('summary').setAttribute('aria-expanded', false);
|
|
}
|
|
}
|
|
|
|
customElements.define('details-disclosure', DetailsDisclosure);
|
|
|
|
class HeaderMenu extends DetailsDisclosure {
|
|
constructor() {
|
|
super();
|
|
this.header = document.querySelector('.header-wrapper');
|
|
}
|
|
|
|
onToggle() {
|
|
if (!this.header) return;
|
|
this.header.preventHide = this.mainDetailsToggle.open;
|
|
|
|
if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return;
|
|
document.documentElement.style.setProperty(
|
|
'--header-bottom-position-desktop',
|
|
`${Math.floor(this.header.getBoundingClientRect().bottom)}px`
|
|
);
|
|
}
|
|
}
|
|
|
|
customElements.define('header-menu', HeaderMenu);
|