add support for data-visibility=hidden
This commit is contained in:
parent
c91074761a
commit
d272628f58
|
@ -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
2
dist/reveal.esm.js
vendored
File diff suppressed because one or more lines are too long
2
dist/reveal.js
vendored
2
dist/reveal.js
vendored
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
|
// 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
|
||||||
|
|
21
js/reveal.js
21
js/reveal.js
|
@ -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
|
||||||
|
|
|
@ -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' );
|
||||||
|
|
Loading…
Reference in New Issue
Block a user