From 2ad4065500875f1878ab35c039054e8609b9aaa6 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 9 Sep 2015 14:09:37 +0200 Subject: [PATCH] ability to share presentation with speaker notes #304 --- README.md | 3 +++ css/reveal.css | 28 ++++++++++++++++++++++++++++ css/reveal.scss | 34 ++++++++++++++++++++++++++++++++++ js/reveal.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 111 insertions(+) diff --git a/README.md b/README.md index a8c4110..276fd70 100644 --- a/README.md +++ b/README.md @@ -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 ); @@ -2450,6 +2465,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