Commit 49e8e0d2 authored by Hakim El Hattab's avatar Hakim El Hattab
Browse files

rewrote initialization code for clarity and brevity (#105)

parent 1ba1ca1c
......@@ -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 @@ function linkify( selector ) {
</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>
......
/*!
* 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,12 +96,10 @@ 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
......@@ -109,11 +107,14 @@ var Reveal = (function(){
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' );
......@@ -121,21 +122,9 @@ var Reveal = (function(){
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';
......
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment