Add icons filter

src/_includes/icons/filter.html

@@ -0,0 +1,4 @@
+<div class="input-group col-md-6 col-md-offset-3">
+  <span class="input-group-addon"><i class="fa fa-search"></i></span>
+  <input type="text" name="icons-filter" id="icons-filter" class="form-control" placeholder="Start typing to filter icons" autocomplete="off">
+</div>

src/_layouts/base.html

@@ -58,6 +58,7 @@
 <script src="http://platform.twitter.com/widgets.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/{{ site.jquery.version }}/jquery.min.js"></script>
 <script src="//netdna.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/js/bootstrap.min.js"></script>
+<script src="{{ page.relative_path }}assets/js/jquery.hideseek.min.js"></script>
 <script src="{{ page.relative_path }}assets/js/site.js"></script>
 
 </body>

src/assets/js/jquery.hideseek.min.js

@@ -0,0 +1,53 @@
+/**
+ * HideSeek jQuery plugin
+ *
+ * @copyright Copyright 2013, Dimitris Krestos
+ * @license   Apache License, Version 2.0 (http://www.opensource.org/licenses/apache2.0.php)
+ * @link      http://vdw.staytuned.gr
+ * @version   v0.5.5
+ *
+ * Dependencies are include in minified versions at the bottom:
+ * 1. Highlight v4 by Johann Burkard
+ *
+ */
+
+  /* Sample html structure
+
+  <input name="search" placeholder="Start typing here" type="text" data-list=".list">
+  <ul class="list">
+    <li>item 1</li>
+    <li>...</li>
+    <li><a href="#">item 2</a></li>
+  </ul>
+
+  or
+
+  <input name="search" placeholder="Start typing here" type="text" data-list=".list">
+  <div class="list">
+    <span>item 1</span>
+    <span>...</span>
+    <span>item 2</span>
+  </div>
+
+  or any similar structure...
+
+  */
+
+(function(b,a,c){b.fn.hideseek=function(d){var e={list:".hideseek-data",nodata:"",attribute:"text",highlight:false,ignore:"",navigation:false};var d=b.extend(e,d);return this.each(function(){var g=b(this);d.list=g.data("list")||d.list;d.nodata=g.data("nodata")||d.nodata;d.attribute=g.data("attribute")||d.attribute;d.highlight=g.data("highlight")||d.highlight;d.ignore=g.data("ignore")||d.ignore;var f=b(d.list);if(d.navigation){g.attr("autocomplete","off")}g.keyup(function(l){if(l.keyCode!=38&&l.keyCode!=40&&l.keyCode!=13){var j=g.val().toLowerCase();f.children(d.ignore.trim()?":not("+d.ignore+")":"").removeClass("selected").each(function(){var m=(d.attribute!="text")?b(this).attr(d.attribute).toLowerCase():b(this).text().toLowerCase();if(m.indexOf(j)==-1){b(this).hide();g.trigger("_after_each")}else{d.highlight?b(this).removeHighlight().highlight(j).show():b(this).show();g.trigger("_after_each")}});if(d.nodata){f.find(".no-results").remove();if(!f.children(':not([style*="display: none"])').length){f.children().first().clone().removeHighlight().addClass("no-results").show().prependTo(d.list).text(d.nodata)}}g.trigger("_after")}function k(m){return m.children(".selected:visible")}function i(m){return k(m).prevAll(":visible:first")}function h(m){return k(m).nextAll(":visible:first")}if(d.navigation){if(l.keyCode==38){if(k(f).length){i(f).addClass("selected");k(f).last().removeClass("selected")}else{f.children(":visible").last().addClass("selected")}}else{if(l.keyCode==40){if(k(f).length){h(f).addClass("selected");k(f).first().removeClass("selected")}else{f.children(":visible").first().addClass("selected")}}else{if(l.keyCode==13){if(k(f).find("a").length){document.location=k(f).find("a").attr("href")}else{g.val(k(f).text())}}}}}})})};b(document).ready(function(){b('[data-toggle="hideseek"]').hideseek()})})(jQuery);
+
+/*
+
+highlight v4
+
+Highlights arbitrary terms.
+
+<http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html>
+
+MIT license.
+
+Johann Burkard
+<http://johannburkard.de>
+<mailto:jb@eaio.com>
+
+*/
+jQuery.fn.highlight=function(t){function e(t,i){var n=0;if(3==t.nodeType){var a=t.data.toUpperCase().indexOf(i);if(a>=0){var s=document.createElement("mark");s.className="highlight";var r=t.splitText(a);r.splitText(i.length);var o=r.cloneNode(!0);s.appendChild(o),r.parentNode.replaceChild(s,r),n=1}}else if(1==t.nodeType&&t.childNodes&&!/(script|style)/i.test(t.tagName))for(var h=0;h<t.childNodes.length;++h)h+=e(t.childNodes[h],i);return n}return this.length&&t&&t.length?this.each(function(){e(this,t.toUpperCase())}):this},jQuery.fn.removeHighlight=function(){return this.find("mark.highlight").each(function(){with(this.parentNode.firstChild.nodeName,this.parentNode)replaceChild(this.firstChild,this),normalize()}).end()};

src/assets/js/site.js

@@ -3,4 +3,11 @@ $(function() {
   $('#icon-carousel').carousel({
     interval: 5000
   });
+
+  // setup icons filter
+  $('#icons-filter').hideseek({
+    highlight: true,
+    list: ".fontawesome-icon-list",
+    nodata: 'No icons found'
+  });
 });

src/cheatsheet.html

@@ -16,10 +16,11 @@ relative_path: ../
   </p>
   {% endcapture %}
   {% include stripe-ad.html %}
+  {% include icons/filter.html %}
 
   <h2 class="page-header">Every Font Awesome {{ site.fontawesome.version }} Icon, CSS Class, &amp; Unicode</h2>
 
-  <div class="row">
+  <div class="row fontawesome-icon-list">
     {% assign sorted_icons = icons | expand_aliases | sort_by:'class' %}
 
     {% for icon in sorted_icons %}

src/icons.html

@@ -21,6 +21,7 @@ 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 %}