Customizer Search - Version 1.1.1

Version Description

  • Highlight the characters that are matched in the results.
  • Auto focus the search input when the search icon is clicked.
Download this release

Release Info

Developer Nikschavan
Plugin Icon 128x128 Customizer Search
Version 1.1.1
Comparing to
See all releases

Code changes from version 1.1.0 to 1.1.1

Files changed (7) hide show
  1. assets/css/customizer-search-admin.css +4 -0
  2. assets/js/customizer-search-admin.compiled.js +1 -1
  3. assets/js/customizer-search-admin.js +10 -2
  4. class-customizer-search.php +1 -1
  5. customizer-search.php +2 -2
  6. languages/customizer-search.pot +2 -2
  7. readme.txt +6 -8
assets/css/customizer-search-admin.css CHANGED
@@ -125,4 +125,8 @@
125
 
126
  #search-results .accordion-section h3:hover {
127
  background: inherit;
 
 
 
 
128
  }
125
 
126
  #search-results .accordion-section h3:hover {
127
  background: inherit;
128
+ }
129
+
130
+ #customize-controls .hl {
131
+ background: #ffc600;
132
  }
assets/js/customizer-search-admin.compiled.js CHANGED
@@ -1 +1 @@
1
- (function(a){var b="";CustomizerSearchAdmin={_init:function _init(){this._bind();var c=a.map(_wpCustomizeSettings.controls,function(b){return a.map(_wpCustomizeSettings.sections,function(c){b.section==c.id&&a.map(_wpCustomizeSettings.panels,function(a){""==c.panel&&(b.panelName=c.title),c.panel==a.id&&(b.sectionName=c.title,b.panel=c.panel,b.panelName=a.title)})}),[b]});b=document.getElementById("customize-theme-controls"),customizePanelsParent=a("#customize-theme-controls"),customizePanelsParent.after("<div id=\"search-results\"></div>"),a(document).on("keyup","#customizer-search-input",function(b){b.preventDefault(),$this=a("#customizer-search-input"),string=$this.val(),0<string.length?CustomizerSearchAdmin.displayMatches(string,c):CustomizerSearchAdmin._clearSearch()}),a(document).on("click",".clear-search",function(){CustomizerSearchAdmin._clearSearch()}),a(document).on("click",".customize-search-toggle",function(){CustomizerSearchAdmin._display_search_form()})},expandSection:function expandSection(){var a=this.getAttribute("data-section"),b=wp.customize.section(a);CustomizerSearchAdmin._clearSearch(),b.expand()},displayMatches:function displayMatches(a,c){var d=CustomizerSearchAdmin.findMatches(a,c);if(0!==d.length){html=d.map(function(a){if(""!==a.label){var b=a.panelName;return""!=a.sectionName&&(b="".concat(b," \u25B8 ").concat(a.sectionName)),"\n <li id=\"accordion-section-".concat(a.section,"\" class=\"accordion-section control-section control-section-default customizer-search-results\" aria-owns=\"sub-accordion-section-").concat(a.section,"\" data-section=\"").concat(a.section,"\">\n <h3 class=\"accordion-section-title\" tabindex=\"0\">\n ").concat(a.label,"\n <span class=\"screen-reader-text\">Press return or enter to open this section</span>\n </h3>\n <span class=\"search-setting-path\">").concat(b,"</i></span>\n </li>\n ")}}).join(""),b.classList.add("search-not-found"),document.getElementById("search-results").innerHTML="<ul id=\"customizer-search-results\">".concat(html,"</ul>");var e=document.querySelectorAll("#search-results .accordion-section");e.forEach(function(a){return a.addEventListener("click",CustomizerSearchAdmin.expandSection)})}},findMatches:function findMatches(a,b){return b.filter(function(b){null==b.panelName&&(b.panelName=""),null==b.sectionName&&(b.sectionName="");var c=new RegExp(a,"gi");return b.label.match(c)||b.panelName.match(c)||b.sectionName.match(c)})},_bind:function _bind(){wp.customize.previewer.targetWindow.bind(a.proxy(this._showSearchButtonToggle,this))},_showSearchButtonToggle:function _showSearchButtonToggle(){var b=wp.template("search-button");0==a("#customize-info .accordion-section-title .customize-search-toggle").length&&a("#customize-info .accordion-section-title").append(b());var b=wp.template("search-form");0==a("#customize-info #accordion-section-customizer-search").length&&a("#customize-info .customize-panel-description").after(b())},_display_search_form:function _display_search_form(){a("#accordion-section-customizer-search").hasClass("open")?(a("#accordion-section-customizer-search").removeClass("open"),a("#accordion-section-customizer-search").slideUp("fast")):(a(".customize-panel-description").removeClass("open"),a(".customize-panel-description").slideUp("fast"),a("#accordion-section-customizer-search").addClass("open"),a("#accordion-section-customizer-search").slideDown("fast"))},_clearSearch:function _clearSearch(){var b=document.getElementById("customize-theme-controls");b.classList.remove("search-not-found"),document.getElementById("search-results").innerHTML="",document.getElementById("customizer-search-input").value="",a("#customizer-search-input").focus()}},a(function(){CustomizerSearchAdmin._init()})})(jQuery);
1
+ (function(a){var b="";CustomizerSearchAdmin={_init:function _init(){this._bind();var c=a.map(_wpCustomizeSettings.controls,function(b){return a.map(_wpCustomizeSettings.sections,function(c){b.section==c.id&&a.map(_wpCustomizeSettings.panels,function(a){""==c.panel&&(b.panelName=c.title),c.panel==a.id&&(b.sectionName=c.title,b.panel=c.panel,b.panelName=a.title)})}),[b]});b=document.getElementById("customize-theme-controls"),customizePanelsParent=a("#customize-theme-controls"),customizePanelsParent.after("<div id=\"search-results\"></div>"),a(document).on("keyup","#customizer-search-input",function(b){b.preventDefault(),$this=a("#customizer-search-input"),string=$this.val(),0<string.length?CustomizerSearchAdmin.displayMatches(string,c):CustomizerSearchAdmin._clearSearch()}),a(document).on("click",".clear-search",function(){CustomizerSearchAdmin._clearSearch()}),a(document).on("click",".customize-search-toggle",function(){CustomizerSearchAdmin._display_search_form()})},expandSection:function expandSection(){var a=this.getAttribute("data-section"),b=wp.customize.section(a);CustomizerSearchAdmin._clearSearch(),b.expand()},displayMatches:function displayMatches(a,c){var d=CustomizerSearchAdmin.findMatches(a,c);if(0!==d.length){html=d.map(function(b){if(""!==b.label){var c=b.panelName;""!=b.sectionName&&(c="".concat(c," \u25B8 ").concat(b.sectionName));var d=new RegExp(a,"gi"),e=b.label.replace(d,"<span class=\"hl\">".concat(a,"</span>"));return c=c.replace(d,"<span class=\"hl\">".concat(a,"</span>")),"\n <li id=\"accordion-section-".concat(b.section,"\" class=\"accordion-section control-section control-section-default customizer-search-results\" aria-owns=\"sub-accordion-section-").concat(b.section,"\" data-section=\"").concat(b.section,"\">\n <h3 class=\"accordion-section-title\" tabindex=\"0\">\n ").concat(e,"\n <span class=\"screen-reader-text\">Press return or enter to open this section</span>\n </h3>\n <span class=\"search-setting-path\">").concat(c,"</i></span>\n </li>\n ")}}).join(""),b.classList.add("search-not-found"),document.getElementById("search-results").innerHTML="<ul id=\"customizer-search-results\">".concat(html,"</ul>");var e=document.querySelectorAll("#search-results .accordion-section");e.forEach(function(a){return a.addEventListener("click",CustomizerSearchAdmin.expandSection)})}},findMatches:function findMatches(a,b){return b.filter(function(b){null==b.panelName&&(b.panelName=""),null==b.sectionName&&(b.sectionName="");var c=new RegExp(a,"gi");return b.label.match(c)||b.panelName.match(c)||b.sectionName.match(c)})},_bind:function _bind(){wp.customize.previewer.targetWindow.bind(a.proxy(this._showSearchButtonToggle,this))},_showSearchButtonToggle:function _showSearchButtonToggle(){var b=wp.template("search-button");0==a("#customize-info .accordion-section-title .customize-search-toggle").length&&a("#customize-info .accordion-section-title").append(b());var b=wp.template("search-form");0==a("#customize-info #accordion-section-customizer-search").length&&a("#customize-info .customize-panel-description").after(b())},_display_search_form:function _display_search_form(){a("#accordion-section-customizer-search").hasClass("open")?(a("#accordion-section-customizer-search").removeClass("open"),a("#accordion-section-customizer-search").slideUp("fast")):(a(".customize-panel-description").removeClass("open"),a(".customize-panel-description").slideUp("fast"),a("#accordion-section-customizer-search").addClass("open"),a("#accordion-section-customizer-search").slideDown("fast")),a("#customizer-search-input").focus()},_clearSearch:function _clearSearch(){var b=document.getElementById("customize-theme-controls");b.classList.remove("search-not-found"),document.getElementById("search-results").innerHTML="",document.getElementById("customizer-search-input").value="",a("#customizer-search-input").focus()}},a(function(){CustomizerSearchAdmin._init()})})(jQuery);
assets/js/customizer-search-admin.js CHANGED
@@ -105,10 +105,15 @@
105
  settingTrail = `${settingTrail} ▸ ${index.sectionName}`;
106
  }
107
 
 
 
 
 
 
108
  return `
109
  <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}">
110
  <h3 class="accordion-section-title" tabindex="0">
111
- ${index.label}
112
  <span class="screen-reader-text">Press return or enter to open this section</span>
113
  </h3>
114
  <span class="search-setting-path">${settingTrail}</i></span>
@@ -125,10 +130,11 @@
125
 
126
  findMatches: function (stringToMatch, controls) {
127
  return controls.filter(control => {
128
- // here we need to figure out if the city or state matches what was searched.
129
  if (control.panelName == null) control.panelName = '';
130
  if (control.sectionName == null) control.sectionName = '';
131
 
 
132
  const regex = new RegExp(stringToMatch, 'gi');
133
  return control.label.match(regex) || control.panelName.match(regex) || control.sectionName.match(regex)
134
  });
@@ -178,6 +184,8 @@
178
  $('#accordion-section-customizer-search').slideDown('fast');
179
  }
180
 
 
 
181
  },
182
 
183
  /**
105
  settingTrail = `${settingTrail} ▸ ${index.sectionName}`;
106
  }
107
 
108
+ const regex = new RegExp(stringToMatch, 'gi');
109
+
110
+ const label = index.label.replace(regex, `<span class="hl">${stringToMatch}</span>`);
111
+ settingTrail = settingTrail.replace(regex, `<span class="hl">${stringToMatch}</span>`);
112
+
113
  return `
114
  <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}">
115
  <h3 class="accordion-section-title" tabindex="0">
116
+ ${label}
117
  <span class="screen-reader-text">Press return or enter to open this section</span>
118
  </h3>
119
  <span class="search-setting-path">${settingTrail}</i></span>
130
 
131
  findMatches: function (stringToMatch, controls) {
132
  return controls.filter(control => {
133
+
134
  if (control.panelName == null) control.panelName = '';
135
  if (control.sectionName == null) control.sectionName = '';
136
 
137
+ // Search for the stringToMatch from control label, Panel Name, Section Name.
138
  const regex = new RegExp(stringToMatch, 'gi');
139
  return control.label.match(regex) || control.panelName.match(regex) || control.sectionName.match(regex)
140
  });
184
  $('#accordion-section-customizer-search').slideDown('fast');
185
  }
186
 
187
+ $(searchInputSelector).focus();
188
+
189
  },
190
 
191
  /**
class-customizer-search.php CHANGED
@@ -53,7 +53,7 @@ class Customizer_Search {
53
  */
54
  public function enqueue_scripts() {
55
  wp_enqueue_style( 'customizer-search-admin', BSFCS_URL . 'assets/css/customizer-search-admin.css', array(), BSFCS_VER );
56
- wp_enqueue_script( 'customizer-search-admin', BSFCS_URL . 'assets/js/customizer-search-admin.compiled.js', array(), BSFCS_VER, true );
57
  }
58
 
59
  /**
53
  */
54
  public function enqueue_scripts() {
55
  wp_enqueue_style( 'customizer-search-admin', BSFCS_URL . 'assets/css/customizer-search-admin.css', array(), BSFCS_VER );
56
+ 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 );
57
  }
58
 
59
  /**
customizer-search.php CHANGED
@@ -7,12 +7,12 @@
7
  * Author URI: https://www.brainstormforce.com/
8
  * Text Domain: customizer-search
9
  * Domain Path: /languages
10
- * Version: 1.1.0
11
  *
12
  * @package Customizer_Search
13
  */
14
 
15
- define( 'BSFCS_VER', '1.1.0' );
16
  define( 'BSFCS_DIR', plugin_dir_path( __FILE__ ) );
17
  define( 'BSFCS_URL', plugins_url( '/', __FILE__ ) );
18
  define( 'BSFCS_PATH', plugin_basename( __FILE__ ) );
7
  * Author URI: https://www.brainstormforce.com/
8
  * Text Domain: customizer-search
9
  * Domain Path: /languages
10
+ * Version: 1.1.1
11
  *
12
  * @package Customizer_Search
13
  */
14
 
15
+ define( 'BSFCS_VER', '1.1.1' );
16
  define( 'BSFCS_DIR', plugin_dir_path( __FILE__ ) );
17
  define( 'BSFCS_URL', plugins_url( '/', __FILE__ ) );
18
  define( 'BSFCS_PATH', plugin_basename( __FILE__ ) );
languages/customizer-search.pot CHANGED
@@ -2,10 +2,10 @@
2
  # This file is distributed under the same license as the Customizer Search package.
3
  msgid ""
4
  msgstr ""
5
- "Project-Id-Version: Customizer Search 1.1.0\n"
6
  "Report-Msgid-Bugs-To: "
7
  "https://wordpress.org/support/plugin/customizer-search\n"
8
- "POT-Creation-Date: 2018-03-03 10:43:17+00:00\n"
9
  "MIME-Version: 1.0\n"
10
  "Content-Type: text/plain; charset=utf-8\n"
11
  "Content-Transfer-Encoding: 8bit\n"
2
  # This file is distributed under the same license as the Customizer Search package.
3
  msgid ""
4
  msgstr ""
5
+ "Project-Id-Version: Customizer Search 1.1.1\n"
6
  "Report-Msgid-Bugs-To: "
7
  "https://wordpress.org/support/plugin/customizer-search\n"
8
+ "POT-Creation-Date: 2018-03-04 05:02:50+00:00\n"
9
  "MIME-Version: 1.0\n"
10
  "Content-Type: text/plain; charset=utf-8\n"
11
  "Content-Transfer-Encoding: 8bit\n"
readme.txt CHANGED
@@ -4,7 +4,7 @@ Donate link: https://www.paypal.me/BrainstormForce
4
  Tags: customizer, search
5
  Requires at least: 4.4
6
  Tested up to: 4.9.4
7
- Stable tag: 1.1.0
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
@@ -14,13 +14,7 @@ Search for settings in customizer.
14
 
15
  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.
16
 
17
- Works with all WordPress theme. Tested with:
18
-
19
- 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>
20
- 2. GeneratePress
21
- 3. OceanWP
22
- 4. Hestia
23
- 5. Sydney
24
 
25
  https://www.youtube.com/watch?v=81LSHXHw058
26
 
@@ -32,6 +26,10 @@ https://www.youtube.com/watch?v=81LSHXHw058
32
 
33
  == Changelog ==
34
 
 
 
 
 
35
  = 1.1.0 =
36
  - Rewrite the search logic to improve the search results.
37
  - 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.
4
  Tags: customizer, search
5
  Requires at least: 4.4
6
  Tested up to: 4.9.4
7
+ Stable tag: 1.1.1
8
  License: GPLv2 or later
9
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
 
14
 
15
  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.
16
 
17
+ Works with all WordPress theme.
 
 
 
 
 
 
18
 
19
  https://www.youtube.com/watch?v=81LSHXHw058
20
 
26
 
27
  == Changelog ==
28
 
29
+ = 1.1.1 =
30
+ - Highlight the characters that are matched in the results.
31
+ - Auto focus the search input when the search icon is clicked.
32
+
33
  = 1.1.0 =
34
  - Rewrite the search logic to improve the search results.
35
  - 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.