Untitled
unknown
plain_text
a month ago
14 kB
3
Indexable
Never
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); } } }); } }
Leave a Comment