FastAPI: use internal typeahead and remove jquery

Awesome!

Signed-off-by: Kevin Morris <kevr@0cost.org>
This commit is contained in:
Kevin Morris 2021-06-29 22:44:41 -07:00
parent 2835dd89ea
commit 3a74f76ff9
6 changed files with 20 additions and 35 deletions

View file

@ -83,10 +83,7 @@ async def add_security_headers(request: Request, call_next: typing.Callable):
# Add CSP header. # Add CSP header.
nonce = request.user.nonce nonce = request.user.nonce
csp = "default-src 'self'; " csp = "default-src 'self'; "
script_hosts = [ script_hosts = []
"ajax.googleapis.com",
"cdn.jsdelivr.net"
]
csp += f"script-src 'self' 'nonce-{nonce}' " + ' '.join(script_hosts) csp += f"script-src 'self' 'nonce-{nonce}' " + ' '.join(script_hosts)
# It's fine if css is inlined. # It's fine if css is inlined.
csp += "; style-src 'self' 'unsafe-inline'" csp += "; style-src 'self' 'unsafe-inline'"

View file

@ -93,4 +93,14 @@
</p> </p>
</div> </div>
</div> </div>
<!-- Bootstrap typeahead for the homepage. -->
<script type="text/javascript" src="/static/js/typeahead-home.js"></script>
<!-- Stub inline javascript with a nonce. Used for testing purposes. -->
<script type="text/javascript" nonce={{ request.user.nonce }}>
function NONEXISTENT() {}
NONEXISTENT();
</script>
{% endblock %} {% endblock %}

View file

@ -12,5 +12,8 @@
<link rel="alternate" type="application/rss+xml" <link rel="alternate" type="application/rss+xml"
title="Newest Packages RSS" href="/rss/"> title="Newest Packages RSS" href="/rss/">
<!-- Include local typeahead -->
<script type="text/javascript" src="/static/js/typeahead.js"></script>
<title>AUR ({{ language }}) - {{ title | tr }}</title> <title>AUR ({{ language }}) - {{ title | tr }}</title>
</head> </head>

View file

@ -6,6 +6,5 @@
<body> <body>
{% include 'partials/navbar.html' %} {% include 'partials/navbar.html' %}
{% extends 'partials/body.html' %} {% extends 'partials/body.html' %}
{% include 'partials/typeahead.html' %}
</body> </body>
</html> </html>

View file

@ -1,30 +0,0 @@
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-typeahead.min.js"></script>
<script type="text/javascript" nonce="{{ request.user.nonce }}">
$(document).ready(function() {
$('#pkgsearch-field').typeahead({
source: function(query, callback) {
$.getJSON('/rpc', {type: "suggest", arg: query}, function(data) {
callback(data);
});
},
matcher: function(item) { return true; },
sorter: function(items) { return items; },
menu: '<ul class="pkgsearch-typeahead"></ul>',
items: 20,
updater: function(item) {
document.location = '/packages/' + item;
return item;
}
}).attr('autocomplete', 'off');
$('#pkgsearch-field').keydown(function(e) {
if (e.keyCode == 13) {
var selectedItem = $('ul.pkgsearch-typeahead li.active');
if (selectedItem.length == 0) {
$('#pkgsearch-form').submit();
}
}
});
});
</script>

View file

@ -0,0 +1,6 @@
document.addEventListener('DOMContentLoaded', function() {
const input = document.getElementById('pkgsearch-field');
const form = document.getElementById('pkgsearch-form');
const type = 'suggest';
typeahead.init(type, input, form);
});