Merge pull request #660 from simple-icons/develop

Publish search changes

index.html

@@ -537,6 +537,7 @@
     <script type="text/javascript">
         (function(document) {
             var icons          = [{{ allIconNames }}].map(normalizeSearchTerm),
+                queryParameter = 'q',
                 $grid          = document.querySelector('.grid'),
                 $icons         = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
                 $search        = document.querySelector('.search'),
@@ -583,18 +584,64 @@
                 };
             }
 
+            // Get any parameter from the URL's search section (location.search).
+            // see
+            //   - https://davidwalsh.name/query-string-javascript
+            //   - https://github.com/WebReflection/url-search-params
+            function getUrlParameter(parameter) {
+                name = parameter.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+                var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+                var results = regex.exec(location.search);
+                return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+            }
+
             function search(value) {
                 var hiddenCounter = 0,
-                    value = normalizeSearchTerm(value);
+                    query = normalizeSearchTerm(value);
 
-                icons.forEach(function(e, i) {
+                icons.map(function(icon, iconIndex) {
-                    if (e.indexOf(value) > -1) {
+                    var letters = query.split(''),
-                        $icons[i].classList.remove('hidden');
+                        indexes = [],
-                    } else {
+                        index = 0;
-                        hiddenCounter++;
+
-                        $icons[i].classList.add('hidden');
+                    if (icon === query) {
+                        return {element: $icons[iconIndex], score: 1};
                     }
-                })
+
+                    for (var i = 0; i < letters.length; i++) {
+                        var letter = letters[i];
+                        index = icon.indexOf(letter, index);
+
+                        if (index === -1) {
+                            $icons[iconIndex].classList.add('hidden');
+                            return null;
+                        }
+
+                        indexes.push(index);
+                        index++;
+                    }
+
+                    return {
+                        element: $icons[iconIndex],
+                        score: indexes.reduce(function(a, b) {
+                            return a + b;
+                        }, 2)
+                    };
+                }).filter(function(item) {
+                    return item !== null;
+                }).sort(function(a, b) {
+                    return a.score - b.score;
+                }).forEach(function(item, index) {
+                    item.element.classList.remove('hidden');
+
+                    if (query !== '') {
+                        // Order according to relevance (i.e. score) if there is a query
+                        item.element.style.order = index;
+                    } else {
+                        // Use color-based order if there is no query
+                        item.element.style.removeProperty('order');
+                    }
+                });
 
                 $grid.classList.toggle('search__empty', hiddenCounter == icons.length);
             }
@@ -603,14 +650,25 @@
                 return value.toLowerCase().replace(/ /g, '');
             }
 
+            document.addEventListener('DOMContentLoaded', function() {
+                // Load search query if present
+                var query = getUrlParameter(queryParameter);
+                if (query !== null) {
+                    $search.classList.add('search--active');
+                    $searchInput.value = query;
+                    search(query);
+                }
+            });
             $search.addEventListener('input', debounce(function(e) {
                 e.preventDefault();
 
                 var value = e.target.value;
                 if (value) {
                     $search.classList.add('search--active');
+                    window.history.replaceState(null, '', '?' + queryParameter + '=' + value);
                 } else {
                     $search.classList.remove('search--active');
+                    window.history.replaceState(null, '', '/');
                 }
                 search(value);
             }, 50), false);
@@ -619,6 +677,7 @@
 
                 $searchInput.value = '';
                 $search.classList.remove('search--active');
+                window.history.replaceState(null, '', '/');
                 search('');
             }, false);
         })( document );