imakewebthings

(function($, window, undefined) {
	/* Let's say we want to completely override the template and adapter
	for the webpage type. Simple enough, just get the type and set each of
	those proeprties to new values. */
	var webpage = window.StackView.get_types().webpage;
	webpage.template = '<li><%= id %></li>';
	webpage.adapter = function(item, options) {
		return {
			id: item.id
		}

imakewebthings

(function($, window, undefined) {
  /*
     First we extend the defaults for the StackView options object.
     This is a common pattern in all the modules, (infinite, navigation),
     that each module extends the defaults to deal with the options that
     pertain to its own code.
  */
  $.extend(true, window.StackView.defaults, {
    selectors: {
      /* Our types only have this one extension, a selector that points to

imakewebthings

/*
  This is the same principle used in a previous gist: https://gist.github.com/1955854
  In this case, we use blank elements in the slide to provide an animation "step."
  The presenter explicitly hits next/prev to reveal and unravel the animation instead
  of it happening automatically when the slide is made current and leaves the screen.

  The HTML structure be:

  <section class="slide">
    <p>Some normal slide content...</p>

imakewebthings

$(document).bind('deck.change', function(event, from, to) {
  var $entering = $.deck('getSlide', to);
      $leaving = $.deck('getSlide', from);

  if ($entering.hasClass('animation')) {
    // Do what you need to do to start animation inside currentSlide
  }

  if ($leaving.hasClass('animation')) {
    // Do what you need to do to stop animation, if anything

imakewebthings

<div class="slide">
  <pre><code>var x = 5;
x * x; => <span class="reveal"><span class="first">???...</span><span class="second">25</span></span></code></pre>
</div>

<style>
.reveal {
  -webkit-transform:none !important;
  -moz-transform:none !important;
  -o-transform:none !important;

imakewebthings

/* Plays all audio elements inside a slide when the slide becomes active
   and pauses them when the user navigates away.  Replace pause with
   whatever functionality desired (maybe pause and set currentTime to 0?) */
$(document).bind('deck.change', function(e, from, to) {
  $.deck('getSlide', from).find('audio').each(function() {
    this.pause && this.pause();
  });
  $.deck('getSlide', to).find('audio').each(function() {
    this.play && this.play();
  });

imakewebthings

/* How one might go about removing (and restoring) deck.js from a page */

$(function() {
  /* Give all the link tags pointing to deck related CSS files a class (.deck-css here) */
  var $deckStyles = $('.deck-css');

  /* Store their hrefs for later */
  $deckStyles.each(function() {
    $(this).data('href', this.href);
  });

imakewebthings

<script>
(function($, deck, undefined) {
	var $d = $(document),
	
	toggleHorizon = function(base, fn) {
		var slides = $[deck]('getSlides'),
		opts = $[deck]('getOptions'),
		min = base - opts.horizon,
		max = base + opts.horizon,
		i;

imakewebthings

$(document).ready(function() {
   $.waypoints.settings.scrollThrottle = 30;
   $('#main').waypoint(function(event, direction){
      /* Just as we have a sticky class applied when we hit the top waypoint,
      we'll have a different class applied when we bottom out */
      if (direction === 'down') {
         $(this).removeClass('sticky').addClass('bottomed');
      }
      else {
         $(this).removeClass('bottomed').addClass('sticky');

imakewebthings

$(document).bind('deck.change', function(e, from, to) {
   var osp = $.deck('getOptions').classes.onPrefix;

   $.deck('getContainer')
      .removeClass(osp + $.deck('getSlide', from).attr('id'))
      .addClass(osp + $.deck('getSlide', to).attr('id'));
});