Added support for stepNext and stepPrev for in-slide "animations": enables for custom animations, SVG animations, video play/pause, etc...

core/deck.core.css

@@ -28,6 +28,12 @@ body.deck-container {
   -webkit-text-size-adjust: none;
   -moz-text-size-adjust: none;
 }
+.deck-container pre.animate {
+  visibility: hidden;
+}
+.deck-container pre.animate.showAnyway {
+  visibility: visible;
+}
 .deck-container div, .deck-container span, .deck-container object, .deck-container iframe,
 .deck-container h1, .deck-container h2, .deck-container h3, .deck-container h4, .deck-container h5, .deck-container h6, .deck-container p, .deck-container blockquote, .deck-container pre,
 .deck-container abbr, .deck-container address, .deck-container cite, .deck-container code, .deck-container del, .deck-container dfn, .deck-container em, .deck-container img, .deck-container ins, .deck-container kbd, .deck-container q, .deck-container samp,
@@ -303,9 +309,12 @@ body.deck-container {
   visibility: visible;
 }
 
+@media all and (orientation:portrait) {}
+@media all and (orientation:landscape) {}
 @media screen and (max-device-width: 480px) {
   /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
 }
+
 @media print {
   * {
     background: transparent !important;

core/deck.core.js

@@ -18,7 +18,9 @@ that use the API provided by core.
 (function($, deck, document, undefined) {
 	var slides, // Array of all the uh, slides...
 	current, // Array index of the current slide
+	currentStep, // Array index of the current slide's animations
 	$container, // Keeping this cached
+	countLoading = 0, // to wait, e.g. for SVG, to be loaded
 
 	events = {
 		/*
@@ -34,6 +36,12 @@ that use the API provided by core.
 		*/
 		change: 'deck.change',
 
+		/*
+		This event fires whenever the slide is doing an inner step.
+		The delta parameter is either 1 for a forward step or -1 (backward).
+		*/
+		step: 'deck.step',
+
 		/*
 		This event fires at the beginning of deck initialization, after the options
 		are set but before the slides array is created.  This event makes a good hook
@@ -115,6 +123,27 @@ that use the API provided by core.
 		}
 	},
 
+	/*
+	Init all animation steps in a antichronological order.
+	*/
+	initCurrentSlideAnimations = function() {
+		if (countLoading != 0) return;
+		var slide = methods.getSlide(current);
+		if (slide && slide.data('animations')) {
+			var animations = slide.data('animations');
+			for (ia in animations) {
+				var animation = animations[animations.length - 1 - ia];
+				if ($.isArray(animation)) {
+					$(animation).each(function() {
+						if (this.initAnimation) this.initAnimation();
+					});
+				} else {
+					if (animation.initAnimation) animation.initAnimation();
+				}
+			}
+		}
+	},
+
 	/* Methods exposed in the jQuery.deck namespace */
 	methods = {
 
@@ -150,6 +179,7 @@ that use the API provided by core.
 			options = $.extend(true, {}, $[deck].defaults, opts);
 			slides = [];
 			current = 0;
+			currentStep = 0;
 			$container = $(options.selectors.container);
 			tolerance = options.touch.swipeTolerance;
 
@@ -171,16 +201,33 @@ that use the API provided by core.
 				});
 			}
 
+			/* Handle the animation core module */
+			$.each(slides, function(i, slide) {
+				slide.find("pre.animate").each(function(index) {
+					eval("___f___ = "+$(this).text());
+					___f___(slide);
+				});
+			});
+
+
 			/* Remove any previous bindings, and rebind key events */
 			$d.unbind('keydown.deck').bind('keydown.deck', function(e) {
 				if (e.which === options.keys.next || $.inArray(e.which, options.keys.next) > -1) {
 					methods.next();
 					e.preventDefault();
 				}
+				else if (e.which === options.keys.stepNext || $.inArray(e.which, options.keys.stepNext) > -1) {
+					methods.stepNext();
+					e.preventDefault();
+				}
 				else if (e.which === options.keys.previous || $.inArray(e.which, options.keys.previous) > -1) {
 					methods.prev();
 					e.preventDefault();
 				}
+				else if (e.which === options.keys.stepPrevious || $.inArray(e.which, options.keys.stepPrevious) > -1) {
+					methods.stepPrev();
+					e.preventDefault();
+				}
 			});
 
 			/* Bind touch events for swiping between slides on touch devices */
@@ -233,13 +280,15 @@ that use the API provided by core.
 				});
 			});
 
+			methods.addLoading();
 			if (slides.length) {
 				updateStates();
 			}
 
 			// Show deck again now that slides are in place
 			$container.removeClass(options.classes.loading);
 			$d.trigger(events.initialize);
+			methods.removeLoading();
 		},
 
 		/*
@@ -253,6 +302,7 @@ that use the API provided by core.
 		of bounds or doesn't match a slide id the call is ignored.
 		*/
 		go: function(index) {
+			currentStep = 0;
 			var e = $.Event(events.change),
 			ndx;
 
@@ -281,6 +331,26 @@ that use the API provided by core.
 			else {
 				current = ndx;
 				updateStates();
+				initCurrentSlideAnimations();
+			}
+		},
+
+		addLoading: function () {countLoading++;},
+		removeLoading: function () {countLoading--; if (countLoading == 0) initCurrentSlideAnimations()},
+
+		/*
+		Allows a slide to add some animation to itself (html animation, svg
+		animation, video start/stop, etc).
+		*/
+		addAnimation: function(slide, animation) {
+			if (!slide.data('animations')) {
+				slide.data('animations', new Array());
+			}
+			slide.data('animations').push(animation);
+		},
+		addAnimationSequence: function(slide, animations) {
+			for (ia in animations) {
+				methods.addAnimation(slide, animations[ia]);
 			}
 		},
 
@@ -294,6 +364,73 @@ that use the API provided by core.
 			methods.go(current+1);
 		},
 
+		/*
+		jQuery.deck('stepNext')
+
+		Does the next slide animation or moves to the next slide if animations are finished.
+		*/
+		stepNext: function() {
+			var slide = methods.getSlide(current);
+			if (slide.data('animations')) {
+				var animations = slide.data('animations');
+				if (currentStep < animations.length) {
+					var animation = animations[currentStep];
+					currentStep++;
+					if ($.isArray(animation)) {
+						$(animation).each(function() {
+							if (this.doAnimation) this.doAnimation();
+						});
+					} else {
+						if (animation.doAnimation) animation.doAnimation();
+					}
+					$(document).trigger(events.step, [1]);
+				} else {
+					methods.next();
+				}
+			} else {
+				methods.next();
+			}
+		},
+
+		/*
+		jQuery.deck('stepPrev')
+
+		Undoes the last animation or moves to the previous slide if no animations have been played in this slide.
+		*/
+		prev: function() {
+			methods.go(current-1);
+		},
+
+		/*
+		jQuery.deck('stepPrev')
+
+		Undoes the last animation or moves to the previous slide if no animations have been played in this slide.
+		*/
+		stepPrev: function() {
+			var slide = methods.getSlide(current);
+			if (slide.data('animations')) {
+				var animations = slide.data('animations');
+				if (currentStep > 0) {
+					currentStep--;
+					var animation = animations[currentStep];
+					if ($.isArray(animation)) {
+						var revAnimation = $(animation).get().reverse();
+						for (var iAnim in revAnimation) {
+							var anim = revAnimation[iAnim];
+							if (anim.undoAnimation) anim.undoAnimation();
+						}
+					} else {
+						if (animation.undoAnimation) animation.undoAnimation();
+					}
+					$(document).trigger(events.step, [-1]);
+				} else {
+					methods.prev();
+				}
+			} else {
+				methods.prev();
+			}
+		},
+
 		/*
 		jQuery.deck('prev')
 
@@ -428,9 +565,15 @@ that use the API provided by core.
 	options.keys.next
 		The numeric keycode used to go to the next slide.
 
+	options.keys.stepNext
+		The numeric keycode used to do the next animation.
+
 	options.keys.previous
 		The numeric keycode used to go to the previous slide.
 
+	options.keys.stepPrevious
+		The numeric keycode used to undo the previous animation.
+
 	options.touch.swipeTolerance
 		The number of pixels the users finger must travel to produce a swipe
 		gesture.
@@ -452,10 +595,14 @@ that use the API provided by core.
 		},
 
 		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]
+			// enter, space, right arrow,
+			stepNext: [13, 32, 39],
+			// page down, down arrow,
+			next: [34, 40],
+			// backspace, left arrow
+			stepPrevious: [8, 37],
+			// page up, up arrow
+			previous: [33, 38]
 		},
 
 		touch: {

core/deck.core.scss

@@ -29,6 +29,9 @@ body.deck-container {
 		-moz-text-size-adjust:none;
 	}
 
+	pre.animate {visibility: hidden;}
+	pre.animate.showAnyway {visibility: visible;}
+
 	/* Resets and base styles from HTML5 Boilerplate */
 	div, span, object, iframe,
 	h1, h2, h3, h4, h5, h6, p, blockquote, pre,