Created
October 7, 2012 14:32
-
-
Save Hamcha/3848546 to your computer and use it in GitHub Desktop.
HTML5 Slideshow in Coffeescript / JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
############################ | |
### 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment