diff options
| -rw-r--r-- | assets/js/search.js | 86 | ||||
| -rw-r--r-- | layouts/partials/scripts.html | 11 | ||||
| -rw-r--r-- | layouts/shortcodes/form-search.html | 11 |
3 files changed, 58 insertions, 50 deletions
diff --git a/assets/js/search.js b/assets/js/search.js index 10359f9..0ab39d6 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -26,7 +26,7 @@ function initConfig() { }; try { - const config = JSON.parse($('#ed-data').html()); + const config = JSON.parse(document.querySelector('#ed-data').innerHTML); return Object.assign({}, defaults, config); } catch (e) { return defaults; @@ -58,8 +58,7 @@ async function initSearchIndex() { function handleSearchQuery(event) { event.preventDefault(); - const query = $('#search').val().trim().toLowerCase(); - + const query = document.getElementById('search').value.trim().toLowerCase(); if (!query) { displayErrorMessage(config.strings.searchEnterTerm); return; @@ -113,17 +112,19 @@ function getLunrSearchQuery(query) { } function displayErrorMessage(message) { - $('.search-container').addClass('form-item-error'); - $('.search-error-message').html(message); - $('.search-container').removeClass('focused'); - $('.search-error').removeClass('hide-element'); + const searchContainer = document.querySelector('.search-container'); + searchContainer.classList.add('form-item-error'); + searchContainer.classList.remove('focused'); + document.querySelector('.search-error-message').innerHTML = message; + document.querySelector('.search-error').classList.remove('hide-element'); } function hideErrorMessage() { - $('.search-container').removeClass('form-item-error'); - $('.search-error-message').empty(); - $('.search-container').addClass('focused'); - $('.search-error').addClass('hide-element'); + const searchContainer = document.querySelector('.search-container'); + searchContainer.classList.add('focused'); + searchContainer.classList.remove('form-item-error'); + document.querySelector('.search-error').classList.add('hide-element'); + document.querySelector('.search-error-message').innerHTML = ''; } function handleClearSearchButtonClicked() { @@ -134,9 +135,9 @@ function handleClearSearchButtonClicked() { } function hideSearchResults() { - $('#clear-search-results').addClass('hide-element'); - $('#site-search').removeClass('expanded'); - $('#search-results').addClass('hide-element'); + document.getElementById('clear-search-results').classList.add('hide-element'); + document.getElementById('site-search').classList.remove('expanded'); + document.getElementById('search-results').classList.add('hide-element'); } function renderSearchResults(query, results) { @@ -147,26 +148,30 @@ function renderSearchResults(query, results) { } function clearSearchResults() { - $('#search-results-body').empty(); - $('#results-count').empty(); + document.getElementById('search-results-body').innerHTML = ''; + document.getElementById('results-count').innerHTML = ''; } function clearAndFocusSearchInput() { - $('.search-form-input').val('').focus(); + const search = document.getElementById('search'); + search.value = ''; + search.focus(); } function updateSearchResults(query, results) { - $('#search-results-body').html(results.map((hit) => ` - <article class="post" data-score="${hit.score.toFixed(2)}"> - <header> - <h2 class="post-title"> - <a href="${hit.href}?utm_source=search" class="search-result-page-title">${hit.title}</a> - </h2> - </header> - <p class="post-content">${createSearchResultBlurb(query, hit.content)}</p> - </article> - ` - ).join('')); + document.getElementById('search-results-body').innerHTML = results + .map((hit) => ` + <article class="post" data-score="${hit.score.toFixed(2)}"> + <header> + <h2 class="post-title"> + <a href="${hit.href}?utm_source=search" class="search-result-page-title">${hit.title}</a> + </h2> + </header> + <p class="post-content">${createSearchResultBlurb(query, hit.content)}</p> + </article> + ` + ) + .join(''); $('#results-count').html($('#search-results-body article').length); } @@ -260,9 +265,9 @@ function chunkify(input, chunkSize) { } function showSearchResults() { - $('#search-results').removeClass('hide-element'); - $('#site-search').removeClass('expanded'); - $('#clear-search-results').removeClass('hide-element'); + document.getElementById('search-results').classList.remove('hide-element'); + document.getElementById('site-search').classList.remove('expanded'); + document.getElementById('clear-search-results').classList.remove('hide-element'); } function scrollToTop() { @@ -302,26 +307,29 @@ if (!String.prototype.matchAll) { }; } -$(function() { - const searchForm = $('#search-form'); - const searchInput = $('#search'); +document.addEventListener('DOMContentLoaded', function () { + const searchForm = document.getElementById('search-form'); + const searchInput = document.getElementById('search'); + config = initConfig(); - if (searchForm.length === 0 || searchInput.length === 0) { + if (searchForm === null || searchInput === null) { return; } initSearchIndex(); - searchForm.submit((e) => { + searchForm.addEventListener('submit', (e) => { e.preventDefault(); }); - searchInput.on('keypress', (e) => { - if (e.which === 13) { + searchInput.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { handleSearchQuery(e); } }); - $('#clear-search-results').on('click', () => handleClearSearchButtonClicked()); + document + .getElementById('clear-search-results') + .addEventListener('click', () => handleClearSearchButtonClicked()); }); diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html index ace6e45..e931587 100644 --- a/layouts/partials/scripts.html +++ b/layouts/partials/scripts.html @@ -24,17 +24,6 @@ <script src="{{ $vendors.RelPermalink }}"></script> {{- end -}} -{{- $search := resources.Get "js/search.js" -}} -{{- if or (eq (getenv "HUGO_ENV") "production") (eq site.Params.env "production") }} - {{- $search = $search | minify -}} -{{- end -}} -{{- if not site.Params.assets.disable_fingerprinting -}} - {{- $search = $search | fingerprint -}} - <script src="{{ $search.RelPermalink }}" integrity="{{ $search.Data.Integrity }}"></script> -{{- else -}} - <script src="{{ $search.RelPermalink }}"></script> -{{- end -}} - {{- if or (eq (getenv "HUGO_ENV") "production") (eq site.Params.env "production") }} {{- with site.GoogleAnalytics -}} {{- $ga := resources.Get "js/ga.js" | minify -}} diff --git a/layouts/shortcodes/form-search.html b/layouts/shortcodes/form-search.html index cb30d6f..614ec35 100644 --- a/layouts/shortcodes/form-search.html +++ b/layouts/shortcodes/form-search.html @@ -18,3 +18,14 @@ </div> {{- partial "search-results" . -}} + +{{- $search := resources.Get "js/search.js" -}} +{{- if or (eq (getenv "HUGO_ENV") "production") (eq site.Params.env "production") }} + {{- $search = $search | minify -}} +{{- end -}} +{{- if not site.Params.assets.disable_fingerprinting -}} + {{- $search = $search | fingerprint -}} + <script src="{{ $search.RelPermalink }}" integrity="{{ $search.Data.Integrity }}"></script> +{{- else -}} + <script src="{{ $search.RelPermalink }}"></script> +{{- end -}} |