available fragment routes reflected in control arrows (closes #411)

This commit is contained in:
Hakim El Hattab 2013-04-27 17:35:17 -04:00
parent 0ebda98735
commit 6cfc6ecc49
4 changed files with 96 additions and 30 deletions

View File

@ -369,11 +369,11 @@ body {
height: 0; height: 0;
border: 12px solid transparent; border: 12px solid transparent;
-webkit-transition: opacity 0.2s ease; -webkit-transition: all 0.2s ease;
-moz-transition: opacity 0.2s ease; -moz-transition: all 0.2s ease;
-ms-transition: opacity 0.2s ease; -ms-transition: all 0.2s ease;
-o-transition: opacity 0.2s ease; -o-transition: all 0.2s ease;
transition: opacity 0.2s ease; transition: all 0.2s ease;
} }
.reveal .controls div.enabled { .reveal .controls div.enabled {
@ -391,6 +391,10 @@ body {
border-right-width: 22px; border-right-width: 22px;
border-right-color: #eee; border-right-color: #eee;
} }
.reveal .controls div.navigate-left.fragmented {
left: 4px;
border-right-width: 18px;
}
.reveal .controls div.navigate-right { .reveal .controls div.navigate-right {
left: 74px; left: 74px;
@ -399,6 +403,9 @@ body {
border-left-width: 22px; border-left-width: 22px;
border-left-color: #eee; border-left-color: #eee;
} }
.reveal .controls div.navigate-right.fragmented {
border-left-width: 18px;
}
.reveal .controls div.navigate-up { .reveal .controls div.navigate-up {
left: 42px; left: 42px;
@ -406,6 +413,10 @@ body {
border-bottom-width: 22px; border-bottom-width: 22px;
border-bottom-color: #eee; border-bottom-color: #eee;
} }
.reveal .controls div.navigate-up.fragmented {
top: 4px;
border-bottom-width: 18px;
}
.reveal .controls div.navigate-down { .reveal .controls div.navigate-down {
left: 42px; left: 42px;
@ -414,6 +425,9 @@ body {
border-top-width: 22px; border-top-width: 22px;
border-top-color: #eee; border-top-color: #eee;
} }
.reveal .controls div.navigate-down.fragmented {
border-top-width: 18px;
}
/********************************************* /*********************************************

2
css/reveal.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -1328,6 +1328,7 @@ var Reveal = (function(){
if ( config.controls && dom.controls ) { if ( config.controls && dom.controls ) {
var routes = availableRoutes(); var routes = availableRoutes();
var fragments = availableFragments();
// Remove the 'enabled' class from all directions // Remove the 'enabled' class from all directions
dom.controlsLeft.concat( dom.controlsRight ) dom.controlsLeft.concat( dom.controlsRight )
@ -1336,6 +1337,7 @@ var Reveal = (function(){
.concat( dom.controlsPrev ) .concat( dom.controlsPrev )
.concat( dom.controlsNext ).forEach( function( node ) { .concat( dom.controlsNext ).forEach( function( node ) {
node.classList.remove( 'enabled' ); node.classList.remove( 'enabled' );
node.classList.remove( 'fragmented' );
} ); } );
// Add the 'enabled' class to the available routes // Add the 'enabled' class to the available routes
@ -1348,6 +1350,26 @@ var Reveal = (function(){
if( routes.left || routes.up ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'enabled' ); } ); if( routes.left || routes.up ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'enabled' ); } );
if( routes.right || routes.down ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'enabled' ); } ); if( routes.right || routes.down ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'enabled' ); } );
// Highlight fragment directions
if( currentSlide ) {
var isVertical = !!currentSlide.parentNode.nodeName.match( /section/gi );
// Always apply fragment decorator to prev/next buttons
if( fragments.prev ) dom.controlsPrev.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
if( fragments.next ) dom.controlsNext.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
// Apply fragment decorators to directional buttons based on
// what slide axis they are in
if( isVertical ) {
if( fragments.prev ) dom.controlsUp.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
if( fragments.next ) dom.controlsDown.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
}
else {
if( fragments.prev ) dom.controlsLeft.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
if( fragments.next ) dom.controlsRight.forEach( function( el ) { el.classList.add( 'fragmented', 'enabled' ); } );
}
}
} }
} }
@ -1371,6 +1393,29 @@ var Reveal = (function(){
} }
/**
* Returns an object describing the available fragment
* directions.
*
* @return {Object} two boolean properties: prev/next
*/
function availableFragments() {
if( currentSlide ) {
var fragments = currentSlide.querySelectorAll( '.fragment' );
var hiddenFragments = currentSlide.querySelectorAll( '.fragment:not(.visible)' );
return {
prev: fragments.length - hiddenFragments.length > 0,
next: !!hiddenFragments.length
};
}
else {
return { prev: false, next: false };
}
}
/** /**
* Reads the current URL (hash) and navigates accordingly. * Reads the current URL (hash) and navigates accordingly.
*/ */
@ -1506,6 +1551,8 @@ var Reveal = (function(){
// Notify subscribers of the change // Notify subscribers of the change
dispatchEvent( 'fragmentshown', { fragment: fragments[0] } ); dispatchEvent( 'fragmentshown', { fragment: fragments[0] } );
updateControls();
return true; return true;
} }
} }
@ -1530,6 +1577,8 @@ var Reveal = (function(){
// Notify subscribers of the change // Notify subscribers of the change
dispatchEvent( 'fragmenthidden', { fragment: fragments[ fragments.length - 1 ] } ); dispatchEvent( 'fragmenthidden', { fragment: fragments[ fragments.length - 1 ] } );
updateControls();
return true; return true;
} }
} }
@ -1992,6 +2041,9 @@ var Reveal = (function(){
// Returns an object with the available routes as booleans (left/right/top/bottom) // Returns an object with the available routes as booleans (left/right/top/bottom)
availableRoutes: availableRoutes, availableRoutes: availableRoutes,
// Returns an object with the available fragments as booleans (prev/next)
availableFragments: availableFragments,
// Toggles the overview mode on/off // Toggles the overview mode on/off
toggleOverview: toggleOverview, toggleOverview: toggleOverview,

4
js/reveal.min.js vendored

File diff suppressed because one or more lines are too long