[scripts] Implemented a general styling and usage system for custom made presentations

1 files changed, 55 insertions, 0 deletions

diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js
new file mode 100644
index 0000000..b611355
--- /dev/null
+++ b/src/scripts/presentation.js
@@ -0,0 +1,55 @@
+/* Add stylesheet to page */
+
+var presStyle = document.createElement('link');
+presStyle.type = 'text/css';
+presStyle.rel = 'stylesheet';
+presStyle.href = '/presentation.css';
+document.head.appendChild(presStyle);
+
+/* Print button */
+
+const printBtn = document.getElementById('printBtn');
+
+printBtn.onclick = function() {
+	window.print();
+}
+
+/* Next and previous buttons */
+
+const prevSlideBtn = document.getElementById('prevSlideBtn');
+const nextSlideBtn = document.getElementById('nextSlideBtn');
+
+const slides = document.getElementsByClassName('slide');
+var slideIndex = 0;
+
+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() {
+	showSlide(-1);
+}
+
+nextSlideBtn.onclick = function() {
+	showSlide(+1);
+}
+
+/* Present button */
+
+const presentCont = document.getElementById('presentCont');
+const presentBtn = document.getElementById('presentBtn');
+
+presentBtn.onclick = function() {
+	// Hide the whole page
+	document.body.classList.toggle('invisible');
+	document.body.classList.toggle('no-overflow');
+	// Show the slide controller
+	presentCont.classList.toggle('absolute-cont');
+	prevSlideBtn.classList.toggle('nodisplay');
+	nextSlideBtn.classList.toggle('nodisplay');
+	// Show the first slide
+	slides[slideIndex].classList.toggle('absolute-slide');
+	slideIndex = 0;
+}