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