Merge pull request #459 from nietonfir/feature-search

Implement JS search

README.md

@@ -6,7 +6,7 @@ Free SVG icons for popular brands, maintained by [Dan Leech](https://twitter.com
 
 - [x] New page layout
 - [x] Jekyll code for sorting icons by hue
-- [ ] JS search function
+- [x] JS search function
 - [ ] Analytics tracking for icon clicks
 - [x] CSS grid fallback
 - [x] Social sharing tags

index.html

@@ -245,18 +245,74 @@
             }
         }
 
+        .search {
+            margin: 1rem 1.5rem;
+            text-align: center;
+        }
+        @media (min-width: 45rem) {
+            .search {
+                margin: 1rem 3rem;
+                text-align: left;
+            }
+        }
+
+        .search .search__wrapper {
+            display: inline-block;
+            position: relative;
+        }
+        .search .search__close {
+            display: none;
+            font-size: 1rem;
+            padding: 6px 12px;
+            position: absolute;
+            right: 0;
+            top: 1px;
+        }
+        .search .search__close span {
+            cursor: pointer;
+        }
+
+        .search input {
+            color: #333;
+            font-size: 1rem;
+            padding: 6px 12px;
+        }
+        @media (min-width: 45rem) {
+            .search input {
+                width: 250px;
+            }
+        }
+
+        .search--active .search__close {
+            display: block;
+        }
+        .search--active input {
+            padding-right: 32px;
+        }
+
         .grid {
             display: flex;
             flex-wrap: wrap;
             list-style: none;
             margin: 1.5rem;
+            margin-top: 0;
             padding: 0;
         }
         @media (min-width: 45rem) {
             .grid {
                 margin: 3rem;
+                margin-top: 0;
             }
         }
+
+        .grid.search__empty:after {
+            content: 'No matching icons found.';
+            font-size: 1.25em;
+            line-height: 1.5em;
+            text-align: center;
+            width: 100%;
+        }
+
         @supports (display: grid) {
             .grid {
                 display: grid;
@@ -266,6 +322,16 @@
                 grid-row-gap: 0.375rem;
                 grid-auto-flow: dense;
             }
+            .grid.search__empty:after {
+                grid-column: 1/span 2;
+                grid-row-end: span 2;
+            }
+
+            @media (min-width: 30.75rem) {
+                .grid.search__empty:after {
+                    grid-column: 1/-3;
+                }
+            }
         }
 
         .grid-item {
@@ -364,6 +430,10 @@
             opacity: 1;
             padding: 1.5rem 0 1.5rem 1.5rem;
         }
+
+        .hidden {
+            display: none;
+        }
     </style>
 </head>
 
@@ -377,6 +447,12 @@
     </header>
     <main role="main">
         <p class="hero">Free <abbr title="Scalable Vector Graphic">SVG</abbr> icons for popular&nbsp;brands</p>
+        <div class="search">
+            <div class="search__wrapper">
+                <div class="search__close"><span>&times;</span></div>
+                <input type="text" placeholder="Search by brand …" />
+            </div>
+        </div>
         <ul class="grid">
             <li class="grid-item grid-item--ad">
                 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&amp;serve=CVYD42T&amp;placement=simpleiconsorg" id="_carbonads_js"></script>
@@ -410,5 +486,95 @@
             Use <a href="https://github.com/danleech/simple-icons">GitHub</a> for requests, corrections and contributions.</p>
         <a class="share-button" href="https://twitter.com/share?url=https%3A%2F%2Fsimpleicons.org&via=bathtype&text=Simple%20Icons%3A%20free%20SVG%20icons%20for%20popular%20brands.">Share this on Twitter!</a>
     </footer>
+    {% assign allIconNames = "" %}
+    {% for icon in iconsArray %}
+        {% assign iconArray = icon | split: "," %}
+        {% capture allIconNames %}{{ allIconNames }}"{{ iconArray[3] }}",{% endcapture %}
+    {% endfor %}
+    {% for icon in greyscaleIconsArray %}
+        {% assign iconArray = icon | split: "," %}
+        {% capture allIconNames %}{{ allIconNames }}"{{ iconArray[1] }}"{% unless forloop.last %},{% endunless %}{% endcapture %}
+    {% endfor %}
+    <script type="text/javascript">
+        (function(document) {
+            var icons        = [{{ allIconNames }}],
+                $grid        = document.querySelector('.grid'),
+                $icons       = $grid.querySelectorAll('.grid-item:not(.grid-item--ad)'),
+                $search      = document.querySelector('.search'),
+                $searchClose = $search.querySelector('.search__close'),
+                $searchInput = $search.querySelector('input');
+
+            // include a modified debounce underscorejs helper function.
+            // see
+            //   - http://underscorejs.org/docs/underscore.html#section-83
+            //   - http://underscorejs.org/#debounce
+            function debounce(func, wait, immediate) {
+                var timeout, args, context, timestamp, result;
+
+                var later = function() {
+                    var last = +new Date - timestamp;
+
+                    if (last < wait && last >= 0) {
+                        timeout = setTimeout(later, wait - last);
+                    } else {
+                        timeout = null;
+                        if (!immediate) {
+                            result = func.apply(context, args);
+                            if (!timeout) context = args = null;
+                        }
+                    }
+                };
+
+                return function() {
+                    context = this;
+                    args = arguments;
+                    timestamp = +new Date;
+                    var callNow = immediate && !timeout;
+                    if (!timeout) timeout = setTimeout(later, wait);
+                    if (callNow) {
+                        result = func.apply(context, args);
+                        context = args = null;
+                    }
+
+                    return result;
+                };
+            }
+
+            function search(value) {
+                var hiddenCounter = 0,
+                    value = value.toLowerCase().trim();
+
+                icons.forEach(function(e, i) {
+                    if (e.indexOf(value) > -1) {
+                        $icons[i].classList.remove('hidden');
+                    } else {
+                        hiddenCounter++;
+                        $icons[i].classList.add('hidden');
+                    }
+                })
+
+                $grid.classList.toggle('search__empty', hiddenCounter == icons.length);
+            }
+
+            $search.addEventListener('input', debounce(function(e) {
+                e.preventDefault();
+
+                var value = e.target.value;
+                if (value) {
+                    $search.classList.add('search--active');
+                } else {
+                    $search.classList.remove('search--active');
+                }
+                search(value);
+            }, 50), false);
+            $searchClose.addEventListener('click', function(e) {
+                e.stopPropagation();
+
+                $searchInput.value = '';
+                $search.classList.remove('search--active');
+                search('');
+            }, false);
+        })( document );
+    </script>
 </body>
 </html>