mirror of https://github.com/nextcloud/server
Handle keyboard navigation in the file picker
Signed-off-by: Christopher Ng <chrng8@gmail.com>
This commit is contained in:
parent
b7089c20ee
commit
229c65b0d7
|
@ -443,17 +443,23 @@ const Dialogs = {
|
|||
self.$filelist = self.$filePicker.find('.filelist tbody')
|
||||
self.$filelistContainer = self.$filePicker.find('.filelist-container')
|
||||
self.$dirTree = self.$filePicker.find('.dirtree')
|
||||
self.$dirTree.on('click', 'div:not(:last-child)', self, function(event) {
|
||||
self._handleTreeListSelect(event, type)
|
||||
self.$dirTree.on('click keydown', 'div:not(:last-child)', self, function(event) {
|
||||
if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
|
||||
self._handleTreeListSelect(event, type)
|
||||
}
|
||||
})
|
||||
self.$filelist.on('click', 'tr', function(event) {
|
||||
self._handlePickerClick(event, $(this), type)
|
||||
self.$filelist.on('click keydown', 'tr', function(event) {
|
||||
if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
|
||||
self._handlePickerClick(event, $(this), type)
|
||||
}
|
||||
})
|
||||
self.$fileListHeader.on('click', 'a', function(event) {
|
||||
var dir = self.$filePicker.data('path')
|
||||
self.filepicker.sortField = $(event.currentTarget).data('sort')
|
||||
self.filepicker.sortOrder = self.filepicker.sortOrder === 'asc' ? 'desc' : 'asc'
|
||||
self._fillFilePicker(dir)
|
||||
self.$fileListHeader.on('click keydown', 'a', function(event) {
|
||||
if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
|
||||
var dir = self.$filePicker.data('path')
|
||||
self.filepicker.sortField = $(event.currentTarget).data('sort')
|
||||
self.filepicker.sortOrder = self.filepicker.sortOrder === 'asc' ? 'desc' : 'asc'
|
||||
self._fillFilePicker(dir)
|
||||
}
|
||||
})
|
||||
self._fillFilePicker(path)
|
||||
})
|
||||
|
@ -1272,7 +1278,7 @@ const Dialogs = {
|
|||
|
||||
var dir
|
||||
var path = this.$filePicker.data('path')
|
||||
var $template = $('<div data-dir="{dir}"><a>{name}</a></div>').addClass('crumb')
|
||||
var $template = $('<div data-dir="{dir}" tabindex="0"><a>{name}</a></div>').addClass('crumb')
|
||||
if (path) {
|
||||
var paths = path.split('/')
|
||||
$.each(paths, function(index, dir) {
|
||||
|
|
|
@ -171,11 +171,13 @@ $.widget('oc.ocdialog', {
|
|||
break
|
||||
case 'closeButton':
|
||||
if (value) {
|
||||
const $closeButton = $('<a class="oc-dialog-close"></a>')
|
||||
const $closeButton = $('<a class="oc-dialog-close" tabindex="0"></a>')
|
||||
this.$dialog.prepend($closeButton)
|
||||
$closeButton.on('click', function() {
|
||||
self.options.closeCallback && self.options.closeCallback()
|
||||
self.close()
|
||||
$closeButton.on('click keydown', function(event) {
|
||||
if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
|
||||
self.options.closeCallback && self.options.closeCallback()
|
||||
self.close()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$dialog.find('.oc-dialog-close').remove()
|
||||
|
|
|
@ -25,26 +25,26 @@
|
|||
<tr>
|
||||
<th id="headerName" class="column-name">
|
||||
<div id="headerName-container">
|
||||
<a class="name sort columntitle" data-sort="name">
|
||||
<a class="name sort columntitle" data-sort="name" tabindex="0">
|
||||
<span>{nameCol}</span>
|
||||
<span class="sort-indicator hidden icon-triangle-n"></span>
|
||||
</a>
|
||||
</div>
|
||||
</th>
|
||||
<th id="headerSize" class="column-size">
|
||||
<a class="size sort columntitle" data-sort="size">
|
||||
<a class="size sort columntitle" data-sort="size" tabindex="0">
|
||||
<span>{sizeCol}</span>
|
||||
<span class="sort-indicator hidden icon-triangle-n"></span></a>
|
||||
</th>
|
||||
<th id="headerDate" class="column-mtime">
|
||||
<a id="modified" class="columntitle" data-sort="mtime">
|
||||
<a id="modified" class="columntitle" data-sort="mtime" tabindex="0">
|
||||
<span>{modifiedCol}</span>
|
||||
<span class="sort-indicator hidden icon-triangle-n"></span></a>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr data-entryname="{filename}" data-type="{type}">
|
||||
<tr data-entryname="{filename}" data-type="{type}" tabindex="0">
|
||||
<td class="filename"
|
||||
style="background-image:url({icon})">
|
||||
<span class="filename-parts">
|
||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue