class MenuTop extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
}
connectedCallback() {
const shadow = this.shadowRoot;
const preloadStyle = document.createElement('style');
preloadStyle.textContent = `
.preload {
visibility: hidden; /* oder display:none */
}
`;
shadow.appendChild(preloadStyle);
const parser = new DOMParser();
const doc = parser.parseFromString(`
`, 'text/html');
const templateContent = doc.body.firstChild;
shadow.appendChild(templateContent);
const cssFiles = [
'https://mediagroup-component-menu-configurator.s3.eu-central-1.amazonaws.com/css/index.css',
];
cssFiles.forEach(href => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
shadow.appendChild(link);
});
const links = shadow.querySelectorAll('link');
let loadedCount = 0;
links.forEach(link => {
link.onload = () => {
loadedCount++;
if (loadedCount === links.length) {
const menu = shadow.querySelector('.menu-top');
if (menu) menu.classList.remove('preload');
}
}
});
this.initEvents();
}
initEvents = () => {
let listElements = this.shadowRoot.querySelectorAll('li');
let menuMobile = this.shadowRoot.querySelector('#menu-mobile');
let menuMobileHeader = this.shadowRoot.querySelector('.menuHeader');
listElements.forEach((listElement) => listElement.addEventListener('click', this.toggleSubMenu));
menuMobile.addEventListener('click', this.toggleSubMenu);
menuMobileHeader.addEventListener('click', this.toggleSubMenu);
};
toggleSubMenu(event) {
console.log(event)
let subMenu;
if (this.id === 'menu-mobile' || this.className === 'menuHeader') {
if (this.id === 'menu-mobile') {
subMenu = this.nextElementSibling;
if (subMenu.style.top === "-100vh") {
subMenu.style.top = '0vh';
} else {
subMenu.style.top = '0vh';
}
} else {
subMenu = this.parentElement;
if (subMenu.style.top === '0vh') {
subMenu.style.top = '-100vh';
} else {
subMenu.style.top = '0vh';
}
}
} else {
subMenu = this.querySelector('.subMenu');
if (subMenu.style.top === '-100vh') {
subMenu.style.top = '0vh';
} else {
subMenu.style.top = '-100vh';
}
}
}
}
customElements.define('menu-top', MenuTop);