From fc912ee942e9e577156fcedee047fee66d0eed13 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 11 Jul 2023 09:36:32 +0300 Subject: (presentation) Fixed slide scaling to work properly --- src/scripts/presentation.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'src/scripts/presentation.js') diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js index 425815c..ba7dd66 100644 --- a/src/scripts/presentation.js +++ b/src/scripts/presentation.js @@ -79,20 +79,26 @@ presentBtn.addEventListener('click', function() { else { pageY = window.scrollY; pageX = window.scrollX; window.scrollTo(0, 0); - fixAbsoluteSlideScale(); } presenting = !presenting; + fixAbsoluteSlideScale(); }); function fixAbsoluteSlideScale() { - var scale = Math.min(window.innerHeight / slides[0].offsetHeight, window.innerWidth / slides[0].offsetWidth); + var height = (presenting) ? window.innerHeight : articleElem.offsetHeight; + var width = (presenting) ? window.innerWidth : articleElem.offsetWidth - 32; + var scale = Math.min(height / slides[0].offsetHeight, width / slides[0].offsetWidth); + // Update .slide + document.styleSheets.item(3).cssRules[0].style.transform = 'scale(' + scale + ')'; + document.styleSheets.item(3).cssRules[0].style.marginBottom = 'calc(1em - ' + slides[0].offsetHeight + 'px * ' + (1 - scale) + ')'; // Update .absolute-slide document.styleSheets.item(3).cssRules[1].style.transform = 'translate(-50%, -50%) scale(' + scale + ')'; // Update .clicked-image document.styleSheets.item(3).cssRules[2].style.transform = 'translate(-50%, -50%) scale(' + (1/scale) + ')'; } window.addEventListener('resize', fixAbsoluteSlideScale); +window.addEventListener('load', fixAbsoluteSlideScale); /* Show as article button */ -- cgit v1.3.1-23-gd82d From 7e3f6667b9668f21c7c2b45d5c6e0a42b748c0fb Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 11 Jul 2023 12:46:08 +0300 Subject: (presentation) nodisplay is toggled dynamically, updated controller button styles and added labels where applicable --- awk-edits/Presentation.awk | 6 +++--- src/scripts/presentation.js | 14 +++++++++----- src/styles.css | 2 +- 3 files changed, 13 insertions(+), 9 deletions(-) (limited to 'src/scripts/presentation.js') diff --git a/awk-edits/Presentation.awk b/awk-edits/Presentation.awk index d1233c6..b0ed659 100644 --- a/awk-edits/Presentation.awk +++ b/awk-edits/Presentation.awk @@ -159,9 +159,9 @@ BEGIN { " \\←" ORS \ " 0" ORS \ " \\→" ORS \ -" \\☲" ORS \ -" \\⎚" ORS \ -" \\⎙" ORS \ +" Article view \\☲" ORS \ +" Present \\⎚" ORS \ +" Print \\⎙" ORS \ "

" ORS \ " " diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js index ba7dd66..1a9b42c 100644 --- a/src/scripts/presentation.js +++ b/src/scripts/presentation.js @@ -65,11 +65,15 @@ presentBtn.addEventListener('click', function() { document.body.classList.toggle('body-bg-color'); // Show the slide controller presentCont.classList.toggle('absolute-cont'); - prevSlideBtn.classList.toggle('nodisplay'); - slideIndexShow.classList.toggle('nodisplay'); - nextSlideBtn.classList.toggle('nodisplay'); - articleBtn.classList.toggle('nodisplay'); - printBtn.classList.toggle('nodisplay'); + for (var i = presentCont.children.length - 1; i >= 0; i--) { + if (i == 4) continue; // presentBtn + presentCont.children[i].classList.toggle('nodisplay'); + } + presentBtn.classList.toggle('setting-btn'); + if (presentBtn.innerHTML[0] === 'P') + presentBtn.innerHTML = presentBtn.innerHTML.substr(8); + else + presentBtn.innerHTML = 'Present ' + presentBtn.innerHTML; // Show the first slide slides[slideIndex].classList.toggle('absolute-slide'); // Alignment of presentation to screen diff --git a/src/styles.css b/src/styles.css index 2a14de5..a8fd245 100644 --- a/src/styles.css +++ b/src/styles.css @@ -334,13 +334,13 @@ dt, dd { line-height: 1em; } .setting-btn { - font-size: 0.5em; text-align: center; display: inline-block; line-height: 1em; border: 1px solid var(--border-color); padding: 0.2em 0.3em 0.4em; } + #settingsWrapper > .setting-btn { font-size: 0.5em; } #footer { font-size: 0.7em; overflow-x: hidden; -- cgit v1.3.1-23-gd82d From 0635b41dd22b5978475b95fffba94fe2a19d82fc Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 11 Jul 2023 12:48:59 +0300 Subject: (presentation) Moved present and article mode functions outside of their event listeners and updated keyboard to use the functions Button clicking isn't very well supported for older browsers --- src/scripts/keyboard.js | 4 ++-- src/scripts/presentation.js | 9 +++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) (limited to 'src/scripts/presentation.js') diff --git a/src/scripts/keyboard.js b/src/scripts/keyboard.js index 2609cfe..bacbea1 100644 --- a/src/scripts/keyboard.js +++ b/src/scripts/keyboard.js @@ -22,11 +22,11 @@ document.addEventListener('keydown', function (e) { break; // Start (toggle) presenting case 'KeyP': case 'KeyT': - presentBtn.click(); + togglePresentMode(); break; // Exit presentation case 'Escape': - if (presenting) presentBtn.click(); + if (presenting) togglePresentMode(); break; // Go to first slide case 'Home': diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js index 1a9b42c..98849a2 100644 --- a/src/scripts/presentation.js +++ b/src/scripts/presentation.js @@ -57,7 +57,7 @@ const articleBtn = document.getElementById('articleBtn'); var pageY = 0; var pageX = 0; -presentBtn.addEventListener('click', function() { +function togglePresentMode() { // Hide the whole page document.body.classList.toggle('invisible'); document.body.classList.toggle('no-overflow'); @@ -88,6 +88,8 @@ presentBtn.addEventListener('click', function() { presenting = !presenting; fixAbsoluteSlideScale(); }); +} +presentBtn.addEventListener('click', togglePresentMode); function fixAbsoluteSlideScale() { var height = (presenting) ? window.innerHeight : articleElem.offsetHeight; @@ -106,9 +108,12 @@ window.addEventListener('load', fixAbsoluteSlideScale); /* Show as article button */ -articleBtn.addEventListener('click', function() { +function toggleArticleMode() { printBtn.classList.toggle('nodisplay'); presentBtn.classList.toggle('nodisplay'); // Toggle presentation.css document.styleSheets.item(3).disabled = !document.styleSheets.item(3).disabled; +} +articleBtn.addEventListener('click', toggleArticleMode); +window.addEventListener('load', function() { }); -- cgit v1.3.1-23-gd82d From c6cd443da038de421909278726b18972dd4cc19a Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 11 Jul 2023 12:49:45 +0300 Subject: (presentation) Disabled present mode being activated while in article mode and minor code formatting fixes --- src/scripts/presentation.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src/scripts/presentation.js') diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js index 98849a2..8dd4960 100644 --- a/src/scripts/presentation.js +++ b/src/scripts/presentation.js @@ -58,11 +58,14 @@ var pageY = 0; var pageX = 0; function togglePresentMode() { + if (document.styleSheets.item(3).disabled) return; + // Hide the whole page document.body.classList.toggle('invisible'); document.body.classList.toggle('no-overflow'); // Fix background color document.body.classList.toggle('body-bg-color'); + // Show the slide controller presentCont.classList.toggle('absolute-cont'); for (var i = presentCont.children.length - 1; i >= 0; i--) { @@ -76,6 +79,7 @@ function togglePresentMode() { presentBtn.innerHTML = 'Present ' + presentBtn.innerHTML; // Show the first slide slides[slideIndex].classList.toggle('absolute-slide'); + // Alignment of presentation to screen if (presenting) { window.scrollTo(pageX, pageY); @@ -84,10 +88,8 @@ function togglePresentMode() { pageY = window.scrollY; pageX = window.scrollX; window.scrollTo(0, 0); } - presenting = !presenting; fixAbsoluteSlideScale(); -}); } presentBtn.addEventListener('click', togglePresentMode); -- cgit v1.3.1-23-gd82d From a3827aca5f9d0e021bc94a00e4f022982e4a3db6 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 11 Jul 2023 12:50:36 +0300 Subject: (presentation) Implemented changing label on article mode button and query inside URL when in article mode So you could share a presentation as an article --- src/scripts/presentation.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'src/scripts/presentation.js') diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js index 8dd4960..484961e 100644 --- a/src/scripts/presentation.js +++ b/src/scripts/presentation.js @@ -115,7 +115,22 @@ function toggleArticleMode() { presentBtn.classList.toggle('nodisplay'); // Toggle presentation.css document.styleSheets.item(3).disabled = !document.styleSheets.item(3).disabled; + + // Add a=y to url when in article mode + var url = window.location.href.substring(0, window.location.href.indexOf('?')); + if (document.styleSheets.item(3).disabled) url += '?a=y'; + url += window.location.href.substr(window.location.href.indexOf('#')); + + window.history.replaceState(history.state, document.title, url); + + // Fix message + if (articleBtn.innerHTML[0] === 'A') + articleBtn.innerHTML = 'Slide' + articleBtn.innerHTML.substr(7); + else + articleBtn.innerHTML = 'Article' + articleBtn.innerHTML.substr(5); } articleBtn.addEventListener('click', toggleArticleMode); window.addEventListener('load', function() { + if (window.location.href.substr(window.location.href.indexOf('?'), 4) === '?a=y') + toggleArticleMode(); }); -- cgit v1.3.1-23-gd82d From c4214d237efcf5deab7c2137b87b137d7a7af69d Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 11 Jul 2023 13:10:37 +0300 Subject: (presentation) Minor code style change: added curly braces to simple if-else statements --- src/scripts/presentation.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'src/scripts/presentation.js') diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js index 484961e..049d9e6 100644 --- a/src/scripts/presentation.js +++ b/src/scripts/presentation.js @@ -73,10 +73,11 @@ function togglePresentMode() { presentCont.children[i].classList.toggle('nodisplay'); } presentBtn.classList.toggle('setting-btn'); - if (presentBtn.innerHTML[0] === 'P') + if (presentBtn.innerHTML[0] === 'P') { presentBtn.innerHTML = presentBtn.innerHTML.substr(8); - else + } else { presentBtn.innerHTML = 'Present ' + presentBtn.innerHTML; + } // Show the first slide slides[slideIndex].classList.toggle('absolute-slide'); @@ -124,10 +125,11 @@ function toggleArticleMode() { window.history.replaceState(history.state, document.title, url); // Fix message - if (articleBtn.innerHTML[0] === 'A') + if (articleBtn.innerHTML[0] === 'A') { articleBtn.innerHTML = 'Slide' + articleBtn.innerHTML.substr(7); - else + } else { articleBtn.innerHTML = 'Article' + articleBtn.innerHTML.substr(5); + } } articleBtn.addEventListener('click', toggleArticleMode); window.addEventListener('load', function() { -- cgit v1.3.1-23-gd82d