Merge pull request #5163 from williamboman/4.3.0-wip

Add icon search

src/_includes/icons/filter.html

@@ -0,0 +1,36 @@
+<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>
+<script>
+  try {
+    var filterSet = JSON.parse('{{ icons | flattenIconFilters | jsonify }}');
+  } catch (e) {
+    console.error('Invalid JSON data!');
+    var filterSet = [];
+  }
+</script>
+<{% 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>
+  <div id="no-search-results">
+    <div class="alert alert-danger" role="alert"><i class="fa fa-ban"></i> No icons with the tag <strong>'<span></span>'</strong> were found.</div>
+    <div class="alert alert-info" role="alert"><i class="fa fa-exclamation-circle"></i> Tags are added by the community. Do you think your search query should return an icon? Send a pull request on <a href="https://github.com/FortAwesome/Font-Awesome">GitHub</a>!</div>
+  </div>
+
+</{% if page.navbar_active == "icons" %}div{% else %}section{% endif %}>

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/tabcomplete.min.js"></script>
 <script src="{{ page.relative_path }}assets/js/site.js"></script>
 
 </body>

src/_plugins/flatten_icon_filters.rb

@@ -0,0 +1,38 @@
+##
+# Flattens the icons object to a one-dimensional array of possible search terms.
+
+require 'set'
+
+module Jekyll
+  module FlattenArray
+    def flattenIconFilters(icons)
+      flattened = Set.new
+      icons.each do |icon|
+        toAdd = []
+
+        toAdd.push(icon["class"].downcase) # Add class as a filter value
+
+        # Add any existing aliases as a filter value
+        if not icon["aliases"].nil?
+          icon["aliases"].each do |iconAlias|
+            toAdd.push(iconAlias.downcase)
+          end
+        end
+
+        # Add any existing filters as a filter value
+        if not icon["filter"].nil?
+          icon["filter"].each do |iconFilter|
+            toAdd.push(iconFilter.downcase)
+          end
+        end
+        flattened.merge(toAdd)
+
+        print toAdd if toAdd.include? true
+        print toAdd if toAdd.include? false
+      end
+      return flattened.to_a # .to_a because we can't jsonify a <Set>
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::FlattenArray)

src/assets/js/site.js

@@ -3,4 +3,67 @@ $(function() {
   $('#icon-carousel').carousel({
     interval: 5000
   });
+
+  var $filter_by = $('#filter-by');
+
+  // 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, #file-type, #spinner, #payment, #chart');
+    var $clear = $('#filter-clear');
+    var $no_results = $('#no-search-results');
+
+    var $icons = $('.filter-icon', $filter);
+
+    // Add tab completion
+    $filter_by.tabcomplete(filterSet, {
+      arrowKeys: true
+    });
+
+    $clear.click(function(e) {
+      e.preventDefault();
+      $filter_by.val('').trigger('keyup').focus();
+    });
+
+
+    $filter_by.keyup(function() {
+      var $this = $(this);
+      var val = $this.val().toLowerCase();
+      $filter.toggle(!!val);
+      $other.toggle(!val);
+      $clear.toggleClass('gone', !val);
+      $filter_val.text(val);
+
+      if(!val) return;
+
+      var resultsCount = 0;
+      $icons.each(function() {
+        var filter = $(this).attr('data-filter').split('|');
+        var show = inFilter(val, filter);
+        if (!show) {
+          if (val.slice(-1) === 's') {
+            // Try to be smart. Make plural terms singular.
+            show = inFilter(val.slice(0, -1), filter);
+          }
+        }
+        if (show) resultsCount++;
+        $(this).toggle(!!show);
+      });
+
+      if( resultsCount == 0 && val.length != 0 ) {
+        $no_results.find('span').text(val);
+        $no_results.show();
+      } else {
+        $no_results.hide();
+      }
+    }).trigger('keyup');
+  }
+
+  function inFilter(val, filter) {
+    for (var i = 0; i < filter.length; i++) {
+      if (filter[i].match(val)) return true;
+    }
+    return false;
+  }
 });

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

@@ -30,3 +30,28 @@
     }
   }
 }
+
+.filter-parent {
+  display: inline-block;
+  position: relative;
+  border: 1px solid #ccc;
+  padding: 0 10px 0 14px;
+  border-radius: 3px;
+  #filter-by, .hint {
+    padding: 7px 0 7px 12px;
+    border: 0 none;
+    outline: 0 none;
+    width: 300px;
+    z-index: 2;
+  }
+  .hint {
+    color: #aaa;
+  }
+  a {
+    text-decoration: none;
+    &.gone {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}

src/assets/less/site/lazy.less

@@ -84,3 +84,7 @@
 .text-strike { text-decoration: line-through; }
 .text-upper { text-transform: uppercase; }
 .text-lower { text-transform: lowercase; }
+
+#no-search-results {
+  display: none;
+}

src/icons.html

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