feat(scripts): Implement a list incrementation feature

Allows every list item to be shown one by one

1 files changed, 47 insertions, 4 deletions

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() {