Merge branch 'master' into release

slidify.js

@@ -2,15 +2,22 @@ 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}`;
 	}
-	resumeOrGoToStart();
 	topicList = createTopicList();
+	resumeOrGoToStart();
 	document.addEventListener('keydown', onKeyPressed);
 }
 
@@ -27,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);
 	}
 }
 
@@ -71,6 +85,9 @@ function onKeyPressed(event) {
 		case 17: // ctrl
 			toggleTopicList();
 			break;
+		case 27: // esc
+			hideTopicList();
+			break;
 	}
 }
 
@@ -99,7 +116,7 @@ function showPreviousFragment() {
 
 function getTopicListContent() {
 	let results = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
-	let resultHtml = '<ul>';
+	let resultHtml = `<input type="text" class="${topicListSearchClass}"/><ul>`;
 	let currentLevel = 1;
 
 	results.forEach(element => {
@@ -110,16 +127,19 @@ function getTopicListContent() {
 		while (parentElement.nodeName.toLowerCase() != 'article') {
 			parentElement = parentElement.parentElement;
 		}
-		let parentSlideID = parentElement.id;
+
+		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="#${parentSlideID}">${element.textContent}</a></li>`;
+			resultHtml += `<ul><li>${linkHtml}</li>`;
 			currentLevel = level;
 		} else if (level < currentLevel) {
-			resultHtml += `</ul></li><li><a href="#${parentSlideID}">${element.textContent}</a></li></li>`;
+			resultHtml += `</ul></li><li>${linkHtml}</li></li>`;
 			currentLevel = level;
 		} else {
-			resultHtml += `<li><a href="#${parentSlideID}">${element.textContent}</a>`;
+			resultHtml += `<li>${linkHtml}</a>`;
 		}
 	})
 
@@ -138,18 +158,35 @@ 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';
 
-	topicList.querySelectorAll('a').forEach(link => {
-		link.addEventListener('click', e => topicList.style.visibility = 'hidden');
-	})
+	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);
+		}
+	})
+}
+
 let lastCtrlPress = null;
 
 function toggleTopicList() {
@@ -160,12 +197,21 @@ function toggleTopicList() {
 		if (now - lastCtrlPress < 400) {
 			lastCtrlPress = null;
 			if (topicList.style.visibility === 'visible') {
-				topicList.style.visibility = 'hidden';
+				hideTopicList();
 			} 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';
+	}
 }