site.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. $(function() {
  2. var ads = [
  3. {
  4. quote: "Take your icon game to the next level. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
  5. class: "fonticons",
  6. url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_4.3_update",
  7. btn_text: "Gimme Some!"
  8. },
  9. {
  10. quote: "Subset your icons, add your own, and serve up from a CDN. Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
  11. class: "fonticons",
  12. url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_all_value_add&utm_campaign=promo_4.3_update",
  13. btn_text: "Gimme Some!"
  14. },
  15. {
  16. quote: "Make your icons load 10x faster! Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
  17. class: "fonticons",
  18. url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_faster_loading&utm_campaign=promo_4.3_update",
  19. btn_text: "Gimme Some!"
  20. },
  21. {
  22. quote: "Looking for other great icon sets? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
  23. class: "fonticons",
  24. url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_more_icons&utm_campaign=promo_4.3_update",
  25. btn_text: "Gimme Some!"
  26. },
  27. {
  28. quote: "Need a custom icon in Font Awesome? Check out <strong>Fonticons</strong>, from the maker of Font Awesome.",
  29. class: "fonticons",
  30. url: "https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_custom_icons&utm_campaign=promo_4.3_update",
  31. btn_text: "Gimme Some!"
  32. },
  33. {
  34. quote: "So hot right now: <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
  35. class: "black-tie",
  36. url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_1_so_hot&utm_campaign=promo_4.3_update",
  37. btn_text: "Buy it Now!"
  38. },
  39. {
  40. quote: "<strong>Black Tie</strong>, from the creator of Font Awesome. On sale at the Kickstarter price for a limited time.",
  41. class: "black-tie",
  42. url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_2_kickstarter&utm_campaign=promo_4.3_update",
  43. btn_text: "Buy it Now!"
  44. },
  45. {
  46. quote: "Get more Awesome: <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
  47. class: "black-tie",
  48. url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_3_more_awesome&utm_campaign=promo_4.3_update",
  49. btn_text: "Buy it Now!"
  50. },
  51. {
  52. quote: "The new hotness from the maker of Font Awesome: <strong>Black Tie</strong>, the multi-weight icon font.",
  53. class: "black-tie",
  54. url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_4_new_hotness&utm_campaign=promo_4.3_update",
  55. btn_text: "Buy it Now!"
  56. },
  57. {
  58. quote: "Want clean, minimalist icons? Check out <strong>Black Tie</strong>, the new multi-weight icon font from the maker of Font Awesome.",
  59. class: "black-tie",
  60. url: "https://blacktie.io/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_5_clean_minimalist&utm_campaign=promo_4.3_update",
  61. btn_text: "Buy it Now!"
  62. }
  63. ];
  64. selectFonticonsAd();
  65. // start the icon carousel
  66. $('#icon-carousel').carousel({
  67. interval: 5000
  68. });
  69. var $filter_by = $('#filter-by');
  70. // Filter icons
  71. if($filter_by.length) {
  72. var $filter_val = $('#filter-val');
  73. var $filter = $('#filter');
  74. var $other = $('#new, #web-application, #transportation, #gender, #form-control, #medical, #currency, #text-editor, #directional, #video-player, #brand, #file-type, #spinner, #payment, #chart');
  75. var $clear = $('#filter-clear');
  76. var $no_results = $('#no-search-results');
  77. var $icons = $('.filter-icon', $filter);
  78. // Add tab completion
  79. $filter_by.tabcomplete(filterSet, {
  80. arrowKeys: true
  81. });
  82. $clear.on('click', function(e) {
  83. e.preventDefault();
  84. $filter_by
  85. .val('')
  86. .trigger('input')
  87. .trigger('keyup')
  88. .focus();
  89. $clear.addClass('hide'); // Hide clear button
  90. });
  91. $filter_by.on('keyup', function() {
  92. var $this = $(this);
  93. var val = $this.val().toLowerCase();
  94. $filter.toggle(!!val);
  95. $other.toggle(!val);
  96. $clear.toggleClass('hide', !val);
  97. $filter_val.text(val);
  98. if(!val) return;
  99. var resultsCount = 0;
  100. $icons.each(function() {
  101. var filter = $(this).attr('data-filter').split('|');
  102. var show = inFilter(val, filter);
  103. if (!show) {
  104. if (val.slice(-1) === 's') {
  105. // Try to be smart. Make plural terms singular.
  106. show = inFilter(val.slice(0, -1), filter);
  107. }
  108. }
  109. if (show) resultsCount++;
  110. $(this).toggle(!!show);
  111. });
  112. if( resultsCount == 0 && val.length != 0 ) {
  113. $no_results.find('span').text(val);
  114. $no_results.show();
  115. } else {
  116. $no_results.hide();
  117. }
  118. });
  119. }
  120. function inFilter(val, filter) {
  121. for (var i = 0; i < filter.length; i++) {
  122. if (filter[i].match(val)) return true;
  123. }
  124. return false;
  125. }
  126. $filter_by
  127. .val('')
  128. .trigger('input')
  129. .trigger('keyup');
  130. if ($clear) {
  131. $clear.addClass('hide'); // Hide clear button
  132. }
  133. function selectFonticonsAd() {
  134. random_number = Math.floor( Math.random() * ads.length );
  135. random_ad = ads[random_number];
  136. $('#banner').addClass(random_ad.class);
  137. $('#rotating-message').html(random_ad.quote);
  138. $('#rotating-url').attr("href", random_ad.url);
  139. $('#rotating-url').html(random_ad.btn_text);
  140. $('#banner').collapse('show');
  141. }
  142. });