rewrote initialization code for clarity and brevity (#105)

This commit is contained in:
Hakim El Hattab 2012-08-11 20:25:55 -04:00
parent 1ba1ca1cf3
commit 49e8e0d205
3 changed files with 168 additions and 141 deletions

View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>reveal.js - HTML5 Presentations</title> <title>reveal.js - The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML"> <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab"> <meta name="author" content="Hakim El Hattab">
@ -21,9 +21,8 @@
<link rel="stylesheet" href="lib/css/zenburn.css"> <link rel="stylesheet" href="lib/css/zenburn.css">
<script> <script>
// If the query includes print-pdf we'll use the PDF print sheet // If the query includes 'print-pdf' we'll use the PDF print sheet
var printStyle = window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper'; document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
document.write( '<link rel="stylesheet" href="css/print/' + printStyle + '.css" type="text/css" media="print">' );
</script> </script>
<!--[if lt IE 9]> <!--[if lt IE 9]>
@ -283,19 +282,9 @@ function linkify( selector ) {
</div> </div>
<script src="lib/js/head.min.js"></script> <script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script> <script>
head.ready( function() {
// Fires when a slide with data-state=customevent is activated
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
// Fires each time a new slide is activated
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );
// Full list of configuration options available here: // Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration // https://github.com/hakimel/reveal.js#configuration
@ -304,42 +293,19 @@ function linkify( selector ) {
progress: true, progress: true,
history: true, history: true,
transition: Reveal.getQueryHash().transition || 'default' // default/cube/page/concave/linear(2d) transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/linear(2d)
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/highlight.js', async: true, callback: function() { window.hljs.initHighlightingOnLoad(); } },
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'lib/js/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'lib/js/data-markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'socket.io/socket.io.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
{ src: 'plugin/speakernotes/client.js', async: true, condition: function() { return window.location.host === 'localhost:1947'; } },
]
}); });
// Load highlight.js for syntax highlighting of code samples
head.js( 'lib/js/highlight.js', function() {
hljs.initHighlightingOnLoad();
} );
} );
// Scripts that should be loaded before initializing
var scripts = [];
// If the browser doesn't support classList, load a polyfill
if( !document.body.classList ) {
head.js( 'lib/js/classList.js' );
}
// Load markdown parser if there are slides defined using markdown
if( document.querySelector( '[data-markdown]' ) ) {
scripts.push( 'lib/js/showdown.js' );
scripts.push( 'lib/js/data-markdown.js' );
}
scripts.push( 'js/reveal.min.js' );
// If we're runnning the notes server we need to include some additional JS
// TODO Is there a better way to determine if we're running the notes server?
if( window.location.host === 'localhost:1947' ) {
scripts.push( 'socket.io/socket.io.js' );
scripts.push( 'plugin/speakernotes/client.js' );
}
// Load the scripts and, when completed, initialize reveal.js
head.js.apply( null, scripts );
</script> </script>
</body> </body>

View File

@ -1,5 +1,5 @@
/*! /*!
* reveal.js 2.0 r17 * reveal.js 2.0 r18
* http://lab.hakim.se/reveal-js * http://lab.hakim.se/reveal-js
* MIT licensed * MIT licensed
* *
@ -40,7 +40,10 @@ var Reveal = (function(){
rollingLinks: true, rollingLinks: true,
// Transition style // Transition style
transition: 'default' // default/cube/page/concave/linear(2d) transition: 'default', // default/cube/page/concave/linear(2d),
// Script dependencies to load
dependencies: []
}, },
// The horizontal and verical index of the currently active slide // The horizontal and verical index of the currently active slide
@ -72,9 +75,6 @@ var Reveal = (function(){
'OTransform' in document.body.style || 'OTransform' in document.body.style ||
'transform' in document.body.style, 'transform' in document.body.style,
// Detect support for elem.classList
supportsClassList = !!document.body.classList;
// Throttles mouse wheel navigation // Throttles mouse wheel navigation
mouseWheelTimeout = 0, mouseWheelTimeout = 0,
@ -96,12 +96,10 @@ var Reveal = (function(){
/** /**
* Starts up the slideshow by applying configuration * Starts up the presentation if the client is capable.
* options and binding various events.
*/ */
function initialize( options ) { function initialize( options ) {
if( ( !supports2DTransforms && !supports3DTransforms ) ) {
if( ( !supports2DTransforms && !supports3DTransforms ) || !supportsClassList ) {
document.body.setAttribute( 'class', 'no-transforms' ); document.body.setAttribute( 'class', 'no-transforms' );
// If the browser doesn't support core features we won't be // If the browser doesn't support core features we won't be
@ -109,6 +107,9 @@ var Reveal = (function(){
return; return;
} }
// Copy options over to our config object
extend( config, options );
// Cache references to DOM elements // Cache references to DOM elements
dom.wrapper = document.querySelector( '.reveal' ); dom.wrapper = document.querySelector( '.reveal' );
dom.progress = document.querySelector( '.reveal .progress' ); dom.progress = document.querySelector( '.reveal .progress' );
@ -122,20 +123,8 @@ var Reveal = (function(){
dom.controlsDown = document.querySelector( '.reveal .controls .down' ); dom.controlsDown = document.querySelector( '.reveal .controls .down' );
} }
// Copy options over to our config object // Loads the dependencies and continues to #start() once done
extend( config, options ); load();
// Subscribe to input
addEventListeners();
// Updates the presentation to match the current configuration values
configure();
// Read the initial hash
readURL();
// Start auto-sliding if it's enabled
cueAutoSlide();
// Set up hiding of the browser address bar // Set up hiding of the browser address bar
if( navigator.userAgent.match( /(iphone|ipod|android)/i ) ) { if( navigator.userAgent.match( /(iphone|ipod|android)/i ) ) {
@ -150,6 +139,76 @@ var Reveal = (function(){
} }
/**
* Loads the dependencies of reveal.js. Dependencies are
* defined via the configuration option 'dependencies'
* and will be loaded prior to starting/binding reveal.js.
* Some dependencies may have an 'async' flag, if so they
* will load after reveal.js has been started up.
*/
function load() {
var scripts = [],
scriptsAsync = [];
for( var i = 0, len = config.dependencies.length; i < len; i++ ) {
var s = config.dependencies[i];
// Load if there's no condition or the condition is truthy
if( !s.condition || s.condition() ) {
if( s.async ) {
scriptsAsync.push( s.src );
}
else {
scripts.push( s.src );
}
// Extension may contain callback functions
if( typeof s.callback === 'function' ) {
head.ready( s.src.match( /([\w\d_-]*)\.?[^\\\/]*$/i )[0], s.callback );
}
}
}
// Called once synchronous scritps finish loading
function proceed() {
// Load asynchronous scripts
head.js.apply( null, scriptsAsync );
start();
}
if( scripts.length ) {
head.ready( proceed );
// Load synchronous scripts
head.js.apply( null, scripts );
}
else {
proceed();
}
}
/**
* Starts up reveal.js by binding input events and navigating
* to the current URL deeplink if there is one.
*/
function start() {
// Subscribe to input
addEventListeners();
// Updates the presentation to match the current configuration values
configure();
// Read the initial hash
readURL();
// Start auto-sliding if it's enabled
cueAutoSlide();
}
/**
* Applies the configuration settings from the config object.
*/
function configure() { function configure() {
if( supports3DTransforms === false ) { if( supports3DTransforms === false ) {
config.transition = 'linear'; config.transition = 'linear';

122
js/reveal.min.js vendored

File diff suppressed because one or more lines are too long