add support for data-visibility=hidden
parent
c91074761a
commit
d272628f58
|
@ -77,6 +77,13 @@
|
|||
</p>
|
||||
</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>
|
||||
<h2 data-id="code-title">Pretty Code</h2>
|
||||
<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -146,6 +146,9 @@ export default {
|
|||
// Flags if speaker notes should be visible to all viewers
|
||||
showNotes: false,
|
||||
|
||||
// Flags if slides with data-visibility="hidden" should be kep visible
|
||||
showHiddenSlides: false,
|
||||
|
||||
// Global override for autolaying embedded media (video/audio/iframe)
|
||||
// - null: Media will only autoplay if data-autoplay is present
|
||||
// - true: All media will autoplay, regardless of individual setting
|
||||
|
|
21
js/reveal.js
21
js/reveal.js
|
@ -174,6 +174,9 @@ export default function( revealElement, options ) {
|
|||
|
||||
ready = true;
|
||||
|
||||
// Remove slides hidden with data-visibility
|
||||
removeHiddenSlides();
|
||||
|
||||
// Make sure we've got all the DOM elements we need
|
||||
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
|
||||
* required by the presentation. If a required element is
|
||||
|
|
|
@ -20,6 +20,10 @@
|
|||
|
||||
<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">
|
||||
<h1>1</h1>
|
||||
<img data-src="">
|
||||
|
@ -101,6 +105,7 @@
|
|||
QUnit.test( 'Initial slides classes', function( assert ) {
|
||||
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.present' ).length, 1, 'one .present slide' );
|
||||
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' );
|
||||
|
|
Loading…
Reference in New Issue