diff options
Diffstat (limited to 'template/script.js')
| -rwxr-xr-x | template/script.js | 97 |
1 files changed, 0 insertions, 97 deletions
diff --git a/template/script.js b/template/script.js index 3c58403..796ea4f 100755 --- a/template/script.js +++ b/template/script.js | |||
| @@ -1,17 +1,4 @@ | |||
| 1 | window.addEventListener('load', async () => { | 1 | window.addEventListener('load', async () => { |
| 2 | // dither image on mouse over replace | ||
| 3 | // document.querySelectorAll('article img').forEach(img => { | ||
| 4 | // const ditheredImage = img.src; | ||
| 5 | // const originalImage = img.src.replace('.dith.gif', ''); | ||
| 6 | |||
| 7 | // img.addEventListener('mouseover', evt => { | ||
| 8 | // evt.target.src = originalImage; | ||
| 9 | // }); | ||
| 10 | |||
| 11 | // img.addEventListener('mouseout', evt => { | ||
| 12 | // evt.target.src = ditheredImage; | ||
| 13 | // }); | ||
| 14 | // }); | ||
| 15 | 2 | ||
| 16 | // flip CV image on mouse over | 3 | // flip CV image on mouse over |
| 17 | const cvImage = document.querySelector('.cv-picture img'); | 4 | const cvImage = document.querySelector('.cv-picture img'); |
| @@ -25,88 +12,4 @@ window.addEventListener('load', async () => { | |||
| 25 | }); | 12 | }); |
| 26 | } | 13 | } |
| 27 | 14 | ||
| 28 | // Search functionality | ||
| 29 | |||
| 30 | window.index = null; | ||
| 31 | |||
| 32 | const response = await fetch('/feed.json'); | ||
| 33 | const feed = await response.json(); | ||
| 34 | |||
| 35 | window.index = elasticlunr(function () { | ||
| 36 | this.addField('title'); | ||
| 37 | this.addField('body'); | ||
| 38 | this.setRef('id'); | ||
| 39 | }); | ||
| 40 | |||
| 41 | for (const item of feed.items) { | ||
| 42 | item.id = item.url; | ||
| 43 | window.index.addDoc({ | ||
| 44 | id: item.url, | ||
| 45 | title: item.title, | ||
| 46 | body: item.content_html, | ||
| 47 | url: item.url, | ||
| 48 | }); | ||
| 49 | } | ||
| 50 | |||
| 51 | const blur = document.querySelector('.blur'); | ||
| 52 | const searchForm = document.querySelector('.search-form'); | ||
| 53 | const searchResultsList = document.querySelector('.search-form ul'); | ||
| 54 | |||
| 55 | function showSearchModal() { | ||
| 56 | blur.classList.remove('hidden'); | ||
| 57 | searchForm.classList.remove('hidden'); | ||
| 58 | |||
| 59 | // Clear search input. | ||
| 60 | searchForm.querySelector('input').value = ''; | ||
| 61 | |||
| 62 | // We need to clear the list before opening modal. | ||
| 63 | searchResultsList.innerHTML = ''; | ||
| 64 | |||
| 65 | // Focus on search input. | ||
| 66 | searchForm.querySelector('input').focus(); | ||
| 67 | } | ||
| 68 | |||
| 69 | document.querySelector('.search-trigger').addEventListener('click', async (evt) => { | ||
| 70 | showSearchModal(); | ||
| 71 | }); | ||
| 72 | |||
| 73 | document.onkeydown = function (e) { | ||
| 74 | // Show search modal on F key. | ||
| 75 | if (blur.classList.contains('hidden')) { | ||
| 76 | if (e.key === 'f') { | ||
| 77 | setTimeout(() => { | ||
| 78 | showSearchModal(); | ||
| 79 | }, 100); | ||
| 80 | } | ||
| 81 | } | ||
| 82 | |||
| 83 | // Hide search modal on escape key. | ||
| 84 | if (!blur.classList.contains('hidden')) { | ||
| 85 | if (e.key === 'Escape') { | ||
| 86 | blur.classList.add('hidden'); | ||
| 87 | searchForm.classList.add('hidden'); | ||
| 88 | } | ||
| 89 | } | ||
| 90 | }; | ||
| 91 | |||
| 92 | blur.addEventListener('click', async (evt) => { | ||
| 93 | evt.target.classList.add('hidden'); | ||
| 94 | searchForm.classList.add('hidden'); | ||
| 95 | }); | ||
| 96 | |||
| 97 | document.querySelector('.search-form input').addEventListener('keyup', async (evt) => { | ||
| 98 | // Perform search. | ||
| 99 | const searchResults = window.index.search(evt.target.value); | ||
| 100 | |||
| 101 | // We need to clear the list before adding new results. | ||
| 102 | searchResultsList.innerHTML = ''; | ||
| 103 | |||
| 104 | // Loop through the results and add them to the list. | ||
| 105 | for (const result of searchResults.slice(0, 9)) { | ||
| 106 | const listItem = document.createElement('li'); | ||
| 107 | listItem.innerHTML = `<a href="${result.doc.url}">${result.doc.title}</a>`; | ||
| 108 | searchResultsList.appendChild(listItem); | ||
| 109 | } | ||
| 110 | }); | ||
| 111 | |||
| 112 | }); | 15 | }); |
