diff options
| -rw-r--r-- | README.md | 3 | ||||
| -rw-r--r-- | css/reveal.css | 28 | ||||
| -rw-r--r-- | css/reveal.scss | 34 | ||||
| -rw-r--r-- | js/reveal.js | 46 |
4 files changed, 111 insertions, 0 deletions
@@ -141,6 +141,9 @@ Reveal.initialize({ // key is pressed help: true, + // Flags if speaker notes should be visible to all viewers + showNotes: false, + // Number of milliseconds between automatically proceeding to the // next slide, disabled when set to 0, this value can be overwritten // by using a data-autoslide attribute on your slides diff --git a/css/reveal.css b/css/reveal.css index f8505c4..1aaa9b6 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1162,6 +1162,34 @@ body { .reveal aside.notes { display: none; } +.reveal .speaker-notes { + display: none; + position: absolute; + width: 70%; + max-height: 15%; + left: 15%; + bottom: 5%; + padding: 10px; + z-index: 1; + font-size: 18px; + line-height: 1.4; + border: 2px solid #fff; + color: #fff; + background-color: rgba(0, 0, 0, 0.5); + overflow: auto; + -moz-box-sizing: border-box; + box-sizing: border-box; } + +.reveal .speaker-notes.visible:not(:empty) { + display: block; } + +@media screen and (max-width: 800px) { + .reveal .speaker-notes { + width: 90%; + left: 5%; + bottom: 5%; + font-size: 14px; } } + /********************************************* * ZOOM PLUGIN *********************************************/ diff --git a/css/reveal.scss b/css/reveal.scss index 32187fd..9bd570e 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -1291,10 +1291,44 @@ body { * SPEAKER NOTES *********************************************/ +// Hide on-page notes .reveal aside.notes { display: none; } +// An interface element that can optionally be used to show the +// speaker notes to all viewers, on top of the presentation +.reveal .speaker-notes { + display: none; + position: absolute; + width: 70%; + max-height: 15%; + left: 15%; + bottom: 5%; + padding: 10px; + z-index: 1; + font-size: 18px; + line-height: 1.4; + border: 2px solid #fff; + color: #fff; + background-color: rgba(0,0,0,0.5); + overflow: auto; + box-sizing: border-box; +} + +.reveal .speaker-notes.visible:not(:empty) { + display: block; +} + +@media screen and (max-width: 800px) { + .reveal .speaker-notes { + width: 90%; + left: 5%; + bottom: 5%; + font-size: 14px; + } +} + /********************************************* * ZOOM PLUGIN diff --git a/js/reveal.js b/js/reveal.js index ad7eaa0..a19e486 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -92,6 +92,9 @@ // Flags if it should be possible to pause the presentation (blackout) pause: true, + // Flags if speaker notes should be visible to all viewers + showNotes: false, + // Number of milliseconds between automatically proceeding to the // next slide, disabled when set to 0, this value can be overwritten // by using a data-autoslide attribute on your slides @@ -465,6 +468,9 @@ // Slide number dom.slideNumber = createSingletonNode( dom.wrapper, 'div', 'slide-number', '' ); + // Element containing notes that are visible to the audience + dom.speakerNotes = createSingletonNode( dom.wrapper, 'div', 'speaker-notes', null ); + // Overlay graphic which is displayed during the paused mode createSingletonNode( dom.wrapper, 'div', 'pause-overlay', null ); @@ -856,6 +862,13 @@ resume(); } + if( config.showNotes ) { + dom.speakerNotes.classList.add( 'visible' ); + } + else { + dom.speakerNotes.classList.remove( 'visible' ); + } + if( config.mouseWheel ) { document.addEventListener( 'DOMMouseScroll', onDocumentMouseScroll, false ); // FF document.addEventListener( 'mousewheel', onDocumentMouseScroll, false ); @@ -2161,6 +2174,7 @@ updateBackground(); updateParallax(); updateSlideNumber(); + updateNotes(); // Update the URL hash writeURL(); @@ -2202,6 +2216,7 @@ updateBackground( true ); updateSlideNumber(); updateSlidesVisibility(); + updateNotes(); formatEmbeddedContent(); startEmbeddedContent( currentSlide ); @@ -2451,6 +2466,37 @@ } /** + * Pick up notes from the current slide and display tham + * to the viewer. + * + * @see `showNotes` config value + */ + function updateNotes() { + + if( config.showNotes && dom.speakerNotes && currentSlide ) { + + var notes = ''; + + // Notes can be specified via the data-notes attribute... + if( currentSlide.hasAttribute( 'data-notes' ) ) { + notes = currentSlide.getAttribute( 'data-notes' ); + } + + // ... or using an <aside class="notes"> element + if( !notes ) { + var notesElement = currentSlide.querySelector( 'aside.notes' ); + if( notesElement ) { + notes = notesElement.innerHTML; + } + } + + dom.speakerNotes.innerHTML = notes; + + } + + } + + /** * Updates the progress bar to reflect the current slide. */ function updateProgress() { |