Quellcode durchsuchen

progress bar can now be clicked to navigate (closes #181)

Hakim El Hattab vor 12 Jahren
Ursprung
Commit
3241cb78d8
3 geänderte Dateien mit 39 neuen und 10 gelöschten Zeilen
  1. 13 5
      css/reveal.css
  2. 25 4
      js/reveal.js
  3. 1 1
      js/reveal.min.js

+ 13 - 5
css/reveal.css

@@ -253,12 +253,12 @@ body {
 .reveal .controls {
 	display: none;
 	position: fixed;
-	width: 100px;
-	height: 100px;
+	width: 90px;
+	height: 90px;
 	z-index: 30;
 
-	right: 0;
-	bottom: 0;
+	right: 10px;
+	bottom: 10px;
 }
 	
 	.reveal .controls a {
@@ -304,8 +304,16 @@ body {
 	width: 100%;
 	bottom: 0;
 	left: 0;
+	z-index: 10;
 }
-	
+	.reveal .progress:after {
+		content: '';
+		display: 'block';
+		position: absolute;
+		height: 20px;
+		width: 100%;
+		top: -20px;
+	}
 	.reveal .progress span {
 		display: block;
 		height: 100%;

+ 25 - 4
js/reveal.js

@@ -1,5 +1,5 @@
 /*!
- * reveal.js 2.1 r34
+ * reveal.js 2.1 r35
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  * 
@@ -332,6 +332,10 @@ var Reveal = (function(){
 			document.addEventListener( 'keydown', onDocumentKeyDown, false );
 		}
 
+		if ( config.progress && dom.progress ) {
+			dom.progress.addEventListener( 'click', preventAndForward( onProgressClick ), false );
+		}
+
 		if ( config.controls && dom.controls ) {
 			dom.controlsLeft.addEventListener( 'click', preventAndForward( navigateLeft ), false );
 			dom.controlsRight.addEventListener( 'click', preventAndForward( navigateRight ), false );
@@ -349,6 +353,10 @@ var Reveal = (function(){
 		document.removeEventListener( 'touchmove', onDocumentTouchMove, false );
 		document.removeEventListener( 'touchend', onDocumentTouchEnd, false );
 		window.removeEventListener( 'hashchange', onWindowHashChange, false );
+
+		if ( config.progress && dom.progress ) {
+			dom.progress.removeEventListener( 'click', preventAndForward( onProgressClick ), false );
+		}
 		
 		if ( config.controls && dom.controls ) {
 			dom.controlsLeft.removeEventListener( 'click', preventAndForward( navigateLeft ), false );
@@ -392,7 +400,7 @@ var Reveal = (function(){
 	function preventAndForward( delegate ) {
 		return function( event ) {
 			event.preventDefault();
-			delegate.call();
+			delegate.call( null, event );
 		};
 	}
 
@@ -1234,8 +1242,8 @@ var Reveal = (function(){
 	}
 
 	/**
-	 * Handles mouse wheel scrolling, throttled to avoid 
-	 * skipping multiple slides.
+	 * Handles mouse wheel scrolling, throttled to avoid skipping 
+	 * multiple slides.
 	 */
 	function onDocumentMouseScroll( event ){
 		clearTimeout( mouseWheelTimeout );
@@ -1250,6 +1258,19 @@ var Reveal = (function(){
 			}
 		}, 100 );
 	}
+
+	/**
+	 * Clicking on the progress bar results in a navigation to the 
+	 * closest approximate horizontal slide using this equation:
+	 *
+	 * ( clickX / presentationWidth ) * numberOfSlides
+	 */
+	function onProgressClick( event ) {
+		var slidesTotal = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ).length;
+		var slideIndex = Math.floor( ( event.clientX / dom.wrapper.offsetWidth ) * slidesTotal );
+
+		slide( slideIndex );
+	}
 	
 	/**
 	 * Handler for the window level 'hashchange' event.

Datei-Diff unterdrückt, da er zu groß ist
+ 1 - 1
js/reveal.min.js


Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.