Skip to content

Commit ad76a3f

Browse files
committed
docs: Open search modal when pressing Ctrl + F
1 parent 3327905 commit ad76a3f

File tree

2 files changed

+24
-7
lines changed

2 files changed

+24
-7
lines changed

docs/_static/custom.js

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ document.addEventListener('DOMContentLoaded', () => {
6868
hamburgerToggle.addEventListener('click', (e) => {
6969
sidebar.element.classList.toggle('sidebar-toggle');
7070
let button = hamburgerToggle.firstElementChild;
71-
if (button.textContent == 'menu') {
71+
if (button.textContent === 'menu') {
7272
button.textContent = 'close';
7373
}
7474
else {
@@ -90,8 +90,25 @@ document.addEventListener('DOMContentLoaded', () => {
9090
});
9191
});
9292

93+
isMobile = () => {
94+
return window.matchMedia("only screen and (max-width: 760px)").matches;
95+
}
96+
9397
document.addEventListener('keydown', (event) => {
94-
if (event.code == "Escape" && activeModal) {
98+
if (event.code === "Escape" && activeModal) {
9599
activeModal.close();
96100
}
101+
else if (event.code === "KeyF" && (event.ctrlKey || event.metaKey)) {
102+
event.preventDefault();
103+
if (isMobile()) {
104+
mobileSearch.bar.scrollIntoView();
105+
mobileSearch.bar.focus();
106+
mobileSearch.open();
107+
}
108+
else {
109+
let searchInput = document.getElementById('top-bar-search-input');
110+
searchInput.scrollIntoView();
111+
searchInput.focus();
112+
}
113+
}
97114
});

docs/_templates/layout.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,9 @@
7171
<nav class="mobile-only">
7272
<form role="search" class="search" action="{{ pathto('search') }}" method="get">
7373
<div class="search-wrapper">
74-
<input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
74+
<input type="search" id="top-bar-search-input-mobile" name="q" placeholder="{{ _('Search documentation') }}" />
7575
<button type="submit">
76-
<span class="material-icons" aria-hidden="true"></span>
76+
<span class="material-icons" aria-hidden="true">search</span>
7777
</button>
7878
</div>
7979
</form>
@@ -94,13 +94,13 @@
9494
</select>
9595
<form role="search" class="search" action="{{ pathto('search') }}" method="get">
9696
<div class="search-wrapper">
97-
<input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
97+
<input type="search" id="top-bar-search-input" name="q" placeholder="{{ _('Search documentation') }}" />
9898
<button type="submit">
9999
<span class="material-icons">search</span>
100100
</button>
101101
</div>
102102
</form>
103-
<a accesskey="S" class="settings"><span class="fa-1x fa-solid fa-gear"></span></a>
103+
<a accesskey="s" class="settings"><span class="fa-1x fa-solid fa-gear"></span></a>
104104
</div>
105105
{#- The sidebar component #}
106106
<aside class="grid-item">
@@ -149,7 +149,7 @@
149149
</script>
150150
{%- endif %}
151151

152-
<div id="settings" class="modal" onclick="if (event.target == this){ openModal(event, true); }" hidden>
152+
<div id="settings" class="modal" accesskey="s" onclick="if (event.target === this){ openModal(event, true); }" hidden>
153153
<div class="modal-content">
154154
<span class="close material-icons" onclick="openModal(event, true);" title="Close">close</span>
155155
<h1>{{ _('Settings') }}</h1>

0 commit comments

Comments
 (0)