mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Added prototypical arrow up/down result selection
This commit is contained in:
parent
3c1eb193bc
commit
544b1243aa
File diff suppressed because one or more lines are too long
3
material/assets/javascripts/application-269373cb27.js
Normal file
3
material/assets/javascripts/application-269373cb27.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/application-d848f886dc.css
Normal file
1
material/assets/stylesheets/application-d848f886dc.css
Normal file
File diff suppressed because one or more lines are too long
@ -38,7 +38,7 @@
|
||||
<script src="{{ base_url }}/assets/javascripts/modernizr-56ade86843.js"></script>
|
||||
{% endblock %}
|
||||
{% block styles %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-015c443a94.css">
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-d848f886dc.css">
|
||||
{% if config.extra.palette %}
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-66fa0d9bba.palette.css">
|
||||
{% endif %}
|
||||
@ -151,7 +151,7 @@
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% block scripts %}
|
||||
<script src="{{ base_url }}/assets/javascripts/application-134345668e.js"></script>
|
||||
<script src="{{ base_url }}/assets/javascripts/application-269373cb27.js"></script>
|
||||
<script>app.initialize({url:{base:"{{ base_url }}"}})</script>
|
||||
{% for path in extra_javascript %}
|
||||
<script src="{{ path }}"></script>
|
||||
|
@ -220,20 +220,58 @@ function initialize(config) { // eslint-disable-line func-style
|
||||
}
|
||||
}))
|
||||
|
||||
/* Listener: disable search when ESC key is pressed */
|
||||
/* Listener: keyboard handlers */
|
||||
new Material.Event.Listener(window, "keyup", ev => {
|
||||
const code = ev.keyCode || ev.which
|
||||
if (code === 27) {
|
||||
const toggle = document.querySelector("[data-md-toggle=search]")
|
||||
if (!(toggle instanceof HTMLInputElement))
|
||||
throw new ReferenceError
|
||||
if (toggle.checked) {
|
||||
toggle.checked = false
|
||||
toggle.dispatchEvent(new CustomEvent("change"))
|
||||
const query = document.querySelector("[data-md-component=query]")
|
||||
if (!(query instanceof HTMLInputElement))
|
||||
switch (ev.key) {
|
||||
|
||||
/* Escape: disable search */
|
||||
case "Escape": {
|
||||
const toggle = document.querySelector("[data-md-toggle=search]")
|
||||
if (!(toggle instanceof HTMLInputElement))
|
||||
throw new ReferenceError
|
||||
query.focus()
|
||||
if (toggle.checked) {
|
||||
toggle.checked = false
|
||||
toggle.dispatchEvent(new CustomEvent("change"))
|
||||
const query = document.querySelector("[data-md-component=query]")
|
||||
if (!(query instanceof HTMLInputElement))
|
||||
throw new ReferenceError
|
||||
query.blur()
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
/* Up arrow: select previous search result */
|
||||
case "ArrowUp": {
|
||||
const active = document.querySelector(
|
||||
"[data-md-component=search] [href][data-md-state=active]")
|
||||
const links = Array.prototype.slice.call(
|
||||
document.querySelectorAll("[data-md-component=search] [href]"))
|
||||
let index = active
|
||||
? (links.indexOf(active) - 1) % links.length
|
||||
: 0
|
||||
if (index === -1)
|
||||
index += links.length
|
||||
if (active)
|
||||
active.dataset.mdState = ""
|
||||
links[index].dataset.mdState = "active"
|
||||
links[index].focus()
|
||||
break
|
||||
}
|
||||
|
||||
/* Down arrow: select next search result */
|
||||
case "ArrowDown": {
|
||||
const active = document.querySelector(
|
||||
"[data-md-component=search] [href][data-md-state=active]") // TODO: remove active on mouseover (debounce!)
|
||||
const links = Array.prototype.slice.call(
|
||||
document.querySelectorAll("[data-md-component=search] [href]"))
|
||||
const index = active
|
||||
? (links.indexOf(active) + 1) % links.length
|
||||
: 0
|
||||
if (active)
|
||||
active.dataset.mdState = ""
|
||||
links[index].dataset.mdState = "active"
|
||||
links[index].focus()
|
||||
break
|
||||
}
|
||||
}
|
||||
}).listen()
|
||||
|
@ -422,9 +422,11 @@ $md-toggle__search--checked:
|
||||
&__link {
|
||||
display: block;
|
||||
transition: background 0.25s;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
|
||||
// Hovered link
|
||||
// Active or hovered link
|
||||
&[data-md-state="active"],
|
||||
&:hover {
|
||||
background-color: transparentize($md-color-accent, 0.9);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user