From 423332b68d80e2c8a9953fb9d75aef3bdeb7a0dd Mon Sep 17 00:00:00 2001 From: Florian Knoch Date: Wed, 11 Mar 2020 10:54:31 +0100 Subject: [PATCH 1/4] Addresses #3: Call goToSlide() from topic list --- slidify.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/slidify.js b/slidify.js index 6b78bd6..157289b 100644 --- a/slidify.js +++ b/slidify.js @@ -110,16 +110,16 @@ function getTopicListContent() { while (parentElement.nodeName.toLowerCase() != 'article') { parentElement = parentElement.parentElement; } - let parentSlideID = parentElement.id; + let parentSlideID = parseInt(parentElement.id.replace('slide', '')); if (level > currentLevel) { - resultHtml += `
  • ${element.textContent}
    • `; currentLevel = level; } else { - resultHtml += `
  • ${element.textContent}`; + resultHtml += `
  • ${element.textContent}`; } }) @@ -168,4 +168,4 @@ function toggleTopicList() { lastCtrlPress = Date.now(); } } -} \ No newline at end of file +} From 37f5e91a49ffadc975f27b692f04b4a8e51dfe44 Mon Sep 17 00:00:00 2001 From: Florian Knoch Date: Wed, 11 Mar 2020 10:55:50 +0100 Subject: [PATCH 2/4] Addresses #3: Add option to hide topic list (esc) --- slidify.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/slidify.js b/slidify.js index 157289b..c16647d 100644 --- a/slidify.js +++ b/slidify.js @@ -71,6 +71,9 @@ function onKeyPressed(event) { case 17: // ctrl toggleTopicList(); break; + case 27: // esc + hideTopicList(); + break; } } @@ -169,3 +172,9 @@ function toggleTopicList() { } } } + +function hideTopicList() { + if (topicList.style.visibility === 'visible') { + topicList.style.visibility = 'hidden'; + } +} \ No newline at end of file From 5b00a3df3c5723f34c3ad70d7cd98a63e4758db6 Mon Sep 17 00:00:00 2001 From: Florian Knoch Date: Wed, 11 Mar 2020 10:56:11 +0100 Subject: [PATCH 3/4] Addresses #3: Add search functionality to topic list --- slidify.js | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/slidify.js b/slidify.js index c16647d..cae23da 100644 --- a/slidify.js +++ b/slidify.js @@ -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 = '
      '; + let resultHtml = '
        '; 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(); From 149305c2a13fe6ceb69a5e667ccef51b627297a7 Mon Sep 17 00:00:00 2001 From: Florian Knoch Date: Wed, 11 Mar 2020 11:40:00 +0100 Subject: [PATCH 4/4] Addresses #3: Add CSS classes --- slidify.js | 39 +++++++++++++++++++++++++-------------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/slidify.js b/slidify.js index cae23da..2935247 100644 --- a/slidify.js +++ b/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 = '
          '; + let resultHtml = `
            `; 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 = `${element.textContent}` if (level > currentLevel) { - resultHtml += `
          • ${linkHtml}
            • `; currentLevel = level; } else { - resultHtml += `
          • ${element.textContent}`; + resultHtml += `
          • ${linkHtml}`; } }) @@ -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();