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

6 files changed, 454 insertions, 0 deletions

diff --git a/src/img/arrow-left-tabler.svg b/src/img/arrow-left-tabler.svg
new file mode 100644
index 0000000..178a1f1
--- /dev/null
+++ b/src/img/arrow-left-tabler.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-arrow-left"
+   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="svg10"
+   sodipodi:docname="arrow-left-tabler.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   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="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="37.125"
+     inkscape:cx="12.013468"
+     inkscape:cy="12.013468"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <line
+     x1="5"
+     y1="12"
+     x2="19"
+     y2="12"
+     id="line4"
+     style="stroke:#ffeede" />
+  <line
+     x1="5"
+     y1="12"
+     x2="11"
+     y2="18"
+     id="line6"
+     style="stroke:#ffeede" />
+  <line
+     x1="5"
+     y1="12"
+     x2="11"
+     y2="6"
+     id="line8"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/img/arrow-right-tabler.svg b/src/img/arrow-right-tabler.svg
new file mode 100644
index 0000000..6d7e63d
--- /dev/null
+++ b/src/img/arrow-right-tabler.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-arrow-right"
+   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="svg10"
+   sodipodi:docname="arrow-right-tabler.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   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="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="37.125"
+     inkscape:cx="12.013468"
+     inkscape:cy="12.013468"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <line
+     x1="5"
+     y1="12"
+     x2="19"
+     y2="12"
+     id="line4"
+     style="stroke:#ffeede" />
+  <line
+     x1="13"
+     y1="18"
+     x2="19"
+     y2="12"
+     id="line6"
+     style="stroke:#ffeede" />
+  <line
+     x1="13"
+     y1="6"
+     x2="19"
+     y2="12"
+     id="line8"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/img/presentation-tabler.svg b/src/img/presentation-tabler.svg
new file mode 100644
index 0000000..ac3f107
--- /dev/null
+++ b/src/img/presentation-tabler.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-presentation"
+   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="svg14"
+   sodipodi:docname="presentation-tabler.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   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="defs18" />
+  <sodipodi:namedview
+     id="namedview16"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="37.125"
+     inkscape:cx="12.013468"
+     inkscape:cy="12.013468"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg14" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <line
+     x1="3"
+     y1="4"
+     x2="21"
+     y2="4"
+     id="line4"
+     style="stroke:#ffeede" />
+  <path
+     d="m 4,4 v 10 a 2,2 0 0 0 2,2 h 12 a 2,2 0 0 0 2,-2 V 4"
+     id="path6"
+     style="stroke:#ffeede" />
+  <line
+     x1="12"
+     y1="16"
+     x2="12"
+     y2="20"
+     id="line8"
+     style="stroke:#ffeede" />
+  <line
+     x1="9"
+     y1="20"
+     x2="15"
+     y2="20"
+     id="line10"
+     style="stroke:#ffeede" />
+  <path
+     d="m 8,12 3,-3 2,2 3,-3"
+     id="path12"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/img/printer-tabler.svg b/src/img/printer-tabler.svg
new file mode 100644
index 0000000..4ff29aa
--- /dev/null
+++ b/src/img/printer-tabler.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-printer"
+   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="svg10"
+   sodipodi:docname="printer-tabler.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   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="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="37.125"
+     inkscape:cx="12.013468"
+     inkscape:cy="12.013468"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="m 17,17 h 2 a 2,2 0 0 0 2,-2 V 11 A 2,2 0 0 0 19,9 H 5 a 2,2 0 0 0 -2,2 v 4 a 2,2 0 0 0 2,2 h 2"
+     id="path4"
+     style="stroke:#ffeede" />
+  <path
+     d="M 17,9 V 5 A 2,2 0 0 0 15,3 H 9 A 2,2 0 0 0 7,5 v 4"
+     id="path6"
+     style="stroke:#ffeede" />
+  <rect
+     x="7"
+     y="13"
+     width="10"
+     height="8"
+     rx="2"
+     id="rect8"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/presentation.css b/src/presentation.css
new file mode 100644
index 0000000..0b59e58
--- /dev/null
+++ b/src/presentation.css
@@ -0,0 +1,132 @@
+/* Stylesheet override */
+
+article {
+  font-size: 22px;
+}
+
+h2, h3, h4, h5, h6 {
+  margin-block-start: 0;
+  margin-block-end: 0.5em;
+}
+
+/* Presentation controller */
+
+#presentCont {
+  margin: 0.5em 0.5em 0.5em 0;
+}
+
+#presentCont > img {
+  height: 1.4em;
+}
+
+/* Slides styles */
+
+.fow {
+  flex-direction: row;
+}
+
+.fow > *:not(:last-child) {
+  margin-right: 0.5em;
+}
+
+.fol {
+  flex-direction: column;
+}
+
+.fol > *:not(:last-child) {
+  margin-bottom: 0.5em;
+}
+
+.fow, .fol {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.fow, .fol, .fow > *, .fol > *, .slide > * {
+  min-width: 0;
+  min-height: 0;
+}
+
+.slide {
+  display: flex;
+  flex-direction: column;
+  width: 297mm; /* Size of landscape A4 paper */
+  height: 210mm;
+
+  padding: 1em;
+  box-sizing: border-box;
+}
+
+.centered {
+  text-align: center;
+}
+
+.centered > h1::after, .centered > h2::after, .centered > h3::after {
+  content: " \2550"
+}
+
+.flexer {
+  flex: 1;
+}
+
+/* Media specific stylings */
+
+@media screen {
+  .slide {
+    border: 1px solid var(--fg-color);
+    margin-bottom: 1em;
+  }
+}
+
+@media print {
+  article, body {
+    margin: 0;
+    border: none !important;
+    padding: 0;
+    max-width: auto;
+  }
+
+  nav {
+    display: none !important;
+  }
+
+  .slide {
+    width: 296.99mm;
+    height: 209.616mm;
+  }
+}
+
+/* Presenting mode */
+
+.invisible {
+  visibility: hidden;
+}
+
+.nodisplay {
+  display: none;
+}
+
+.no-overflow {
+  overflow: hidden;
+}
+
+.absolute-slide {
+  visibility: visible;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  height: min(100vh, 100vw / 1.414);
+  width: min(100vh * 1.414, 100vw);
+  border: none;
+}
+
+.absolute-cont {
+  visibility: visible;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  opacity: 40%;
+  z-index: 10;
+}
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;
+}