added experimental overview mode (press SPACE)

diff --git a/css/main.css b/css/main.css
index 1effe171e631249c75418300980e17928f9a071f..339889a573f1d8c8d1141418609351b68da93a77 100644 (file)
--- 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 c7e6e7ab9426bebdd9ebd4df6c3f9008371ea9d1..ad835bb4ac61ef07e9871dd6eb779b592f146dc4 100644 (file)
--- a/index.html
+++ b/index.html
@@ -69,6 +69,17 @@
                                        </a>
                                </section>
                        </section>
+
+                       <section>
+                               <h2>Holistic Overview</h2>
+                               <p>
+                                       Press <em>SPACE</em> to enter the slide overview. This allows you to navigate faster 
+                                       in larger decks using the keyboard.
+                               </p>
+                               <p>
+                                       This feature is highly experimental and will be updated to boost performance.
+                               </p>
+                       </section>
                                
                        <section>
                                <h2>Marvelous Unordered List</h2>

diff --git a/js/reveal.js b/js/reveal.js
index 01c7e8f5d47e79afbfee90ba3df0a0a854949289..ae3106f3dc95937444c7b897e964b940efbaf28b 100644 (file)
--- 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();