Untitled

mail@pastecode.io avatar
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