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

fix edge case in background transitions (closes #604)

Browse Source
This commit is contained in:
Hakim El Hattab 2013-10-30 13:09:46 -04:00
parent 89cc3f3a29
commit fcf91ec261
2 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
js/reveal.js
View File

@ -122,7 +122,7 @@ var Reveal = (function(){
previousSlide, previousSlide,
currentSlide, currentSlide,
previousBackgroundHash, previousBackground,
// Slides may hold a data-state attribute which we pick up and apply // Slides may hold a data-state attribute which we pick up and apply
// as a class to the body. This list contains the combined state of // as a class to the body. This list contains the combined state of
@ -309,6 +309,9 @@ var Reveal = (function(){
// Read the initial hash // Read the initial hash
readURL(); readURL();
// Update all backgrounds
updateBackground( true );
// Notify listeners that the presentation is ready but use a 1ms // Notify listeners that the presentation is ready but use a 1ms
// timeout to ensure it's not fired synchronously after #initialize() // timeout to ensure it's not fired synchronously after #initialize()
setTimeout( function() { setTimeout( function() {
@ -444,7 +447,6 @@ var Reveal = (function(){
}; };
var element = document.createElement( 'div' ); var element = document.createElement( 'div' );
element.setAttribute( 'data-background-hash', data.background + data.backgroundSize + data.backgroundImage + data.backgroundColor + data.backgroundRepeat + data.backgroundPosition + data.backgroundTransition );
element.className = 'slide-background'; element.className = 'slide-background';
if( data.background ) { if( data.background ) {
@ -455,6 +457,8 @@ var Reveal = (function(){
else { else {
element.style.background = data.background; element.style.background = data.background;
} }
element.setAttribute( 'data-background-hash', data.background + data.backgroundSize + data.backgroundImage + data.backgroundColor + data.backgroundRepeat + data.backgroundPosition + data.backgroundTransition );
} }
// Additional and optional background properties // Additional and optional background properties
@ -1640,7 +1644,7 @@ var Reveal = (function(){
updateControls(); updateControls();
updateProgress(); updateProgress();
updateBackground(); updateBackground( true );
} }
@ -1891,8 +1895,11 @@ var Reveal = (function(){
/** /**
* Updates the background elements to reflect the current * Updates the background elements to reflect the current
* slide. * slide.
*
* @param {Boolean} includeAll If true, the backgrounds of
* all vertical slides (not just the present) will be updated.
*/ */
function updateBackground() { function updateBackground( includeAll ) {
var currentBackground = null; var currentBackground = null;
@ -1904,51 +1911,50 @@ var Reveal = (function(){
// states of their slides (past/present/future) // states of their slides (past/present/future)
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) { toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
backgroundh.className = 'slide-background ';
if( h < indexh ) { if( h < indexh ) {
backgroundh.className += horizontalPast; backgroundh.className = 'slide-background ' + horizontalPast;
} }
else if ( h > indexh ) { else if ( h > indexh ) {
backgroundh.className += horizontalFuture; backgroundh.className = 'slide-background ' + horizontalFuture;
} }
else { else {
backgroundh.className += 'present'; backgroundh.className = 'slide-background present';
// Store a reference to the current background element // Store a reference to the current background element
currentBackground = backgroundh; currentBackground = backgroundh;
} }
if( includeAll || h === indexh ) {
toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) { toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
backgroundv.className = 'slide-background ';
if( v < indexv ) { if( v < indexv ) {
backgroundv.className += 'past'; backgroundv.className = 'slide-background past';
} }
else if ( v > indexv ) { else if ( v > indexv ) {
backgroundv.className += 'future'; backgroundv.className = 'slide-background future';
} }
else { else {
backgroundv.className += 'present'; backgroundv.className = 'slide-background present';
// Only if this is the present horizontal and vertical slide // Only if this is the present horizontal and vertical slide
if( h === indexh ) currentBackground = backgroundv; if( h === indexh ) currentBackground = backgroundv;
} }
} ); } );
}
} ); } );
// Don't transition between identical backgrounds. This // Don't transition between identical backgrounds. This
// prevents unwanted flicker. // prevents unwanted flicker.
if( currentBackground ) { if( currentBackground ) {
var previousBackgroundHash = previousBackground ? previousBackground.getAttribute( 'data-background-hash' ) : null;
var currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' ); var currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
if( currentBackgroundHash === previousBackgroundHash ) { if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== previousBackground ) {
dom.background.classList.add( 'no-transition' ); dom.background.classList.add( 'no-transition' );
} }
previousBackgroundHash = currentBackgroundHash; previousBackground = currentBackground;
} }
// Allow the first background to apply without transition // Allow the first background to apply without transition

4
js/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long