Merge branch 'improvements' into 'master'

A lot of reworks

See merge request Syndamia/syndamiadotcom!10

1 files changed, 45 insertions, 11 deletions

diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js
index 425815c..049d9e6 100644
--- a/src/scripts/presentation.js
+++ b/src/scripts/presentation.js
@@ -57,21 +57,30 @@ const articleBtn = document.getElementById('articleBtn');
 var pageY = 0;
 var pageX = 0;
 
-presentBtn.addEventListener('click', function() {
+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');
-	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
 	if (presenting) {
 		window.scrollTo(pageX, pageY);
@@ -79,26 +88,51 @@ presentBtn.addEventListener('click', function() {
 	else {
 		pageY = window.scrollY; pageX = window.scrollX;
 		window.scrollTo(0, 0);
-		fixAbsoluteSlideScale();
 	}
-
 	presenting = !presenting;
-});
+	fixAbsoluteSlideScale();
+}
+presentBtn.addEventListener('click', togglePresentMode);
 
 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 */
 
-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;
+
+	// 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();
 });