/*! 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);