You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
4.2 KiB
159 lines
4.2 KiB
/**
|
|
* @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); |