[presentation] Added a button to show the presentation as a normal article, added keyboard bindings, minor styling reworks

5 files changed, 138 insertions, 14 deletions

diff --git a/src/darkmode.css b/src/darkmode.css
index b977289..7a8ad3a 100644
--- a/src/darkmode.css
+++ b/src/darkmode.css
@@ -30,3 +30,7 @@
 #scrollBtn {
     background-color: var(--bg-color);
   }
+
+@media print {
+    body, article { background-color: var(--bg-color) }
+  }
diff --git a/src/img/article.svg b/src/img/article.svg
new file mode 100644
index 0000000..07198ea
--- /dev/null
+++ b/src/img/article.svg
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-article"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg12"
+   sodipodi:docname="article.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     id="namedview14"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     showgrid="false"
+     inkscape:zoom="37.375"
+     inkscape:cx="11.986622"
+     inkscape:cy="12.013378"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M 3,4 M 3,6 A 2,2 0 0 1 5,4 h 14 a 2,2 0 0 1 2,2 v 12 a 2,2 0 0 1 -2,2 H 5 A 2,2 0 0 1 3,18 Z"
+     id="path4"
+     style="stroke:#ffeede" />
+  <path
+     d="M 7,8 H 17"
+     id="path6"
+     style="stroke:#ffeede" />
+  <path
+     d="M 7,12 H 17"
+     id="path8"
+     style="stroke:#ffeede" />
+  <path
+     d="M 7,16 H 17"
+     id="path10"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/presentation.css b/src/presentation.css
index 10d1b08..f0d51d8 100644
--- a/src/presentation.css
+++ b/src/presentation.css
@@ -47,6 +47,7 @@ h2, h3, h4, h5, h6 {
         content: " \2550"
       }
   .fright { float: right; text-align: right; }
+  * + .fright { margin-left: 1em; }
 
   .layout-table {
       margin: 0;
@@ -97,7 +98,6 @@ h2, h3, h4, h5, h6 {
     width: min(100vh * 1.414, 100vw);
   }
   .invisible { visibility: hidden; }
-  .nodisplay { display: none; }
   .no-overflow { overflow: hidden; }
   .body-bg-color { background-color: var(--bg-color); }
 
diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js
index 332e2af..10d3c59 100644
--- a/src/scripts/presentation.js
+++ b/src/scripts/presentation.js
@@ -1,8 +1,8 @@
 /* Add stylesheet to page */
 
-var presStyle = document.createElement('link');
+var presStyle  = document.createElement('link');
 presStyle.type = 'text/css';
-presStyle.rel = 'stylesheet';
+presStyle.rel  = 'stylesheet';
 presStyle.href = '/presentation.css';
 document.head.appendChild(presStyle);
 
@@ -10,9 +10,9 @@ document.head.appendChild(presStyle);
 
 const printBtn = document.getElementById('printBtn');
 
-printBtn.onclick = function() {
+printBtn.addEventListener('click', function() {
 	window.print();
-}
+});
 
 /* Next and previous buttons */
 
@@ -22,26 +22,32 @@ const nextSlideBtn = document.getElementById('nextSlideBtn');
 const slides = document.getElementsByClassName('slide');
 var slideIndex = 0;
 
+  // Shows the "slideIndex + mod" numbered slide
 function showSlide(mod) {
 	slides[slideIndex].classList.remove('absolute-slide');
 	slideIndex = (slides.length + slideIndex + mod) % slides.length;
 	slides[slideIndex].classList.add('absolute-slide');
 }
 
-prevSlideBtn.onclick = function() {
+prevSlideBtn.addEventListener('click', function() {
 	showSlide(-1);
-}
+});
 
-nextSlideBtn.onclick = function() {
+nextSlideBtn.addEventListener('click', function() {
 	showSlide(+1);
-}
+});
 
 /* Present button */
 
 const presentCont = document.getElementById('presentCont');
 const presentBtn = document.getElementById('presentBtn');
+const articleBtn = document.getElementById('articleBtn');
 
-presentBtn.onclick = function() {
+var presenting = false;
+var pageY = 0;
+var pageX = 0;
+
+presentBtn.addEventListener('click', function() {
 	// Hide the whole page
 	document.body.classList.toggle('invisible');
 	document.body.classList.toggle('no-overflow');
@@ -51,8 +57,60 @@ presentBtn.onclick = function() {
 	presentCont.classList.toggle('absolute-cont');
 	prevSlideBtn.classList.toggle('nodisplay');
 	nextSlideBtn.classList.toggle('nodisplay');
+	articleBtn.classList.toggle('nodisplay');
+	printBtn.classList.toggle('nodisplay');
 	// Show the first slide
 	slides[slideIndex].classList.toggle('absolute-slide');
-	slideIndex = 0;
-	window.scrollTo(0, 0); // Alignment of presentation to screen
-}
+	// Alignment of presentation to screen
+	if (presenting) {
+		window.scrollTo(pageX, pageY);
+	}
+	else {
+		pageY = window.scrollY; pageX = window.scrollX;
+		window.scrollTo(0, 0);
+	}
+
+	presenting = !presenting;
+});
+
+/* Show as article button */
+
+articleBtn.addEventListener('click', function() {
+	printBtn.classList.toggle('nodisplay');
+	presentBtn.classList.toggle('nodisplay');
+	// Toggle presentation.css
+	document.styleSheets.item(3).disabled = !document.styleSheets.item(3).disabled;
+});
+
+/* Keyboard controls */
+
+document.addEventListener('keydown', function (e) {
+	switch (e.code) {
+		// Previous slide
+		case 'Backspace': case 'PageUp':
+		case 'ArrowLeft': case 'ArrowUp':
+			showSlide(-1);
+			break;
+		// Next slide
+		case 'Space': case 'Enter': case 'PageDown':
+		case 'ArrowRight': case 'ArrowDown':
+			showSlide(+1);
+			break;
+		// Start (toggle) presenting
+		case 'KeyP': case 'KeyT':
+			presentBtn.click();
+			break;
+		// Exit presentation
+		case 'Escape':
+			if (presenting) presentBtn.click();
+			break;
+		// Go to first slide
+		case 'Home':
+			if (presenting) showSlide(-slideIndex);
+			break;
+		// Go to last slide
+		case 'End':
+			if (presenting) showSlide(-slideIndex -1);
+			break;
+	}
+});
diff --git a/src/styles.css b/src/styles.css
index e3c3571..d49c189 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -440,7 +440,7 @@ dt { font-size: 1.2em; }
 }
 
 /* presentation.js */
-#presentCont { display: none; }
+.nodisplay { display: none; }
 
 /* File tables */
 .file-wrapper { margin: 0.5em 0; }