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

1 files changed, 70 insertions, 12 deletions

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;
+	}
+});