sidebar search enhancements (#2929)

* add ability to move across entries with arrow keys
* small style fixes for sidebar search
* bump bundlewatch size
This commit is contained in:
REJack 2020-07-25 22:52:55 +02:00 committed by GitHub
parent 127a1568c7
commit c79452bb22
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 8 deletions

View file

@ -50,11 +50,11 @@
},
{
"path": "./dist/js/adminlte.js",
"maxSize": "11.6 kB"
"maxSize": "12 kB"
},
{
"path": "./dist/js/adminlte.min.js",
"maxSize": "7.5 kB"
"maxSize": "8 kB"
}
]
}

View file

@ -226,7 +226,19 @@ $(document).on('click', SELECTOR_SEARCH_BUTTON, event => {
SidebarSearch._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'toggle')
})
$(document).on('keyup', SELECTOR_SEARCH_INPUT, () => {
$(document).on('keyup', SELECTOR_SEARCH_INPUT, event => {
if (event.keyCode == 38) {
event.preventDefault()
$(SELECTOR_SEARCH_RESULTS_GROUP).children().last().focus()
return
}
if (event.keyCode == 40) {
event.preventDefault()
$(SELECTOR_SEARCH_RESULTS_GROUP).children().first().focus()
return
}
let timer = 0
clearTimeout(timer)
timer = setTimeout(() => {
@ -234,6 +246,30 @@ $(document).on('keyup', SELECTOR_SEARCH_INPUT, () => {
}, 100)
})
$(document).on('keydown', SELECTOR_SEARCH_RESULTS_GROUP, event => {
const $focused = $(':focus')
if (event.keyCode == 38) {
event.preventDefault()
if ($focused.is(':first-child')) {
$focused.siblings().last().focus()
} else {
$focused.prev().focus()
}
}
if (event.keyCode == 40) {
event.preventDefault()
if ($focused.is(':last-child')) {
$focused.siblings().first().focus()
} else {
$focused.next().focus()
}
}
})
$(window).on('load', () => {
SidebarSearch._jQueryInterface.call($(SELECTOR_DATA_WIDGET), 'init')
})

View file

@ -993,6 +993,24 @@
}
}
[data-widget="sidebar-search"] {
input[type="search"] {
&::-ms-clear,
&::-ms-reveal {
display: none;
width: 0;
height: 0;
}
&::-webkit-search-cancel-button,
&::-webkit-search-decoration,
&::-webkit-search-results-button,
&::-webkit-search-results-decoration {
display: none;
}
}
}
.sidebar-search-results {
position: relative;
display: none;
@ -1011,13 +1029,21 @@
width: 100%;
z-index: $zindex-main-sidebar + 1;
.list-group-item {
> .list-group-item {
padding: $input-padding-y $input-padding-x;
}
> .list-group-item:first-child {
border-top: 0;
@include border-top-radius(0);
&:-moz-focusring {
margin-top: 0;
border-left: 1px solid transparent;
border-top: 0;
border-bottom: 1px solid transparent;
}
&:first-child {
margin-top: 0;
border-top: 0;
@include border-top-radius(0);
}
}
}
}