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

Addresses #3: Add CSS classes

Browse Source
This commit is contained in:
Knoch 2020-03-11 11:40:00 +01:00
parent 5b00a3df3c
commit 149305c2a1
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
slidify.js
View File

@ -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.style.display = 'block';
topicListSearch.style.width = '100%';
topicListSearch = topicList.querySelector(`.${topicListSearchClass}`);
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();