From 1ce92f014faed8e41ce90d250f6fa0e42cf8f343 Mon Sep 17 00:00:00 2001 From: William Boman Date: Sat, 1 Nov 2014 23:45:08 +0100 Subject: [PATCH] Added tab completion to search input. --- src/_includes/icons/filter.html | 8 ++++ src/_layouts/base.html | 1 + src/_plugins/flatten_icon_filters.rb | 38 ++++++++++++++++++ src/assets/js/site.js | 39 +++---------------- src/assets/js/tabcomplete.min.js | 6 +++ .../less/site/fontawesome-icon-list.less | 9 ++++- 6 files changed, 66 insertions(+), 35 deletions(-) create mode 100644 src/_plugins/flatten_icon_filters.rb create mode 100644 src/assets/js/tabcomplete.min.js diff --git a/src/_includes/icons/filter.html b/src/_includes/icons/filter.html index 54253f953..a41157963 100644 --- a/src/_includes/icons/filter.html +++ b/src/_includes/icons/filter.html @@ -3,6 +3,14 @@ + <{% if page.navbar_active == "icons" %}div{% else %}section{% endif %} id="filter">

Filter for

{% if page.navbar_active != "icons" %} diff --git a/src/_layouts/base.html b/src/_layouts/base.html index 0552122c2..0cc5dc5ee 100644 --- a/src/_layouts/base.html +++ b/src/_layouts/base.html @@ -58,6 +58,7 @@ + diff --git a/src/_plugins/flatten_icon_filters.rb b/src/_plugins/flatten_icon_filters.rb new file mode 100644 index 000000000..1e3daff80 --- /dev/null +++ b/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 + end + end +end + +Liquid::Template.register_filter(Jekyll::FlattenArray) diff --git a/src/assets/js/site.js b/src/assets/js/site.js index 65555ccb4..38b6eb07b 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -16,6 +16,11 @@ $(function() { 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(); @@ -24,7 +29,7 @@ $(function() { $filter_by.keyup(function() { var $this = $(this); - var val = $this.val(); + var val = $this.val().toLowerCase(); $filter.toggle(!!val); $other.toggle(!val); $clear.toggleClass('gone', !val); @@ -61,36 +66,4 @@ $(function() { } return false; } - - - - - // make code pretty -// $('pre').addClass('prettyprint'); -// window.prettyPrint && prettyPrint(); - - // Disable links with href="#" inside
, 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); -// } -// }); }); diff --git a/src/assets/js/tabcomplete.min.js b/src/assets/js/tabcomplete.min.js new file mode 100644 index 000000000..f4c1fdf87 --- /dev/null +++ b/src/assets/js/tabcomplete.min.js @@ -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("
").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