This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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…</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…</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…</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…</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…</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…</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…</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…</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