add support for data-visibility=hidden

This commit is contained in:
Hakim El Hattab 2020-06-02 13:47:34 +02:00
parent c91074761a
commit d272628f58
6 changed files with 38 additions and 2 deletions

View file

@ -77,6 +77,13 @@
</p> </p>
</section> </section>
<section data-visibility="hidden">
<h2>Hidden Slides</h2>
<p>
This slide is visible in the source, but hidden when the presentation is viewed. You can show all hidden slides by setting the `showHiddenSlides` config option to `true`.
</p>
</section>
<section data-auto-animate> <section data-auto-animate>
<h2 data-id="code-title">Pretty Code</h2> <h2 data-id="code-title">Pretty Code</h2>
<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers> <pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>

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,6 +146,9 @@ export default {
// Flags if speaker notes should be visible to all viewers // Flags if speaker notes should be visible to all viewers
showNotes: false, showNotes: false,
// Flags if slides with data-visibility="hidden" should be kep visible
showHiddenSlides: false,
// Global override for autolaying embedded media (video/audio/iframe) // Global override for autolaying embedded media (video/audio/iframe)
// - null: Media will only autoplay if data-autoplay is present // - null: Media will only autoplay if data-autoplay is present
// - true: All media will autoplay, regardless of individual setting // - true: All media will autoplay, regardless of individual setting

View file

@ -174,6 +174,9 @@ export default function( revealElement, options ) {
ready = true; ready = true;
// Remove slides hidden with data-visibility
removeHiddenSlides();
// Make sure we've got all the DOM elements we need // Make sure we've got all the DOM elements we need
setupDOM(); setupDOM();
@ -231,6 +234,24 @@ export default function( revealElement, options ) {
} }
/**
* Removes all slides with data-visibility="hidden". This
* is done right before the rest of the presentation is
* initialized.
*
* If you want to show all hidden slides, initialize
* reveal.js with showHiddenSlides set to true.
*/
function removeHiddenSlides() {
if( !config.showHiddenSlides ) {
Util.queryAll( dom.wrapper, 'section[data-visibility="hidden"]' ).forEach( slide => {
slide.parentNode.removeChild( slide );
} );
}
}
/** /**
* Finds and stores references to DOM elements which are * Finds and stores references to DOM elements which are
* required by the presentation. If a required element is * required by the presentation. If a required element is

View file

@ -20,6 +20,10 @@
<div class="slides"> <div class="slides">
<section data-visibility="hidden">
This should be remove by reveal.js before our tests run.
</section>
<section data-background-image="examples/assets/image1.png"> <section data-background-image="examples/assets/image1.png">
<h1>1</h1> <h1>1</h1>
<img data-src=""> <img data-src="">
@ -101,6 +105,7 @@
QUnit.test( 'Initial slides classes', function( assert ) { QUnit.test( 'Initial slides classes', function( assert ) {
var horizontalSlides = document.querySelectorAll( '.reveal .slides>section' ) var horizontalSlides = document.querySelectorAll( '.reveal .slides>section' )
assert.strictEqual( document.querySelectorAll( '.reveal .slides section[data-visibility="hidden"]' ).length, 0, 'no data-visibility="hidden" slides' );
assert.strictEqual( document.querySelectorAll( '.reveal .slides section.past' ).length, 0, 'no .past slides' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section.past' ).length, 0, 'no .past slides' );
assert.strictEqual( document.querySelectorAll( '.reveal .slides section.present' ).length, 1, 'one .present slide' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section.present' ).length, 1, 'one .present slide' );
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' );