blallo/talk-hm-0x15
1
0
Fork 1
Code Issues Pull requests Releases Wiki Activity

don't transition between identical backgrounds

Browse source
This commit is contained in:
Hakim El Hattab 2013-10-30 12:22:00 -04:00
parent 080ae79b54
commit 89cc3f3a29
3 changed files with 70 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
js/reveal.js
View file

@ -122,6 +122,8 @@ var Reveal = (function(){
previousSlide,
currentSlide,
previousBackgroundHash,
// 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
// all current slides.
@ -442,6 +444,7 @@ var Reveal = (function(){
};
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';
if( data.background ) {
@ -1891,24 +1894,63 @@ var Reveal = (function(){
*/
function updateBackground() {
var currentBackground = null;
// Reverse past/future classes when in RTL mode
var horizontalPast = config.rtl ? 'future' : 'past',
horizontalFuture = config.rtl ? 'past' : 'future';
// Update the classes of all backgrounds to match the
// states of their slides (past/present/future)
toArray( dom.background.childNodes ).forEach( function( backgroundh, h ) {
// Reverse past/future classes when in RTL mode
var horizontalPast = config.rtl ? 'future' : 'past',
horizontalFuture = config.rtl ? 'past' : 'future';
backgroundh.className = 'slide-background ';
backgroundh.className = 'slide-background ' + ( h < indexh ? horizontalPast : h > indexh ? horizontalFuture : 'present' );
if( h < indexh ) {
backgroundh.className += horizontalPast;
}
else if ( h > indexh ) {
backgroundh.className += horizontalFuture;
}
else {
backgroundh.className += 'present';
// Store a reference to the current background element
currentBackground = backgroundh;
}
toArray( backgroundh.childNodes ).forEach( function( backgroundv, v ) {
backgroundv.className = 'slide-background ' + ( v < indexv ? 'past' : v > indexv ? 'future' : 'present' );
backgroundv.className = 'slide-background ';
if( v < indexv ) {
backgroundv.className += 'past';
}
else if ( v > indexv ) {
backgroundv.className += 'future';
}
else {
backgroundv.className += 'present';
// Only if this is the present horizontal and vertical slide
if( h === indexh ) currentBackground = backgroundv;
}
} );
} );
// Don't transition between identical backgrounds. This
// prevents unwanted flicker.
if( currentBackground ) {
var currentBackgroundHash = currentBackground.getAttribute( 'data-background-hash' );
if( currentBackgroundHash === previousBackgroundHash ) {
dom.background.classList.add( 'no-transition' );
}
previousBackgroundHash = currentBackgroundHash;
}
// Allow the first background to apply without transition
setTimeout( function() {
dom.background.classList.remove( 'no-transition' );

4
js/reveal.min.js vendored
View file

File diff suppressed because one or more lines are too long

21
test/examples/slide-backgrounds.html
View file

@ -75,6 +75,27 @@
<h2>Same background twice (2/2)</h2>
</section>
<section>
<section data-background="#417203">
<h2>Same background twice vertical (1/2)</h2>
</section>
<section data-background="#417203">
<h2>Same background twice vertical (2/2)</h2>
</section>
</section>
<section data-background="#934f4d">
<h2>Same background from horizontal to vertical (1/3)</h2>
</section>
<section>
<section data-background="#934f4d">
<h2>Same background from horizontal to vertical (2/3)</h2>
</section>
<section data-background="#934f4d">
<h2>Same background from horizontal to vertical (3/3)</h2>
</section>
</section>
</div>
</div>