Browse Source

rewrote initialization code for clarity and brevity (#105)

Hakim El Hattab 11 năm trước cách đây
mục cha
commit
49e8e0d205
3 tập tin đã thay đổi với 108 bổ sung83 xóa
  1. 24 58
      index.html
  2. 83 24
      js/reveal.js
  3. 1 1
      js/reveal.min.js

+ 24 - 58
index.html

@@ -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>
 

+ 83 - 24
js/reveal.js

@@ -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,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';

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1 - 1
js/reveal.min.js


Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác