Feature to display speaker notes

center-key · Jul 14, 2023 · 13a0d0b · 13a0d0b
1 parent 2095fac
commit 13a0d0b
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -27,8 +27,6 @@
       "browser": true,
       "devel": true,
       "globals": {
-         "title": false,
-         "subtitle": false,
          "themes": false,
          "selectedTheme": false,
          "baseFontSizePercent": false,
@@ -40,6 +38,7 @@
          "syntaxHighlightingTheme": false,
          "autoAdvance": false,
          "autoAdvanceSeconds": false,
+         "presentationCustomSetup": false,
          "dna": false,
          "Reveal": false
       }

diff --git a/src/presentation-template.html b/src/presentation-template.html
@@ -73,7 +73,7 @@
 </script>
 
 <!-- Custom JavaScript -->
-<script id=presentation-custom-js data-on-load=presentationCustomSetup>
+<script id=presentation-custom-js>
    const presentationCustomSetup = () => {
       console.log('Presentation is ready.');
       // Put custom code here.
@@ -390,7 +390,7 @@ <h2>Panels</h2>
    <h2>Group of Vertical Slides</h2>
    <section>
       <h2>Vertical Slides</h2>
-      <p>Wrap slides in another <code>&lt;section&gt;</code> tag</p>
+      <p>Wrap slides in another <code>&lt;section&gt;</code> tag.</p>
       <figure>
          <pre><code class=language-html>
             &lt;!-- Vertical Slides --&gt;
@@ -419,11 +419,39 @@ <h2>Australia</h2>
    </section>
 </section>
 
+<!-- Slide - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+<section>
+   <h2>Speaker Notes</h2>
+   <p>
+      Press the <b><code>Enter</code></b> key to reveal the slide's speaker notes.
+   </p>
+   <figure>
+      <pre><code class=language-html>
+         &lt;!-- Slide --&gt;
+         &lt;section&gt;
+            &lt;h2&gt;Speaker Notes&lt;/h2&gt;
+            &lt;p&gt;Press the Enter key to reveal the slide's speaker notes.&lt;/p&gt;
+            &lt;aside class=notes&gt;
+               &lt;p&gt;Important extra information in paragraph #1.&lt;/p&gt;
+               &lt;p&gt;Important extra information in paragraph #2.&lt;/p&gt;
+               &lt;p&gt;Important extra information in paragraph #3.&lt;/p&gt;
+            &lt;/aside&gt;
+         &lt;/section&gt;
+      </code></pre>
+   </figure>
+   <aside class=notes>
+      <p>Important extra information in paragraph #1.</p>
+      <p>Important extra information in paragraph #2.</p>
+      <p>Important extra information in paragraph #3.</p>
+   </aside>
+</section>
+
 <!-- Slide - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 <section>
    <h2>Hidden Slides</h2>
    <p>
-      Press the backtick (`) key to reveal additional sample slides that are hidden using:
+      Press the backtick (<b><code>`</code></b>) key to reveal additional sample
+      slides that are hidden using:
    </p>
    <p>
       <b><code>&lt;section data-visibility=hidden&gt;</code></b>
@@ -437,7 +465,7 @@ <h2>Framed</h2>
    <figure>
       <pre><code class=language-html>
          &lt;!-- Slide --&gt;
-         &lt;section class=toggle-on-backtick&gt;
+         &lt;section data-visibility=hidden&gt;
             &lt;h2&gt;Framed&lt;/h2&gt;
             &lt;img src=https://i.chzbgr.com/full/5248955648/hA52D8A65
                class=framed data-width=45% alt=cat&gt;

diff --git a/src/reveal.js-local.css b/src/reveal.js-local.css
@@ -42,3 +42,18 @@ figure.hljs-enhance >figcaption             { color:            black; }      /*
 figure.hljs-enhance >figcaption:first-child { background-color: mintcream; }  /* trim */
 pre.hljs-enhance, figure.hljs-enhance >div  { border-color:     mintcream; }  /* trim */
 pre.hljs-enhance >code                      { background-color: black; }      /* background */
+
+/* Speaker notes */
+body >div.notes {
+   position: fixed;
+   bottom: 2px;
+   font-family: system-ui, sans-serif;
+   font-size: 1.6rem;
+   color: white;
+   background-color: rgba(0, 0, 0, 0.7);
+   border: 2px solid deepskyblue;
+   padding: 10px 60px;
+   z-index: 10000;
+   opacity: 0;
+   transition: opacity 1000ms;
+   }
diff --git a/src/reveal.js-local.js b/src/reveal.js-local.js
@@ -2,17 +2,6 @@
 
 const revealJsLocal = {
    version: '{{pkg.version}}',
-   reveal() {
-      const config = {  //see: https://revealjs.com/config
-         autoSlide:        autoAdvance ? autoAdvanceSeconds * 1000 : 0,  //milliseconds to automatically advance slide (0 = disable)
-         controls:         true,
-         controlsTutorial: true,
-         hash:             false,
-         loop:             false,
-         progress:         true,
-         };
-      Reveal.initialize(config);
-      },
    themes() {
       const addCss = (url) => {
          const link = dna.dom.create('link', { rel: 'stylesheet', type: 'text/css', href: url });
@@ -51,8 +40,7 @@ const revealJsLocal = {
       elems.forEach(elem => elem.innerHTML = elem.dataset.name + at + elem.dataset.domain);
       },
    images() {
-      const href =   globalThis.document.location.href;
-      const folder = href.split('/').slice(0, -1).join('/');
+      const folder = globalThis.window.location.pathname.split('/').slice(0, -1).join('/');
       console.log('Images folder:');
       console.log('%c' + folder + '/assets', 'font-family: monospace;');
       const configureImage = (img) => {
@@ -72,6 +60,27 @@ const revealJsLocal = {
          };
       globalThis.document.querySelectorAll('textarea').forEach(trim);
       },
+   speakerNotes() {
+      const removeNotes = () => {
+         const notesPanel = globalThis.document.querySelector('body >div.notes');
+         if (notesPanel)
+            notesPanel.style.opacity = '0';
+         globalThis.window.setTimeout(() => notesPanel?.remove(), 1100);
+         };
+      const handleEnterKey = () => {
+         const notesElem =  Reveal.getCurrentSlide().querySelector('aside.notes');
+         const content =    notesElem?.innerHTML ?? '[No notes available]';
+         const notesPanel = globalThis.document.querySelector('body >div.notes');
+         const show = () => {
+            const elem = dna.dom.create('div', { class: 'notes', html: content });
+            globalThis.document.body.appendChild(elem);
+            globalThis.window.requestAnimationFrame(() => elem.style.opacity = '1');
+            };
+         return notesPanel ? removeNotes() : show();
+         };
+      dna.dom.onEnterKey(handleEnterKey);
+      Reveal.on('slidechanged', removeNotes);
+      },
    hiddenSlidesStorage: [],
    hiddenSlides() {
       // <section data-visibility=hidden>
@@ -96,6 +105,17 @@ const revealJsLocal = {
       revealJsLocal.hiddenSlidesStorage = slides;
       dna.dom.on('keyup', handleBacktick, { keyFilter: '`' });
       },
+   reveal() {
+      const config = {  //see: https://revealjs.com/config
+         autoSlide:        autoAdvance ? autoAdvanceSeconds * 1000 : 0,  //milliseconds to automatically advance slide (0 = disable)
+         controls:         true,
+         controlsTutorial: true,
+         hash:             false,
+         loop:             false,
+         progress:         true,
+         };
+      Reveal.initialize(config).then(presentationCustomSetup);
+      },
    setup() {
       const logStyle = 'font-size: 2rem; font-weight: bold; color: teal;';
       console.log('%creveal.js-local v' + revealJsLocal.version, logStyle);
@@ -107,6 +127,7 @@ const revealJsLocal = {
       revealJsLocal.links();
       revealJsLocal.images();
       revealJsLocal.textarea();
+      revealJsLocal.speakerNotes();
       revealJsLocal.hiddenSlides();
       revealJsLocal.reveal();
       },