/* settings component */
const settingsMenu = document.createElement('template');
settingsMenu.innerHTML = `
`;
customElements.define('settings-menu', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
}).append(settingsMenu.content.cloneNode(true))
this.settingsContainer = this.shadowRoot.querySelector('.settingsContainer');
this.settingsIcon = this.shadowRoot.querySelector('.settingsIcon'); //svg icon
this.menu = this.shadowRoot.querySelector('.menu'); // for the main menu
this.menuContainer = this.shadowRoot.querySelector('.menuContainer');
this.menuSlot = this.shadowRoot.querySelector('.menuSlot');
this.closeMenu; // for close icons
this.count = 0; // a counter
this.menuIndex;
}
connectedCallback() {
// to rotate the svg icon and display the main menu
this.settingsIcon.addEventListener('click', e => {
if(this.menuIndex){
this.shadowRoot.querySelector('.submenu'+(this.menuIndex)).style.visibility = "hidden";
}
if(this.count%2==0){
this.settingsIcon.classList.add('svgClicked');
this.menu.style.visibility = "visible";
}else{
this.settingsIcon.classList.remove('svgClicked');
this.menu.style.visibility = "hidden";
/* I know instead of this I should have added and removed a class but it was not working */
}
this.count++;
});
// creating slots for sub menu
const frag = document.createDocumentFragment();
this.menuSlot.assignedElements().forEach( (menuOption , index) =>{
let submenu = document.createElement('div');
let submenuSlot = document.createElement('slot');
let submenuTitle = document.createElement('div');
// adding a heading and a close icon to a sub menu
submenuTitle.innerHTML = " " + menuOption.innerHTML;
menuOption.setAttribute("index", (index+1));
submenuSlot.setAttribute('name', 'menu' + (index+1));
submenu.classList.add('submenu');
submenu.classList.add('submenu' + (index+1));
submenu.append(submenuTitle);
submenu.append(submenuSlot);
frag.append(submenu);
});
this.menuContainer.append(frag);
this.closeMenu = this.shadowRoot.querySelectorAll('.closeMenu'); // get a list of closeIcons
// adding click event to main menu to open respective sub menu
this.menu.addEventListener( 'click', e=> {
let menuOption = e.target.closest('div');
this.menuIndex = menuOption.getAttribute('index');
let submenu = this.shadowRoot.querySelector('.submenu'+(this.menuIndex));
submenu.style.visibility="visible";
this.menu.style.visibility = "hidden";
});
// adding click event to close Icons and adding code to hide the respective sub menu
this.closeMenu.forEach((closeButton) =>{
closeButton.addEventListener('click', e=>{
let submenuIndex = closeButton.getAttribute('index');
this.shadowRoot.querySelector('.submenu'+(submenuIndex)).style.visibility = "hidden";
this.menu.style.visibility = "visible";
});
});
}
});