Make icons searchable

src/_includes/icons/filter.html

@@ -0,0 +1,24 @@
+<div class="filter-parent">
+  <label for="filter-by" class="fa fa-search"></label>
+  <input placeholder="Filter icons..." id="filter-by">
+  <a href="#" id="filter-clear" class="fa fa-times"></a>
+</div>
+<{% if page.navbar_active == "icons" %}div{% else %}section{% endif %} id="filter">
+  <h2 class="page-header">Filter for <span class="text-muted" id="filter-val"></span></h2>
+  {% if page.navbar_active != "icons" %}
+    <div class="margin-botom-large">
+      You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}.
+      Want to request new icons? <a href="{{ page.relative_path }}community/#requesting-new-icons">Here's how</a>.
+    </div>
+  {% endif %}
+
+  <div class="row fontawesome-icon-list">
+    {% for icon in icons %}
+    <div class="fa-hover col-md-3 col-sm-4 filter-icon"
+      data-filter=" {{ icon.class }}{% for alias in icon.aliases %} {{ alias }}{% endfor %}{% for filter in icon.filter %} {{ filter }}{% endfor %}">
+      <a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> fa-{{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a>
+    </div>
+    {% endfor %}
+  </div>
+
+</{% if page.navbar_active == "icons" %}div{% else %}section{% endif %}>

src/assets/js/site.js

@@ -3,4 +3,68 @@ $(function() {
   $('#icon-carousel').carousel({
     interval: 5000
   });
+
+  // Filter icons
+  if($('#filter-by').length) {
+    var $filter_val = $('#filter-val');
+    var $filter = $('#filter');
+    var $other = $('#new, #web-application, #form-control, #medical, #currency, #text-editor, #directional, #video-player, #brand');
+    var $clear = $('#filter-clear');
+
+    var $icons = $('.filter-icon', $filter);
+
+    $clear.click(function(e) {
+      e.preventDefault();
+      $('#filter-by').val('').trigger('keyup').focus();
+    });
+
+
+    $('#filter-by').keyup(function() {
+      var $this = $(this);
+      var val = $this.val();
+      $filter.toggle(!!val);
+      $other.toggle(!val);
+      $clear.toggleClass('gone', !val);
+      $filter_val.text(val);
+
+      if(!val) return;
+
+      $icons.each(function() {
+        var show = $(this).attr('data-filter').match(' '+val);
+        $(this).toggle(!!show);
+      });
+    }).trigger('keyup');
+  }
+
+
+
+
+  // make code pretty
+//  $('pre').addClass('prettyprint');
+//  window.prettyPrint && prettyPrint();
+
+  // Disable links with href="#" inside <section>, so users can click on them
+  // to preview :active state without being scrolled up to the top of the page.
+//  $('section a[href="#"]').click(function(e) {
+//    e.preventDefault();
+//    e.stopPropagation();
+//  });
+
+//  // inject twitter & github counts
+//  $.ajax({
+//    url: 'http://api.twitter.com/1/users/show.json',
+//    data: {screen_name: 'fortaweso_me'},
+//    dataType: 'jsonp',
+//    success: function(data) {
+//      $('#followers').html(data.followers_count);
+//    }
+//  });
+//  $.ajax({
+//    url: 'https://api.github.com/repos/fortawesome/Font-Awesome',
+//    dataType: 'jsonp',
+//    success: function(data) {
+//      $('#watchers').html(data.data.watchers);
+//      $('#forks').html(data.data.forks);
+//    }
+//  });
 });

src/assets/less/site/fontawesome-icon-list.less

@@ -30,3 +30,23 @@
     }
   }
 }
+
+.filter-parent {
+  display: inline-block;
+  border: 1px solid #ccc;
+  padding: 0 10px 0 14px;
+  border-radius: 3px;
+  #filter-by {
+    padding: 7px 0 7px 12px;
+    border: 0 none;
+    outline: 0 none;
+    width: 200px;
+  }
+  a {
+    text-decoration: none;
+    &.gone {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}

src/icons.html

@@ -21,6 +21,8 @@ relative_path: ../
   {% endcapture %}
   {% include stripe-ad.html %}
 
+  {% include icons/filter.html %}
+
   {% include icons/new.html %}
   {% include icons/web-application.html %}
   {% include icons/file-type.html %}