extensions/blocks/eventbrite/eventbrite.php ➔ render_modal_block()

Complexity

Conditions	2
Paths	2

Size

Total Lines

111

Duplication

Lines	0
Ratio	0 %

Importance

Changes

0

<?php
function render_modal_block( $widget_id, $is_amp, $attr, $content ) {

	if ( $is_amp ) {
		$lightbox_id = "{$widget_id}-lightbox";

		// Add CSS to for lightbox.
		Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME );

		$content = preg_replace(
			'/\shref="#" target="_blank/',
			sprintf( ' on="%s" ', esc_attr( "tap:{$lightbox_id}.open" ) ),
			$content
		);

		$iframe_src = add_query_arg(
			array(
				// Note that modal=1 is intentionally omitted here since we need to put the close button inside the amp-lightbox.
				'eid'    => $attr['eventId'],
				'parent' => rawurlencode( get_current_url() ),
			),
			'https://www.eventbrite.com/checkout-external'
		);

		$lightbox = sprintf(
			'<amp-lightbox id="%1$s" on="%2$s" class="eventbrite__lightbox" layout="nodisplay">%3$s</amp-lightbox>',
			esc_attr( $lightbox_id ),
			esc_attr( "tap:{$lightbox_id}.close" ),
			sprintf(
				'
					<div class="eventbrite__lighbox-inside">
						<div class="eventbrite__lighbox-iframe-wrapper">
							<amp-iframe class="eventbrite__lighbox-iframe" src="%s" layout="fill" sandbox="allow-scripts allow-same-origin allow-forms">
								<span placeholder=""></span>
							</amp-iframe>
							<span class="eventbrite__lighbox-close" on="%s" role="button" tabindex="0" aria-label="%s">
								<svg viewBox="0 0 24 24">
									<path d="M13.4 12l3.5-3.5-1.4-1.4-3.5 3.5-3.5-3.5-1.4 1.4 3.5 3.5-3.5 3.5 1.4 1.4 3.5-3.5 3.5 3.5 1.4-1.4z"></path>
								</svg>
							</span>
						</div>
					</div>
				',
				esc_url( $iframe_src ),
				esc_attr( "tap:{$lightbox_id}.close" ),
				esc_attr__( 'Close', 'jetpack' )
			)
		);

		$content = preg_replace(
			':(?=</div>\s*$):',
			$lightbox,
			$content
		);

		return $content;
	}

	wp_enqueue_script( 'eventbrite-widget', 'https://www.eventbrite.com/static/widgets/eb_widgets.js', array(), JETPACK__VERSION, true );

	// Show the modal version.
	wp_add_inline_script(
		'eventbrite-widget',
		"window.EBWidgets.createWidget( {
			widgetType: 'checkout',
			eventId: " . absint( $attr['eventId'] ) . ",
			modal: true,
			modalTriggerElementId: '" . esc_js( $widget_id ) . "',
		} );"
	);

	// Modal button is saved as an `<a>` element with `role="button"` because `<button>` is not allowed
	// by WordPress.com wp_kses. This javascript adds the necessary event handling for button-like behavior.
	// @link https://www.w3.org/TR/wai-aria-practices/examples/button/button.html.
	wp_add_inline_script(
		'eventbrite-widget',
		"( function() {
			var widget = document.getElementById( '" . esc_js( $widget_id ) . "' );
			if ( widget ) {
				widget.addEventListener( 'click', function( event ) {
					event.preventDefault();
				} );

				widget.addEventListener( 'keydown', function( event ) {
					// Enter and space keys.
					if ( event.keyCode === 13 || event.keyCode === 32 ) {
						event.preventDefault();
						event.target && event.target.click();
					}
				} );
			}
		} )();"
	);

	// Replace the placeholder id saved in the post_content with a unique id used by widget.js.
	$content = str_replace( 'eventbrite-widget-id', esc_attr( $widget_id ), $content );

	// Fallback for block version deprecated/v2.
	$content = preg_replace( '/eventbrite-widget-\d+/', esc_attr( $widget_id ), $content );

	// Inject URL to event in case the JS for the lightbox fails to load.
	$content = preg_replace(
		'/\shref="#"/',
		sprintf(
			' href="%s" rel="noopener noreferrer" target="_blank"',
			esc_url( $attr['url'] )
		),
		$content
	);

	return $content;
}