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
|
* VIEW FRAGMENTS
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
11
index.html
11
index.html
@ -70,6 +70,17 @@
|
|||||||
</section>
|
</section>
|
||||||
</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>
|
<section>
|
||||||
<h2>Marvelous Unordered List</h2>
|
<h2>Marvelous Unordered List</h2>
|
||||||
<ul>
|
<ul>
|
||||||
|
106
js/reveal.js
106
js/reveal.js
@ -117,6 +117,8 @@ var Reveal = (function(){
|
|||||||
dom.controlsUp.addEventListener('click', preventAndForward( navigateUp ), false);
|
dom.controlsUp.addEventListener('click', preventAndForward( navigateUp ), false);
|
||||||
dom.controlsDown.addEventListener('click', preventAndForward( navigateDown ), false);
|
dom.controlsDown.addEventListener('click', preventAndForward( navigateDown ), false);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Fall back on default options
|
// Fall back on default options
|
||||||
config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks;
|
config.rollingLinks = options.rollingLinks === undefined ? true : options.rollingLinks;
|
||||||
config.controls = options.controls === undefined ? false : options.controls;
|
config.controls = options.controls === undefined ? false : options.controls;
|
||||||
@ -173,7 +175,8 @@ var Reveal = (function(){
|
|||||||
// FFT: Use document.querySelector( ':focus' ) === null
|
// FFT: Use document.querySelector( ':focus' ) === null
|
||||||
// instead of checking contentEditable?
|
// instead of checking contentEditable?
|
||||||
|
|
||||||
if( event.keyCode >= 37 && event.keyCode <= 40 && event.target.contentEditable === 'inherit' ) {
|
if( event.target.contentEditable === 'inherit' ) {
|
||||||
|
if( event.keyCode >= 37 && event.keyCode <= 40 ) {
|
||||||
|
|
||||||
switch( event.keyCode ) {
|
switch( event.keyCode ) {
|
||||||
case 37: navigateLeft(); break; // left
|
case 37: navigateLeft(); break; // left
|
||||||
@ -187,6 +190,16 @@ var Reveal = (function(){
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
// Space bar
|
||||||
|
else if ( event.keyCode === 32 && supports3DTransforms ) {
|
||||||
|
if( overviewIsActive() ) {
|
||||||
|
deactivateOverview();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
activateOverview();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -251,8 +264,6 @@ var Reveal = (function(){
|
|||||||
* Wrap all links in 3D goodness.
|
* Wrap all links in 3D goodness.
|
||||||
*/
|
*/
|
||||||
function linkify() {
|
function linkify() {
|
||||||
|
|
||||||
|
|
||||||
if( supports3DTransforms ) {
|
if( supports3DTransforms ) {
|
||||||
var nodes = document.querySelectorAll( 'section a:not(.image)' );
|
var nodes = document.querySelectorAll( 'section a:not(.image)' );
|
||||||
|
|
||||||
@ -267,6 +278,88 @@ 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
|
* Updates one dimension of slides by showing the slide
|
||||||
* with the specified index.
|
* with the specified index.
|
||||||
@ -297,7 +390,7 @@ var Reveal = (function(){
|
|||||||
|
|
||||||
// Optimization; hide all slides that are three or more steps
|
// Optimization; hide all slides that are three or more steps
|
||||||
// away from the present slide
|
// 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 ) {
|
if( i < index ) {
|
||||||
// Any element previous to index is given the 'past' class
|
// 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';
|
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();
|
updateControls();
|
||||||
|
|
||||||
writeURL();
|
writeURL();
|
||||||
|
Loading…
Reference in New Issue
Block a user