Untitled
unknown
plain_text
a month ago
5.0 kB
2
Indexable
Never
initBlock( block ) { const select = block.querySelector( '.performance-data__select' ); const options = Array.from( select.querySelectorAll( 'option' ) ); console.log( options ); 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 ); } } In above code like we have select and options const for php we have this divs liek below mentioned const select = block.querySelector( '.performance-data__select' ); const options = Array.from( select.querySelectorAll( 'option' ) ); $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>'; make same const for below code like we have divs like dropdown-group and dropdown-option so mimic same as above query select for below code in javascript and add that code in initBlock to get values of dropdown option to show in init block $shareClass = __( 'Share Class', 'blackstone' ); $tabs = '<div class="dropdown-container">'; $tabs .= '<div class="dropdown-header" onclick="toggleDropdown()">'; $tabs .= '<div class="share">'. $shareClass .'</div>'; $tabs .= '<div class="dropdown-button">Select an option</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" onclick="selectOption(\'' . esc_js( $title ) . '\')" ' . $gtm_atts . ' value="' . esc_attr( $id ) . '" data-default-in-states="' . esc_attr( implode( ' ', $states ) ) . '">' . esc_html( $title ) . '</div>'; } $tabs .= '</div>'; } $tabs .= '</div>';
Leave a Comment