8000 Docs search: Replace jQuery with vanilla JavaScript by hugovk · Pull Request #106743 · python/cpython · GitHub
[go: up one dir, main page]
Skip to content

Docs search: Replace jQuery with vanilla JavaScript #106743

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 16, 2023
Merged

Docs search: Replace jQuery with vanilla JavaScript #106743

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cdd70b0
Replace jQuery with vanilla JavaScript
hugovk Jul 13, 2023
2b8f9a6
Switch 'var' to 'const' or 'let'
hugovk Jul 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 44 additions & 30 deletions Doc/tools/templates/search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
0