Adding search functionality

Author: thatdevgirl

color-palette/build/color-palette-frontend.min.js

@@ -56,10 +56,18 @@ public function enqueue_editor_assets(): void {
    * @return void
    */
   public function enqueue_frontend_assets(): void {
+    $js = '../build/color-palette-frontend.min.js';
     $css= '../build/styles-frontend.min.css';
 
     $handle = 'color-palette-frontend';
 
+    wp_enqueue_script(
+      $handle,
+      plugins_url( $js, __FILE__ ),
+      [ 'jquery' ],
+      filemtime( plugin_dir_path( __FILE__ ) . $js )
+    );
+
     wp_enqueue_style(
       $handle,
       plugin_dir_url( __FILE__ ) . $css,

color-palette/build/color-palette.min.js

@@ -70,6 +70,10 @@ $lg: 1200px;
 .cp-palette-search {
   margin-bottom: 1rem;
 
+  fieldset {
+    border: 0;
+  }
+
   &-label {
     display: block;
     margin-bottom: 0.25rem;

color-palette/build/styles-editor.min.css

@@ -19,8 +19,10 @@ const ColorsSave = ( props ) => {
   if ( search ) {
     maybeSearch = (
       <form className='cp-palette-search'>
-        <label for='cp-palette-search-input' className='cp-palette-search-label'>Search for a color</label>
-        <input type='text' id='cp-palette-search-input' className='cp-palette-search-input' />
+        <fieldset>
+          <label className='cp-palette-search-label'>Search for a color</label>
+          <input type='text' className='cp-palette-search-input' />
+        </fieldset>
         <input type='submit' className='cp-palette-search-submit' value='Search' />
       </form>
     );

color-palette/build/styles-frontend.min.css

@@ -1,5 +1,5 @@
 /**
- * Master JS file for this plugin.
+ * Master JS file for the editor scripts for this plugin.
  */
 
 import Color from './blocks/color/index.js';

color-palette/inc/setup.php

@@ -0,0 +1,5 @@
+/**
+ * Master JS file for the front-end scripts for this plugin.
+ */
+
+import ColorSearch from './scripts/search/index.js';

color-palette/source/blocks/colors/_frontend.scss

@@ -0,0 +1,55 @@
+/**
+ * Search functionality for the color palette block.
+ *
+ * This keyword search form will search by color name within a given
+ * color palette block. It will display only those colors that match the
+ * keyword and hide the rest from view.
+ */
+
+const ColorSearch = ( ($) => {
+
+  $( document ).ready( () => {
+
+    $( '.cp-palette-search-submit' ).click( (e) => { search(e); } );
+
+
+    const search = ( e ) => {
+      e.preventDefault();
+
+      // Get the parent block, so that we know which color palette we are
+      // working with (in case there are multiple on the page).
+      const parent = $( e.target ).closest( '.cp-palette' );
+
+      // Get the search keyword from the form.
+      const keyword = $( '.cp-palette-search-input', parent ).val();
+
+      // Get all of the child color blocks in this parent.
+      const children = $( '.cp-color', parent );
+
+      // If there is no keyword, show everything!
+      if ( !keyword ) {
+        $( children ).show();
+        return false;
+      }
+
+      // If we are still there, there are child blocks to filter! Go through
+      // each child block. If the keyword exists in the color name, show that
+      // color; otherwise hide it.
+      for ( let i=0; i<children.length; i++ ) {
+        const colorName = $( '.cp-color-name', children[i] ).text();
+
+        // Check for the keyword, but convert everything to lower case to make
+        // the search non-case-sensitive.
+        if ( colorName.toLowerCase().indexOf( keyword.toLowerCase() ) >= 0 ) {
+          $( children[i] ).show();
+        } else {
+          $( children[i] ).hide();
+        }
+      }
+    }
+
+  } );
+
+} )( jQuery );
+
+export default ColorSearch;