diff --git a/Gemfile.lock b/Gemfile.lock index d84090d62..b898d9d52 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -59,5 +59,9 @@ PLATFORMS DEPENDENCIES jekyll (~> 1.0) less (~> 2.5.0) + safe_yaml (~> 1.0.4) sass (~> 3.0) therubyracer + +BUNDLED WITH + 1.10.6 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/_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..5dbcbb818 --- /dev/null +++ b/src/assets/js/search.js @@ -0,0 +1,62 @@ +$(function() { + var SearchView = Backbone.View.extend({ + + template: _.template($("#results-template").html()), + + events: { + "keyup #search-input": "search", + "click #search-clear": "clear" + }, + + initialize: function() { + this.algolia = algoliasearch("M19DXW5X0Q", "c79b2e61519372a99fa5890db070064c"); + this.algoliaHelper = algoliasearchHelper(this.algolia, "font_awesome"); + + 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"); + this.$searchResultsSection.html(this.template({results: content})); + }, + + clearResults: function() { + this.$searchInput.val("").focus(); + this.$searchResultsSection.addClass("hide"); + this.$searchResultsSection.html(""); + this.$searchInputClear.addClass("hide"); + this.$iconsSection.removeClass("hide"); + } + }); + + + 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..1bf04a071 100644 --- a/src/assets/js/site.js +++ b/src/assets/js/site.js @@ -1,144 +1,64 @@ -$(function() { - $("#newsletter").validate(); +$(function () { + $("#newsletter").validate(); - var ads = [ - { - quote: "Take your icon game to the next level. Check out Fonticons, from the maker of Font Awesome.", - class: "fonticons", - url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.4_update", - btn_text: "Gimme Some!" - }, - { - quote: "Make your icons load 10x faster! Check out Fonticons, from the maker of Font Awesome.", - class: "fonticons", - url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.4_update", - btn_text: "Gimme Some!" - }, - { - quote: "Looking for other great icon sets? Check out Fonticons, from the maker of Font Awesome.", - class: "fonticons", - url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.4_update", - btn_text: "Gimme Some!" - }, - { - quote: "Want to add your own icon? Check out Fonticons, from the maker of Font Awesome.", - class: "fonticons", - url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.4_update", - btn_text: "Gimme Some!" - }, + var ads = [ + { + quote: "Take your icon game to the next level. Check out Fonticons, from the maker of Font Awesome.", + class: "fonticons", + url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.4_update", + btn_text: "Gimme Some!" + }, + { + quote: "Make your icons load 10x faster! Check out Fonticons, from the maker of Font Awesome.", + class: "fonticons", + url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.4_update", + btn_text: "Gimme Some!" + }, + { + quote: "Looking for other great icon sets? Check out Fonticons, from the maker of Font Awesome.", + class: "fonticons", + url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.4_update", + btn_text: "Gimme Some!" + }, + { + quote: "Want to add your own icon? Check out Fonticons, from the maker of Font Awesome.", + class: "fonticons", + url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.4_update", + btn_text: "Gimme Some!" + }, - - { - quote: "Black Tie, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.", - class: "black-tie", - url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.4_update", - btn_text: "Check it Out!" - }, - { - quote: "Want clean, minimalist icons? Check out Black Tie, the new multi-weight icon font from the maker of Font Awesome.", - 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!" - } - ]; - - selectFonticonsAd(); - - // start the icon carousel - $('#icon-carousel').carousel({ - interval: 5000 - }); - - $('[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); - } + { + quote: "Black Tie, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.", + class: "black-tie", + url: "http://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.4_update", + btn_text: "Check it Out!" + }, + { + quote: "Want clean, minimalist icons? Check out Black Tie, the new multi-weight icon font from the maker of Font Awesome.", + 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!" } - 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(); - } + selectFonticonsAd(); + + // start the icon carousel + $('#icon-carousel').carousel({ + interval: 5000 }); - } - function inFilter(val, filter) { - for (var i = 0; i < filter.length; i++) { - if (filter[i].match(val)) return true; + $('[data-toggle="popover"]').popover(); + + function selectFonticonsAd() { + random_number = Math.floor(Math.random() * ads.length); + random_ad = ads[random_number]; + + $('#banner').addClass(random_ad.class); + $('#rotating-message').html(random_ad.quote); + $('#rotating-url').attr("href", random_ad.url); + $('#rotating-url').html(random_ad.btn_text); + $('#banner').collapse('show'); } - 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_ad = ads[random_number]; - - $('#banner').addClass(random_ad.class); - $('#rotating-message').html(random_ad.quote); - $('#rotating-url').attr("href", random_ad.url); - $('#rotating-url').html(random_ad.btn_text); - $('#banner').collapse('show'); - } }); 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,54 @@ relative_path: ../ {% endcapture %} {% include stripe-ad.html %} - {% include icons/filter.html %} +

+
+ +
+
+
+ by +
+
+
- {% 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 %} +
+