62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
class BladewindDropmenu {
|
|
name;
|
|
items;
|
|
options;
|
|
|
|
constructor(name, options = {}) {
|
|
this.name = name;
|
|
this.items = `.${name} .bw-dropmenu-items`
|
|
this.options = options;
|
|
this.activate();
|
|
}
|
|
|
|
show = () => {
|
|
// do this is only there are items
|
|
if (this.hasItems()) {
|
|
changeCss(this.items, 'opacity-0,hidden', 'remove');
|
|
domEl(this.items).setAttribute('data-open', '1');
|
|
if (this.options.hideAfterClick && domEls(`${this.items} .bw-item`)) {
|
|
domEls(`${this.items} .bw-item`).forEach((item) => {
|
|
item.addEventListener('click', () => {
|
|
this.hide();
|
|
});
|
|
});
|
|
}
|
|
document.addEventListener('mouseup', (e) => {
|
|
let container = domEl(`.${this.name}`);
|
|
if (container && !container.contains(e.target)) this.hide();
|
|
});
|
|
}
|
|
}
|
|
|
|
hide = () => {
|
|
domEl(this.items).setAttribute('data-open', '0');
|
|
changeCss(this.items, 'animate__fadeIn', 'remove');
|
|
changeCss(this.items, 'animate__fadeOut');
|
|
setTimeout(() => {
|
|
changeCss(this.items, 'opacity-0,hidden,animate__fadeIn');
|
|
changeCss(this.items, 'animate__fadeOut', 'remove');
|
|
window.clearTimeout();
|
|
}, 500);
|
|
}
|
|
|
|
reposition = () => {
|
|
// TODO: reposition menu if too close to edge of browser window
|
|
}
|
|
|
|
toggle = () => {
|
|
(domEl(this.items).getAttribute('data-open') === '0') ? this.show() : this.hide();
|
|
}
|
|
|
|
activate = () => {
|
|
domEl(`.${this.name} .bw-trigger`).addEventListener(this.options.triggerOn, () => {
|
|
this.toggle();
|
|
});
|
|
}
|
|
|
|
hasItems = () => {
|
|
return domEls(`${this.items} .bw-item`);
|
|
}
|
|
|
|
|
|
} |