HTML5 Slideshow in Coffeescript / JS

main.coffee

############################
###   Global Variables   ###
############################

slides = []
curSlideIndex = 0

window.blockedIO = false

############################
###  gotoSlide function  ###
############################

gotoSlide = (newIndex, oldIndex) ->
    
    # Sanitize the index #
    newIndex = 0 if newIndex < 0
    newIndex = slides.length - 1 if newIndex >= slides.length
    
    # Set the new index to be "current" #
    curSlideIndex = newIndex
    
    # Stop all animations and scrollings #
    $(slides[newIndex]).stop true, true
    $(slides[oldIndex]).stop true, true if oldindex?
    $("slideshow").stop      true, true
    
    # Fade out/in the old and new slides #
    $(slides[newIndex]).animate { opacity: "1" }, 1500
    $(slides[oldIndex]).animate { opacity: "0" }, 200 if oldIndex?
    
    # Scroll to the new slide #
    $("slideshow").scrollTo slides[newIndex], 1000, { easing: 'easeOutCubic' }
    
    # Update the URL #
    window.location.hash = "#" + (newIndex + 1)
    
    # Update counter #
    $("counter").html (newIndex + 1);
    
    # Find if there's javascript to execute and "eval" it #
    $(slides[newIndex]).find("javascript").each (index, element) ->
        eval element.innerHTML
    
    true

############################
### EntryPoint  (onLoad) ###
############################

$(document).ready () ->
    
    # Store all slides in a global array #
    slides = document.getElementsByTagName "slide"
    
    # Get anchor url id if specified #
    startSlide = parseInt(window.location.hash.replace("#", ""), 10)
    
    # Setup counter #
    $("footer").html "<counter></counter> / " + slides.length
    
    # Set start slide if specified otherwise go to Slide 0 #
    curSlideIndex = if isNaN(startSlide) then 0 else (startSlide - 1)
    gotoSlide curSlideIndex
    
    true

############################
### On KeyPress Callback ###
############################

$(document).keyup (event) ->
    
    return if window.blockedIO
    
    switch event.keyCode
        
        # Up / Left (Previous Slide) #
        when 37, 38
            break unless curSlideIndex > 0
            gotoSlide (curSlideIndex - 1), curSlideIndex
        
        # Right / Down (Next Slide) #
        when 39, 40
            break unless curSlideIndex < slides.length - 1
            gotoSlide (curSlideIndex + 1), curSlideIndex
        
        # F Key (Fullscreen) #
        when 70
            break if event.target isnt document.body or (event.shiftKey and event.metaKey)
                
            # Request Fullscreen on Firefox #
            document.mozFullScreen?(true) if document.mozFullScreen isnt on
                
            # Request Fullscreen on Chrome/Safari (webkit) #
            document.body.webkitRequestFullScreen?(true) if document.webkitRequestFullScreen isnt on
            
            # Exit fullscreen if we were already on it #
            document.cancelFullScreen() unless document.mozFullScreen isnt on or document.webkitRequestFullScreen isnt on
            
    true

main.js

// Generated by CoffeeScript 1.3.3

/*   Global Variables
*/


(function() {
  var curSlideIndex, gotoSlide, slides;

  slides = [];

  curSlideIndex = 0;

  window.blockedIO = false;

  /*  gotoSlide function
  */


  gotoSlide = function(newIndex, oldIndex) {
    if (newIndex < 0) {
      newIndex = 0;
    }
    if (newIndex >= slides.length) {
      newIndex = slides.length - 1;
    }
    curSlideIndex = newIndex;
    $(slides[newIndex]).stop(true, true);
    if (typeof oldindex !== "undefined" && oldindex !== null) {
      $(slides[oldIndex]).stop(true, true);
    }
    $("slideshow").stop(true, true);
    $(slides[newIndex]).animate({
      opacity: "1"
    }, 1500);
    if (oldIndex != null) {
      $(slides[oldIndex]).animate({
        opacity: "0"
      }, 200);
    }
    $("slideshow").scrollTo(slides[newIndex], 1000, {
      easing: 'easeOutCubic'
    });
    window.location.hash = "#" + (newIndex + 1);
    $("counter").html(newIndex + 1);
    $(slides[newIndex]).find("javascript").each(function(index, element) {
      return eval(element.innerHTML);
    });
    return true;
  };

  /* EntryPoint  (onLoad)
  */


  $(document).ready(function() {
    var startSlide;
    slides = document.getElementsByTagName("slide");
    startSlide = parseInt(window.location.hash.replace("#", ""), 10);
    $("footer").html("<counter></counter> / " + slides.length);
    curSlideIndex = isNaN(startSlide) ? 0 : startSlide - 1;
    gotoSlide(curSlideIndex);
    return true;
  });

  /* On KeyPress Callback
  */


  $(document).keyup(function(event) {
    var _base;
    if (window.blockedIO) {
      return;
    }
    switch (event.keyCode) {
      case 37:
      case 38:
        if (!(curSlideIndex > 0)) {
          break;
        }
        gotoSlide(curSlideIndex - 1, curSlideIndex);
        break;
      case 39:
      case 40:
        if (!(curSlideIndex < slides.length - 1)) {
          break;
        }
        gotoSlide(curSlideIndex + 1, curSlideIndex);
        break;
      case 70:
        if (event.target !== document.body || (event.shiftKey && event.metaKey)) {
          break;
        }
        if (document.mozFullScreen !== true) {
          if (typeof document.mozFullScreen === "function") {
            document.mozFullScreen(true);
          }
        }
        if (document.webkitRequestFullScreen !== true) {
          if (typeof (_base = document.body).webkitRequestFullScreen === "function") {
            _base.webkitRequestFullScreen(true);
          }
        }
        if (!(document.mozFullScreen !== true || document.webkitRequestFullScreen !== true)) {
          document.cancelFullScreen();
        }
    }
    return true;
  });

}).call(this);