Untitled
initBlock(block) { const select = block.querySelector('.performance-data__select'); const dropdownHeader = block.querySelector('.dropdown-header'); const dropdownButton = block.querySelector('.dropdown-button'); const dropdownOptions = Array.from(block.querySelectorAll('.dropdown-option')); const windowhashdata = window.location.hash ? window.location.hash : ''; // Handling the select dropdown if (select) { const options = Array.from(select.querySelectorAll('option')); select.addEventListener('change', (e) => this.selectTab(e, block)); document.addEventListener('setGatingState', () => { this.selectedState = getSelectedStateFromLocalStorage(); this.updateTabs(select, options, windowhashdata); }); this.updateTabs(select, options); this.selectTabOnload(block, windowhashdata); block.dataset.initiallyHidden = false; if (block.querySelector('.is-sticky')) { this.positionSelectDropdown(block); } } // Handling the custom dropdown with buttons and options else { if (dropdownHeader) { dropdownHeader.addEventListener('click', (e) => this.toggleDropdown(e, block)); } if (dropdownButton) { dropdownButton.addEventListener('click', (e) => this.toggleDropdown(e, block)); } if (dropdownOptions.length > 0) { dropdownOptions.forEach(option => { option.addEventListener('click', (e) => this.selectDropdownOption(e, block)); }); } document.addEventListener('click', (event) => { if (!event.target.closest('.dropdown-container')) { this.closeDropdown(block); } }); document.addEventListener('setGatingState', () => { this.selectedState = getSelectedStateFromLocalStorage(); this.updateTabsForDropdown(dropdownOptions, windowhashdata, block); }); block.dataset.initiallyHidden = false; this.updateTabsForDropdown(dropdownOptions, windowhashdata, block); this.selectTabOnloadForDropdown(block, windowhashdata); window.addEventListener('scroll', () => this.handleScroll(block)); } // Set the initial value of the dropdown button based on priority: hash value, gating state, or default option const hashValue = windowhashdata ? windowhashdata.replace('#', '').toLowerCase() : null; let selectedOption = null; if (hashValue) { selectedOption = dropdownOptions.find(option => option.getAttribute('value') === hashValue); } if (!selectedOption && this.selectedState) { selectedOption = dropdownOptions.find(option => { const defaultInStates = option.dataset.defaultInStates?.split(' '); return defaultInStates && defaultInStates.includes(this.selectedState); }); } if (!selectedOption) { selectedOption = dropdownOptions[0]; } if (selectedOption && dropdownButton) { dropdownButton.innerText = selectedOption.innerText; this.selectDropdownOption({ target: selectedOption, stopPropagation: () => {} }, block); } }
Leave a Comment