class ClassWatcher {
constructor(targetNode, classToWatch, classAddedCallback, classRemovedCallback) {
this.targetNode = targetNode
this.classToWatch = classToWatch
this.classAddedCallback = classAddedCallback
this.classRemovedCallback = classRemovedCallback
this.observer = null
this.lastClassState = targetNode.classList.contains(this.classToWatch)
this.init()
}
init() {
this.observer = new MutationObserver(this.mutationCallback)
this.observe()
}
observe() {
this.observer.observe(this.targetNode, { attributes: true })
}
disconnect() {
this.observer.disconnect()
}
mutationCallback = mutationsList => {
for(let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
let currentClassState = mutation.target.classList.contains(this.classToWatch)
if(this.lastClassState !== currentClassState) {
this.lastClassState = currentClassState
if(currentClassState) {
this.classAddedCallback()
}
else {
this.classRemovedCallback()
}
}
}
}
}
}
document.addEventListener('DOMContentLoaded', e => {
const bodyDOM = document.querySelector('body');
const mustangBar = document.querySelector('#mustang-bar');
const vehicleBar = document.querySelector('#vehicle-bar');
const closeBtns = document.querySelectorAll('.close-btn-custom');
const onCloseSideBar = () => {
mustangBar.classList.remove('show-bar');
vehicleBar.classList.remove('show-bar');
}
// watch for a specific class change
let classWatcher = new ClassWatcher(bodyDOM, 'menu-opened', ()=>{}, onCloseSideBar);
// Mustang bar
const mustangBtn = document.querySelector('#menu-new-menu-1 a[href="#mustang-bar"]');
if(mustangBtn) {
mustangBtn.addEventListener('click', e => {
e.preventDefault();
vehicleBar.classList.remove('show-bar');
if(mustangBar.classList.contains('show-bar')) {
mustangBar.classList.remove('show-bar');
return;
}
mustangBar.classList.add('show-bar');
return;
});
}
// Vehicle bar
const vehicleBtn = document.querySelector('#menu-new-menu-1 a[href="#vehicle-bar"]');
if(vehicleBtn) {
vehicleBtn.addEventListener('click', e => {
e.preventDefault();
mustangBar.classList.remove('show-bar');
if(vehicleBar.classList.contains('show-bar')) {
vehicleBar.classList.remove('show-bar');
return;
}
vehicleBar.classList.add('show-bar');
return;
});
}
// Close btns for responsive
if(closeBtns.length) {
for(const btn of closeBtns) {
btn.addEventListener('click', e => {
const mobileBtn = document.querySelector('.el-menu-mobile-btn');
e.preventDefault();
setTimeout(()=>{
mobileBtn.click();
}, 250);
});
}
}
});
