Addresses #3: Add search functionality to topic list

slidify.js

@@ -2,7 +2,10 @@ window.addEventListener('load', init);
 
 let slides;
 let currentSlide;
+
 let topicList;
+let topicLinks;
+let topicListSearch;
 
 function init() {
 	slides = Array.from(document.querySelectorAll('article'));
@@ -102,7 +105,7 @@ function showPreviousFragment() {
 
 function getTopicListContent() {
 	let results = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
-	let resultHtml = '<ul>';
+	let resultHtml = '<input type="text" id="topicListSearch"/><ul>';
 	let currentLevel = 1;
 
 	results.forEach(element => {
@@ -147,12 +150,32 @@ function createTopicList() {
 	topicList.style.visibility = 'hidden';
 	topicList.style.overflowY = 'scroll';
 
-	topicList.querySelectorAll('a').forEach(link => {
+	topicLinks = [...topicList.querySelectorAll('a')]
+	topicLinks.forEach(link => {
 		link.addEventListener('click', e => topicList.style.visibility = 'hidden');
-	})
+	});
+
+	topicListSearch = topicList.querySelector('#topicListSearch');
+	topicListSearch.style.display = 'block';
+	topicListSearch.style.width = '100%';
+	topicListSearch.addEventListener('input', onTopicListSearchInput);
+
 	return topicList;
 }
 
+function onTopicListSearchInput(e) {
+	let searchTerms = topicListSearch.value.toLowerCase();
+	topicLinks.forEach(link => {
+		if (link.textContent.toLowerCase().includes(searchTerms) || searchTerms.length == 0) {
+			link.style.opacity = 1;
+			link.removeAttribute('tabindex');
+		} else {
+			link.tabIndex = -1;
+			link.style.opacity = 0.2;
+		}
+	})
+}
+
 let lastCtrlPress = null;
 
 function toggleTopicList() {
@@ -165,7 +188,10 @@ function toggleTopicList() {
 			if (topicList.style.visibility === 'visible') {
 				topicList.style.visibility = 'hidden';
 			} else {
+				topicListSearch.value = '';
+				onTopicListSearchInput();
 				topicList.style.visibility = 'visible';
+				topicListSearch.focus();
 			}
 		} else {
 			lastCtrlPress = Date.now();