faq.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. /**
  2. * @name FAQ Plugin
  3. * @author Rod Howard
  4. * @url http://goideate.com
  5. * @date April 28, 2012
  6. * @license GNU/GPL Version 3
  7. *
  8. *
  9. * Example:
  10. *
  11. * $(function() {
  12. * $("element, #id, .class").technify({
  13. * // #{EDIT-HERE}# Your run-time options go here ...
  14. * });
  15. * });
  16. */
  17. /**
  18. * Create an anonymous function to avoid library conflicts
  19. */
  20. (function($) {
  21. /**
  22. * Add our plugin to the jQuery.fn object
  23. */
  24. $.fn.goFaq = function(options) {
  25. /**
  26. * Define some default settings
  27. */
  28. var defaults = {
  29. enableSearch: true,
  30. enableToc: true,
  31. enableStyling: true,
  32. //numberHtml: '{{#}}.',
  33. numberHtml: '<div class="faq-number">{{#}}</div>'
  34. };
  35. /**
  36. * Merge the runtime options with the default settings
  37. */
  38. var options = $.extend({}, defaults, options);
  39. /**
  40. * Iterate through the collection of elements and
  41. * return the object to preserve method chaining
  42. */
  43. return this.each(function(i) {
  44. /**
  45. * Wrap the current element in an instance of jQuery
  46. */
  47. var $this = $(this);
  48. var $container = $this.wrap ('<div class="faq-container"></div>');
  49. $this.addClass ('faq-list');
  50. if (options.enableSearch) {
  51. var $form = generateSearchForm ();
  52. $form.insertBefore ($this);
  53. }
  54. if (options.enableToc) {
  55. var $toc = generateToc ($this);
  56. $toc.insertBefore ($this);
  57. }
  58. var $empty = generateEmptySearch ();
  59. $empty.appendTo ($container);
  60. generateAnswerNumbers ($this);
  61. });
  62. function search (e) {
  63. var el, container, filter, count, pattern, container, answers, toc, tocs, empty;
  64. el = $(this);
  65. container = el.parents ('.faq-container');
  66. filter = el.val ();
  67. toc = container.find ('.faq-toc');
  68. answers = container.find ('.faq-list').find ('li');
  69. tocs = container.find ('.faq-toc').find('li');
  70. empty = container.find ('.faq-empty');
  71. pattern = new RegExp (filter, 'i');
  72. answers.hide ();
  73. tocs.hide ();
  74. $.grep (answers.find ('.faq-text'), function (input) {
  75. if (pattern.test ($(input).text ())) {
  76. $(input).parents ('li').show ();
  77. var index = $(input).parents ('li').index ();
  78. tocs.eq (index).show ();
  79. }
  80. });
  81. if (!answers.is (':visible')) {
  82. empty.show ();
  83. toc.hide ();
  84. } else {
  85. empty.hide ();
  86. toc.show ();
  87. }
  88. }
  89. function generateEmptySearch () {
  90. var $empty = $('<div>', { 'class': 'faq-empty' });
  91. return $empty.html ('Nothing Found');
  92. }
  93. function generateSearchForm () {
  94. var $form = $('<form>', { 'class': 'faq-search' });
  95. var $input = $('<input>', { 'type': 'text', 'name': 'search', 'placeholder': 'Search by Keyword' });
  96. $input.appendTo ($form);
  97. $input.bind ('keyup', search)
  98. return $form;
  99. }
  100. function generateAnswerNumbers ($list) {
  101. $list.find ('li').each (function (i) {
  102. var id = parseInt (i+1);
  103. $(this).wrapInner ('<div class="faq-text"></div>');
  104. if (options.enableStyling) {
  105. var icon = '<div class="faq-icon">' + options.numberHtml + '</div>';
  106. icon = icon.replace ('{{#}}', id);
  107. $(this).prepend (icon);
  108. }
  109. });
  110. }
  111. function generateToc ($list) {
  112. var html = '<ol>';
  113. $list.find ('li').each (function (i) {
  114. var id = parseInt (i+1);
  115. html += '<li>' + id + '. <a href="#faq-' + id + '">' + $(this).find ('h4').text () + '</a></li>';
  116. $(this).attr ('id', 'faq-' + id);
  117. });
  118. html += '</ol>';
  119. var $toc = $('<div>', { 'class': 'faq-toc' });
  120. $toc.html (html);
  121. return $toc;
  122. }
  123. };
  124. })(jQuery);