Merge pull request #14 from Nikschavan/v2

- 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 the old version.

.distignore

@@ -18,7 +18,8 @@ phpunit.xml
 phpunit.xml.dist
 multisite.xml
 multisite.xml.dist
-phpcs.ruleset.xml
+phpcs.xml
+phpcs.xml.dist
 README.md
 wp-cli.local.yml
 tests
@@ -27,3 +28,4 @@ node_modules
 *.sql
 *.tar.gz
 *.zip
+package-lock.json

.gitignore

@@ -2,6 +2,6 @@
 Thumbs.db
 wp-cli.local.yml
 node_modules/
-*.sql
-*.tar.gz
 *.zip
+*.tar.gz
+vendor

.travis.yml

@@ -7,37 +7,25 @@ notifications:
   email:
     on_success: never
     on_failure: change
+  slack: bsf-bots:RDGCoMDDxnlCvnUfvhq8pQ36
 
-directories:
-  - vendor
+cache:
+  - composer
   - $HOME/.composer/cache
 
 matrix:
   include:
-    - php: 7.1
-      env: WP_TRAVISCI=phpcs
-    - php: 7.1
-      env: WP_VERSION=latest
     - php: 7.0
-      env: WP_VERSION=latest
-    - php: 5.6
-      env: WP_VERSION=latest
-    - php: 5.6
-      env: WP_VERSION=trunk
-    - php: 5.3
-      env: WP_VERSION=latest
+      env: WP_TRAVISCI=phpcs
 
 before_script:
-  - export PATH="$HOME/.composer/vendor/bin:$PATH"
   - |
     if [[ "$WP_TRAVISCI" == "phpcs" ]] ; then
-      composer global require wp-coding-standards/wpcs
-      phpcs --config-set installed_paths $HOME/.composer/vendor/wp-coding-standards/wpcs
+      composer install
     fi
 
 script:
-  - if find . -name "*.php" ! -path "./vendor/*" ! -path "./admin/bsf-core/*" -exec php -l {} \; | grep "Errors parsing"; then exit 1; fi
   - |
     if [[ "$WP_TRAVISCI" == "phpcs" ]] ; then
-      phpcs --standard=phpcs.ruleset.xml $(find . -name '*.php')
+      vendor/bin/phpcs
     fi

Gruntfile.js

@@ -13,7 +13,7 @@ module.exports = function( grunt ) {
 			},
 			target: {
 				files: {
-					src: [ '*.php', '**/*.php', '!node_modules/**', '!php-tests/**', '!bin/**' ]
+					src: [ '*.php', '**/*.php', '!node_modules/**', '!php-tests/**', '!bin/**', '!vendor/**', ]
 				}
 			}
 		},

README.md

@@ -3,8 +3,8 @@
 **Donate link:** https://www.paypal.me/BrainstormForce  
 **Tags:** customizer, search  
 **Requires at least:** 4.4  
-**Tested up to:** 4.8.1  
-**Stable tag:** 1.0.0  
+**Tested up to:** 4.9.4  
+**Stable tag:** 1.1.0  
 **License:** GPLv2 or later  
 **License URI:** http://www.gnu.org/licenses/gpl-2.0.html  
 
@@ -22,5 +22,9 @@ Search for settings in customizer.
 
 ## Changelog ##
 
+### 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.
+
 ### 1.0.0 ###
-* Initial Release
+- Initial Release

assets/css/customizer-search-admin.css

@@ -66,9 +66,63 @@
 .search-not-found {
     height: 0;
     transition: height 0.3s ease-in-out;
+    visibility: hidden;
+    opacity: 0;
+    display: none;
 }
 
 .search-found {
     height: 100%;
     transition: height 0.3s ease-in-out;
+    visibility: visible;
+    opacity: 1;
 }
+
+#search-results .accordion-section {
+    border-left: none;
+    border-right: none;
+    padding: 10px 10px 11px 14px;
+    line-height: 21px;
+    background: #fff;
+    position: relative;
+}
+
+#search-results .accordion-section h3 {
+    padding: 0;
+    margin: 0
+}
+
+#search-results .accordion-section:hover {
+    background: #f3f3f5;
+}
+
+.search-setting-path {
+    display: flex;
+    cursor: pointer;
+}
+
+#search-results .accordion-section:after {
+    font: normal 20px/1 dashicons;
+    speak: none;
+    display: block;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-decoration: none !important;
+}
+
+#search-results .accordion-section:after {
+    content: "\f345";
+    position: absolute;
+    top: 12px;
+    right: 10px;
+    z-index: 1;
+    top: calc(50% - 10px);
+}
+
+#search-results .accordion-section h3:after {
+    content: none;
+}
+
+#search-results .accordion-section h3:hover {
+    background: inherit;
+}

assets/js/customizer-search-admin.js

@@ -11,7 +11,13 @@
      * Selector for the search field
      * @type {String}
      */
-    var searchInputSelector = '#customizer-search-input';
+    const searchInputSelector = '#customizer-search-input';
+
+    /**
+     * innerHTML of all the customizer panels.
+     * @type {String}
+     */
+    let customizerPanels = '';
 
     /**
      * Handles logic for the admin customize interface.
@@ -30,19 +36,41 @@
          */
         _init: function () {
             this._bind();
-            var searchArray = this._searchArray(),
-                sections = _wpCustomizeSettings.sections;
+
+            const controls = $.map(_wpCustomizeSettings.controls, function(control, index) {
+                $.map(_wpCustomizeSettings.sections, function(section, index) {
+                    if (control.section == section.id) {
+                        $.map(_wpCustomizeSettings.panels, function(panel, index) {
+                            if ('' == section.panel) {
+                                control.panelName = section.title;
+                            }
+
+                            if (section.panel == panel.id) {
+                                control.sectionName = section.title;
+                                control.panel = section.panel;
+                                control.panelName = panel.title;
+                            }
+                        });
+                     }
+                });
+
+                return [control];
+            });
+
+            customizerPanels = document.getElementById('customize-theme-controls');
+
+            customizePanelsParent = $('#customize-theme-controls');
+            customizePanelsParent.after('<div id="search-results"></div>');
 
             $(document).on('keyup', searchInputSelector, function (event) {
                 event.preventDefault();
                 $this = $(searchInputSelector);
                 string = $this.val();
 
-                if (string.length > 2) {
-                    CustomizerSearchAdmin._searchString(string, searchArray, sections);
+                if (string.length > 0) {
+                    CustomizerSearchAdmin.displayMatches(string, controls);
                 } else {
-                    $('li.accordion-section').removeClass('search-not-found').addClass('search-found');
-                    $('li.accordion-panel').removeClass('search-not-found').addClass('search-found');
+                    CustomizerSearchAdmin._clearSearch();
                 }
 
             });
@@ -56,6 +84,56 @@
             });
         },
 
+        expandSection: function(setting) {
+            const sectionName = this.getAttribute('data-section');
+            const section = wp.customize.section( sectionName );
+            CustomizerSearchAdmin._clearSearch();
+            section.expand();            
+        },
+
+        displayMatches: function (stringToMatch, controls) {
+            const matchArray = CustomizerSearchAdmin.findMatches(stringToMatch, controls);
+
+            if ( 0 === matchArray.length ) return; // Return if empty results.
+
+            html = matchArray.map(function(index, elem) {
+
+                if ( '' === index.label ) return; // Return if empty results.
+
+                let settingTrail = index.panelName;
+                if ("" != index.sectionName) {
+                    settingTrail = `${settingTrail} ▸ ${index.sectionName}`;
+                }
+
+                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}
+                            <span class="screen-reader-text">Press return or enter to open this section</span>
+                        </h3>
+                        <span class="search-setting-path">${settingTrail}</i></span>
+                    </li>
+                `;
+            }).join('');
+
+            customizerPanels.classList.add('search-not-found');
+            document.getElementById('search-results').innerHTML = `<ul id="customizer-search-results">${html}</ul>`;
+
+            const searchSettings = document.querySelectorAll('#search-results .accordion-section');
+            searchSettings.forEach( setting => setting.addEventListener('click', CustomizerSearchAdmin.expandSection) );
+        },
+
+        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 = '';
+
+            const regex = new RegExp(stringToMatch, 'gi');
+            return control.label.match(regex) || control.panelName.match(regex) || control.sectionName.match(regex)
+          });
+        },
+
         /**
          * Binds admin customize events.
          *
@@ -102,85 +180,17 @@
 
         },
 
-        /**
-         * Search for key inside an array.
-         *
-         * @since  1.0.0
-         */
-        _searchArray: function () {
-            searchArray = [];
-
-            searchArray.push(_wpCustomizeSettings.controls);
-            searchArray.push(_wpCustomizeSettings.sections);
-            searchArray.push(_wpCustomizeSettings.panels);
-
-            return searchArray;
-        },
-
-        /**
-         * Searches for the string in the given source array.
-         *
-         * @since  1.0.0
-         * @param  {String} key         Key to be searched.
-         * @param  {Array} sourceArray  Array in which the key is to be searched.
-         * @param  {Array} sections     Section in the customizer.
-         */
-        _searchString: function (key, sourceArray, sections) {
-            resultArray = []
-
-            $.each(sourceArray, function (index, val) {
-                $.each(val, function (index, val) {
-                    if (typeof val.label !== "undefined") {
-                        if (val.label.toLowerCase().indexOf(key) >= 0) {
-                            resultArray.push(val);
-                        }
-                    }
-
-                    if (typeof val.title !== "undefined") {
-                        if (val.title.toLowerCase().indexOf(key) >= 0) {
-                            resultArray.push(val);
-                        }
-                    }
-                });
-            });
-
-            $.each(resultArray, function (index, val) {
-
-                if (typeof val['section'] !== "undefined") {
-                    $found = $('li#accordion-section-' + val['section']);
-                    $foundPanel = $('li#accordion-panel-' + sections[val['section']]['panel']);
-                    $found.addClass('search-found');
-                    $foundPanel.addClass('search-found');
-                    $found.siblings('.control-section').removeClass('search-found').addClass('search-not-found');
-                    $foundPanel.siblings('.control-section').removeClass('search-found').addClass('search-not-found');
-                }
-
-                if (typeof val['panel'] !== "undefined") {
-                    $section = $('li#accordion-section-' + val['id']);
-                    $foundPanel = $('li#accordion-panel-' + val['panel']);
-
-                    $section.addClass('search-found search-result').siblings('.control-section').not('.search-result').removeClass('search-found').addClass('search-not-found');
-                    $foundPanel.addClass('search-found search-result');
-                    $foundPanel.siblings('.control-section').not('.search-result').removeClass('search-found').addClass('search-not-found');
-                }
-
-                if ($('.generate-upsell-accordion-section').length > 0) {
-                    $('.generate-upsell-accordion-section').removeClass('search-found').addClass('search-not-found');
-                }
-            });
-        },
-
         /**
          * Clear Search input and display all the options
          *
          * @since  1.0.0
          * @access private
          */
         _clearSearch: function () {
-            $('#customizer-search-input').val('');
-            $('li.accordion-section').removeClass('search-not-found').addClass('search-found');
-            $('li.accordion-panel').removeClass('search-not-found').addClass('search-found');
-            $('.search-result').removeClass('search-result');
+            const panels = document.getElementById('customize-theme-controls');
+            panels.classList.remove('search-not-found');
+            document.getElementById('search-results').innerHTML = '';
+            document.getElementById('customizer-search-input').value = '';
 
             $(searchInputSelector).focus();
         }