phyks/reveal-js-base-theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added experimental overview mode (press SPACE)

Browse Source
This commit is contained in:
Hakim El Hattab 2011-12-23 02:47:38 -08:00
parent adc9ad19ce
commit c6a75117f6
3 changed files with 143 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/main.css
View File

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

11
index.html
View File

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

128
js/reveal.js
View File

@ -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();