added experimental overview mode (press SPACE)
This commit is contained in:
parent
adc9ad19ce
commit
c6a75117f6
19
css/main.css
19
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
|
||||
*********************************************/
|
||||
|
11
index.html
11
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>
|
||||
|
128
js/reveal.js
128
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();
|
||||
|
Loading…
Reference in New Issue
Block a user