latex/onpoint
6
0
Fork 0
Code Issues 2 Pull Requests Releases 1 Wiki Activity

Addresses #3: Add search functionality to topic list

Browse Source
This commit is contained in:
Knoch 2020-03-11 10:56:11 +01:00
parent 37f5e91a49
commit 5b00a3df3c
1 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
slidify.js
View File

@ -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();