Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<?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' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment