Skip to content

Commit fcf91ec

Browse files
committed
fix edge case in background transitions (closes hakimel#604)
1 parent 89cc3f3 commit fcf91ec

2 files changed

Lines changed: 34 additions & 28 deletions

File tree

js/reveal.js

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ var Reveal = (function(){
122122
previousSlide,
123123
currentSlide,
124124

125-
previousBackgroundHash,
125+
previousBackground,
126126

127127
// Slides may hold a data-state attribute which we pick up and apply
128128
// as a class to the body. This list contains the combined state of
@@ -309,6 +309,9 @@ var Reveal = (function(){
309309
// Read the initial hash
310310
readURL();
311311

312+
// Update all backgrounds
313+
updateBackground( true );
314+
312315
// Notify listeners that the presentation is ready but use a 1ms
313316
// timeout to ensure it's not fired synchronously after #initialize()
314317
setTimeout( function() {
@@ -444,7 +447,6 @@ var Reveal = (function(){
444447
};
445448

446449
var element = document.createElement( 'div' );
447-
element.setAttribute( 'data-background-hash', data.background + data.backgroundSize + data.backgroundImage + data.backgroundColor + data.backgroundRepeat + data.backgroundPosition + data.backgroundTransition );
448450
element.className = 'slide-background';
449451

450452
if( data.background ) {
@@ -455,6 +457,8 @@ var Reveal = (function(){
455457
else {
456458
element.style.background = data.background;
457459
}
460+
461+
element.setAttribute( 'data-background-hash', data.background + data.backgroundSize + data.backgroundImage + data.backgroundColor + data.backgroundRepeat + data.backgroundPosition + data.backgroundTransition );
458462
}
459463

460464
// Additional and optional background properties
@@ -1640,7 +1644,7 @@ var Reveal = (function(){
16401644

16411645
updateControls();
16421646
updateProgress();
1643-
updateBackground();
1647+
updateBackground( true );
16441648

16451649
}
16461650

@@ -1891,8 +1895,11 @@ var Reveal = (function(){
18911895
/**
18921896
* Updates the background elements to reflect the current
18931897
* slide.
1898+
*
1899+
* @param {Boolean} includeAll If true, the backgrounds of
1900+
* all vertical slides (not just the present) will be updated.
18941901
*/
1895-
function updateBackground() {
1902+
function updateBackground( includeAll ) {
18961903

18971904
var currentBackground = null;
18981905

@@ -1904,51 +1911,50 @@ var Reveal = (function(){
19041911
// states of their slides (past/present/future)
19051912
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
19061913

1907-
backgroundh.className = 'slide-background ';
1908-
19091914
if( h < indexh ) {
1910-
backgroundh.className += horizontalPast;
1915+
backgroundh.className = 'slide-background ' + horizontalPast;
19111916
}
19121917
else if ( h > indexh ) {
1913-
backgroundh.className += horizontalFuture;
1918+
backgroundh.className = 'slide-background ' + horizontalFuture;
19141919
}
19151920
else {
1916-
backgroundh.className += 'present';
1921+
backgroundh.className = 'slide-background present';
19171922

19181923
// Store a reference to the current background element
19191924
currentBackground = backgroundh;
19201925
}
19211926

1922-
toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
1927+
if( includeAll || h === indexh ) {
1928+
toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
19231929

1924-
backgroundv.className = 'slide-background ';
1925-
1926-
if( v < indexv ) {
1927-
backgroundv.className += 'past';
1928-
}
1929-
else if ( v > indexv ) {
1930-
backgroundv.className += 'future';
1931-
}
1932-
else {
1933-
backgroundv.className += 'present';
1930+
if( v < indexv ) {
1931+
backgroundv.className = 'slide-background past';
1932+
}
1933+
else if ( v > indexv ) {
1934+
backgroundv.className = 'slide-background future';
1935+
}
1936+
else {
1937+
backgroundv.className = 'slide-background present';
19341938

1935-
// Only if this is the present horizontal and vertical slide
1936-
if( h === indexh ) currentBackground = backgroundv;
1937-
}
1939+
// Only if this is the present horizontal and vertical slide
1940+
if( h === indexh ) currentBackground = backgroundv;
1941+
}
19381942

1939-
} );
1943+
} );
1944+
}
19401945

19411946
} );
19421947

19431948
// Don't transition between identical backgrounds. This
19441949
// prevents unwanted flicker.
19451950
if( currentBackground ) {
1951+
var previousBackgroundHash = previousBackground ? previousBackground.getAttribute( 'data-background-hash' ) : null;
19461952
var currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
1947-
if( currentBackgroundHash === previousBackgroundHash ) {
1953+
if( currentBackgroundHash && currentBackgroundHash === previousBackgroundHash && currentBackground !== previousBackground ) {
19481954
dom.background.classList.add( 'no-transition' );
19491955
}
19501956

1951-
previousBackgroundHash = currentBackgroundHash;
1957+
previousBackground = currentBackground;
19521958
}
19531959

19541960
// Allow the first background to apply without transition

0 commit comments

Comments
 (0)