|
|
@@ -13,19 +13,22 @@ const { defaultTabIcon } = require('./icons')
|
|
|
// MIT licence, https://github.com/ghosh/micromodal/blob/master/LICENSE.md
|
|
|
// Copyright (c) 2017 Indrashish Ghosh
|
|
|
const FOCUSABLE_ELEMENTS = [
|
|
|
- 'a[href]',
|
|
|
- 'area[href]',
|
|
|
- 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
|
|
|
- 'select:not([disabled]):not([aria-hidden])',
|
|
|
- 'textarea:not([disabled]):not([aria-hidden])',
|
|
|
- 'button:not([disabled]):not([aria-hidden])',
|
|
|
- 'iframe',
|
|
|
- 'object',
|
|
|
- 'embed',
|
|
|
- '[contenteditable]',
|
|
|
- '[tabindex]:not([tabindex^="-"])'
|
|
|
+ 'a[href]:not([tabindex^="-"]):not([inert]):not([aria-hidden])',
|
|
|
+ 'area[href]:not([tabindex^="-"]):not([inert]):not([aria-hidden])',
|
|
|
+ 'input:not([disabled]):not([inert]):not([aria-hidden])',
|
|
|
+ 'select:not([disabled]):not([inert]):not([aria-hidden])',
|
|
|
+ 'textarea:not([disabled]):not([inert]):not([aria-hidden])',
|
|
|
+ 'button:not([disabled]):not([inert]):not([aria-hidden])',
|
|
|
+ 'iframe:not([tabindex^="-"]):not([inert]):not([aria-hidden])',
|
|
|
+ 'object:not([tabindex^="-"]):not([inert]):not([aria-hidden])',
|
|
|
+ 'embed:not([tabindex^="-"]):not([inert]):not([aria-hidden])',
|
|
|
+ '[contenteditable]:not([tabindex^="-"]):not([inert]):not([aria-hidden])',
|
|
|
+ '[tabindex]:not([tabindex^="-"]):not([inert]):not([aria-hidden])'
|
|
|
]
|
|
|
|
|
|
+const TAB_KEY = 9
|
|
|
+const ESC_KEY = 27
|
|
|
+
|
|
|
/**
|
|
|
* Dashboard UI with previews, metadata editing, tabs for various services and more
|
|
|
*/
|
|
|
@@ -106,6 +109,7 @@ module.exports = class Dashboard extends Plugin {
|
|
|
disableInformer: false,
|
|
|
disableThumbnailGenerator: false,
|
|
|
disablePageScrollWhenModalOpen: true,
|
|
|
+ animateOpenClose: true,
|
|
|
proudlyDisplayPoweredByUppy: true,
|
|
|
onRequestCloseModal: () => this.closeModal(),
|
|
|
locale: defaultLocale
|
|
|
@@ -242,23 +246,43 @@ module.exports = class Dashboard extends Plugin {
|
|
|
this.savedActiveElement = document.activeElement
|
|
|
|
|
|
if (this.opts.disablePageScrollWhenModalOpen) {
|
|
|
- document.body.classList.add('uppy-Dashboard-isOpen')
|
|
|
+ document.body.classList.add('uppy-Dashboard-isFixed')
|
|
|
}
|
|
|
|
|
|
+ // handle ESC and TAB keys in modal dialog
|
|
|
+ document.addEventListener('keydown', this.onKeydown)
|
|
|
+
|
|
|
this.rerender(this.uppy.getState())
|
|
|
this.updateDashboardElWidth()
|
|
|
this.setFocusToBrowse()
|
|
|
}
|
|
|
|
|
|
closeModal () {
|
|
|
- this.setPluginState({
|
|
|
- isHidden: true
|
|
|
- })
|
|
|
-
|
|
|
if (this.opts.disablePageScrollWhenModalOpen) {
|
|
|
- document.body.classList.remove('uppy-Dashboard-isOpen')
|
|
|
+ document.body.classList.remove('uppy-Dashboard-isFixed')
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.opts.animateOpenClose) {
|
|
|
+ this.setPluginState({
|
|
|
+ isClosing: true
|
|
|
+ })
|
|
|
+ const handler = () => {
|
|
|
+ this.setPluginState({
|
|
|
+ isHidden: true,
|
|
|
+ isClosing: false
|
|
|
+ })
|
|
|
+ this.el.removeEventListener('animationend', handler, false)
|
|
|
+ }
|
|
|
+ this.el.addEventListener('animationend', handler, false)
|
|
|
+ } else {
|
|
|
+ this.setPluginState({
|
|
|
+ isHidden: true
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
+ // handle ESC and TAB keys in modal dialog
|
|
|
+ document.removeEventListener('keydown', this.onKeydown)
|
|
|
+
|
|
|
this.savedActiveElement.focus()
|
|
|
}
|
|
|
|
|
|
@@ -268,9 +292,9 @@ module.exports = class Dashboard extends Plugin {
|
|
|
|
|
|
onKeydown (event) {
|
|
|
// close modal on esc key press
|
|
|
- if (event.keyCode === 27) this.requestCloseModal(event)
|
|
|
+ if (event.keyCode === ESC_KEY) this.requestCloseModal(event)
|
|
|
// maintainFocus on tab key press
|
|
|
- if (event.keyCode === 9) this.maintainFocus(event)
|
|
|
+ if (event.keyCode === TAB_KEY) this.maintainFocus(event)
|
|
|
}
|
|
|
|
|
|
handleClickOutside () {
|
|
|
@@ -323,10 +347,6 @@ module.exports = class Dashboard extends Plugin {
|
|
|
this.uppy.log('Dashboard modal trigger not found. Make sure `trigger` is set in Dashboard options unless you are planning to call openModal() method yourself')
|
|
|
}
|
|
|
|
|
|
- if (!this.opts.inline) {
|
|
|
- document.addEventListener('keydown', this.onKeydown)
|
|
|
- }
|
|
|
-
|
|
|
// Drag Drop
|
|
|
this.removeDragDropListener = dragDrop(this.el, (files) => {
|
|
|
this.handleDrop(files)
|
|
|
@@ -342,10 +362,6 @@ module.exports = class Dashboard extends Plugin {
|
|
|
showModalTrigger.forEach(trigger => trigger.removeEventListener('click', this.openModal))
|
|
|
}
|
|
|
|
|
|
- if (!this.opts.inline) {
|
|
|
- document.removeEventListener('keydown', this.onKeydown)
|
|
|
- }
|
|
|
-
|
|
|
this.removeDragDropListener()
|
|
|
window.removeEventListener('resize', this.updateDashboardElWidth)
|
|
|
}
|
|
|
@@ -456,6 +472,8 @@ module.exports = class Dashboard extends Plugin {
|
|
|
totalProgress: state.totalProgress,
|
|
|
acquirers: acquirers,
|
|
|
activePanel: pluginState.activePanel,
|
|
|
+ animateOpenClose: this.opts.animateOpenClose,
|
|
|
+ isClosing: pluginState.isClosing,
|
|
|
getPlugin: this.uppy.getPlugin,
|
|
|
progressindicators: progressindicators,
|
|
|
autoProceed: this.uppy.opts.autoProceed,
|
Artur Paikin