gpmpn-dropdown.js

gpmpn-dropdown.js

/**
 * Gravity Perks // Multi-page Navigation // Dropdown Navigation
 * https://gravitywiz.com/documentation/gravity-forms-multi-page-navigation/
 *
 * Instruction Video: https://www.loom.com/share/38fcc941036842d6a81a599fd8de39d7
 *
 * This snippet is designed to be used with the Gravity Forms Code Chest plugin.
 * https://gravitywiz.com/gravity-forms-code-chest/
 */
const pageNameTemplate = 'Step {pageNumber}: {pageName}';
function updateNavigationState(  ) {
	// hide if visible
	$( '#gf_page_steps_GFFORMID' ).attr( 'hidden', 'true' );

	var $select = $( '#page_steps_dropdown' );

	// Check if the select element already exists
	if ( $select.length === 0 ) {
		// Create a new select element if it does not exist
		$select = $( '<select id="page_steps_dropdown"></select>' );
		$( '#gf_page_steps_GFFORMID' ).after( $select );

		$select.on( 'change', function() {
			var selectedValue = $( this ).val(  );
			if ( selectedValue ) {
				var $matchingLink = $( '#gf_page_steps_GFFORMID .gf_step a[href="' + selectedValue + '"]' );
				if ( $matchingLink.length > 0 ) {
					$matchingLink[0].click();
				}
			}
		} );
	} else {
		$select.empty();
	}

	$( '#gf_page_steps_GFFORMID .gf_step' ).each( function(  ) {
		var $div       = $( this );
		var stepNumber = $div.find('.gf_step_number').text();
		var pageName   = $div.find('.gf_step_label').text().trim();
		var optionText = pageNameTemplate
            .replace('{pageNumber}', stepNumber)
            .replace('{pageName}', pageName);

		var $a      = $div.find('a');
		var $option = $('<option></option>').text( optionText );

		if ( $a.length > 0 ) {
			// found a tag, add the link to the dropdown option
			var href = $a.attr( 'href' );
			$option.attr( 'value', href );
		} else if ( $div.hasClass( 'gpmpn-step-current' ) ) {
			// current step should remain selected, but no link needed
			$option.attr( 'selected', 'selected' );
		} else {
			// page not yet traversed, should be disabled
			$option.attr( 'disabled', 'disabled' );
		}

		$select.append( $option );
	} );
}

// Initialize the navigation state on page load
setTimeout( updateNavigationState );

// Watch for changes in the page steps to update dropdown when navigating via Prev/Next
function initializeObserver() {
	var pageStepsContainer = document.getElementById('gf_page_steps_GFFORMID');
	if (pageStepsContainer) {
		var observer = new MutationObserver(function(mutations) {
			mutations.forEach(function(mutation) {
				if (mutation.type === 'childList' || mutation.type === 'attributes') {
					// Update dropdown when page steps change
					setTimeout(updateNavigationState, 100);
				}
			});
		});

		// Start observing changes to the page steps container and its children
		observer.observe(pageStepsContainer, {
			childList: true,
			subtree: true,
			attributes: true,
			attributeFilter: ['class']
		});
	}
}

// Initialize observer after a delay to ensure DOM is ready
setTimeout(initializeObserver, 500);

// Also listen for Gravity Forms page transition events if available
$(document).on('gform_page_loaded', function() {
	setTimeout(updateNavigationState, 100);
});