123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- /**
- * @name FAQ Plugin
- * @author Rod Howard
- * @url http://goideate.com
- * @date April 28, 2012
- * @license GNU/GPL Version 3
- *
- *
- * Example:
- *
- * $(function() {
- * $("element, #id, .class").technify({
- * // #{EDIT-HERE}# Your run-time options go here ...
- * });
- * });
- */
- /**
- * Create an anonymous function to avoid library conflicts
- */
- (function($) {
- /**
- * Add our plugin to the jQuery.fn object
- */
- $.fn.goFaq = function(options) {
- /**
- * Define some default settings
- */
- var defaults = {
- enableSearch: true,
- enableToc: true,
- enableStyling: true,
- //numberHtml: '{{#}}.',
- numberHtml: '<div class="faq-number">{{#}}</div>'
- };
- /**
- * Merge the runtime options with the default settings
- */
- var options = $.extend({}, defaults, options);
- /**
- * Iterate through the collection of elements and
- * return the object to preserve method chaining
- */
- return this.each(function(i) {
- /**
- * Wrap the current element in an instance of jQuery
- */
- var $this = $(this);
-
- var $container = $this.wrap ('<div class="faq-container"></div>');
-
- $this.addClass ('faq-list');
-
- if (options.enableSearch) {
- var $form = generateSearchForm ();
- $form.insertBefore ($this);
- }
-
- if (options.enableToc) {
- var $toc = generateToc ($this);
- $toc.insertBefore ($this);
- }
-
-
- var $empty = generateEmptySearch ();
- $empty.appendTo ($container);
-
- generateAnswerNumbers ($this);
-
- });
-
- function search (e) {
- var el, container, filter, count, pattern, container, answers, toc, tocs, empty;
-
- el = $(this);
- container = el.parents ('.faq-container');
- filter = el.val ();
- toc = container.find ('.faq-toc');
- answers = container.find ('.faq-list').find ('li');
- tocs = container.find ('.faq-toc').find('li');
- empty = container.find ('.faq-empty');
- pattern = new RegExp (filter, 'i');
-
- answers.hide ();
- tocs.hide ();
-
- $.grep (answers.find ('.faq-text'), function (input) {
- if (pattern.test ($(input).text ())) {
- $(input).parents ('li').show ();
-
- var index = $(input).parents ('li').index ();
- tocs.eq (index).show ();
- }
- });
-
- if (!answers.is (':visible')) {
- empty.show ();
- toc.hide ();
- } else {
- empty.hide ();
- toc.show ();
- }
- }
-
-
- function generateEmptySearch () {
- var $empty = $('<div>', { 'class': 'faq-empty' });
-
- return $empty.html ('Nothing Found');
- }
-
- function generateSearchForm () {
-
- var $form = $('<form>', { 'class': 'faq-search' });
- var $input = $('<input>', { 'type': 'text', 'name': 'search', 'placeholder': 'Search by Keyword' });
-
- $input.appendTo ($form);
-
- $input.bind ('keyup', search)
-
- return $form;
- }
-
- function generateAnswerNumbers ($list) {
- $list.find ('li').each (function (i) {
- var id = parseInt (i+1);
-
-
- $(this).wrapInner ('<div class="faq-text"></div>');
-
-
- if (options.enableStyling) {
- var icon = '<div class="faq-icon">' + options.numberHtml + '</div>';
-
- icon = icon.replace ('{{#}}', id);
- $(this).prepend (icon);
- }
- });
- }
-
- function generateToc ($list) {
- var html = '<ol>';
-
- $list.find ('li').each (function (i) {
- var id = parseInt (i+1);
- html += '<li>' + id + '. <a href="#faq-' + id + '">' + $(this).find ('h4').text () + '</a></li>';
- $(this).attr ('id', 'faq-' + id);
- });
-
- html += '</ol>';
-
- var $toc = $('<div>', { 'class': 'faq-toc' });
-
- $toc.html (html);
-
- return $toc;
-
- }
- };
- })(jQuery);
|