feat(scripts): Implement a list incrementation feature

Allows every list item to be shown one by one

3 files changed, 50 insertions, 5 deletions

diff --git a/src/presentation.css b/src/presentation.css
index 55373fc..39e0350 100644
--- a/src/presentation.css
+++ b/src/presentation.css
@@ -166,6 +166,8 @@
 .absolute-cont:not(:hover) { opacity: 0; }
 #slideIndex { border: none; font-size: 1.6em; }
 
+.absolute-slide .invisible-present { visibility: hidden !important; }
+
 /*## Media specific stylings ##*/
 
 @media screen {
diff --git a/src/regarding-js.du b/src/regarding-js.du
index ddcbea8..7faee12 100644
--- a/src/regarding-js.du
+++ b/src/regarding-js.du
@@ -14,7 +14,7 @@ Any user data that might be saved isn't, and never will be, used for purposes no
 |:[url /scripts/theme-changer.js theme-changer.js]:||:Change theme between light and dark (split in two files):||:[url https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer.js Link]:||:468B:||:18:|
 |:[url /scripts/page-width.js page-width.js]:||:Change whether text covers the whole width of the page or only the middle (applicable to wide screens):||:[url https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/page-width.js Link]:||:640B:||:23:|
 |:[url /scripts/expand-navbar.js expand-navbar.js]:||:Button to shrink and expand the sidebar:||:[url https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/expand-navbar.js Link]:||:728B:||:20:|
-|:[url /scripts/presentation.js presentation.js]:||:Presentation logic (button capabilities and other) =[Loaded only on pages with presentations!]=:||:[url https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/presentation.js Link]:||:5.0KB:||:154:|
+|:[url /scripts/presentation.js presentation.js]:||:Presentation logic (button capabilities and other) =[Loaded only on pages with presentations!]=:||:[url https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/presentation.js Link]:||:6.0KB:||:197:|
 |:[url /scripts/keyboard.js keyboard.js]:||:Implements keyboard shortcuts:||:[url https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/keyboard.js Link]:||:810B:||:40:|
 |::||:Total without presentation.js:||::||:4.0KB:||:153:|
 |::||:Total with presentation.js:||::||:9.0KB:||:307:|
diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js
index 6250d93..e63455d 100644
--- a/src/scripts/presentation.js
+++ b/src/scripts/presentation.js
@@ -27,16 +27,42 @@ if (isNaN(slideIndex)) slideIndex = 0;
 slideIndexShow.innerText = slideIndex;
 slideIndexShow.href = '#slide-' + slideIndex;
 
+var liIncrement = [];
+var liCurrent = 0;
+
+function resetIncrementation() {
+	liCurrent = 0;
+	liIncrement.forEach((li, i) => li.classList.remove('invisible-present'));
+	liIncrement = [];
+}
+
   // Shows the "slideIndex + mod" numbered slide
 function showSlide(mod) {
 	if (!presenting) return;
 
+	if (incrementationMode) {
+		if (mod > 0 && liIncrement.length > 0 && liCurrent < liIncrement.length) {
+			liIncrement[liCurrent++].classList.remove('invisible-present');
+			return;
+		}
+		else if (mod < 0) {
+			resetIncrementation();
+		}
+	}
+
 	slides[slideIndex].classList.remove('absolute-slide');
 	slideIndex = (slides.length + slideIndex + mod) % slides.length;
 	slides[slideIndex].classList.add('absolute-slide');
 
+	if (incrementationMode && mod > 0) {
+		liCurrent = 0;
+		liIncrement = slides[slideIndex].querySelectorAll('li');
+		liIncrement.forEach((li, i) => li.classList.add('invisible-present'));
+	}
+
 	slideIndexShow.innerText = slideIndex;
 	slideIndexShow.href = '#slide-' + slideIndex;
+
 }
 
 prevSlideBtn.addEventListener('click', function() {
@@ -47,6 +73,23 @@ nextSlideBtn.addEventListener('click', function() {
 	showSlide(+1);
 });
 
+/* Incrementation button */
+
+const incrementationBtn = document.getElementById('incrementationBtn');
+var incrementationMode = false;
+
+function updateIncrementationMode() {
+	incrementationMode = !incrementationMode;
+
+	if (incrementationMode)
+		incrementationBtn.innerText = '⋱';
+	else
+		incrementationBtn.innerText = '⋮';
+
+	resetIncrementation();
+}
+incrementationBtn.addEventListener('click', updateIncrementationMode);
+
 /* Present button */
 
 const presentCont = document.getElementById('presentCont');
@@ -68,7 +111,7 @@ function togglePresentMode() {
 	// Show the slide controller
 	presentCont.classList.toggle('absolute-cont');
 	for (var i = presentCont.children.length - 1; i >= 0; i--) {
-		if (i == 4) continue; // presentBtn
+		if (i == 5) continue; // presentBtn
 		presentCont.children[i].classList.toggle('nodisplay');
 	}
 	presentBtn.classList.toggle('setting-btn');
@@ -115,10 +158,10 @@ function togglePresentationController() {
 	presentBtn.classList.toggle('nodisplay');
 
 	// Fix message
-	if (articleBtn.innerText[0] === 'A')
-		articleBtn.innerText = 'Slide' + articleBtn.innerText.substr(7);
+	if (articleBtn.innerText[3] === 'a')
+		articleBtn.innerText = 'As slides ☲';
 	else
-		articleBtn.innerText = 'Article' + articleBtn.innerText.substr(5);
+		articleBtn.innerText = 'As article ☲';
 }
 
 function toggleArticleMode() {