/**
* @fileOverview Ono pager (jQuery plugin)
* @author Wouter Bos, Web developer at Estate Internet (www.estate.nl). Code
* for swiping based on the QuickGestures jQuery plugin of Anders Zakrisson.
*
* Demos an documentation on http://www.thebrightlines.com/onopager/website/
*
* @since 0.1 - 2011-3-28
* @version 1.1.1 - 2011-27-10
*/
// TODO:
// - Pause autopaging during a hover on a pager.
// - Play/pause-button for autopager
// - pageByNumber should have a 'last' and 'first'-link.
// - Build support for scroll wheel
// - Highlight arrow key when pressing an arrow key on keyboard
(function($) {
/**
* Root jQuery namespace. See www.jquery.com.
* @name jQuery
* @class jQuery Library (www.jquery.com)
*/
/**
* jQuery functions namespace.
* @name fn
* @class jQuery Library (www.jquery.com)
* @memberOf jQuery
*/
/**
* Creates a widget that enables the user to navigate through a list of
* elements (like an <ul>). It provides different types of
* paging navigation. These are called animation objects and reside in the
* onoPager.animation namespace.
* The onoPager library consist of many types of animations like "slides",
* "linear" and "linearScroller". The onoPager is built in such a way that
* it's easy to add your own animation objects without having to rewrite the
* basic paging functionality.
* Check out some
* configuration examples.
*
* @param {Object} arg_config Configuration object.
* @param {Object} animationConfig Optional extra configuration object for
* the animation object.
* @param {String} arg_config.cssClass Ads CSS class to the root of the pager.
* @param {Boolean} arg_config.pagePerItem If true, each page will be as long
* as one list item. If false, each page will be as long as the list
* container, which may span multiple list items.
* @param {Boolean} arg_config.lockDuringTransition Disable paging controls
* during a transition when true. Default is false.
* @param {Boolean} arg_config.doesLoop If true, the pager scrolls back
* to the first item after the last item.
* @param {String} arg_config.listContainer.width Width of list
* container, like '200px'.
* @param {String} arg_config.listContainer.height Height of list
* container, like '200px'.
* @param {Boolean} arg_config.listContainer.adjustHeightToListItem.active If
* you also set pagePerItem to true, the height of the list container will
* adjust to the height of the visible list item. Default value is true.
* @param {Boolean} arg_config.listContainer.adjustHeightToListItem.animate If
* true, the container will animatie to its new height. Default value is
* true.
* @param {String} arg_config.ListItems.width Width of list items, like
* '200px'.
* @param {String} arg_config.ListItems.height Height of list items,
* like '200px'.
* @param {Number} arg_config.activeIndex Sets initial visible page. By
* default the pager starts at index 0.
* @param {Boolean} arg_config.autoPage.active Activates auto pager.
* @param {Number} arg_config.autoPage.interval The interval between
* autopaging. Time value is set in milliseconds.
* @param {String} arg_config.autoPage.autoPageAnimationType The type
* of animation that will indicate the time the time between transitions.
* @param {Object} arg_config.autoPage.extraConfig A configuration object
* for the autopage indicator.
* @param {String} arg_config.labels.next text for the 'next'-button.
* @param {String} arg_config.labels.previous Text for the
* 'previous'-button.
* @param {Boolean} arg_config.status.active Activates the status box.
* @param {String} arg_config.status.prependText Text that appears before
* the page index number.
* @param {String} arg_config.status.seperationText Text that appears
* between the page index number and the total pages number.
* @param {String} arg_config.status.appendText Text that appears after
* the total pages number.
* @param {Boolean} arg_config.scroller.active Activates a Javascript
* scrollbar. Default is true.
* @param {Number} arg_config.pixelMove The amount of pixels the pager
* scrolls after each frame.
* @param {Boolean} arg_config.pageByNumber.active Activates the bar with
* all pages, defined by number. Default is true.
* @param {Boolean} arg_config.pageByNumber.enableClick Disables paging
* behaviour onclick. The makes the 'Page by number'-box essentially a
* status box rather than a navigation control. Default is true.
* @param {Array} arg_config.pageByNumber.labels Replaces the default
* content of the page-by-number links with the string values in the array.
* @param {Number} arg_config.pageByNumber.hideThreshold Defines how many
* links may appear in the pageByNumber box. If you set the value to 2,
* you'll see 2 links on the left and 2 on the right of the active item. A
* negative value cancels this functionality. Default value is -1.
* @param {Boolean} arg_config.pageByArrowKey.active Enables paging by
* using the keyboard arrow keys. Default is false.
* @param {Boolean} arg_config.pageByArrowKey.preventDefault Disables or
* activates the default behaviour of the arrow key. If set to true, the
* user won't be able to scroll the page or a textarea with the arrow keys.
* Default is false for that reason.
* @param {Boolean} arg_config.swipeTriggersPage Activates page
* navigation by swiping on the screen. Default is false.
* @param {String} arg_config.swipePlatforms Determines on what platforms
* the user is able to page by swiping. 'touch' activates swiping only on
* touch devices. 'all' will activates swiping on touch devices and
* desktop. Swiping on the desktop is done with mouse gestures. Default
* value is 'touch'.
* @param {String} arg_config.animationType Determines which animation
* object will be used. The following animation types are available by
* default: 'linear', 'linearScroller' and 'slides'. Custom animation
* objects can be created and used after the plugin is loaded. Default
* value is 'linear'.
* @param {String} arg_config.animationEasing Determines the easing type
* to be used by the animation object. Default value is 'linear'.
* @param {String} arg_config.orientation Determines on what axis the
* animation moves. Possible values are 'horizontal' and 'vertical' though
* it's possible to use other values as long as the animation object
* supports that value. Default value is 'horizontal'.
* @param {Number} arg_config.animationSpeed Determines the speed at
* which the animations take place.
* @return {jQuery} chainable jQuery class.
* @memberOf jQuery.fn
* @example
* // Simple example:
* // More examples on: http://www.thebrightlines.com/onopager/website/
* jQuery('#list1').onoPager({
* cssClass: 'onoPager_greyscale',
* pagePerItem: true,
* doesLoop: false,
* listContainer: {
* width: '280px',
* height: ''
* },
* listItems: {
* width: '260px',
* height: '80px'
* },
* status: {
* active: false
* },
* pageByArrowKey: {
* active: true,
* preventDefault: false
* },
* pageByNumber: {
* hideThreshold: 1
* },
* swipeTriggersPage: true,
* animationType: 'linear',
* animationEasing: 'easeOutCubic',
* orientation: 'horizontal',
* animationSpeed: 1000
* });
*/
jQuery.fn.onoPager = function(arg_config, animationConfig) {
var config = {
cssClass: 'onoPager_greyscale',
pagePerItem: true,
lockDuringTransition: false,
doesLoop: true,
listContainer: {
width: '280px',
height: '',
adjustHeightToListItem: {
active: false,
animate: false
}
},
listItems: {
width: '260px',
height: '',
triggersPagingOnClick: false
},
activeIndex: 0,
autoPage: {
active: false,
interval: 2000,
autoPageAnimationType: '',
extraConfig: {}
},
labels: {
next: '>>',
previous: '<<'
},
status: {
active: false,
prependText: '',
seperationText: ' / ',
appendText: ''
},
scroller: {
active: false,
pixelMove: 2
},
pageByNumber: {
active: true,
enableClick: true,
labels: [],
links: [],
enableHover: false,
hideThreshold: -1
},
pageByArrowKey: {
active: false,
preventDefault: false
},
swipeTriggersPage: false,
swipePlatforms: 'touch',
animationType: 'linear',
animationEasing: 'linear',
orientation: 'horizontal',
animationSpeed: 1000
};
config = $.extend(true, config, arg_config);
var EMPTY_HREF = ' href="javascript:void(0)"';
var ONOPAGER = 'onoPager';
var HORIZONTAL = 'horizontal';
var VERTICAL = 'vertical';
var root; // The root element of the container
var listContainer; // The div that contains the list element
var list; // The list element
var listItems; // The list items
var pager; // The pager object
var animation; // The animation object
var pageNext; // The 'next'-link
var pagePrevious; // The 'previous'-link
var pageByNumber; // Container with list of links of available pages
var pageStatus; // Container with feedback for user about the paging status
var pageScroller; // Page by using the scroller
var autoPageContainer; // Box that gives feedback about the autopage status
// Set initial styling (mainly the dimensions of the boxes) of the list
// with config values.
function setStyles() {
if (typeof(config.listItems.width) == 'string' &&
config.listItems.width.length > 0) {
listItems.css('width', config.listItems.width);
}
if (typeof(config.listItems.height) == 'string' &&
config.listItems.height.length > 0) {
listItems.css('height', config.listItems.height);
}
if (typeof(config.listContainer.width) == 'string' &&
config.listContainer.width.length > 0) {
listContainer.css('width', config.listContainer.width);
}
if (typeof(config.listContainer.height) == 'string' &&
config.listContainer.height.length > 0) {
listContainer.css('height', config.listContainer.height);
}
}
// Creates pager controls like 'next' and 'previous'.
function createControls() {
var newHTML = '';
if (config.autoPage.autoPageAnimationType && config.autoPage.active) {
newHTML += '';
}
newHTML += '