Untitled
unknown
plain_text
a month ago
22 kB
3
Indexable
Never
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 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 : ''; // phpcs:ignore WordPressVIPMinimum.JS.Window.location, WordPressVIPMinimum.JS.Window.VarAssignment 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 ); } }else { if ( dropdownHeader ) { dropdownHeader.addEventListener( 'click', ( e ) => this.toggleDropdown( e, block ) ); } if ( dropdownButton ) { dropdownButton.addEventListener( 'click', ( e ) => this.toggleDropdown( e, block ) ); } if ( 0 < dropdownOptions.length ) { 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 ); } } toggleDropdown( e, block ) { e.stopPropagation(); 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 ) { e.stopPropagation(); 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 ); } /** * Update the tabs (for state change); */ 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 ); } } } updateTabsForDropdown( dropdownOptions, windowhashdata, block ) { let defaultOption = null; if ( this.selectedState ) { const defaultOptions = dropdownOptions.filter( option => { const defaultInStates = option.dataset.defaultInStates?.split( ' ' ); return defaultInStates && defaultInStates.includes( this.selectedState ); } ); if ( defaultOptions.length && !windowhashdata ) { [defaultOption] = defaultOptions; const event= new Event( 'click', { bubbles: true } ); defaultOption.dispatchEvent( event ); const dropdownButton = block.querySelector( '.dropdown-button' ); if( dropdownButton ) { dropdownButton.innerText = defaultOption.innerText; } } } } /** * Select Tab Logic. */ 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 ); } /** * 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.scrollY + yOffset; window.scrollTo( {top: y, behavior: 'smooth'} ); } } else { this.selectTabOnloadForDropdown( block, windowhashdata ); } } } selectTabOnloadForDropdown( 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 isDropdownAnchorAvailable = [...block.querySelectorAll( '.dropdown-option' )] .filter( x => x.getAttribute( 'value' ) === selecteddata )[0]; if ( isDropdownAnchorAvailable ) { const dropdownHeaderText = block.querySelector( '.dropdown-header .dropdown-button' ); if ( dropdownHeaderText ) { dropdownHeaderText.innerText = isDropdownAnchorAvailable.innerText; } 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.scrollY + 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' ); document.addEventListener( 'scroll', () => { const isFocused = ( document.activeElement === selectElement ); if ( isFocused ) { selectElement.dispatchEvent( new Event( 'change' ) ); } } ); } handleScroll( block ) { const dropdownOptions = document.getElementById( 'dropdown-options' ); const dropdownContainer = document.querySelector( '.dropdown-container' ); if ( dropdownContainer && dropdownContainer.classList.contains( 'selected' ) ) { dropdownOptions.classList.remove( 'show' ); dropdownContainer.classList.remove( 'selected' ); } } } <?php /** * Server-side rendering of the Performance Data Gutenberg Block * * @package blackstone-main/gutenberg */ namespace BlackstoneCore\Gutenberg\Blocks; use function BlackstoneCore\Utility\setup_multiple_gtm_attributes; /** * Performance Data Block Attributes * * @return array Array of block attributes */ function performance_data_atts() { return [ 'title' => [ 'type' => 'string', 'default' => '', ], 'heading' => [ 'type' => 'string', 'default' => 'h2', ], 'margintop' => [ 'type' => 'string', 'default' => '', ], 'marginbottom' => [ 'type' => 'string', 'default' => '', ], 'bringToFront' => [ 'type' => 'boolean', 'default' => false, ], 'sticky' => [ 'type' => 'boolean', 'default' => false, ], 'enableGrp' => [ 'type' => 'boolean', 'default' => false, ], ]; } /** * Performance Data Item Block Attributes * * @return array Array of block attributes */ function performance_data_item_atts() { return [ 'title' => [ 'type' => 'string', 'default' => '', ], 'groupTitle' => [ 'type' => 'string', 'default' => '', ], 'states' => [ 'type' => 'array', 'default' => [], ], ]; } /** * Render the Tabs block HTML * * @param array $attributes Array of Block Attributes registered via Gutenberg * @param string $content InnerBlock content * @return string Block HTML markup for frontend */ function performance_data_html( $attributes, $content ) { $title = $attributes['title'] ? $attributes['title'] : ''; $groupTitle = $attributes['groupTitle'] ? $attributes['groupTitle'] : ''; $heading = $attributes['heading'] ? $attributes['heading'] : 'h2'; $mt = $attributes['margintop'] ? ' mt-' . $attributes['margintop'] : ''; $mb = $attributes['marginbottom'] ? ' mb-' . $attributes['marginbottom'] : ''; $markup = sprintf( '<div class="performance-data%1$s%2$s" data-initially-hidden="false">', esc_attr( $mt ), esc_attr( $mb ) ); $markup .= '<div class="performance-data__inner">'; $className = 'performance-data__toolbar '; if ( !empty( $attributes['sticky'] ) && $attributes['sticky'] === true ) { $className .= 'is-sticky '; } if ( !empty( $attributes['enableGrp'] ) && $attributes['enableGrp'] === true ) { $className .= 'performancedata-toolbar-gt'; } $markup .= '<div class="'.$className.'">'; if ( $title ) { $markup .= '<' . tag_escape( $heading ) . ' class="performance-data__toolbar-title mt-zero mb-zero">'; $markup .= esc_html( $title ); $markup .= '</' . tag_escape( $heading ) . '>'; } $markup .= '<!-- Tabs Placeholder -->'; $markup .= '</div>'; $markup .= '<div class="performance-data__content">'; /* * the content is the html generated from innerBlocks * it is being created from the save method in JS or the render_callback * in php and is sanitized. * * Re sanitizing it through `wp_kses_post` causes * embed blocks to break and other core filters don't apply. * therefore no additional sanitization is done and it is being output as is */ $markup .= $content; $markup .= '</div>'; $markup .= '</div>'; $markup .= '</div>'; return $markup; } /** * Render the Tabs Item block HTML * * @param array $attributes Array of Block Attributes registered via Gutenberg * @param string $content InnerBlock content * @return string Block HTML markup for frontend */ function performance_data_item_html( $attributes, $content ) { $tab_title = ! empty( $attributes['title'] ) ? $attributes['title'] : ''; $markup = '<div class="performance-data__item performance-data-' . sanitize_title_with_dashes( $tab_title ) . '" role="tabpanel" aria-selected="false">'; if ( $content ) { /* * the content is the html generated from innerBlocks * it is being created from the save method in JS or the render_callback * in php and is sanitized. * * Re sanitizing it through `wp_kses_post` causes * embed blocks to break and other core filters don't apply. * therefore no additional sanitization is done and it is being output as is */ $markup .= $content; } $markup .= '</div>'; return $markup; } /** * Add select html tags and custom div attribute being used on the block to fix reusable content issue * * @param array $tags Allowed tags, attributes, and/or entities. * @param string $context Context to judge allowed tags by. Allowed values are 'post'. */ add_filter( 'wp_kses_allowed_html', function( $tags, $context ) { if ( 'post' === $context ) { $tags['select'] = array( 'name' => true, 'class' => true, ); $tags['option'] = array( 'value' => true, 'data-gtm-category' => true, 'data-gtm-label' => true, 'data-gtm-action' => true, ); $tags['div'] = isset( $tags['div'] ) ? $tags['div'] : []; $tags['div'] = array_merge( $tags['div'], [ 'role' => true, 'aria-selected' => true, 'aria' => true, ] ); } return $tags; }, 10, 2 ); /** * Modify block rendering to add tab navigations * * @param string|null $pre_render The pre-rendered content. Default null. * @param array $parsed_block The block being rendered. */ add_filter( 'render_block', function( $block_content, $block ) { if ( 'blackstone/performance-data' === $block['blockName'] ) { if ( $block['innerBlocks'] ) { $groupTitles = array(); foreach( $block['innerBlocks'] as $inner_block ) { $groupTitle = $inner_block['attrs']['groupTitle']; if ( ! empty( $groupTitle ) && ! in_array( $groupTitle, $groupTitles, true ) ) { $groupTitles[] = $groupTitle; } } if ( empty( $groupTitles ) ) { $tabs = '<div class="performance-data__action">'; $tabs .= '<div class="custom-select">'; $tabs .= '<select name="performance-class" class="performance-data__select">'; $has_default_states = ! empty( array_filter( array_map( function( $inner_block ) { return ! empty( $inner_block['attrs']['states'] ); }, $block['innerBlocks'] ) ) ); if ( is_array( $block['innerBlocks'] ) ) { foreach ( $block['innerBlocks'] as $inner_block ) { $title = $inner_block['attrs']['title']; $states = ! empty( $inner_block['attrs']['states'] ) ? $inner_block['attrs']['states'] : []; $id = sanitize_title_with_dashes( $title ); $gtm_atts = setup_multiple_gtm_attributes(array("category"=>"Page Engagement", "action"=>"Filter Click", "label"=>'Performance Filter | ' . esc_attr( $title ), "component_type"=>"Chart tabs", "click_text"=>esc_attr( $title ), "tag_name"=>"Page Engagement Click"), false); $tabs .= '<option ' . $gtm_atts . ' value="' . esc_attr( $id ) . '" data-default-in-states="' . esc_attr( implode( ' ', $states ) ) . '">' . esc_html( $title ) . '</option>'; } } $tabs .= '</select>'; $tabs .= '</div>'; $tabs .= '</div>'; } else { $shareClass = __( 'Share Class', 'blackstone' ); $tabs = '<div class="dropdown-container">'; $tabs .= '<div class="dropdown-header">'; $tabs .= '<div class="share">'. $shareClass .'</div>'; $tabs .= '<div class="dropdown-button"></div>'; $tabs .= '</div>'; $has_default_states = ! empty( array_filter( array_map( function( $inner_block ) { return ! empty( $inner_block['attrs']['states'] ); }, $block['innerBlocks'] ) ) ); if ( is_array( $block['innerBlocks'] ) ) { $groupsPerforamcenBars = array(); foreach( $block['innerBlocks'] as $inner_block ) { $groupTitle = trim( $inner_block['attrs']['groupTitle'] ); if ( ! isset( $groupsPerforamcenBars[ $groupTitle ] ) ) { $groupsPerforamcenBars[ $groupTitle ] = array(); } $groupsPerforamcenBars[ $groupTitle ][] = $inner_block; } $tabs .= '<div class="dropdown-options" id="dropdown-options">'; foreach ( $groupsPerforamcenBars as $groupTitle => $group_tabs ) { $tabs .= '<div class="dropdown-group">'; $tabs .= '<div class="dropdown-group-title">'. $groupTitle .'</div>'; foreach ( $group_tabs as $inner_block ) { $title = $inner_block['attrs']['title']; $states = ! empty( $inner_block['attrs']['states'] ) ? $inner_block['attrs']['states'] : []; $id = sanitize_title_with_dashes( $title ); $groupTitles = $inner_block['attrs']['groupTitle'] ? explode("\n", $inner_block['attrs']['groupTitle']) : []; $gtm_atts = setup_multiple_gtm_attributes(array("category"=>"Page Engagement", "action"=>"Filter Click", "label"=>'Performance Filter | ' . esc_attr( $title ), "component_type"=>"Chart tabs", "click_text"=>esc_attr( $title ), "tag_name"=>"Page Engagement Click"), false); $tabs .= '<div class="dropdown-option" ' . $gtm_atts . ' value="' . esc_attr( $id ) . '" data-default-in-states="' . esc_attr( implode( ' ', $states ) ) . '">' . esc_html( $title ) . '</div>'; } $tabs .= '</div>'; } $tabs .= '</div>'; } $tabs .= '</div>'; } // Add custom select. $block_content = str_replace( '<!-- Tabs Placeholder -->', $tabs, $block_content ); $block_content = str_replace( 'data-component="chart-tabs-tab-item-link"', 'data-component="chart-tabs-tab-item-link" data-disable-ga-auto-tracking="true"', $block_content ); if ( $has_default_states ) { $block_content = str_replace( 'data-initially-hidden="false"', 'data-initially-hidden="true"', $block_content ); } // Make first item visible. $block_content = preg_replace( '/role=\"tabpanel\" aria-selected=\"false\"/', 'role="tabpanel" aria-selected="true"', $block_content, 1 ); } } return $block_content; }, 10, 2 ); /** * Add body class whenever Performance data block is available on the page */ add_filter( 'body_class', function( $classes ) { if ( has_block( 'blackstone/performance-data' ) ) { $classes[] = 'has-performance-data-block'; } return $classes; } );
Leave a Comment