Untitled
unknown
plain_text
a month ago
6.8 kB
3
Indexable
Never
initBlock( block ) { // Existing select-based logic const select = block.querySelector( '.performance-data__select' ); const options = Array.from( select.querySelectorAll( 'option' ) ); const windowhashdata = window.location.hash ? window.location.hash : ''; // phpcs:ignore 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 ); } // New dropdown-based logic const dropdownContainer = block.querySelector('.dropdown-container'); if (dropdownContainer) { const dropdownOptions = Array.from(dropdownContainer.querySelectorAll('.dropdown-option')); const dropdownButton = dropdownContainer.querySelector('.dropdown-button'); dropdownButton.addEventListener('click', () => { this.toggleDropdown(dropdownContainer); }); dropdownOptions.forEach(option => { option.addEventListener('click', (e) => { this.selectDropdownOption(e, block); }); }); document.addEventListener('click', (event) => { if (!event.target.closest('.dropdown-container')) { this.closeDropdown(dropdownContainer); } }); this.updateDropdown(dropdownOptions, windowhashdata); this.selectTabOnloadDropdown(block, windowhashdata); } } selectTab(e, block) { const selected = e.target.value || e.target.innerText; const target = block.querySelector(`.performance-data-${selected}`); const items = Array.from(block.querySelectorAll('.performance-data__item')); // Unselect selected items. items.forEach(item => item.setAttribute('aria-selected', false)); // Select target one. if (target) { target.setAttribute('aria-selected', true); // Remove focus to prevent iPad issue with chart selection. if (e.target.tagName !== 'OPTION') { e.target.blur(); } // Send GTM data assignEventAction(e); } // Handle dropdown case if (e.target.classList.contains('dropdown-option')) { const dropdownOptions = Array.from(block.querySelectorAll('.dropdown-option')); dropdownOptions.forEach(option => option.setAttribute('aria-selected', 'false')); e.target.setAttribute('aria-selected', 'true'); } // Reset the first performance item chart tab to first if (e.isTrusted) { const firstChartTab = target.querySelector('.tab-item a[role=tab]'); if (firstChartTab) { firstChartTab.click(); } } } selectTabOnload(block, windowhashdata) { if (windowhashdata) { const selecteddata = windowhashdata.replace('#', '').toLowerCase(); const targetdata = block.querySelector(`.performance-data-${selecteddata}`); const itemsdata = Array.from(block.querySelectorAll('.performance-data__item')); const elem = document.querySelector('.performance-data'); if (targetdata) { itemsdata.forEach(item => item.setAttribute('aria-selected', false)); targetdata.setAttribute('aria-selected', true); if (elem) { const yOffset = -100; const y = elem.getBoundingClientRect().top + window.pageYOffset + yOffset; window.scrollTo({ top: y, behavior: 'smooth' }); } } } } selectTabOnloadDropdown(block, windowhashdata) { if (windowhashdata) { const selecteddata = windowhashdata.replace('#', '').toLowerCase(); const dropdownOptions = Array.from(block.querySelectorAll('.dropdown-option')); const dropdownButton = block.querySelector('.dropdown-button'); const targetdata = block.querySelector(`.performance-data-${selecteddata}`); if (targetdata) { dropdownOptions.forEach(option => { if (option.getAttribute('value') === selecteddata) { dropdownButton.innerText = option.innerText; option.setAttribute('aria-selected', 'true'); targetdata.setAttribute('aria-selected', true); } else { option.setAttribute('aria-selected', 'false'); } }); } } } positionSelectDropdown(block) { const selectElement = block.querySelector('.performance-data__select'); const dropdownContainer = block.querySelector('.dropdown-container'); document.addEventListener('scroll', () => { const isFocusedSelect = document.activeElement === selectElement; if (isFocusedSelect) { selectElement.dispatchEvent(new Event('change')); } if (dropdownContainer) { const dropdownOptions = dropdownContainer.querySelector('.dropdown-options'); if (dropdownOptions.classList.contains('show')) { this.toggleDropdown(dropdownContainer); // Close dropdown on scroll } } }); } toggleDropdown(dropdownContainer) { const dropdownOptions = dropdownContainer.querySelector('.dropdown-options'); dropdownOptions.classList.toggle('show'); dropdownContainer.classList.toggle('selected'); } selectDropdownOption(e, block) { const value = e.target.innerText; const dropdownButton = e.target.closest('.dropdown-container').querySelector('.dropdown-button'); dropdownButton.innerText = value; this.closeDropdown(e.target.closest('.dropdown-container')); // Simulate a change event for selectTab logic const fakeEvent = { target: { value }, isTrusted: true }; this.selectTab(fakeEvent, block); } closeDropdown(dropdownContainer) { const dropdownOptions = dropdownContainer.querySelector('.dropdown-options'); dropdownOptions.classList.remove('show'); dropdownContainer.classList.remove('selected'); } updateDropdown(dropdownOptions, windowhashdata) { if (this.selectedState) { const defaultOptions = dropdownOptions.filter(option => { const defaultInStates = option.dataset.defaultInStates?.split(' '); return defaultInStates.includes(this.selectedState); }); if (defaultOptions.length && !windowhashdata) { const defaultOption = defaultOptions[0]; this.selectDropdownOption({ target: defaultOption }, defaultOption.closest('.performance-data')); } } }
Leave a Comment