Make icons searchable

This commit is contained in:
Gregory Koberger 2013-11-19 13:24:23 -06:00 committed by William Boman
parent c82503026b
commit a9a050e909
5 changed files with 1174 additions and 1 deletions

View file

@ -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 %}>

View file

@ -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);
// }
// });
});

View file

@ -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;
}
}
}

View file

@ -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 %}

File diff suppressed because it is too large Load diff