slide data-state is now set at the viewport level, add Reveal.getViewportElement()

This commit is contained in:
Hakim El Hattab 2020-05-04 14:33:21 +02:00
parent 9242b25bc9
commit c4870362d9
4 changed files with 22 additions and 9 deletions

2
dist/reveal.esm.js vendored

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored

File diff suppressed because one or more lines are too long

View File

@ -146,16 +146,16 @@ export default function( revealElement, options ) {
// Embedded decks use the reveal element as their viewport // Embedded decks use the reveal element as their viewport
if( config.embedded === true ) { if( config.embedded === true ) {
if( revealElement.closest( '.reveal-viewport' ) === null ) { dom.viewport = revealElement.closest( '.reveal-viewport' ) || revealElement;
revealElement.classList.add( 'reveal-viewport' );
}
} }
// Full-page decks use the body as their viewport // Full-page decks use the body as their viewport
else { else {
document.body.classList.add( 'reveal-viewport' ); dom.viewport = document.body;
document.documentElement.classList.add( 'reveal-full-page' ); document.documentElement.classList.add( 'reveal-full-page' );
} }
dom.viewport.classList.add( 'reveal-viewport' );
} }
/** /**
@ -1273,7 +1273,7 @@ export default function( revealElement, options ) {
} }
} }
document.documentElement.classList.add( state[i] ); dom.viewport.classList.add( state[i] );
// Dispatch custom event matching the state's name // Dispatch custom event matching the state's name
dispatchEvent({ type: state[i] }); dispatchEvent({ type: state[i] });
@ -1281,7 +1281,7 @@ export default function( revealElement, options ) {
// Clean up the remains of the previous state // Clean up the remains of the previous state
while( stateBefore.length ) { while( stateBefore.length ) {
document.documentElement.classList.remove( stateBefore.pop() ); dom.viewport.classList.remove( stateBefore.pop() );
} }
if( slideChanged ) { if( slideChanged ) {
@ -2524,6 +2524,7 @@ export default function( revealElement, options ) {
// Returns reveal.js DOM elements // Returns reveal.js DOM elements
getRevealElement: () => revealElement, getRevealElement: () => revealElement,
getSlidesElement: () => dom.slides, getSlidesElement: () => dom.slides,
getViewportElement: () => dom.viewport,
getBackgroundsElement: () => backgrounds.element, getBackgroundsElement: () => backgrounds.element,
// API for registering and retrieving plugins // API for registering and retrieving plugins

View File

@ -20,7 +20,7 @@
<div class="reveal" style="display: none;"> <div class="reveal" style="display: none;">
<div class="slides"> <div class="slides">
<section>1.1</section> <section>1.1</section>
<section>1.2</section> <section data-state="deck1slide2">1.2</section>
<section>1.3</section> <section>1.3</section>
</div> </div>
</div> </div>
@ -80,6 +80,18 @@
}); });
QUnit.test( 'Slide state is set at the viewport level', function( assert ) {
r1.slide(1);
assert.ok( r1.getViewportElement().classList.contains( r1.getCurrentSlide().getAttribute( 'data-state' ) ) );
r1.slide(2);
assert.ok( !r1.getViewportElement().classList.contains( r1.getCurrentSlide().getAttribute( 'data-state' ) ), 'unset' );
});
</script> </script>
<script> <script>
QUnit.test( 'Reveal does not leak to window', function( assert ) { QUnit.test( 'Reveal does not leak to window', function( assert ) {