mirror of
https://github.com/a2nt/webpack-bootstrap-ui-kit.git
synced 2024-06-25 22:09:19 +02:00
57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
|
import Events from "../_events";
|
||
|
|
||
|
const DropdownHoverUI = ((window) => {
|
||
|
const NAME = "js-dropdown";
|
||
|
|
||
|
const Toggle = (el) => {
|
||
|
el.querySelector('.dropdown-menu').classList.toggle('show');
|
||
|
};
|
||
|
|
||
|
const Show = (e) => {
|
||
|
const el = e.currentTarget;
|
||
|
el.querySelector('.dropdown-menu').classList.add('show');
|
||
|
};
|
||
|
|
||
|
const Hide = (e) => {
|
||
|
const el = e.currentTarget;
|
||
|
el.querySelector('.dropdown-menu').classList.remove('show');
|
||
|
};
|
||
|
|
||
|
const init = () => {
|
||
|
console.log(`${NAME}: init`);
|
||
|
|
||
|
const attachHoverEvents = (el) => {
|
||
|
el.addEventListener("mouseover", Show, false);
|
||
|
el.addEventListener("mouseout", Hide, false);
|
||
|
|
||
|
el.classList.add(`${NAME}-active`);
|
||
|
};
|
||
|
|
||
|
const attachClickEvents = (el) => {
|
||
|
el.addEventListener("click", (e) => {
|
||
|
e.preventDefault();
|
||
|
console.log('AAAA');
|
||
|
const el = e.currentTarget;
|
||
|
const parent = el.closest('.dropdown');
|
||
|
Toggle(parent);
|
||
|
});
|
||
|
|
||
|
el.classList.add(`${NAME}-active`);
|
||
|
};
|
||
|
|
||
|
document.querySelectorAll(`[data-bs-toggle="hover"]`).forEach((el, i) => {
|
||
|
const parent = el.closest('.dropdown');
|
||
|
attachHoverEvents(parent);
|
||
|
});
|
||
|
|
||
|
document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"]`).forEach((el, i) => {
|
||
|
attachClickEvents(el);
|
||
|
});
|
||
|
};
|
||
|
|
||
|
window.addEventListener(`${Events.LODEDANDREADY}`, init);
|
||
|
window.addEventListener(`${Events.AJAX}`, init);
|
||
|
})(window);
|
||
|
|
||
|
export default DropdownHoverUI;
|