From fccbced0ec577a8db6cca5055508cd8d93e6a986 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 27 Sep 2022 19:56:11 +0300 Subject: [scripts] Implemented a general styling and usage system for custom made presentations --- src/img/arrow-left-tabler.svg | 66 ++++++++++++++++++++ src/img/arrow-right-tabler.svg | 66 ++++++++++++++++++++ src/img/presentation-tabler.svg | 74 ++++++++++++++++++++++ src/img/printer-tabler.svg | 61 +++++++++++++++++++ src/presentation.css | 132 ++++++++++++++++++++++++++++++++++++++++ src/scripts/presentation.js | 55 +++++++++++++++++ 6 files changed, 454 insertions(+) create mode 100644 src/img/arrow-left-tabler.svg create mode 100644 src/img/arrow-right-tabler.svg create mode 100644 src/img/presentation-tabler.svg create mode 100644 src/img/printer-tabler.svg create mode 100644 src/presentation.css create mode 100644 src/scripts/presentation.js (limited to 'src') 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 @@ + + + + + + + + + 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 @@ + + + + + + + + + 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 @@ + + + + + + + + + + + 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 @@ + + + + + + + + + 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; +} -- cgit v1.3.1-23-gd82d