Permalink
Browse files

rewrote initialization code for clarity and brevity (#105)

  • Loading branch information...
1 parent 1ba1ca1 commit 49e8e0d205dad7ad60d3eb060787a67b197ba1d1 @hakimel committed Aug 12, 2012
Showing with 169 additions and 142 deletions.
  1. +24 −58 index.html
  2. +83 −24 js/reveal.js
  3. +62 −60 js/reveal.min.js
View
@@ -4,7 +4,7 @@
<head>
<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="author" content="Hakim El Hattab">
@@ -21,9 +21,8 @@
<link rel="stylesheet" href="lib/css/zenburn.css">
<script>
- // 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/' + printStyle + '.css" type="text/css" media="print">' );
+ // If the query includes 'print-pdf' we'll use the PDF print sheet
+ document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<!--[if lt IE 9]>
@@ -283,62 +282,29 @@ <h3>BY Hakim El Hattab / hakim.se</h3>
</div>
<script src="lib/js/head.min.js"></script>
+ <script src="js/reveal.min.js"></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:
- // https://github.com/hakimel/reveal.js#configuration
- Reveal.initialize({
- controls: true,
- progress: true,
- history: true,
-
- transition: Reveal.getQueryHash().transition || 'default' // default/cube/page/concave/linear(2d)
- });
-
- // 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 );
+
+ // Full list of configuration options available here:
+ // https://github.com/hakimel/reveal.js#configuration
+ Reveal.initialize({
+ controls: true,
+ progress: true,
+ history: true,
+
+ 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'; } },
+ ]
+ });
</script>
View
@@ -1,5 +1,5 @@
/*!
- * reveal.js 2.0 r17
+ * reveal.js 2.0 r18
* http://lab.hakim.se/reveal-js
* MIT licensed
*
@@ -40,7 +40,10 @@ var Reveal = (function(){
rollingLinks: true,
// 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
@@ -71,9 +74,6 @@ var Reveal = (function(){
'msTransform' in document.body.style ||
'OTransform' in document.body.style ||
'transform' in document.body.style,
-
- // Detect support for elem.classList
- supportsClassList = !!document.body.classList;
// Throttles mouse wheel navigation
mouseWheelTimeout = 0,
@@ -96,46 +96,35 @@ var Reveal = (function(){
/**
- * Starts up the slideshow by applying configuration
- * options and binding various events.
+ * Starts up the presentation if the client is capable.
*/
function initialize( options ) {
-
- if( ( !supports2DTransforms && !supports3DTransforms ) || !supportsClassList ) {
+ if( ( !supports2DTransforms && !supports3DTransforms ) ) {
document.body.setAttribute( 'class', 'no-transforms' );
// If the browser doesn't support core features we won't be
// using JavaScript to control the presentation
return;
}
+ // Copy options over to our config object
+ extend( config, options );
+
// Cache references to DOM elements
dom.wrapper = document.querySelector( '.reveal' );
dom.progress = document.querySelector( '.reveal .progress' );
dom.progressbar = document.querySelector( '.reveal .progress span' );
-
+
if ( config.controls ) {
dom.controls = document.querySelector( '.reveal .controls' );
dom.controlsLeft = document.querySelector( '.reveal .controls .left' );
dom.controlsRight = document.querySelector( '.reveal .controls .right' );
dom.controlsUp = document.querySelector( '.reveal .controls .up' );
dom.controlsDown = document.querySelector( '.reveal .controls .down' );
}
-
- // Copy options over to our config object
- extend( config, options );
-
- // 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();
+ // Loads the dependencies and continues to #start() once done
+ load();
// Set up hiding of the browser address bar
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() {
if( supports3DTransforms === false ) {
config.transition = 'linear';
Oops, something went wrong.

0 comments on commit 49e8e0d

Please sign in to comment.