Untitled

import { assignEventAction } from '../utils/analytics';
import { getSelectedStateFromLocalStorage } from '../utils/local-storage';

export default class BlackstonePerformanceData {
  constructor() {
    this.blocks = Array.from(document.querySelectorAll('.performance-data'));
    this.selectedState = getSelectedStateFromLocalStorage();

    if (!this.blocks.length) {
      return;
    }

    this.blocks.forEach(block => this.initBlock(block));
  }

  initBlock(block) {
    const select = block.querySelector('.performance-data__select');
    const dropdownButton = block.querySelector('.dropdown-button');
    const dropdownOptions = Array.from(block.querySelectorAll('.dropdown-option'));
    const windowhashdata = window.location.hash ? window.location.hash : '';

    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);
      }
    }

    if (dropdownButton) {
      dropdownButton.addEventListener('click', () => this.toggleDropdown(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);
      }
    });
  }

  toggleDropdown(block) {
    const dropdownOptions = block.querySelector('.dropdown-options');
    const dropdownContainer = block.querySelector('.dropdown-container');
    
    dropdownOptions.classList.toggle('show');
    dropdownContainer.classList.toggle('selected');
  }

  closeDropdown(block) {
    const dropdownOptions = block.querySelector('.dropdown-options');
    const dropdownContainer = block.querySelector('.dropdown-container');
    
    dropdownOptions.classList.remove('show');
    dropdownContainer.classList.remove('selected');
  }

  selectDropdownOption(e, block) {
    const selected = e.target.getAttribute('value');
    const dropdownButton = block.querySelector('.dropdown-button');
    const target = block.querySelector(`.performance-data-${selected}`);
    const items = Array.from(block.querySelectorAll('.performance-data__item'));

    if (dropdownButton) {
      dropdownButton.innerText = e.target.innerText;
    }

    items.forEach(item => item.setAttribute('aria-selected', false));

    if (target) {
      target.setAttribute('aria-selected', true);
    }

    this.closeDropdown(block);

    assignEventAction(e);
  }

  updateTabs(select, options, windowhashdata) {
    let defaultOption = null;

    if (this.selectedState) {
      const defaultOptions = options.filter(option => {
        const defaultInStates = option.dataset.defaultInStates?.split(' ');
        return defaultInStates.includes(this.selectedState);
      });

      if (defaultOptions.length && !windowhashdata) {
        [defaultOption] = defaultOptions;

        select.value = defaultOption.value;
        const changeEvent = new Event('change');
        select.dispatchEvent(changeEvent);
      }
    }
  }

  selectTab(e, block) {
    const selected = e.target.options[e.target.selectedIndex].value;
    const target = block.querySelector(`.performance-data-${selected}`);
    const items = Array.from(block.querySelectorAll('.performance-data__item'));

    items.forEach(item => item.setAttribute('aria-selected', false));

    if (target) {
      target.setAttribute('aria-selected', true);

      e.target.blur();
    }

    if (e.isTrusted) {
      const firstChartTab = target.querySelector('.tab-item a[role=tab]');
      if (firstChartTab) {
        firstChartTab.click();
      }
    }

    assignEventAction(e);
  }

  selectTabOnload(block, windowhashdata) {
    if (windowhashdata) {
      if (window.history.scrollRestoration) {
        window.history.scrollRestoration = 'manual';
      }
      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');

      const isAnchorAvailable = [...document.querySelector('.performance-data__select').options]
        .filter(x => x.value === selecteddata)[0];
      if (isAnchorAvailable) {
        isAnchorAvailable.setAttribute('selected', true);

        itemsdata.forEach(item => item.setAttribute('aria-selected', false));

        if (targetdata) {
          targetdata.setAttribute('aria-selected', true);
        }
        if (elem) {
          const yOffset = -100;
          const y = elem.getBoundingClientRect().top + window.pageYOffset + yOffset;
          window.scrollTo({ top: y, behavior: 'smooth' });
        }
      }
    }
  }

  positionSelectDropdown(block) {
    const selectElement = block.querySelector('.performance-data__select');

    document.addEventListener('scroll', () => {
      const isFocused = (document.activeElement === selectElement);
      if (isFocused) {
        selectElement.dispatchEvent(new Event('change'));
      }
    });
  }
}




import { assignEventAction } from '../utils/analytics';
import { getSelectedStateFromLocalStorage } from '../utils/local-storage';

/**
 * Tabs
 */
export default class BlackstonePerformanceData {
    /**
     * Component Constructor.
     */
    constructor() {
        this.blocks = Array.from(document.querySelectorAll('.performance-data'));
        this.selectedState = getSelectedStateFromLocalStorage();

        // Bail if tabs block is not on page
        if (!this.blocks.length) {
            return;
        }

        this.blocks.forEach(block => this.initBlock(block));
    }

    /**
     * Initialize the block.
     */
    initBlock(block) {
        const select = block.querySelector('.performance-data__select');
        const dropdown = block.querySelector('.dropdown-container');
        const options = select ? Array.from(select.querySelectorAll('option')) : [];
        const dropdownOptions = dropdown ? Array.from(dropdown.querySelectorAll('.dropdown-option')) : [];
        const windowhashdata = window.location.hash ? window.location.hash : ''; // phpcs:ignore

        if (select) {
            select.addEventListener('change', (e) => this.selectTab(e, block));
        }

        if (dropdown) {
            dropdown.addEventListener('click', (e) => this.handleDropdownClick(e, block));
        }

        document.addEventListener('setGatingState', () => {
            this.selectedState = getSelectedStateFromLocalStorage();
            this.updateTabs(select, options, dropdown, dropdownOptions, windowhashdata);
        });

        this.updateTabs(select, options, dropdown, dropdownOptions);
        this.selectTabOnload(block, windowhashdata);

        block.dataset.initiallyHidden = false;

        if (block.querySelector('.is-sticky')) {
            this.positionSelectDropdown(block);
        }
    }

    /**
     * Update the tabs (for state change);
     */
    updateTabs(select, options, dropdown, dropdownOptions, windowhashdata) {
        let defaultOption = null;

        if (this.selectedState) {
            const defaultOptions = options.filter(option => {
                const defaultInStates = option.dataset.defaultInStates?.split(' ');
                return defaultInStates.includes(this.selectedState);
            });

            if (defaultOptions.length && !windowhashdata) {
                [defaultOption] = defaultOptions;

                select.value = defaultOption.value;
                const changeEvent = new Event('change');
                select.dispatchEvent(changeEvent);
            }

            const defaultDropdownOptions = dropdownOptions.filter(option => {
                const defaultInStates = option.dataset.defaultInStates?.split(' ');
                return defaultInStates.includes(this.selectedState);
            });

            if (defaultDropdownOptions.length && !windowhashdata) {
                [defaultOption] = defaultDropdownOptions;

                this.selectDropdownOption(defaultOption, dropdown);
            }
        }
    }

    /**
     * Select Tab Logic for <select>.
     */
    selectTab(e, block) {
        const selected = e.target.options[e.target.selectedIndex].value;
        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.
            e.target.blur();
        }

        /**
         * Reset the first performance item chart tab to first.
         * 10up/component-tabs does not provide an api for targetting each instance,
         * therefore all tabs are updated on the page. `e.isTrusted` ensures it is
         * an user action and not occuring as a result of `updateTabs` region updates,
         * which causes onload issues.
         */
        if (e.isTrusted) {
            const firstChartTab = target.querySelector('.tab-item a[role=tab]');
            if (firstChartTab) {
                firstChartTab.click();
            }
        }

        // Send GTM data
        assignEventAction(e);
    }

    /**
     * Handle Dropdown Click Logic.
     */
    handleDropdownClick(e, block) {
        const target = e.target.closest('.dropdown-option');
        if (!target) {
            return;
        }

        this.selectDropdownOption(target, block);
        assignEventAction(e);
    }

    /**
     * Select Dropdown Option.
     */
    selectDropdownOption(option, block) {
        const selected = option.getAttribute('value');
        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);
        }

        // Update dropdown button text
        const dropdownButton = block.querySelector('.dropdown-button');
        if (dropdownButton) {
            dropdownButton.innerText = option.innerText;
        }

        // Close dropdown
        const dropdownOptions = block.querySelector('.dropdown-options');
        if (dropdownOptions) {
            dropdownOptions.classList.remove('show');
        }
    }

    /**
     * Scroll to selected class when hash is present .
     */
    selectTabOnload(block, windowhashdata) {
        if (windowhashdata) {
            if (window.history.scrollRestoration) {
                window.history.scrollRestoration = 'manual';
            }
            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');

            const isAnchorAvailable = [...document.querySelector('.performance-data__select').options]
                .filter(x => x.value === selecteddata)[0];
            if (isAnchorAvailable) {
                isAnchorAvailable.setAttribute('selected', true);
                // Unselect selected itemsdata.
                itemsdata.forEach(item => item.setAttribute('aria-selected', false));

                // Select target one.
                if (targetdata) {
                    targetdata.setAttribute('aria-selected', true);
                }
                if (elem) {
                    const yOffset = -100;
                    const y = elem.getBoundingClientRect().top + window.pageYOffset + yOffset;
                    window.scrollTo({ top: y, behavior: 'smooth' });
                }
            }
        }
    }

    /**
     * Just triggers a null change event on select dropdown when the page is scrolled without any change in class selector.
     *
     * @return void
     */
    positionSelectDropdown(block) {
        const selectElement = block.querySelector('.performance-data__select');
        const dropdownElement = block.querySelector('.dropdown-container');

        document.addEventListener('scroll', () => {
            const isSelectFocused = (document.activeElement === selectElement);
            if (isSelectFocused) {
                selectElement.dispatchEvent(new Event('change'));
            }

            const isDropdownSelected = dropdownElement && dropdownElement.classList.contains('selected');
            if (isDropdownSelected) {
                const selectedOption = dropdownElement.querySelector('.dropdown-option[aria-selected="true"]');
                if (selectedOption) {
                    this.selectDropdownOption(selectedOption, block);
                }
            }
        });
    }
}