From c6a75117f6ed87298890199b9c4759c7922876d3 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Fri, 23 Dec 2011 02:47:38 -0800 Subject: [PATCH] added experimental overview mode (press SPACE) --- css/main.css | 19 ++++++++ index.html | 11 +++++ js/reveal.js | 128 +++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 143 insertions(+), 15 deletions(-) diff --git a/css/main.css b/css/main.css index 1effe171..339889a5 100644 --- a/css/main.css +++ b/css/main.css @@ -261,6 +261,25 @@ h1 { } +.overview #main section { + padding: 20px; + opacity: 1; + cursor: pointer; + background: rgba(0,0,0,0.1); +} +.overview #main section>section { + opacity: 1; + cursor: pointer; +} + .overview #main>section:hover { + background: rgba(0,0,0,0.3); + } + + .overview #main>section.present { + background: rgba(0,0,0,0.3); + } + + /********************************************* * VIEW FRAGMENTS *********************************************/ diff --git a/index.html b/index.html index c7e6e7ab..ad835bb4 100644 --- a/index.html +++ b/index.html @@ -69,6 +69,17 @@ + +
+

Holistic Overview

+

+ Press SPACE to enter the slide overview. This allows you to navigate faster + in larger decks using the keyboard. +

+

+ This feature is highly experimental and will be updated to boost performance. +

+

Marvelous Unordered List

diff --git a/js/reveal.js b/js/reveal.js index 01c7e8f5..ae3106f3 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -117,6 +117,8 @@ var Reveal = (function(){ dom.controlsUp.addEventListener('click', preventAndForward( navigateUp ), false); dom.controlsDown.addEventListener('click', preventAndForward( navigateDown ), false); + + // Fall back on default options config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks; config.controls = options.controls === undefined ? false : options.controls; @@ -173,19 +175,30 @@ var Reveal = (function(){ // FFT: Use document.querySelector( ':focus' ) === null // instead of checking contentEditable? - if( event.keyCode >= 37 && event.keyCode <= 40 && event.target.contentEditable === 'inherit' ) { - - switch( event.keyCode ) { - case 37: navigateLeft(); break; // left - case 39: navigateRight(); break; // right - case 38: navigateUp(); break; // up - case 40: navigateDown(); break; // down + if( event.target.contentEditable === 'inherit' ) { + if( event.keyCode >= 37 && event.keyCode <= 40 ) { + + switch( event.keyCode ) { + case 37: navigateLeft(); break; // left + case 39: navigateRight(); break; // right + case 38: navigateUp(); break; // up + case 40: navigateDown(); break; // down + } + + slide(); + + event.preventDefault(); + + } + // Space bar + else if ( event.keyCode === 32 && supports3DTransforms ) { + if( overviewIsActive() ) { + deactivateOverview(); + } + else { + activateOverview(); + } } - - slide(); - - event.preventDefault(); - } } @@ -251,8 +264,6 @@ var Reveal = (function(){ * Wrap all links in 3D goodness. */ function linkify() { - - if( supports3DTransforms ) { var nodes = document.querySelectorAll( 'section a:not(.image)' ); @@ -266,7 +277,89 @@ var Reveal = (function(){ }; } } + + /** + * Displays the overview of slides (quick nav) by + * scaling down and arranging all slide elements. + * + * Experimental feature, might be dropped if perf + * can't be improved. + */ + function activateOverview() { + var horizontalSlides = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); + + document.body.classList.add( 'overview' ); + + for( var i = 0, len = horizontalSlides.length; i < len; i++ ) { + var hslide = horizontalSlides[i], + htransform = 'translateZ(-2500px) translate(' + ( ( i - indexh ) * 105 ) + '%, 0%)'; + + hslide.setAttribute( 'data-index-h', i ); + hslide.style.display = 'block'; + hslide.style.WebkitTransform = htransform; + hslide.style.MozTransform = htransform; + hslide.style.msTransform = htransform; + hslide.style.OTransform = htransform; + hslide.style.transform = htransform; + + hslide.addEventListener( 'click', onOverviewSlideClicked, true ); + + var verticalSlides = Array.prototype.slice.call( hslide.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '>section' ) ); + + for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) { + var vslide = verticalSlides[j], + vtransform = 'translateZ(0px) translate(0%, ' + ( ( j - indexv ) * 105 ) + '%)'; + + hslide.setAttribute( 'data-index-v', j ); + vslide.style.display = 'block'; + vslide.style.WebkitTransform = vtransform; + vslide.style.MozTransform = vtransform; + vslide.style.msTransform = vtransform; + vslide.style.OTransform = vtransform; + vslide.style.transform = vtransform; + + hslide.addEventListener( 'click', onOverviewSlideClicked, true ); + } + } + } + function deactivateOverview() { + var slides = Array.prototype.slice.call( document.querySelectorAll( '#main section' ) ); + + document.body.classList.remove( 'overview' ); + + for( var i = 0, len = slides.length; i < len; i++ ) { + var element = slides[i]; + + element.style.WebkitTransform = ''; + element.style.MozTransform = ''; + element.style.msTransform = ''; + element.style.OTransform = ''; + element.style.transform = ''; + + element.removeEventListener( 'click', onOverviewSlideClicked ); + } + + slide(); + } + + function overviewIsActive() { + return document.body.classList.contains( 'overview' ); + } + + function onOverviewSlideClicked( event ) { + if( overviewIsActive() ) { + event.preventDefault(); + + deactivateOverview(); + + indexh = this.getAttribute( 'data-index-h' ); + indexv = this.getAttribute( 'data-index-v' ); + + slide(); + } + } + /** * Updates one dimension of slides by showing the slide * with the specified index. @@ -297,7 +390,7 @@ var Reveal = (function(){ // Optimization; hide all slides that are three or more steps // away from the present slide - slide.style.display = Math.abs( index - i ) > 3 ? 'none' : 'block'; + // slide.style.display = Math.abs( index - i ) > 3 ? 'none' : 'block'; if( i < index ) { // Any element previous to index is given the 'past' class @@ -332,6 +425,11 @@ var Reveal = (function(){ dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px'; } + // Close the overview if it's active + if( overviewIsActive() ) { + activateOverview(); + } + updateControls(); writeURL();