749 lines
22 KiB
JavaScript
749 lines
22 KiB
JavaScript
|
/*!
|
|||
|
Deck JS - deck.core
|
|||
|
Copyright (c) 2011-2014 Caleb Troughton
|
|||
|
Dual licensed under the MIT license.
|
|||
|
https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
|
|||
|
*/
|
|||
|
|
|||
|
/*
|
|||
|
The deck.core module provides all the basic functionality for creating and
|
|||
|
moving through a deck. It does so by applying classes to indicate the state of
|
|||
|
the deck and its slides, allowing CSS to take care of the visual representation
|
|||
|
of each state. It also provides methods for navigating the deck and inspecting
|
|||
|
its state, as well as basic key bindings for going to the next and previous
|
|||
|
slides. More functionality is provided by wholly separate extension modules
|
|||
|
that use the API provided by core.
|
|||
|
*/
|
|||
|
(function($, undefined) {
|
|||
|
var slides, currentIndex, $container, $fragmentLinks;
|
|||
|
|
|||
|
var events = {
|
|||
|
/*
|
|||
|
This event fires at the beginning of a slide change, before the actual
|
|||
|
change occurs. Its purpose is to give extension authors a way to prevent
|
|||
|
the slide change from occuring. This is done by calling preventDefault
|
|||
|
on the event object within this event. If that is done, the deck.change
|
|||
|
event will never be fired and the slide will not change.
|
|||
|
*/
|
|||
|
beforeChange: 'deck.beforeChange',
|
|||
|
|
|||
|
/*
|
|||
|
This event fires whenever the current slide changes, whether by way of
|
|||
|
next, prev, or go. The callback function is passed two parameters, from
|
|||
|
and to, equal to the indices of the old slide and the new slide
|
|||
|
respectively. If preventDefault is called on the event within this handler
|
|||
|
the slide change does not occur.
|
|||
|
|
|||
|
$(document).bind('deck.change', function(event, from, to) {
|
|||
|
alert('Moving from slide ' + from + ' to ' + to);
|
|||
|
});
|
|||
|
*/
|
|||
|
change: 'deck.change',
|
|||
|
|
|||
|
/*
|
|||
|
This event fires at the beginning of deck initialization. This event makes
|
|||
|
a good hook for preprocessing extensions looking to modify the DOM before
|
|||
|
the deck is fully initialized. It is also possible to halt the deck.init
|
|||
|
event from firing while you do things in beforeInit. This can be done by
|
|||
|
calling lockInit on the event object passed to this event. The init can be
|
|||
|
released by calling releaseInit.
|
|||
|
|
|||
|
$(document).bind('deck.beforeInit', function(event) {
|
|||
|
event.lockInit(); // halts deck.init event
|
|||
|
window.setTimeout(function() {
|
|||
|
event.releaseInit(); // deck.init will now fire 2 seconds later
|
|||
|
}, 2000);
|
|||
|
});
|
|||
|
|
|||
|
The init event will be fired regardless of locks after
|
|||
|
options.initLockTimeout milliseconds.
|
|||
|
*/
|
|||
|
beforeInitialize: 'deck.beforeInit',
|
|||
|
|
|||
|
/*
|
|||
|
This event fires at the end of deck initialization. Extensions should
|
|||
|
implement any code that relies on user extensible options (key bindings,
|
|||
|
element selectors, classes) within a handler for this event. Native
|
|||
|
events associated with Deck JS should be scoped under a .deck event
|
|||
|
namespace, as with the example below:
|
|||
|
|
|||
|
var $d = $(document);
|
|||
|
$.deck.defaults.keys.myExtensionKeycode = 70; // 'h'
|
|||
|
$d.bind('deck.init', function() {
|
|||
|
$d.bind('keydown.deck', function(event) {
|
|||
|
if (event.which === $.deck.getOptions().keys.myExtensionKeycode) {
|
|||
|
// Rock out
|
|||
|
}
|
|||
|
});
|
|||
|
});
|
|||
|
*/
|
|||
|
initialize: 'deck.init'
|
|||
|
};
|
|||
|
|
|||
|
var options = {};
|
|||
|
var $document = $(document);
|
|||
|
var $window = $(window);
|
|||
|
var stopPropagation = function(event) {
|
|||
|
event.stopPropagation();
|
|||
|
};
|
|||
|
|
|||
|
var updateContainerState = function() {
|
|||
|
var oldIndex = $container.data('onSlide');
|
|||
|
$container.removeClass(options.classes.onPrefix + oldIndex);
|
|||
|
$container.addClass(options.classes.onPrefix + currentIndex);
|
|||
|
$container.data('onSlide', currentIndex);
|
|||
|
};
|
|||
|
|
|||
|
var updateChildCurrent = function() {
|
|||
|
var $oldCurrent = $('.' + options.classes.current);
|
|||
|
var $oldParents = $oldCurrent.parentsUntil(options.selectors.container);
|
|||
|
var $newCurrent = slides[currentIndex];
|
|||
|
var $newParents = $newCurrent.parentsUntil(options.selectors.container);
|
|||
|
$oldParents.removeClass(options.classes.childCurrent);
|
|||
|
$newParents.addClass(options.classes.childCurrent);
|
|||
|
};
|
|||
|
|
|||
|
var removeOldSlideStates = function() {
|
|||
|
var $all = $();
|
|||
|
$.each(slides, function(i, el) {
|
|||
|
$all = $all.add(el);
|
|||
|
});
|
|||
|
$all.removeClass([
|
|||
|
options.classes.before,
|
|||
|
options.classes.previous,
|
|||
|
options.classes.current,
|
|||
|
options.classes.next,
|
|||
|
options.classes.after
|
|||
|
].join(' '));
|
|||
|
};
|
|||
|
|
|||
|
var addNewSlideStates = function() {
|
|||
|
slides[currentIndex].addClass(options.classes.current);
|
|||
|
if (currentIndex > 0) {
|
|||
|
slides[currentIndex-1].addClass(options.classes.previous);
|
|||
|
}
|
|||
|
if (currentIndex + 1 < slides.length) {
|
|||
|
slides[currentIndex+1].addClass(options.classes.next);
|
|||
|
}
|
|||
|
if (currentIndex > 1) {
|
|||
|
$.each(slides.slice(0, currentIndex - 1), function(i, $slide) {
|
|||
|
$slide.addClass(options.classes.before);
|
|||
|
});
|
|||
|
}
|
|||
|
if (currentIndex + 2 < slides.length) {
|
|||
|
$.each(slides.slice(currentIndex+2), function(i, $slide) {
|
|||
|
$slide.addClass(options.classes.after);
|
|||
|
});
|
|||
|
}
|
|||
|
};
|
|||
|
|
|||
|
var setAriaHiddens = function() {
|
|||
|
$(options.selectors.slides).each(function() {
|
|||
|
var $slide = $(this);
|
|||
|
var isSub = $slide.closest('.' + options.classes.childCurrent).length;
|
|||
|
var isBefore = $slide.hasClass(options.classes.before) && !isSub;
|
|||
|
var isPrevious = $slide.hasClass(options.classes.previous) && !isSub;
|
|||
|
var isNext = $slide.hasClass(options.classes.next);
|
|||
|
var isAfter = $slide.hasClass(options.classes.after);
|
|||
|
var ariaHiddenValue = isBefore || isPrevious || isNext || isAfter;
|
|||
|
$slide.attr('aria-hidden', ariaHiddenValue);
|
|||
|
});
|
|||
|
};
|
|||
|
|
|||
|
var updateStates = function() {
|
|||
|
updateContainerState();
|
|||
|
updateChildCurrent();
|
|||
|
removeOldSlideStates();
|
|||
|
addNewSlideStates();
|
|||
|
if (options.setAriaHiddens) {
|
|||
|
setAriaHiddens();
|
|||
|
}
|
|||
|
};
|
|||
|
|
|||
|
var initSlidesArray = function(elements) {
|
|||
|
if ($.isArray(elements)) {
|
|||
|
$.each(elements, function(i, element) {
|
|||
|
slides.push($(element));
|
|||
|
});
|
|||
|
}
|
|||
|
else {
|
|||
|
$(elements).each(function(i, element) {
|
|||
|
slides.push($(element));
|
|||
|
});
|
|||
|
}
|
|||
|
};
|
|||
|
|
|||
|
var bindKeyEvents = function() {
|
|||
|
var editables = [
|
|||
|
'input',
|
|||
|
'textarea',
|
|||
|
'select',
|
|||
|
'button',
|
|||
|
'meter',
|
|||
|
'progress',
|
|||
|
'[contentEditable]'
|
|||
|
].join(', ');
|
|||
|
|
|||
|
$document.unbind('keydown.deck').bind('keydown.deck', function(event) {
|
|||
|
var isNext = event.which === options.keys.next;
|
|||
|
var isPrev = event.which === options.keys.previous;
|
|||
|
isNext = isNext || $.inArray(event.which, options.keys.next) > -1;
|
|||
|
isPrev = isPrev || $.inArray(event.which, options.keys.previous) > -1;
|
|||
|
|
|||
|
if (isNext) {
|
|||
|
methods.next();
|
|||
|
event.preventDefault();
|
|||
|
}
|
|||
|
else if (isPrev) {
|
|||
|
methods.prev();
|
|||
|
event.preventDefault();
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
$document.undelegate(editables, 'keydown.deck', stopPropagation);
|
|||
|
$document.delegate(editables, 'keydown.deck', stopPropagation);
|
|||
|
};
|
|||
|
|
|||
|
var bindTouchEvents = function() {
|
|||
|
var startTouch;
|
|||
|
var direction = options.touch.swipeDirection;
|
|||
|
var tolerance = options.touch.swipeTolerance;
|
|||
|
var listenToHorizontal = ({ both: true, horizontal: true })[direction];
|
|||
|
var listenToVertical = ({ both: true, vertical: true })[direction];
|
|||
|
|
|||
|
$container.unbind('touchstart.deck');
|
|||
|
$container.bind('touchstart.deck', function(event) {
|
|||
|
if (!startTouch) {
|
|||
|
startTouch = $.extend({}, event.originalEvent.targetTouches[0]);
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
$container.unbind('touchmove.deck');
|
|||
|
$container.bind('touchmove.deck', function(event) {
|
|||
|
$.each(event.originalEvent.changedTouches, function(i, touch) {
|
|||
|
if (!startTouch || touch.identifier !== startTouch.identifier) {
|
|||
|
return true;
|
|||
|
}
|
|||
|
var xDistance = touch.screenX - startTouch.screenX;
|
|||
|
var yDistance = touch.screenY - startTouch.screenY;
|
|||
|
var leftToRight = xDistance > tolerance && listenToHorizontal;
|
|||
|
var rightToLeft = xDistance < -tolerance && listenToHorizontal;
|
|||
|
var topToBottom = yDistance > tolerance && listenToVertical;
|
|||
|
var bottomToTop = yDistance < -tolerance && listenToVertical;
|
|||
|
|
|||
|
if (leftToRight || topToBottom) {
|
|||
|
$.deck('prev');
|
|||
|
startTouch = undefined;
|
|||
|
}
|
|||
|
else if (rightToLeft || bottomToTop) {
|
|||
|
$.deck('next');
|
|||
|
startTouch = undefined;
|
|||
|
}
|
|||
|
return false;
|
|||
|
});
|
|||
|
|
|||
|
if (listenToVertical) {
|
|||
|
event.preventDefault();
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
$container.unbind('touchend.deck');
|
|||
|
$container.bind('touchend.deck', function(event) {
|
|||
|
$.each(event.originalEvent.changedTouches, function(i, touch) {
|
|||
|
if (startTouch && touch.identifier === startTouch.identifier) {
|
|||
|
startTouch = undefined;
|
|||
|
}
|
|||
|
});
|
|||
|
});
|
|||
|
};
|
|||
|
|
|||
|
var indexInBounds = function(index) {
|
|||
|
return typeof index === 'number' && index >=0 && index < slides.length;
|
|||
|
};
|
|||
|
|
|||
|
var createBeforeInitEvent = function() {
|
|||
|
var event = $.Event(events.beforeInitialize);
|
|||
|
event.locks = 0;
|
|||
|
event.done = $.noop;
|
|||
|
event.lockInit = function() {
|
|||
|
++event.locks;
|
|||
|
};
|
|||
|
event.releaseInit = function() {
|
|||
|
--event.locks;
|
|||
|
if (!event.locks) {
|
|||
|
event.done();
|
|||
|
}
|
|||
|
};
|
|||
|
return event;
|
|||
|
};
|
|||
|
|
|||
|
var goByHash = function(str) {
|
|||
|
var id = str.substr(str.indexOf("#") + 1);
|
|||
|
|
|||
|
$.each(slides, function(i, $slide) {
|
|||
|
if ($slide.attr('id') === id) {
|
|||
|
$.deck('go', i);
|
|||
|
return false;
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
// If we don't set these to 0 the container scrolls due to hashchange
|
|||
|
if (options.preventFragmentScroll) {
|
|||
|
$.deck('getContainer').scrollLeft(0).scrollTop(0);
|
|||
|
}
|
|||
|
};
|
|||
|
|
|||
|
var assignSlideId = function(i, $slide) {
|
|||
|
var currentId = $slide.attr('id');
|
|||
|
var previouslyAssigned = $slide.data('deckAssignedId') === currentId;
|
|||
|
if (!currentId || previouslyAssigned) {
|
|||
|
$slide.attr('id', options.hashPrefix + i);
|
|||
|
$slide.data('deckAssignedId', options.hashPrefix + i);
|
|||
|
}
|
|||
|
};
|
|||
|
|
|||
|
var removeContainerHashClass = function(id) {
|
|||
|
$container.removeClass(options.classes.onPrefix + id);
|
|||
|
};
|
|||
|
|
|||
|
var addContainerHashClass = function(id) {
|
|||
|
$container.addClass(options.classes.onPrefix + id);
|
|||
|
};
|
|||
|
|
|||
|
var setupHashBehaviors = function() {
|
|||
|
$fragmentLinks = $();
|
|||
|
$.each(slides, function(i, $slide) {
|
|||
|
var hash;
|
|||
|
|
|||
|
assignSlideId(i, $slide);
|
|||
|
hash = '#' + $slide.attr('id');
|
|||
|
if (hash === window.location.hash) {
|
|||
|
setTimeout(function() {
|
|||
|
$.deck('go', i);
|
|||
|
}, 1);
|
|||
|
}
|
|||
|
$fragmentLinks = $fragmentLinks.add('a[href="' + hash + '"]');
|
|||
|
});
|
|||
|
|
|||
|
if (slides.length) {
|
|||
|
addContainerHashClass($.deck('getSlide').attr('id'));
|
|||
|
};
|
|||
|
};
|
|||
|
|
|||
|
var changeHash = function(from, to) {
|
|||
|
var hash = '#' + $.deck('getSlide', to).attr('id');
|
|||
|
var hashPath = window.location.href.replace(/#.*/, '') + hash;
|
|||
|
|
|||
|
removeContainerHashClass($.deck('getSlide', from).attr('id'));
|
|||
|
addContainerHashClass($.deck('getSlide', to).attr('id'));
|
|||
|
if (Modernizr.history) {
|
|||
|
window.history.replaceState({}, "", hashPath);
|
|||
|
}
|
|||
|
};
|
|||
|
|
|||
|
/* Methods exposed in the jQuery.deck namespace */
|
|||
|
var methods = {
|
|||
|
|
|||
|
/*
|
|||
|
jQuery.deck(selector, options)
|
|||
|
|
|||
|
selector: string | jQuery | array
|
|||
|
options: object, optional
|
|||
|
|
|||
|
Initializes the deck, using each element matched by selector as a slide.
|
|||
|
May also be passed an array of string selectors or jQuery objects, in
|
|||
|
which case each selector in the array is considered a slide. The second
|
|||
|
parameter is an optional options object which will extend the default
|
|||
|
values.
|
|||
|
|
|||
|
Users may also pass only an options object to init. In this case the slide
|
|||
|
selector will be options.selectors.slides which defaults to .slide.
|
|||
|
|
|||
|
$.deck('.slide');
|
|||
|
|
|||
|
or
|
|||
|
|
|||
|
$.deck([
|
|||
|
'#first-slide',
|
|||
|
'#second-slide',
|
|||
|
'#etc'
|
|||
|
]);
|
|||
|
*/
|
|||
|
init: function(opts) {
|
|||
|
var beforeInitEvent = createBeforeInitEvent();
|
|||
|
var overrides = opts;
|
|||
|
|
|||
|
if (!$.isPlainObject(opts)) {
|
|||
|
overrides = arguments[1] || {};
|
|||
|
$.extend(true, overrides, {
|
|||
|
selectors: {
|
|||
|
slides: arguments[0]
|
|||
|
}
|
|||
|
});
|
|||
|
}
|
|||
|
|
|||
|
options = $.extend(true, {}, $.deck.defaults, overrides);
|
|||
|
slides = [];
|
|||
|
currentIndex = 0;
|
|||
|
$container = $(options.selectors.container);
|
|||
|
|
|||
|
// Hide the deck while states are being applied to kill transitions
|
|||
|
$container.addClass(options.classes.loading);
|
|||
|
|
|||
|
// populate the array of slides for pre-init
|
|||
|
initSlidesArray(options.selectors.slides);
|
|||
|
// Pre init event for preprocessing hooks
|
|||
|
beforeInitEvent.done = function() {
|
|||
|
// re-populate the array of slides
|
|||
|
slides = [];
|
|||
|
initSlidesArray(options.selectors.slides);
|
|||
|
setupHashBehaviors();
|
|||
|
bindKeyEvents();
|
|||
|
bindTouchEvents();
|
|||
|
$container.scrollLeft(0).scrollTop(0);
|
|||
|
|
|||
|
if (slides.length) {
|
|||
|
updateStates();
|
|||
|
}
|
|||
|
|
|||
|
// Show deck again now that slides are in place
|
|||
|
$container.removeClass(options.classes.loading);
|
|||
|
$document.trigger(events.initialize);
|
|||
|
};
|
|||
|
|
|||
|
$document.trigger(beforeInitEvent);
|
|||
|
if (!beforeInitEvent.locks) {
|
|||
|
beforeInitEvent.done();
|
|||
|
}
|
|||
|
window.setTimeout(function() {
|
|||
|
if (beforeInitEvent.locks) {
|
|||
|
if (window.console) {
|
|||
|
window.console.warn('Something locked deck initialization\
|
|||
|
without releasing it before the timeout. Proceeding with\
|
|||
|
initialization anyway.');
|
|||
|
}
|
|||
|
beforeInitEvent.done();
|
|||
|
}
|
|||
|
}, options.initLockTimeout);
|
|||
|
},
|
|||
|
|
|||
|
/*
|
|||
|
jQuery.deck('go', index)
|
|||
|
|
|||
|
index: integer | string
|
|||
|
|
|||
|
Moves to the slide at the specified index if index is a number. Index is
|
|||
|
0-based, so $.deck('go', 0); will move to the first slide. If index is a
|
|||
|
string this will move to the slide with the specified id. If index is out
|
|||
|
of bounds or doesn't match a slide id the call is ignored.
|
|||
|
*/
|
|||
|
go: function(indexOrId) {
|
|||
|
var beforeChangeEvent = $.Event(events.beforeChange);
|
|||
|
var index;
|
|||
|
|
|||
|
/* Number index, easy. */
|
|||
|
if (indexInBounds(indexOrId)) {
|
|||
|
index = indexOrId;
|
|||
|
}
|
|||
|
/* Id string index, search for it and set integer index */
|
|||
|
else if (typeof indexOrId === 'string') {
|
|||
|
$.each(slides, function(i, $slide) {
|
|||
|
if ($slide.attr('id') === indexOrId) {
|
|||
|
index = i;
|
|||
|
return false;
|
|||
|
}
|
|||
|
});
|
|||
|
}
|
|||
|
if (typeof index === 'undefined') {
|
|||
|
return;
|
|||
|
}
|
|||
|
|
|||
|
/* Trigger beforeChange. If nothing prevents the change, trigger
|
|||
|
the slide change. */
|
|||
|
$document.trigger(beforeChangeEvent, [currentIndex, index]);
|
|||
|
if (!beforeChangeEvent.isDefaultPrevented()) {
|
|||
|
$document.trigger(events.change, [currentIndex, index]);
|
|||
|
changeHash(currentIndex, index);
|
|||
|
currentIndex = index;
|
|||
|
updateStates();
|
|||
|
}
|
|||
|
},
|
|||
|
|
|||
|
/*
|
|||
|
jQuery.deck('next')
|
|||
|
|
|||
|
Moves to the next slide. If the last slide is already active, the call
|
|||
|
is ignored.
|
|||
|
*/
|
|||
|
next: function() {
|
|||
|
methods.go(currentIndex+1);
|
|||
|
},
|
|||
|
|
|||
|
/*
|
|||
|
jQuery.deck('prev')
|
|||
|
|
|||
|
Moves to the previous slide. If the first slide is already active, the
|
|||
|
call is ignored.
|
|||
|
*/
|
|||
|
prev: function() {
|
|||
|
methods.go(currentIndex-1);
|
|||
|
},
|
|||
|
|
|||
|
/*
|
|||
|
jQuery.deck('getSlide', index)
|
|||
|
|
|||
|
index: integer, optional
|
|||
|
|
|||
|
Returns a jQuery object containing the slide at index. If index is not
|
|||
|
specified, the current slide is returned.
|
|||
|
*/
|
|||
|
getSlide: function(index) {
|
|||
|
index = typeof index !== 'undefined' ? index : currentIndex;
|
|||
|
if (!indexInBounds(index)) {
|
|||
|
return null;
|
|||
|
}
|
|||
|
return slides[index];
|
|||
|
},
|
|||
|
|
|||
|
/*
|
|||
|
jQuery.deck('getSlides')
|
|||
|
|
|||
|
Returns all slides as an array of jQuery objects.
|
|||
|
*/
|
|||
|
getSlides: function() {
|
|||
|
return slides;
|
|||
|
},
|
|||
|
|
|||
|
/*
|
|||
|
jQuery.deck('getTopLevelSlides')
|
|||
|
|
|||
|
Returns all slides that are not subslides.
|
|||
|
*/
|
|||
|
getTopLevelSlides: function() {
|
|||
|
var topLevelSlides = [];
|
|||
|
var slideSelector = options.selectors.slides;
|
|||
|
var subSelector = [slideSelector, slideSelector].join(' ');
|
|||
|
$.each(slides, function(i, $slide) {
|
|||
|
if (!$slide.is(subSelector)) {
|
|||
|
topLevelSlides.push($slide);
|
|||
|
}
|
|||
|
});
|
|||
|
return topLevelSlides;
|
|||
|
},
|
|||
|
|
|||
|
/*
|
|||
|
jQuery.deck('getNestedSlides', index)
|
|||
|
|
|||
|
index: integer, optional
|
|||
|
|
|||
|
Returns all the nested slides of the current slide. If index is
|
|||
|
specified it returns the nested slides of the slide at that index.
|
|||
|
If there are no nested slides this will return an empty array.
|
|||
|
*/
|
|||
|
getNestedSlides: function(index) {
|
|||
|
var targetIndex = index == null ? currentIndex : index;
|
|||
|
var $targetSlide = $.deck('getSlide', targetIndex);
|
|||
|
var $nesteds = $targetSlide.find(options.selectors.slides);
|
|||
|
var nesteds = $nesteds.get();
|
|||
|
return $.map(nesteds, function(slide, i) {
|
|||
|
return $(slide);
|
|||
|
});
|
|||
|
},
|
|||
|
|
|||
|
|
|||
|
/*
|
|||
|
jQuery.deck('getContainer')
|
|||
|
|
|||
|
Returns a jQuery object containing the deck container as defined by the
|
|||
|
container option.
|
|||
|
*/
|
|||
|
getContainer: function() {
|
|||
|
return $container;
|
|||
|
},
|
|||
|
|
|||
|
/*
|
|||
|
jQuery.deck('getOptions')
|
|||
|
|
|||
|
Returns the options object for the deck, including any overrides that
|
|||
|
were defined at initialization.
|
|||
|
*/
|
|||
|
getOptions: function() {
|
|||
|
return options;
|
|||
|
},
|
|||
|
|
|||
|
/*
|
|||
|
jQuery.deck('extend', name, method)
|
|||
|
|
|||
|
name: string
|
|||
|
method: function
|
|||
|
|
|||
|
Adds method to the deck namespace with the key of name. This doesn’t
|
|||
|
give access to any private member data — public methods must still be
|
|||
|
used within method — but lets extension authors piggyback on the deck
|
|||
|
namespace rather than pollute jQuery.
|
|||
|
|
|||
|
$.deck('extend', 'alert', function(msg) {
|
|||
|
alert(msg);
|
|||
|
});
|
|||
|
|
|||
|
// Alerts 'boom'
|
|||
|
$.deck('alert', 'boom');
|
|||
|
*/
|
|||
|
extend: function(name, method) {
|
|||
|
methods[name] = method;
|
|||
|
}
|
|||
|
};
|
|||
|
|
|||
|
/* jQuery extension */
|
|||
|
$.deck = function(method, arg) {
|
|||
|
var args = Array.prototype.slice.call(arguments, 1);
|
|||
|
if (methods[method]) {
|
|||
|
return methods[method].apply(this, args);
|
|||
|
}
|
|||
|
else {
|
|||
|
return methods.init(method, arg);
|
|||
|
}
|
|||
|
};
|
|||
|
|
|||
|
/*
|
|||
|
The default settings object for a deck. All deck extensions should extend
|
|||
|
this object to add defaults for any of their options.
|
|||
|
|
|||
|
options.classes.after
|
|||
|
This class is added to all slides that appear after the 'next' slide.
|
|||
|
|
|||
|
options.classes.before
|
|||
|
This class is added to all slides that appear before the 'previous'
|
|||
|
slide.
|
|||
|
|
|||
|
options.classes.childCurrent
|
|||
|
This class is added to all elements in the DOM tree between the
|
|||
|
'current' slide and the deck container. For standard slides, this is
|
|||
|
mostly seen and used for nested slides.
|
|||
|
|
|||
|
options.classes.current
|
|||
|
This class is added to the current slide.
|
|||
|
|
|||
|
options.classes.loading
|
|||
|
This class is applied to the deck container during loading phases and is
|
|||
|
primarily used as a way to short circuit transitions between states
|
|||
|
where such transitions are distracting or unwanted. For example, this
|
|||
|
class is applied during deck initialization and then removed to prevent
|
|||
|
all the slides from appearing stacked and transitioning into place
|
|||
|
on load.
|
|||
|
|
|||
|
options.classes.next
|
|||
|
This class is added to the slide immediately following the 'current'
|
|||
|
slide.
|
|||
|
|
|||
|
options.classes.onPrefix
|
|||
|
This prefix, concatenated with the current slide index, is added to the
|
|||
|
deck container as you change slides.
|
|||
|
|
|||
|
options.classes.previous
|
|||
|
This class is added to the slide immediately preceding the 'current'
|
|||
|
slide.
|
|||
|
|
|||
|
options.selectors.container
|
|||
|
Elements matched by this CSS selector will be considered the deck
|
|||
|
container. The deck container is used to scope certain states of the
|
|||
|
deck, as with the onPrefix option, or with extensions such as deck.goto
|
|||
|
and deck.menu.
|
|||
|
|
|||
|
options.selectors.slides
|
|||
|
Elements matched by this selector make up the individual deck slides.
|
|||
|
If a user chooses to pass the slide selector as the first argument to
|
|||
|
$.deck() on initialization it does the same thing as passing in this
|
|||
|
option and this option value will be set to the value of that parameter.
|
|||
|
|
|||
|
options.keys.next
|
|||
|
The numeric keycode used to go to the next slide.
|
|||
|
|
|||
|
options.keys.previous
|
|||
|
The numeric keycode used to go to the previous slide.
|
|||
|
|
|||
|
options.touch.swipeDirection
|
|||
|
The direction swipes occur to cause slide changes. Can be 'horizontal',
|
|||
|
'vertical', or 'both'. Any other value or a falsy value will disable
|
|||
|
swipe gestures for navigation.
|
|||
|
|
|||
|
options.touch.swipeTolerance
|
|||
|
The number of pixels the users finger must travel to produce a swipe
|
|||
|
gesture.
|
|||
|
|
|||
|
options.initLockTimeout
|
|||
|
The number of milliseconds the init event will wait for BeforeInit event
|
|||
|
locks to be released before firing the init event regardless.
|
|||
|
|
|||
|
options.hashPrefix
|
|||
|
Every slide that does not have an id is assigned one at initialization.
|
|||
|
Assigned ids take the form of hashPrefix + slideIndex, e.g., slide-0,
|
|||
|
slide-12, etc.
|
|||
|
|
|||
|
options.preventFragmentScroll
|
|||
|
When deep linking to a hash of a nested slide, this scrolls the deck
|
|||
|
container to the top, undoing the natural browser behavior of scrolling
|
|||
|
to the document fragment on load.
|
|||
|
|
|||
|
options.setAriaHiddens
|
|||
|
When set to true, deck.js will set aria hidden attributes for slides
|
|||
|
that do not appear onscreen according to a typical heirarchical
|
|||
|
deck structure. You may want to turn this off if you are using a theme
|
|||
|
where slides besides the current slide are visible on screen and should
|
|||
|
be accessible to screenreaders.
|
|||
|
*/
|
|||
|
$.deck.defaults = {
|
|||
|
classes: {
|
|||
|
after: 'deck-after',
|
|||
|
before: 'deck-before',
|
|||
|
childCurrent: 'deck-child-current',
|
|||
|
current: 'deck-current',
|
|||
|
loading: 'deck-loading',
|
|||
|
next: 'deck-next',
|
|||
|
onPrefix: 'on-slide-',
|
|||
|
previous: 'deck-previous'
|
|||
|
},
|
|||
|
|
|||
|
selectors: {
|
|||
|
container: '.deck-container',
|
|||
|
slides: '.slide'
|
|||
|
},
|
|||
|
|
|||
|
keys: {
|
|||
|
// enter, space, page down, right arrow, down arrow,
|
|||
|
next: [13, 32, 34, 39, 40],
|
|||
|
// backspace, page up, left arrow, up arrow
|
|||
|
previous: [8, 33, 37, 38]
|
|||
|
},
|
|||
|
|
|||
|
touch: {
|
|||
|
swipeDirection: 'horizontal',
|
|||
|
swipeTolerance: 60
|
|||
|
},
|
|||
|
|
|||
|
initLockTimeout: 10000,
|
|||
|
hashPrefix: 'slide-',
|
|||
|
preventFragmentScroll: true,
|
|||
|
setAriaHiddens: true
|
|||
|
};
|
|||
|
|
|||
|
$document.ready(function() {
|
|||
|
$('html').addClass('ready');
|
|||
|
});
|
|||
|
|
|||
|
$window.bind('hashchange.deck', function(event) {
|
|||
|
if (event.originalEvent && event.originalEvent.newURL) {
|
|||
|
goByHash(event.originalEvent.newURL);
|
|||
|
}
|
|||
|
else {
|
|||
|
goByHash(window.location.hash);
|
|||
|
}
|
|||
|
});
|
|||
|
|
|||
|
$window.bind('load.deck', function() {
|
|||
|
if (options.preventFragmentScroll) {
|
|||
|
$container.scrollLeft(0).scrollTop(0);
|
|||
|
}
|
|||
|
});
|
|||
|
})(jQuery);
|