Untitled

mail@pastecode.io avatar
unknown
plain_text
a month ago
3.2 kB
1
Indexable
Never
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