Add basic slide overview implementation

slidify.js

@@ -2,6 +2,7 @@ window.addEventListener('load', init);
 
 let slides;
 let currentSlide;
+let topicList;
 
 function init() {
 	slides = Array.from(document.querySelectorAll('article'));
@@ -9,6 +10,7 @@ function init() {
 		slides[i].id = `slide${i}`;
 	}
 	resumeOrGoToStart();
+	topicList = createTopicList();
 	document.addEventListener('keydown', onKeyPressed);
 }
 
@@ -66,12 +68,15 @@ function onKeyPressed(event) {
 		case 35: // end
 			goToLastSlide();
 			break;
+		case 17: // ctrl
+			toggleTopicList();
+			break;
 	}
 }
 
 function showNextFragment() {
-	let fragments = [... slides[currentSlide].querySelectorAll('.fragment')]
-	let visible = [... slides[currentSlide].querySelectorAll('.fragment.visible')]
+	let fragments = [...slides[currentSlide].querySelectorAll('.fragment')]
+	let visible = [...slides[currentSlide].querySelectorAll('.fragment.visible')]
 
 	if (fragments.length == visible.length) {
 		return false;
@@ -90,4 +95,75 @@ function showPreviousFragment() {
 		visible[visible.length - 1].classList.remove('visible')
 		return true;
 	}
+}
+
+function getTopicListContent() {
+	let results = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
+	let resultHtml = '<ul>';
+	let currentLevel = 1;
+
+	results.forEach(element => {
+		let node = element.nodeName;
+		let level = parseInt(node[node.length - 1]);
+
+		let parentElement = element.parentElement
+		while (parentElement.nodeName.toLowerCase() != 'article') {
+			parentElement = parentElement.parentElement;
+		}
+		let parentSlideID = parentElement.id;
+
+		if (level > currentLevel) {
+			resultHtml += `<ul><li><a href="#${parentSlideID}">${element.textContent}</a></li>`;
+			currentLevel = level;
+		} else if (level < currentLevel) {
+			resultHtml += `</ul></li><li><a href="#${parentSlideID}">${element.textContent}</a></li></li>`;
+			currentLevel = level;
+		} else {
+			resultHtml += `<li><a href="#${parentSlideID}">${element.textContent}</a>`;
+		}
+	})
+
+	return resultHtml + '</ul>';
+}
+
+function createTopicList() {
+	let topicList = document.createElement(`div`);
+	topicList.innerHTML = getTopicListContent();
+	topicList.classList.add('topic-list')
+	document.body.appendChild(topicList);
+	topicList.style.position = 'fixed';
+	topicList.style.top = '4rem';
+	topicList.style.left = '50%';
+	topicList.style.transform = 'translateX(-50%)';
+	topicList.style.backgroundColor = 'white';
+	topicList.style.padding = '2rem';
+	topicList.style.width = '800px';
+	topicList.style.boxShadow = '0 5px 15px	rgba(0, 0, 0, 0.3)';
+	topicList.style.maxHeight = 'calc(100vh - 8rem)';
+	topicList.style.visibility = 'hidden';
+
+	topicList.querySelectorAll('a').forEach(link => {
+		link.addEventListener('click', e => topicList.style.visibility = 'hidden');
+	})
+	return topicList;
+}
+
+let lastCtrlPress = null;
+
+function toggleTopicList() {
+	if (lastCtrlPress == null) {
+		lastCtrlPress = Date.now();
+	} else {
+		let now = Date.now();
+		if (now - lastCtrlPress < 400) {
+			lastCtrlPress = null;
+			if (topicList.style.visibility === 'visible') {
+				topicList.style.visibility = 'hidden';
+			} else {
+				topicList.style.visibility = 'visible';
+			}
+		} else {
+			lastCtrlPress = Date.now();
+		}
+	}
 }