Merge pull request #16 from Nikschavan/highlight-search

Highlight the matched results in the final output list
brainstormforce · Mar 4, 2018 · bc4a4d3 · bc4a4d3
2 parents 75bf164 + 1997a52
commit bc4a4d3
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 **Tags:** customizer, search  
 **Requires at least:** 4.4  
 **Tested up to:** 4.9.4  
-**Stable tag:** 1.1.0  
+**Stable tag:** 1.1.1  
 **License:** GPLv2 or later  
 **License URI:** http://www.gnu.org/licenses/gpl-2.0.html  
 
@@ -14,13 +14,7 @@ Search for settings in customizer.
 
 Using a theme powered by the WordPress Customizer? Then you will love this plugin. Save the time and frustration finding options. Simply search for the setting you're looking for and get there instantly.
 
-Works with all WordPress theme. Tested with:
-
-1. <a href="https://wpastra.com/pro/?utm_source=customizer-search-plugin&utm_medium=plugin-readme&utm_campaign=tested-with-astra&bsf=162">Astra</a>
-2. GeneratePress
-3. OceanWP
-4. Hestia
-5. Sydney
+Works with all WordPress theme.
 
 https://www.youtube.com/watch?v=81LSHXHw058
 
@@ -32,6 +26,10 @@ https://www.youtube.com/watch?v=81LSHXHw058
 
 ## Changelog ##
 
+### 1.1.1 ###
+- Highlight the characters that are matched in the results.
+- Auto focus the search input when the search icon is clicked.
+
 ### 1.1.0 ###
 - Rewrite the search logic to improve the search results.
 - The search results are direct links to the customizer panel where the searched setting resides, This improves the required clicks to get to the search setting from old version.

diff --git a/assets/css/customizer-search-admin.css b/assets/css/customizer-search-admin.css
@@ -125,4 +125,8 @@
 
 #search-results .accordion-section h3:hover {
     background: inherit;
+}
+
+#customize-controls .hl {
+    background: #ffc600;
 }
diff --git a/assets/js/customizer-search-admin.compiled.js b/assets/js/customizer-search-admin.compiled.js
diff --git a/assets/js/customizer-search-admin.js b/assets/js/customizer-search-admin.js
@@ -105,10 +105,15 @@
                     settingTrail = `${settingTrail} ▸ ${index.sectionName}`;
                 }
 
+                const regex = new RegExp(stringToMatch, 'gi');
+
+                const label = index.label.replace(regex, `<span class="hl">${stringToMatch}</span>`);
+                settingTrail = settingTrail.replace(regex, `<span class="hl">${stringToMatch}</span>`);
+
                 return `
                     <li id="accordion-section-${index.section}" class="accordion-section control-section control-section-default customizer-search-results" aria-owns="sub-accordion-section-${index.section}" data-section="${index.section}">
                         <h3 class="accordion-section-title" tabindex="0">
-                            ${index.label}
+                            ${label}
                             <span class="screen-reader-text">Press return or enter to open this section</span>
                         </h3>
                         <span class="search-setting-path">${settingTrail}</i></span>
@@ -125,10 +130,11 @@
 
         findMatches: function (stringToMatch, controls) {
           return controls.filter(control => {
-            // here we need to figure out if the city or state matches what was searched.
+
             if (control.panelName == null) control.panelName = '';
             if (control.sectionName == null) control.sectionName = '';
 
+            // Search for the stringToMatch from control label, Panel Name, Section Name.
             const regex = new RegExp(stringToMatch, 'gi');
             return control.label.match(regex) || control.panelName.match(regex) || control.sectionName.match(regex)
           });
@@ -178,6 +184,8 @@
                 $('#accordion-section-customizer-search').slideDown('fast');
             }
 
+            $(searchInputSelector).focus();
+
         },
 
         /**

diff --git a/class-customizer-search.php b/class-customizer-search.php
@@ -53,7 +53,7 @@ private function hooks() {
 	 */
 	public function enqueue_scripts() {
 		wp_enqueue_style( 'customizer-search-admin', BSFCS_URL . 'assets/css/customizer-search-admin.css', array(), BSFCS_VER );
-		wp_enqueue_script( 'customizer-search-admin', BSFCS_URL . 'assets/js/customizer-search-admin.compiled.js', array(), BSFCS_VER, true );
+		wp_enqueue_script( 'customizer-search-admin', BSFCS_URL . 'assets/js/customizer-search-admin.compiled.js', array(), filemtime( BSFCS_DIR . 'assets/js/customizer-search-admin.compiled.js' ), true );
 	}
 
 	/**

diff --git a/customizer-search.php b/customizer-search.php
@@ -7,12 +7,12 @@
  * Author URI:      https://www.brainstormforce.com/
  * Text Domain:     customizer-search
  * Domain Path:     /languages
- * Version:         1.1.0
+ * Version:         1.1.1
  *
  * @package         Customizer_Search
  */
 
-define( 'BSFCS_VER', '1.1.0' );
+define( 'BSFCS_VER', '1.1.1' );
 define( 'BSFCS_DIR', plugin_dir_path( __FILE__ ) );
 define( 'BSFCS_URL', plugins_url( '/', __FILE__ ) );
 define( 'BSFCS_PATH', plugin_basename( __FILE__ ) );

diff --git a/languages/customizer-search.pot b/languages/customizer-search.pot
@@ -2,10 +2,10 @@
 # This file is distributed under the same license as the Customizer Search package.
 msgid ""
 msgstr ""
-"Project-Id-Version: Customizer Search 1.1.0\n"
+"Project-Id-Version: Customizer Search 1.1.1\n"
 "Report-Msgid-Bugs-To: "
 "https://wordpress.org/support/plugin/customizer-search\n"
-"POT-Creation-Date: 2018-03-03 10:43:17+00:00\n"
+"POT-Creation-Date: 2018-03-04 05:02:50+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "customizer-search",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "Gruntfile.js",
   "author": "Nikhil Chavan",
   "scripts": {

diff --git a/readme.txt b/readme.txt
@@ -4,7 +4,7 @@ Donate link: https://www.paypal.me/BrainstormForce
 Tags: customizer, search
 Requires at least: 4.4
 Tested up to: 4.9.4
-Stable tag: 1.1.0
+Stable tag: 1.1.1
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -14,13 +14,7 @@ Search for settings in customizer.
 
 Using a theme powered by the WordPress Customizer? Then you will love this plugin. Save the time and frustration finding options. Simply search for the setting you're looking for and get there instantly.
 
-Works with all WordPress theme. Tested with:
-
-1. <a href="https://wpastra.com/pro/?utm_source=customizer-search-plugin&utm_medium=plugin-readme&utm_campaign=tested-with-astra&bsf=162">Astra</a>
-2. GeneratePress
-3. OceanWP
-4. Hestia
-5. Sydney
+Works with all WordPress theme.
 
 https://www.youtube.com/watch?v=81LSHXHw058
 
@@ -32,6 +26,10 @@ https://www.youtube.com/watch?v=81LSHXHw058
 
 == Changelog ==
 
+= 1.1.1 =
+- Highlight the characters that are matched in the results.
+- Auto focus the search input when the search icon is clicked.
+
 = 1.1.0 =
 - Rewrite the search logic to improve the search results.
 - The search results are direct links to the customizer panel where the searched setting resides, This improves the required clicks to get to the search setting from old version.