76 lines
2.3 KiB
JavaScript
76 lines
2.3 KiB
JavaScript
/**
|
|
* @file
|
|
* Adds default classes to buttons for styling purposes.
|
|
*/
|
|
|
|
(function ($, { tabbable, isTabbable }) {
|
|
$.widget('ui.dialog', $.ui.dialog, {
|
|
options: {
|
|
buttonClass: 'button',
|
|
buttonPrimaryClass: 'button--primary',
|
|
},
|
|
_createButtons() {
|
|
const opts = this.options;
|
|
let primaryIndex;
|
|
let index;
|
|
const il = opts.buttons.length;
|
|
for (index = 0; index < il; index++) {
|
|
if (
|
|
opts.buttons[index].primary &&
|
|
opts.buttons[index].primary === true
|
|
) {
|
|
primaryIndex = index;
|
|
delete opts.buttons[index].primary;
|
|
break;
|
|
}
|
|
}
|
|
this._super();
|
|
const $buttons = this.uiButtonSet.children().addClass(opts.buttonClass);
|
|
if (typeof primaryIndex !== 'undefined') {
|
|
$buttons.eq(index).addClass(opts.buttonPrimaryClass);
|
|
}
|
|
},
|
|
// Override jQuery UI's `_focusTabbable()` so finding tabbable elements uses
|
|
// the core/tabbable library instead of jQuery UI's `:tabbable` selector.
|
|
_focusTabbable() {
|
|
// Set focus to the first match:
|
|
|
|
// 1. An element that was focused previously.
|
|
let hasFocus = this._focusedElement ? this._focusedElement.get(0) : null;
|
|
|
|
// 2. First element inside the dialog matching [autofocus].
|
|
if (!hasFocus) {
|
|
hasFocus = this.element.find('[autofocus]').get(0);
|
|
}
|
|
|
|
// 3. Tabbable element inside the content element.
|
|
// 4. Tabbable element inside the buttonpane.
|
|
if (!hasFocus) {
|
|
const $elements = [this.element, this.uiDialogButtonPane];
|
|
for (let i = 0; i < $elements.length; i++) {
|
|
const element = $elements[i].get(0);
|
|
if (element) {
|
|
const elementTabbable = tabbable(element);
|
|
hasFocus = elementTabbable.length ? elementTabbable[0] : null;
|
|
}
|
|
if (hasFocus) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 5. The close button.
|
|
if (!hasFocus) {
|
|
const closeBtn = this.uiDialogTitlebarClose.get(0);
|
|
hasFocus = closeBtn && isTabbable(closeBtn) ? closeBtn : null;
|
|
}
|
|
|
|
// 6. The dialog itself.
|
|
if (!hasFocus) {
|
|
hasFocus = this.uiDialog.get(0);
|
|
}
|
|
$(hasFocus).eq(0).trigger('focus');
|
|
},
|
|
});
|
|
})(jQuery, window.tabbable);
|