Redesign website (#2628)
* Bump up Bootstrap to v5.3.1, Bootstrap Icon to v1.10.5. * Use autoComplete.js to drop dependency on jQuery and typeahead.js. * Support dark mode. * New svg logo and icon with responsive color mode support. * Normalize section ids to lower kebab-case for easiness of linking. * Use relative paths for links for local development (--root /output). * Various markup cleanups and accessibility improvements.
This commit is contained in:
1 parent
4af3f99728
commit
c8e28da129
26 files changed
+402
-656
No files matched your search
@@ -1,52 +1,34 @@
|
||||
var section_names = function(q) {
|
||||
if (!q) {
|
||||
return [];
|
||||
}
|
||||
var matches = [];
|
||||
q = q.toLowerCase();
|
||||
$.each(section_map, function(k, v) {
|
||||
if (k.toLowerCase().indexOf(q) != -1) {
|
||||
matches.push(k);
|
||||
(() => {
|
||||
const searchInput = document.querySelector('input#searchbox');
|
||||
const sectionIDs = JSON.parse(document.querySelector('#section-ids').innerText);
|
||||
const sanitize = (string) => string.replaceAll('<', '<').replaceAll('>', '>');
|
||||
new autoComplete({
|
||||
selector: `#${searchInput.id}`,
|
||||
wrapper: false,
|
||||
data: {
|
||||
src: Object.keys(sectionIDs),
|
||||
filter: (list) => list.sort((x, y) =>
|
||||
x.match.indexOf('<') - y.match.indexOf('<') || x.value.length - y.value.length),
|
||||
},
|
||||
searchEngine: (query, value) => {
|
||||
const index = value.toLowerCase().indexOf(query.toLowerCase());
|
||||
if (index >= 0) {
|
||||
return sanitize(value.substring(0, index)) +
|
||||
`<mark>${sanitize(value.substring(index, index + query.length))}</mark>` +
|
||||
sanitize(value.substring(index + query.length));
|
||||
}
|
||||
},
|
||||
});
|
||||
searchInput.addEventListener('selection', (event) => {
|
||||
event.target.value = event.detail.selection.value;
|
||||
location.hash = `#${sectionIDs[event.detail.selection.value]}`;
|
||||
});
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.code === 'Slash' && !event.altKey && !event.ctrlKey && !event.metaKey
|
||||
&& !event.shiftKey && !/^(INPUT|TEXTAREA)$/.test(event.target.nodeName)) {
|
||||
searchInput.focus();
|
||||
searchInput.select();
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
matches.sort(function(a, b) {
|
||||
// shortest to longest
|
||||
return a.length - b.length;
|
||||
});
|
||||
return matches;
|
||||
}
|
||||
var section_names_cb = function(q, cb) {
|
||||
cb(section_names(q));
|
||||
}
|
||||
var go_to_section = function() {
|
||||
query = $('#searchbox').val();
|
||||
results = section_names(query);
|
||||
if (results.length == 0) {
|
||||
return;
|
||||
}
|
||||
result = results[0];
|
||||
location.hash = '#' + section_map[result];
|
||||
if (result != query) {
|
||||
$('#searchbox').val(result);
|
||||
}
|
||||
}
|
||||
$(function(){
|
||||
$('#searchbox').typeahead(
|
||||
{hint: false, highlight: true, minLength: 1},
|
||||
{name: "contents", source: section_names_cb, limit: 6}
|
||||
).on('typeahead:selected', function(e, data) {
|
||||
go_to_section();
|
||||
});
|
||||
$('#searchbox').change(go_to_section);
|
||||
});
|
||||
// add "Run" button to execute examples on jqplay.org
|
||||
$(function() {
|
||||
$.each($('.manual-example table'), function(index, value) {
|
||||
$value = $(value)
|
||||
var j = $value.find('tr:nth-child(2) td:first').text();
|
||||
var q = $value.find('.jqprogram').text().replace(/^jq /, '').replace(/(\r\n|\n|\r)/gm," ").replace(/^'(.+)'$/, '$1');
|
||||
var url = 'https://jqplay.org/jq?q=' + encodeURIComponent(q) +'&j=' + encodeURIComponent(j)
|
||||
var $last_tr = $value.find('tr:last');
|
||||
$last_tr.after('<tr class="jqplay-btn"><th><a href="' + url + '" class="btn btn-primary btn-sm">Run</a></th><th></th></tr><tr><th></th><th></th></tr>');
|
||||
});
|
||||
});
|
||||
})();
|
||||
Reference in new issue
Block a user