Vertical slides example

center-key · Jul 13, 2023 · 0fb6d24 · 0fb6d24
1 parent c91d490
commit 0fb6d24
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 22 deletions.
diff --git a/src/presentation-template.html b/src/presentation-template.html
@@ -113,7 +113,7 @@ <h2>Content</h2>
       Press <b>"?"</b> for help.
    </p>
    <br><hr><br>
-   <div>
+   <div class=external-site>
       <p>
          Get latest template:<br>
          <a href=https://github.com/center-key/reveal.js-local>reveal.js-local</a>
@@ -266,23 +266,21 @@ <h2>HTML</h2>
 <!-- Slide - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 <section>
    <h2>JavaScript</h2>
-   Look below
+   <p>
+      To display JS with syntax highlighting, place the code within:<br>
+      <b>&lt;pre&gt;&lt;code class=language-javascript&gt;</b>
+   </p>
    <div class=down-arrow></div>
    <figure>
       <pre><code class=language-javascript>
-         const help = {
-            selector: '.help-me',
-            show(elem) {
-               const statusBox = document.getElementById('status-box');
-               statusBox.textContent = elem.dataset.message;
-               dna.ui.pulse(statusBox);  //fade in
-               },
-            setup() {
-               dna.dom.onClick(help.show, help.selector);
-               },
+         const fibLookup = [1, 1];  //memoization cache
+         const fibonacci = (n) => {
+            while (fibLookup.length &lt; n)
+               fibLookup.push(fibLookup.at(-1) + fibLookup.at(-2));
+            return fibLookup[n - 1];
             };
 
-         dna.dom.onReady(help.setup);
+         console.log('Fibonacci of 100 is:', fibonacci(100));
       </code></pre>
    </figure>
 </section>
@@ -309,18 +307,19 @@ <h2>Down Arrow &amp; Unicode Emojis</h2>
 <!-- Slide - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 <section>
    <h2>Images</h2>
-   <img class=prime data-width=25%
+   <img data-width=20%
       src=https://center-key.github.io/reveal.js-local/assets/js-logo.png alt=logo>
-   <p>Use the <b><code>data-width</code></b>
-      attribute to adjust the image size.</p>
+   <p>
+      Create an <b><code>assets</code></b> folder for your local image files,<br>
+      and use the <b><code>data-width</code></b> attribute to adjust the image size.
+   </p>
    <figure>
       <pre><code class=language-html>
          &lt;!-- Slide --&gt;
          &lt;section&gt;
             &lt;h2&gt;Images&lt;/h2&gt;
-            &lt;img class=prime data-width=25% src=assets/js-logo.png alt=logo&gt;
-            &lt;p&gt;Use the &lt;b&gt;&lt;code&gt;data-width&lt;/code&gt;&lt;/b&gt;
-               attribute to adjust the image size.&lt;/p&gt;
+            &lt;img data-width=20% src=assets/js-logo.png alt=logo&gt;
+            &lt;p&gt;Create an &lt;b&gt;&lt;code&gt;assets&lt;/code&gt;&lt;/b&gt; folder for your local...&lt;/p&gt;
          &lt;/section&gt;
       </code></pre>
    </figure>
@@ -349,7 +348,6 @@ <h2>Google Drawings</h2>
    </figure>
 </section>
 
-
 <!-- Slide - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 <section>
    <h2>Panels</h2>
@@ -385,6 +383,40 @@ <h2>Panels</h2>
    </div>
 </section>
 
+<!-- Slide - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+<section>
+   <h2>Group of Vertical Slides</h2>
+   <section>
+      <h2>Vertical Slides</h2>
+      <p>Wrap slides in another <code>&lt;section&gt;</code> tag</p>
+      <figure>
+         <pre><code class=language-html>
+            &lt;!-- Vertical Slides --&gt;
+            &lt;section&gt;
+               &lt;!-- Slide --&gt;
+               &lt;section&gt;
+                  &lt;h2&gt;Top Slide&lt;/h2&gt;
+                  &lt;p&gt;This slide displays like normal.&lt;/p&gt;
+               &lt;/section&gt;
+               &lt;!-- Slide --&gt;
+               &lt;section&gt;
+                  &lt;h2&gt;Bottom Slide&lt;/h2&gt;
+                  &lt;p&gt;Hit the down arrow to show this slide.&lt;/p&gt;
+               &lt;/section&gt;
+            &lt;/section&gt;
+         </code></pre>
+      </figure>
+   </section>
+   <section>
+      <h2>Australia</h2>
+      <p>Is Australia the world's smallest contenent</p>
+      <p>or</p>
+      <p>the world's largest island?</p>
+      <img data-width=35%
+         src=https://upload.wikimedia.org/wikipedia/commons/3/3d/AUS_orthographic.svg alt=map>
+   </section>
+</section>
+
 <!-- Slide - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 <section>
    <h2>Hidden Slides</h2>

diff --git a/src/reveal.js-local.js b/src/reveal.js-local.js
@@ -35,6 +35,17 @@ const revealJsLocal = {
       else
          globalThis.document.body.style.backgroundImage = 'url(' + url + ')';
       },
+   titles() {
+      const title = globalThis.document.getElementById('presentation-title').textContent;
+      globalThis.document.head.querySelector('title').textContent = title;
+      const metaHeader =  (h2) => h2.nextElementSibling?.matches('section');
+      const metaHeaders = dna.dom.filter(globalThis.document.querySelectorAll('.slides >section >h2'), metaHeader);
+      metaHeaders.forEach(h2 => h2.style.display = 'none');
+      },
+   links() {
+      const links = globalThis.document.querySelectorAll('a.external-site, .external-site a');
+      links.forEach(link => link.target = '_blank');
+      },
    images() {
       const href =   globalThis.document.location.href;
       const folder = href.split('/').slice(0, -1).join('/');
@@ -74,14 +85,14 @@ const revealJsLocal = {
       dna.dom.on('keyup', handleBacktick, { keyFilter: '`' });
       },
    setup() {
-      const title = globalThis.document.getElementById('presentation-title').textContent;
-      globalThis.document.head.querySelector('title').textContent = title;
       const logStyle = 'font-size: 2rem; font-weight: bold; color: teal;';
       console.log('%creveal.js-local v' + revealJsLocal.version, logStyle);
       const fontSize = String(baseFontSizePercent) + '%';
       globalThis.document.querySelector('.reveal .slides').style.fontSize = fontSize;
       revealJsLocal.themes();
       revealJsLocal.background();
+      revealJsLocal.titles();
+      revealJsLocal.links();
       revealJsLocal.images();
       revealJsLocal.textarea();
       revealJsLocal.hiddenSlides();

diff --git a/task-runner.sh.command b/task-runner.sh.command
@@ -84,6 +84,7 @@ runTasks() {
 
 viewInstructions() {
    echo "For development mode:"
+   echo "   npx run-scripts build"
    echo "   open build/presentation-template.html"
    echo "For production mode:"
    echo "   open docs/presentation-template.html"