[3.11] Docs search: Replace jQuery with vanilla JavaScript (GH-106743) (#106803)

Docs search: Replace jQuery with vanilla JavaScript (GH-106743)

* Replace jQuery with vanilla JavaScript
* Switch 'var' to 'const' or 'let'
(cherry picked from commit c02ee45031)

Co-authored-by: Hugo van Kemenade <hugovk@users.noreply.github.com>
This commit is contained in:
Miss Islington (bot) 2023-07-16 01:38:46 -07:00 committed by GitHub
parent 9aeb9d1e80
commit 501178ac9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 30 deletions

View File

@ -1,48 +1,62 @@
{% extends "!search.html" %} {% extends "!search.html" %}
{% block extrahead %} {% block extrahead %}
{{ super() }} {{ super() }}
<meta name="robots" content="noindex">
<script type="text/javascript"> <script type="text/javascript">
var GLOSSARY_PAGE = 'glossary.html'; const GLOSSARY_PAGE = 'glossary.html';
jQuery(function() { document.addEventListener('DOMContentLoaded', function() {
$.getJSON("_static/glossary.json", function(glossary) { fetch('_static/glossary.json')
var RESULT_TEMPLATE = '<div style="display: none" class="admonition seealso" id="glossary-result">' + .then(function(response) {
if (response.ok) {
return response.json();
} else {
throw new Error('Failed to fetch glossary.json');
}
})
.then(function(glossary) {
const RESULT_TEMPLATE = '<div style="display: none" class="admonition seealso" id="glossary-result">' +
' <p class="topic-title">' + ' <p class="topic-title">' +
' <a class="glossary-title" href="#"></a>' + ' <a class="glossary-title" href="#"></a>' +
' </p>' + ' </p>' +
' <div class="glossary-body"></div>' + ' <div class="glossary-body"></div>' +
'</div>'; '</div>';
$("#search-results").prepend(RESULT_TEMPLATE); let searchResults = document.getElementById('search-results');
searchResults.insertAdjacentHTML('afterbegin', RESULT_TEMPLATE);
var params = $.getQueryParameters(); const params = new URLSearchParams(document.location.search).get("q");
if (params.q) { if (params) {
var search_param = params.q[0].toLowerCase(); const searchParam = params.toLowerCase();
var glossary_item = glossary[search_param]; const glossaryItem = glossary[searchParam];
if (glossary_item) { if (glossaryItem) {
var resultDiv = $("#glossary-result"); let resultDiv = document.getElementById('glossary-result');
// set up the title text with a link to the glossary page // set up the title text with a link to the glossary page
resultDiv.find(".glossary-title").text('Glossary: ' + glossary_item.title); let glossaryTitle = resultDiv.querySelector('.glossary-title');
var link_target = search_param.replace(/ /g, '-'); glossaryTitle.textContent = 'Glossary: ' + glossaryItem.title;
resultDiv.find(".glossary-title").attr( const linkTarget = searchParam.replace(/ /g, '-');
'href', GLOSSARY_PAGE + '#term-' + link_target glossaryTitle.href = GLOSSARY_PAGE + '#term-' + linkTarget;
);
// rewrite any anchor links (to other glossary terms) // rewrite any anchor links (to other glossary terms)
// to have a full reference to the glossary page // to have a full reference to the glossary page
var body = $(glossary_item.body).children(); let body = document.createElement('div');
body.find("a[href^='#']").each(function() { body.innerHTML = glossaryItem.body;
var current_url = $(this).attr('href'); const anchorLinks = body.querySelectorAll('a[href^="#"]');
$(this).attr('href', GLOSSARY_PAGE + current_url); anchorLinks.forEach(function(link) {
}); const currentUrl = link.getAttribute('href');
resultDiv.find(".glossary-body").html(body); link.href = GLOSSARY_PAGE + currentUrl;
});
resultDiv.querySelector('.glossary-body').appendChild(body);
resultDiv.show(); resultDiv.style.display = '';
} else { } else {
$("#glossary-result").hide(''); document.getElementById('glossary-result').style.display = 'none';
}
} }
}
})
.catch(function(error) {
console.error(error);
}); });
}); });
</script> </script>
{% endblock %} {% endblock %}