diff --git a/Gemfile.lock b/Gemfile.lock index d84090d62..9394f2dd5 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -59,5 +59,6 @@ PLATFORMS DEPENDENCIES jekyll (~> 1.0) less (~> 2.5.0) + safe_yaml (~> 1.0.4) sass (~> 3.0) therubyracer diff --git a/src/_includes/icons/filter.html b/src/_includes/icons/filter.html deleted file mode 100644 index 21a054abf..000000000 --- a/src/_includes/icons/filter.html +++ /dev/null @@ -1,30 +0,0 @@ - - -
-

Search for ''

- -
- {% for icon in icons %} -
- {{ icon.class }}{% if icon.alias_of %} (alias){% endif %} -
- {% endfor %} -
-
- -
- - -
diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index 48b5ade07..830f06762 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -19,7 +19,7 @@ Toggle navigation - +
diff --git a/src/_layouts/base.html b/src/_layouts/base.html index bc0771832..a679afbc1 100644 --- a/src/_layouts/base.html +++ b/src/_layouts/base.html @@ -59,7 +59,11 @@ - + + + + + diff --git a/src/assets/img/algolia.png b/src/assets/img/algolia.png new file mode 100644 index 000000000..f5a89619b Binary files /dev/null and b/src/assets/img/algolia.png differ diff --git a/src/assets/js/search.js b/src/assets/js/search.js new file mode 100644 index 000000000..28767996b --- /dev/null +++ b/src/assets/js/search.js @@ -0,0 +1,92 @@ +$(function() { + var SearchView = Backbone.View.extend({ + events: { + "keyup #search-input": "search", + "click #search-clear": "clear" + }, + + initialize: function() { + this.algolia = algoliasearch("M19DXW5X0Q", "c79b2e61519372a99fa5890db070064c"); + this.algoliaHelper = algoliasearchHelper(this.algolia, "font_awesome"); + this.template = _.template($("#results-template").html()); + + this.$searchInput = this.$("#search-input"); + this.$searchResultsSection = this.$("#search-results"); + this.$searchInputClear = this.$("#search-clear"); + this.$iconsSection = this.$("#icons"); + + this.algoliaHelper.on("result", _.bind(this.showResults, this)); + }, + + search: function(event) { + var query = this.$searchInput.val(); + + if (query !== "") { + this. algoliaHelper.setQuery(query).search(); + } else { + this.clearResults(); + } + }, + + clear: function(event) { + event.preventDefault(); + + this.clearResults(); + }, + + showResults: function(content, state) { + this.$searchResultsSection.html(""); + this.$searchResultsSection.removeClass("hide"); + this.$searchInputClear.removeClass("hide"); + this.$iconsSection.addClass("hide"); + + var results = []; + + _.each(content.hits, function(result) { + results.push(new SearchResultView({ result: result }).render()) + }); + + this.$searchResultsSection.html(this.template({ content: content, results: results.join("") })); + }, + + clearResults: function() { + this.$searchInput.val("").focus(); + this.$searchResultsSection.addClass("hide"); + this.$searchResultsSection.html(""); + this.$searchInputClear.addClass("hide"); + this.$iconsSection.removeClass("hide"); + } + }); + + var SearchResultView = Backbone.View.extend({ + initialize: function(options) { + this.template = _.template($("#result-template").html()); + this.result = options.result + }, + + render: function() { + var matches = []; + + this.pullMatches(matches, this.result._highlightResult.aliases); + this.pullMatches(matches, this.result._highlightResult.synonyms); + + return this.template({ result: this.result, matches: matches }); + }, + + pullMatches: function(matches, list) { + if (list !== undefined) { + _.each(list, function(highlight) { + if (highlight.matchLevel !== "none") { + matches.push(highlight.value) + } + }) + } + } + }); + + var $searchViewElement = $("[data-view=search]"); + + if ($searchViewElement.length > 0) { + new SearchView({ el: $searchViewElement }); + } +}); diff --git a/src/assets/js/site.js b/src/assets/js/site.js index 5698943ce..75a7c7158 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -1,4 +1,4 @@ -$(function() { +$(function () { $("#newsletter").validate(); var ads = [ @@ -28,7 +28,6 @@ $(function() { }, - { quote: "Black Tie, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.", class: "black-tie", @@ -40,6 +39,18 @@ $(function() { class: "black-tie", url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.4_update", btn_text: "Check it Out!" + }, + { + quote: "Want a different icon look? Check out Black Tie, our new multi-weight icon set.", + class: "black-tie", + url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_different_look&utm_campaign=promo_4.4_update", + btn_text: "Check it Out!" + }, + { + quote: "Check out Black Tie, our new multi-weight icon set!", + class: "black-tie", + url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_7_our_new_multi_weight&utm_campaign=promo_4.4_update", + btn_text: "Check it Out!" } ]; @@ -52,87 +63,8 @@ $(function() { $('[data-toggle="popover"]').popover(); - var $filter_by = $('#filter-by'); - - // Filter icons - if($filter_by.length) { - var $filter_val = $('#filter-val'); - var $filter = $('#filter'); - var $other = $('#new, #web-application, #hand, #transportation, #gender, #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.on('click', function(e) { - e.preventDefault(); - $filter_by - .val('') - .trigger('input') - .trigger('keyup') - .focus(); - - $clear.addClass('hide'); // Hide clear button - }); - - - $filter_by.on('keyup', function() { - var $this = $(this); - var val = $this.val().toLowerCase(); - $filter.toggle(!!val); - $other.toggle(!val); - $clear.toggleClass('hide', !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(); - } - }); - } - - function inFilter(val, filter) { - for (var i = 0; i < filter.length; i++) { - if (filter[i].match(val)) return true; - } - return false; - } - - $filter_by - .val('') - .trigger('input') - .trigger('keyup') - .focus(); - - if ($clear) { - $clear.addClass('hide'); // Hide clear button - } - function selectFonticonsAd() { - random_number = Math.floor( Math.random() * ads.length ); + random_number = Math.floor(Math.random() * ads.length); random_ad = ads[random_number]; $('#banner').addClass(random_ad.class); diff --git a/src/assets/js/tabcomplete.min.js b/src/assets/js/tabcomplete.min.js deleted file mode 100644 index f4c1fdf87..000000000 --- a/src/assets/js/tabcomplete.min.js +++ /dev/null @@ -1,6 +0,0 @@ -/*! - * 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 +
{% capture stripe_ad_content %}

You asked, Font Awesome delivers with {{ icons | version:site.fontawesome.minor_version | size }} shiny new icons in version {{ site.fontawesome.minor_version }}. @@ -21,22 +21,77 @@ relative_path: ../ {% endcapture %} {% include stripe-ad.html %} - {% include icons/filter.html %} +

+
+ +
+ +
- {% include icons/new.html %} - {% include icons/web-application.html %} - {% include icons/hand.html %} - {% include icons/transportation.html %} - {% include icons/gender.html %} - {% include icons/file-type.html %} - {% include icons/spinner.html %} - {% include icons/form-control.html %} - {% include icons/payment.html %} - {% include icons/chart.html %} - {% include icons/currency.html %} - {% include icons/text-editor.html %} - {% include icons/directional.html %} - {% include icons/video-player.html %} - {% include icons/brand.html %} - {% include icons/medical.html %} +
+
+ {% include icons/new.html %} + {% include icons/web-application.html %} + {% include icons/hand.html %} + {% include icons/transportation.html %} + {% include icons/gender.html %} + {% include icons/file-type.html %} + {% include icons/spinner.html %} + {% include icons/form-control.html %} + {% include icons/payment.html %} + {% include icons/chart.html %} + {% include icons/currency.html %} + {% include icons/text-editor.html %} + {% include icons/directional.html %} + {% include icons/video-player.html %} + {% include icons/brand.html %} + {% include icons/medical.html %} +
+ +