Merge pull request #5163 from williamboman/4.3.0-wip

Add icon search
This commit is contained in:
Geremia Taglialatela 2014-12-09 13:43:23 +01:00
commit a4f8218bb9
9 changed files with 1311 additions and 1 deletions

View File

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

View File

@ -58,6 +58,7 @@
<script src="http://platform.twitter.com/widgets.js"></script> <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="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="//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> <script src="{{ page.relative_path }}assets/js/site.js"></script>
</body> </body>

View File

@ -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)

View File

@ -3,4 +3,67 @@ $(function() {
$('#icon-carousel').carousel({ $('#icon-carousel').carousel({
interval: 5000 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;
}
}); });

6
src/assets/js/tabcomplete.min.js vendored Normal file
View File

@ -0,0 +1,6 @@
/*!
* tabcomplete
* http://github.com/erming/tabcomplete
* v1.4.1
*/
!function(a){function b(b,c,d){return a.grep(c,function(a){return d?!a.indexOf(b):!a.toLowerCase().indexOf(b.toLowerCase())})}function c(b){var c=this,d=c.prev(".hint");c.css({backgroundColor:"transparent",position:"relative"}),d.length||(c.options.wrapInput&&c.wrap(a("<div>").css({position:"relative",height:c.css("height"),display:c.css("display")})),d=c.clone().attr("tabindex",-1).removeAttr("id name placeholder").addClass("hint").insertBefore(c),d.css({position:"absolute"}));var e="";if("undefined"!=typeof b){var f=c.val();e=f+b.substr(f.split(/ |\n/).pop().length)}d.val(e)}function d(a){var b=this,c=b.val();a&&(b.val(c+a.substr(c.split(/ |\n/).pop().length)),b[0].selectionStart=c.length)}var e={backspace:8,tab:9,up:38,down:40};a.tabcomplete={},a.tabcomplete.defaultOptions={after:"",arrowKeys:!1,hint:"placeholder",match:b,caseSensitive:!1,minLength:1,wrapInput:!0},a.fn.tab=a.fn.tabcomplete=function(b,f){if(this.length>1)return this.each(function(){a(this).tabcomplete(b,f)});var g=this.prop("tagName");if("INPUT"==g||"TEXTAREA"==g){this.options=f=a.extend(a.tabcomplete.defaultOptions,f),this.unbind(".tabcomplete"),this.prev(".hint").remove();var h=this,i=!1,j=-1,k=[],l="",m=a.noop;switch(f.hint){case"placeholder":m=c;break;case"select":m=d}return this.on("input.tabcomplete",function(){var c=h.val(),d=c.split(/ |\n/).pop();j=-1,l="",k=[],h[0].selectionStart==c.length&&d.length&&(k=f.match(d,b,f.caseSensitive),f.after&&(k=a.map(k,function(a){return a+f.after}))),h.trigger("match",k.length),f.hint&&(("select"!=f.hint||!i)&&d.length>=f.minLength?m.call(h,k[0]):m.call(h,"")),i&&(i=!1)}),this.on("keydown.tabcomplete",function(a){var b=a.which;if(b==e.tab||f.arrowKeys&&(b==e.up||b==e.down)){if(a.preventDefault(),b!=e.up)j++;else{if(-1==j)return;0==j?j=k.length-1:j--}var c=k[j%k.length];if(!c)return;var d=h.val();if(l=l||d.split(/ |\n/).pop(),l.length<f.minLength)return;var g="select"==f.hint?d:d.substr(0,h[0].selectionStart-l.length)+c;h.val(g),"select"==f.hint&&(h[0].selectionStart=g.length),l=c,h.trigger("tabcomplete",l),f.hint&&m.call(h,"")}else a.which==e.backspace&&(i=!0,j=-1,l="")}),f.hint&&m.call(this,""),this}}}(jQuery);

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff