(presentation) Big overhaul, presentation.css is now always included, loading an article-mode page happens without slides flash, fixed certain cases where slides wouldn't resize but needed to

5 files changed, 48 insertions, 46 deletions

diff --git a/src/_header.html b/src/_header.html
index ea4b783..38046bc 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -12,6 +12,7 @@
 	<link rel="stylesheet" href="/styles.css">
 	<link rel="stylesheet" href="/darkmode.css">
 	<link rel="stylesheet" href="/hide-js-styling.css">
+	<link rel="stylesheet" href="/presentation.css">
 	<script type="text/javascript" src="/scripts/styling-preload.js" crossorigin="anonymous"></script>
 	<meta name="description" content="[DESCRIPTION]">
 	<!-- Thanks https://stackoverflow.com/a/25093272/12036073 -->
diff --git a/src/presentation.css b/src/presentation.css
index 7de2346..cc82b04 100644
--- a/src/presentation.css
+++ b/src/presentation.css
@@ -28,7 +28,6 @@
 
 /* Stylesheet override */
 
-article { overflow: hidden; }
 /* Presentation controller */
 
 #presentCont { margin: 0.5em 0.5em 0.5em 0; }
@@ -161,19 +160,10 @@ absolute-slide {...} */
 }
 
 @media print {
-  article, body {
-      border: none !important;
-      margin: 0;
-      max-width: none;
-      padding: 0;
-    }
-    nav, article > :not(.slide), #pagenav {
-        display: none !important;
-      }
-    .slide {
-        height: 210mm;
-        width: 297mm;
-        margin: 0;
-      }
+  /* The contents of this rule are inserted from presentation.js
+   * because we need to do changes to non-presentation elements
+   * (like article or #pagenav) when the current page is trully
+   * a presentation, while presentation.css is inserted in every
+   * page.
+   */
 }
-
diff --git a/src/scripts/page-width.js b/src/scripts/page-width.js
index 9b632df..784c0f2 100644
--- a/src/scripts/page-width.js
+++ b/src/scripts/page-width.js
@@ -18,4 +18,6 @@ widthBtn.onclick = function() {
 		widthLabel.innerText = 'Narrow';
 		localStorage.setItem('width', 'wide');
 	}
+
+	fixAbsoluteSlideScale(); // From presentation.js
 }
diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js
index 625b0ec..6250d93 100644
--- a/src/scripts/presentation.js
+++ b/src/scripts/presentation.js
@@ -1,13 +1,12 @@
-/* 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 */
 
+presentationStyle.cssRules[presentationStyle.cssRules.length - 1]
+	.insertRule("article, body { border: none !important; margin: 0; max-width: none; padding: 0; }");
+presentationStyle.cssRules[presentationStyle.cssRules.length - 1]
+	.insertRule("nav, article > :not(.slide), #pagenav { display: none !important; }");
+presentationStyle.cssRules[presentationStyle.cssRules.length - 1]
+	.insertRule(".slide { height: 210mm; width: 297mm; margin: 0; }");
+
 const printBtn = document.getElementById('printBtn');
 
 printBtn.addEventListener('click', function() {
@@ -58,7 +57,7 @@ var pageY = 0;
 var pageX = 0;
 
 function togglePresentMode() {
-	if (document.styleSheets.item(3).disabled) return;
+	if (presentationStyle.disabled) return;
 
 	// Hide the whole page
 	document.body.classList.toggle('invisible');
@@ -99,29 +98,38 @@ function fixAbsoluteSlideScale() {
 	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) + ')';
+	presentationStyle.cssRules[0].style.transform = 'scale(' + scale + ')';
+	presentationStyle.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 + ')';
+	presentationStyle.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) + ')';
+	presentationStyle.cssRules[2].style.transform = 'translate(-50%, -50%) scale(' + (1/scale) + ')';
 }
 window.addEventListener('resize', fixAbsoluteSlideScale);
 window.addEventListener('load', fixAbsoluteSlideScale);
 
 /* Show as article button */
 
-function toggleArticleMode() {
-	var href = window.location.href;
-	var indqa = href.indexOf('?a');
-
+function togglePresentationController() {
 	printBtn.classList.toggle('nodisplay');
 	presentBtn.classList.toggle('nodisplay');
+
+	// Fix message
+	if (articleBtn.innerText[0] === 'A')
+		articleBtn.innerText = 'Slide' + articleBtn.innerText.substr(7);
+	else
+		articleBtn.innerText = 'Article' + articleBtn.innerText.substr(5);
+}
+
+function toggleArticleMode() {
 	// Toggle presentation.css
-	document.styleSheets.item(3).disabled = !document.styleSheets.item(3).disabled;
+	presentationStyle.disabled = !presentationStyle.disabled;
 
-	// Add "a" to url when in article mode
-	if (document.styleSheets.item(3).disabled && indqa == -1) {
+	// Add or remove "a" to url when in or not in article mode
+	var href = window.location.href;
+	var indqa = href.indexOf('?a');
+
+	if (presentationStyle.disabled && indqa == -1) {
 		var indquery = href.indexOf('?');
 		if (indquery < 0) {
 			var indend = Math.max(href.lastIndexOf('/'), href.indexOf('.html') + 4);
@@ -131,20 +139,16 @@ function toggleArticleMode() {
 			href = href.slice(0, indquery + 1) + 'a' + href.slice(indquery + 1);
 		}
 	}
-	else if (!document.styleSheets.item(3).disabled && indqa > -1) {
+	else if (!presentationStyle.disabled && indqa > -1) {
 		href = href.slice(0, indqa) + href.slice(indqa + 2);
 	}
 
 	window.history.replaceState(history.state, document.title, href);
 
-	// Fix message
-	if (articleBtn.innerText[0] === 'A')
-		articleBtn.innerText = 'Slide' + articleBtn.innerText.substr(7);
-	else
-		articleBtn.innerText = 'Article' + articleBtn.innerText.substr(5);
+	togglePresentationController();
+	fixAbsoluteSlideScale();
 }
 articleBtn.addEventListener('click', toggleArticleMode);
-window.addEventListener('load', function() {
-	if (window.location.href.substr(window.location.href.indexOf('?'), 2) === '?a')
-		toggleArticleMode();
-});
+
+if (presentationStyle.disabled)
+	togglePresentationController();
diff --git a/src/scripts/styling-preload.js b/src/scripts/styling-preload.js
index c73a6b3..db87911 100644
--- a/src/scripts/styling-preload.js
+++ b/src/scripts/styling-preload.js
@@ -6,3 +6,8 @@ if (localStorage.getItem('theme') === 'light')
 /* No JS */
 const hideJSStylings = document.styleSheets[2];
 hideJSStylings.disabled = true;
+
+/* Presentation */
+const presentationStyle = document.styleSheets[3];
+if (window.location.href.indexOf('?a') > -1)
+	presentationStyle.disabled = true;