Merge branch 'improvements' into 'master'

A lot of reworks

See merge request Syndamia/syndamiadotcom!10

6 files changed, 63 insertions, 54 deletions

diff --git a/src/scripts/back-to-top.js b/src/scripts/back-to-top.js
index d7222ce..2ca728a 100644
--- a/src/scripts/back-to-top.js
+++ b/src/scripts/back-to-top.js
@@ -1,13 +1,15 @@
 const scrollBtn = document.getElementById('scrollBtn');
 
-window.onscroll = function() {
+function scrollBtnShow() {
 	if (window.scrollY >= 800) {
 		scrollBtn.style.display = 'block';
 	} else {
 		scrollBtn.style.display = 'none';
 	}
 }
+window.addEventListener('scroll', scrollBtnShow);
+window.addEventListener('load', scrollBtnShow);
 
-scrollBtn.onclick = function() {
+scrollBtn.addEventListener('click', function() {
 	window.scrollTo(0, 0);
-}
+});
diff --git a/src/scripts/expand-navbar.js b/src/scripts/expand-navbar.js
index 9ef896f..d97314b 100644
--- a/src/scripts/expand-navbar.js
+++ b/src/scripts/expand-navbar.js
@@ -2,7 +2,7 @@ const expandBtn = document.getElementById('expandNavbarBtn');
 const sidebarElem = document.getElementById('sidebar');
 
 if (localStorage.getItem('navbar') === 'hidden' || window.innerWidth <= 610) {
-	expandBtn.src = '/img/layout-navbar-expand.svg';
+	expandBtn.innerHTML = '&#x25BC;';
 	sidebarElem.classList.add('sidebar-hidden');
 }
 
@@ -10,11 +10,11 @@ expandBtn.onclick = function() {
 	sidebarElem.classList.toggle('sidebar-hidden');
 
 	if (!sidebarElem.classList.contains('sidebar-hidden')) {
-		expandBtn.src = '/img/layout-navbar-collapse.svg';
+		expandBtn.innerHTML = '&#x25B2;'; // triangle pointing up
 		if (window.innerWidth > 610) localStorage.setItem('navbar', 'norm');
 	}
 	else {
-		expandBtn.src = '/img/layout-navbar-expand.svg';
+		expandBtn.innerHTML = '&#x25BC;'; // triangle pointing down
 		if (window.innerWidth > 610) localStorage.setItem('navbar', 'hidden');
 	}
 }
diff --git a/src/scripts/keyboard.js b/src/scripts/keyboard.js
index f618e45..bacbea1 100644
--- a/src/scripts/keyboard.js
+++ b/src/scripts/keyboard.js
@@ -1,31 +1,7 @@
-const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
-var currentHeading = 0;
-
 document.addEventListener('keydown', function (e) {
 	if (e.ctrlKey) return;
 
 	switch (e.code) {
-		case 'KeyG':
-			currentHeading = (e.shiftKey) ? headings.length - 1 : 0;
-			headings[currentHeading].scrollIntoView();
-			break;
-
-		case 'KeyJ': case 'KeyL':
-			if (typeof presenting != 'undefined' && presenting) showSlide(+1);
-			else {
-				currentHeading = (headings.length + currentHeading + 1) % headings.length;
-				headings[currentHeading].scrollIntoView();
-			}
-			break;
-
-		case 'KeyK': case 'KeyH':
-			if (typeof presenting != 'undefined' && presenting) showSlide(-1);
-			else {
-				currentHeading = (headings.length + currentHeading - 1) % headings.length;
-				headings[currentHeading].scrollIntoView();
-			}
-			break;
-
 		/* theme-changer.js */
 
 		case 'KeyC':
@@ -35,23 +11,22 @@ document.addEventListener('keydown', function (e) {
 		/* presentation.js */
 
 		// Previous slide
-		case 'Backspace': case 'PageUp':
+		case 'KeyK': case 'Backspace': case 'PageUp':
 		case 'ArrowLeft': case 'ArrowUp':
 			showSlide(-1);
 			break;
 		// Next slide
-		case 'Space': case 'Enter': case 'PageDown':
-		
+		case 'KeyJ': case 'Space': case 'Enter': case 'PageDown':
 		case 'ArrowRight': case 'ArrowDown':
 			showSlide(+1);
 			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/page-width.js b/src/scripts/page-width.js
index 38add7c..6d700d0 100644
--- a/src/scripts/page-width.js
+++ b/src/scripts/page-width.js
@@ -2,7 +2,7 @@ const widthBtn = document.getElementById('changeWidthBtn');
 const articleElem = document.getElementsByTagName('article')[0];
 
 if (localStorage.getItem('width') === 'wide') {
-	widthBtn.src = '/img/viewport-narrow.svg';
+	widthBtn.innerHTML = 'Narrow<br>article';
 	articleElem.classList.add('noMaxWidth');
 }
 
@@ -10,11 +10,11 @@ widthBtn.onclick = function() {
 	articleElem.classList.toggle('noMaxWidth');
 
 	if (localStorage.getItem('width') !== 'norm') {
-		widthBtn.src = '/img/viewport-wide.svg';
+		widthBtn.innerHTML = 'Wide<br>article';
 		localStorage.setItem('width', 'norm');
 	}
 	else {
-		widthBtn.src = '/img/viewport-narrow.svg';
+		widthBtn.innerHTML = 'Narrow<br>article';
 		localStorage.setItem('width', 'wide');
 	}
 }
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();
 });
diff --git a/src/scripts/theme-changer.js b/src/scripts/theme-changer.js
index 39eedc9..94eb61f 100644
--- a/src/scripts/theme-changer.js
+++ b/src/scripts/theme-changer.js
@@ -1,19 +1,17 @@
 const themeBtn = document.getElementById('changeThemeBtn');
 
 if (darkThemeStyle.disabled)
-	themeBtn.src = '/img/moon.svg';
-
-themeBtn.style.display = 'initial';
+	themeBtn.innerHTML = 'Dark<br>theme';
 
 themeBtn.onclick = function() {
 	darkThemeStyle.disabled = !darkThemeStyle.disabled;
 
 	if (localStorage.getItem('theme') !== 'light') {
-		themeBtn.src = '/img/moon.svg';
+		themeBtn.innerHTML = 'Dark<br>theme';
 		localStorage.setItem('theme', 'light');
 	}
 	else {
-		themeBtn.src = '/img/sun.svg';
+		themeBtn.innerHTML = 'Light<br>theme';
 		localStorage.setItem('theme', 'dark');
 	}
 }