Addresses #3: Add CSS classes

slidify.js

@@ -7,13 +7,17 @@ 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}`;
 	}
-	resumeOrGoToStart();
 	topicList = createTopicList();
+	resumeOrGoToStart();
 	document.addEventListener('keydown', onKeyPressed);
 }
 
@@ -30,6 +34,13 @@ 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);
 	}
 }
 
@@ -105,7 +116,7 @@ function showPreviousFragment() {
 
 function getTopicListContent() {
 	let results = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
-	let resultHtml = '<input type="text" id="topicListSearch"/><ul>';
+	let resultHtml = `<input type="text" class="${topicListSearchClass}"/><ul>`;
 	let currentLevel = 1;
 
 	results.forEach(element => {
@@ -116,16 +127,19 @@ function getTopicListContent() {
 		while (parentElement.nodeName.toLowerCase() != 'article') {
 			parentElement = parentElement.parentElement;
 		}
-		let parentSlideID = parseInt(parentElement.id.replace('slide', ''));
+
+		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>`
 
 		if (level > currentLevel) {
-			resultHtml += `<ul><li><a href="javascript:goToSlide(${parentSlideID})">${element.textContent}</a></li>`;
+			resultHtml += `<ul><li>${linkHtml}</li>`;
 			currentLevel = level;
 		} else if (level < currentLevel) {
-			resultHtml += `</ul></li><li><a href="javascript:goToSlide(${parentSlideID})">${element.textContent}</a></li></li>`;
+			resultHtml += `</ul></li><li>${linkHtml}</li></li>`;
 			currentLevel = level;
 		} else {
-			resultHtml += `<li><a href="javascript:goToSlide(${parentSlideID})">${element.textContent}</a>`;
+			resultHtml += `<li>${linkHtml}</a>`;
 		}
 	})
 
@@ -144,7 +158,6 @@ 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';
@@ -152,12 +165,10 @@ function createTopicList() {
 
 	topicLinks = [...topicList.querySelectorAll('a')]
 	topicLinks.forEach(link => {
-		link.addEventListener('click', e => topicList.style.visibility = 'hidden');
+		link.addEventListener('click', hideTopicList);
 	});
 
-	topicListSearch = topicList.querySelector('#topicListSearch');
+	topicListSearch = topicList.querySelector(`.${topicListSearchClass}`);
-	topicListSearch.style.display = 'block';
-	topicListSearch.style.width = '100%';
 	topicListSearch.addEventListener('input', onTopicListSearchInput);
 
 	return topicList;
@@ -167,11 +178,11 @@ 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.classList.remove(notMatchingSearchTermsClass);
 			link.removeAttribute('tabindex');
 		} else {
 			link.tabIndex = -1;
-			link.style.opacity = 0.2;
+			link.classList.add(notMatchingSearchTermsClass);
 		}
 	})
 }
@@ -186,7 +197,7 @@ function toggleTopicList() {
 		if (now - lastCtrlPress < 400) {
 			lastCtrlPress = null;
 			if (topicList.style.visibility === 'visible') {
-				topicList.style.visibility = 'hidden';
+				hideTopicList();
 			} else {
 				topicListSearch.value = '';
 				onTopicListSearchInput();