slidify.js

@@ -2,22 +2,15 @@ window.addEventListener('load', init);
 
 let slides;
 let currentSlide;
-
 let topicList;
-let topicLinks;
-let topicListSearch;
-
-const activeTopicLinkClass = 'active-topic-link';
-const notMatchingSearchTermsClass = 'not-matching-search-terms';
-const topicListSearchClass = 'topic-list-search';
 
 function init() {
 	slides = Array.from(document.querySelectorAll('article'));
 	for (let i = 0; i < slides.length; i++) {
 		slides[i].id = `slide${i}`;
 	}
-	topicList = createTopicList();
 	resumeOrGoToStart();
+	topicList = createTopicList();
 	document.addEventListener('keydown', onKeyPressed);
 }
 
@@ -34,13 +27,6 @@ function goToSlide(index) {
 	if (index >= 0 && index < slides.length) {
 		currentSlide = index;
 		window.location.href = window.location.href.split('#')[0] + `#slide${index}`;
-
-		let oldActiveTopicLink = topicList.querySelector(`.${activeTopicLinkClass}`);
-		if (oldActiveTopicLink != null) {
-			oldActiveTopicLink.classList.remove(activeTopicLinkClass);
-		}
-		let newActiveTopicLink = topicList.querySelector(`[data-slide="slide${index}"]`);
-		newActiveTopicLink.classList.add(activeTopicLinkClass);
 	}
 }
 
@@ -85,9 +71,6 @@ function onKeyPressed(event) {
 		case 17: // ctrl
 			toggleTopicList();
 			break;
-		case 27: // esc
-			hideTopicList();
-			break;
 	}
 }
 
@@ -116,7 +99,7 @@ function showPreviousFragment() {
 
 function getTopicListContent() {
 	let results = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
-	let resultHtml = `<input type="text" class="${topicListSearchClass}"/><ul>`;
+	let resultHtml = '<ul>';
 	let currentLevel = 1;
 
 	results.forEach(element => {
@@ -127,19 +110,16 @@ function getTopicListContent() {
 		while (parentElement.nodeName.toLowerCase() != 'article') {
 			parentElement = parentElement.parentElement;
 		}
-
-		let parentSlide = parentElement.id;
-		let parentSlideID = parseInt(parentSlide.replace('slide', ''));
-		let linkHtml = `<a data-slide="${parentSlide}" href="javascript:goToSlide(${parentSlideID})" class="topic-link">${element.textContent}</a>`
+		let parentSlideID = parentElement.id;
 
 		if (level > currentLevel) {
-			resultHtml += `<ul><li>${linkHtml}</li>`;
+			resultHtml += `<ul><li><a href="#${parentSlideID}">${element.textContent}</a></li>`;
 			currentLevel = level;
 		} else if (level < currentLevel) {
-			resultHtml += `</ul></li><li>${linkHtml}</li></li>`;
+			resultHtml += `</ul></li><li><a href="#${parentSlideID}">${element.textContent}</a></li></li>`;
 			currentLevel = level;
 		} else {
-			resultHtml += `<li>${linkHtml}</a>`;
+			resultHtml += `<li><a href="#${parentSlideID}">${element.textContent}</a>`;
 		}
 	})
 
@@ -158,33 +138,16 @@ function createTopicList() {
 	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.boxSizing = 'border-box';
 	topicList.style.visibility = 'hidden';
 	topicList.style.overflowY = 'scroll';
 
-	topicLinks = [...topicList.querySelectorAll('a')]
-	topicLinks.forEach(link => {
-		link.addEventListener('click', hideTopicList);
-	});
-
-	topicListSearch = topicList.querySelector(`.${topicListSearchClass}`);
-	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.classList.remove(notMatchingSearchTermsClass);
-			link.removeAttribute('tabindex');
-		} else {
-			link.tabIndex = -1;
-			link.classList.add(notMatchingSearchTermsClass);
-		}
+	topicList.querySelectorAll('a').forEach(link => {
+		link.addEventListener('click', e => topicList.style.visibility = 'hidden');
 	})
+	return topicList;
 }
 
 let lastCtrlPress = null;
@@ -197,21 +160,12 @@ function toggleTopicList() {
 		if (now - lastCtrlPress < 400) {
 			lastCtrlPress = null;
 			if (topicList.style.visibility === 'visible') {
-				hideTopicList();
+				topicList.style.visibility = 'hidden';
 			} else {
-				topicListSearch.value = '';
-				onTopicListSearchInput();
 				topicList.style.visibility = 'visible';
-				topicListSearch.focus();
 			}
 		} else {
 			lastCtrlPress = Date.now();
 		}
 	}
-}
-
-function hideTopicList() {
-	if (topicList.style.visibility === 'visible') {
-		topicList.style.visibility = 'hidden';
-	}
 }