jetpack-instant-search-prototype.php

<?php
/**
 * Plugin Name: Jetpack Instant Search Prototype
 * Plugin URI: https://jetpack.com
 * Description: Testing interactivity for Jetpack Instant Search
 * Author: Automattic
 * Version: 0.1
 * Author URI: https://jetpack.com
 * License: GPL2+
 * Text Domain: jetpack-instant
 */

function jetpack_instant_sidebar() {
	$args = array(
		'name'          => 'Jetpack Instant Search Sidebar',
		'id'            => 'jetpack-instant-sidebar',
		'description'   => 'Customise the Jetpack Instant Search overlay sidebar',
		'class'         => '',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="widgettitle">',
		'after_title'   => '</h2>'
	);

	register_sidebar( $args );
}
add_action( 'widgets_init', 'jetpack_instant_sidebar' );

function jetpack_instant_styles() {
	?>
	<!-- Jetpack Instant Search Styles -->
	<style type="text/css">
	.jis-active {
		overflow: hidden;
	}

	.jis-overlay {
		top: 0;
		left: 0;
		position: fixed;
		z-index: 9999;
		width: 100vw;
		height: 100vh;
		background: rgba( 255, 255, 255, 0.98);
		overflow-y: scroll;
		overflow-x: hidden;
		transform: translateY(-100vh);
		transition: 0.25s transform ease-in-out;
	}

	.jis-active.admin-bar .jis-overlay {
		top: 32px;
	}

	.jis-active .jis-overlay {
		transform: translateY(0);
	}

	.jis-close {
		position: fixed;
		top: 0;
		right: 0;
		background: #cd2653;
		width: 50px;
		height: 50px;
		text-decoration: none;
		transform: translateY(-50px);
		transition: 0.25s transform ease-in-out;
		transition-delay: 0.25s;
	}

	.jis-active .jis-close {
		transform: translateY(0);
	}

	.jis-close svg {
		margin: 18px;
		fill: #fff;
	}

	.jis-close:hover {
		background: #000;
	}

	.jis-overlay-container {
		max-width: 1000px;
		margin: 9em auto;
		padding: 1em;
	}

	.jis-search-form {
		display: flex;
	}

	.jis-search-form form {
		flex: 5;
		margin-right: 4em;
	}

	.jis-search-form-spacer {
		flex: 2;
	}

	.jis-search-form input[name="s"] {
		width: 100%;
	}

	.jis-search-form input[type="submit"],
	.jis-search-form button[type="submit"] {
		display: none;
	}

	.jis-content-flex {
		margin-top: 6em;
		display: flex;
	}

	.jis-content {
		flex: 5;
		margin-right: 4em;
	}

	.jis-content .entry-content,
	.jis-content .entry-content > * {
		margin: 0;
		padding: 0;
	}

	.jis-sidebar {
		flex: 2;
	}

	.jis-sidebar h2 {
		margin-top: 0;
		font-size: 1.2em;
	}

	.jis-sidebar .widget {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.jis-results {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.jis-results li {
		display: flex;
		margin: 0 0 2em 0;
		padding: 0;
	}

	.jis-result-thumbnail {
		flex: 0 0 100px;
		background: #eee;
		width: 100px;
		height: 100px;
	}

	.jis-result-content {
		flex: 1;
		margin-left: 2em;
	}

	.jis-result-content h4 {
		font-size: 1.4em;
		margin: 0 0 0.5em 0;
	}

	.search-mode {
		z-index: 8888;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #eee;
		padding: 10px;
	}

	</style>
	<!-- End Jetpack Instant Search Styles -->
	<?php
}
add_action( 'wp_head', 'jetpack_instant_styles' );

function jetpack_instant_scripts() {
	?>
	<!-- Jetpack Instant Search Scripts -->
	<script type="text/javascript">
	jQuery( function( $ ) {
		let searchMode = 'focus';

		$( 'input[name="s"]' ).not( '.jis-overlay input[name="s"]' ).focus( () => {
			if ( searchMode !== 'focus' ) {
				return false;
			}
			$( 'body' ).addClass( 'jis-active' );
			$( '.jis-overlay input[name="s"]' ).focus();
			// make sure scroll bar is hidden
			$( 'html' ).css( 'overflow-y', 'hidden' );
		} );

		// this .search-form selector needs to be checked for theme compatability
		$( '.search-form, form[role="search"]' ).not( '.jis-overlay input[name="s"]' ).submit( ( e ) => {
			if ( searchMode !== 'submit' ) {
				return false;
			}
		 	e.preventDefault();
			$( 'body' ).addClass( 'jis-active' );
			$( '.jis-overlay input[name="s"]' ).focus();
			$( '.jis-overlay input[name="s"]').val( $( this ).find( 'input[name="s"]' ).val() );
			// make sure scroll bar is hidden
			$( 'html' ).css( 'overflow-y', 'hidden' );
		} );

		$( '.jis-close' ).click( ( e ) => {
			e.preventDefault();
			$( 'body' ).removeClass( 'jis-active' );
			$( 'html' ).css( 'overflow-y', 'visible' );
		} );

		$( '.search-mode-select' ).on( 'change', () => {
			searchMode =  $( this ).find( ':selected' ).val();
		});
	});
	</script>
	<!-- End Jetpack Instant Search Scripts -->
	<?php
}
add_action( 'wp_footer', 'jetpack_instant_scripts' );

function jetpack_instant_script_dependencies() {
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'jetpack_instant_script_dependencies' );

function jetpack_instant_overlay() {
	?>
	<!-- Jetpack Instant Search Overlay -->
	<div class="jis-overlay">
		<a href="#" class="jis-close">
			<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><polygon fill="" fill-rule="evenodd" points="6.852 7.649 .399 1.195 1.445 .149 7.899 6.602 14.352 .149 15.399 1.195 8.945 7.649 15.399 14.102 14.352 15.149 7.899 8.695 1.445 15.149 .399 14.102"></polygon></svg>
		</a>
		<div class="jis-overlay-container">
			<div class="jis-search-form">
				<?php get_search_form( true ); ?>
				<div class="jis-search-form-spacer"></div>
			</div>
			<div class="jis-content-flex">
				<div class="jis-content entry">
					<ul class="jis-results">
						<li>
							<div class="jis-result-thumbnail"></div>
							<div class="jis-result-content">
								<h4>Lorem ipsum dolor sit</h4>
								<p>Nulla tempus orci quis dui sollicitudin, pharetra iaculis est luctus. Aenean lobortis, nulla ac bibendum sodales&hellip;</p>
							</div>
						</li>
						<li>
							<div class="jis-result-thumbnail"></div>
							<div class="jis-result-content">
								<h4>Vivamus tristique ante vitae felis accumsan</h4>
								<p>Nulla tempus orci quis dui sollicitudin, pharetra iaculis est luctus. Aenean lobortis, nulla ac bibendum sodales&hellip;</p>
							</div>
						</li>
						<li>
							<div class="jis-result-thumbnail"></div>
							<div class="jis-result-content">
								<h4>Maecenas quis vestibulum leo</h4>
								<p>Nulla tempus orci quis dui sollicitudin, pharetra iaculis est luctus. Aenean lobortis, nulla ac bibendum sodales&hellip;</p>
							</div>
						</li>
						<li>
							<div class="jis-result-thumbnail"></div>
							<div class="jis-result-content">
								<h4>Praesent egestas massa eros</h4>
								<p>Nulla tempus orci quis dui sollicitudin, pharetra iaculis est luctus. Aenean lobortis, nulla ac bibendum sodales&hellip;</p>
							</div>
						</li>
						<li>
							<div class="jis-result-thumbnail"></div>
							<div class="jis-result-content">
								<h4>Lorem ipsum dolor sit</h4>
								<p>Nulla tempus orci quis dui sollicitudin, pharetra iaculis est luctus. Aenean lobortis, nulla ac bibendum sodales&hellip;</p>
							</div>
						</li>
						<li>
							<div class="jis-result-thumbnail"></div>
							<div class="jis-result-content">
								<h4>Vivamus tristique ante vitae felis accumsan</h4>
								<p>Nulla tempus orci quis dui sollicitudin, pharetra iaculis est luctus. Aenean lobortis, nulla ac bibendum sodales&hellip;</p>
							</div>
						</li>
						<li>
							<div class="jis-result-thumbnail"></div>
							<div class="jis-result-content">
								<h4>Maecenas quis vestibulum leo</h4>
								<p>Nulla tempus orci quis dui sollicitudin, pharetra iaculis est luctus. Aenean lobortis, nulla ac bibendum sodales&hellip;</p>
							</div>
						</li>
						<li>
							<div class="jis-result-thumbnail"></div>
							<div class="jis-result-content">
								<h4>Praesent egestas massa eros</h4>
								<p>Nulla tempus orci quis dui sollicitudin, pharetra iaculis est luctus. Aenean lobortis, nulla ac bibendum sodales&hellip;</p>
							</div>
						</li>
					</ul>
					<div class="entry-content">
						<div class="wp-block-button">
							<a class="wp-block-button__link faux-button jis-load-more">Load more</a>
						</div>
					</div>
				</div>
				<div class="jis-sidebar">
					<?php if ( is_active_sidebar( 'jetpack-instant-sidebar' ) ) { ?>
						<?php dynamic_sidebar( 'jetpack-instant-sidebar' ); ?>
					<?php } ?>
				</div>
			</div>
		</div>
	</div>
	<div class="search-mode">
		<p>Search Mode:</p>
		<select class="search-mode-select">
			<option value="focus">On Focus</option>
			<option value="submit">On Submit</option>
		</select>
	</div>
	<!-- End Jetpack Instant Search Overlay -->
	<?php
}
add_action( 'wp_footer', 'jetpack_instant_overlay' );