Pagination: Focus active after next or prev exceeded

I'd like to see behaviors for components instead of patching loader/events all the time.
This commit is contained in:
Eric Lippmann 2016-01-25 07:09:15 +01:00
parent d2e4664dce
commit 7ede8124cb
2 changed files with 18 additions and 5 deletions

View File

@ -14,9 +14,11 @@
Autofocus.prototype = new Icinga.EventListener(); Autofocus.prototype = new Icinga.EventListener();
Autofocus.prototype.onRendered = function(e) { Autofocus.prototype.onRendered = function(e) {
if (document.activeElement === document.body) { setTimeout(function() {
$(e.target).find('.autofocus').focus(); if (document.activeElement === e.target) {
} $(e.target).find('.autofocus').focus();
}
}, 0);
}; };
Icinga.Behaviors.Autofocus = Autofocus; Icinga.Behaviors.Autofocus = Autofocus;

View File

@ -729,6 +729,7 @@
var containerId = $container.attr('id'); var containerId = $container.attr('id');
var activeElementPath = false; var activeElementPath = false;
var focusFallback = false;
if (forceFocus && forceFocus.length) { if (forceFocus && forceFocus.length) {
activeElementPath = this.icinga.utils.getCSSPath($(forceFocus)); activeElementPath = this.icinga.utils.getCSSPath($(forceFocus));
} else if (document.activeElement } else if (document.activeElement
@ -736,7 +737,15 @@
&& $.contains($container[0], document.activeElement) && $.contains($container[0], document.activeElement)
) { ) {
// Active element in container // Active element in container
activeElementPath = this.icinga.utils.getCSSPath($(document.activeElement)); var $activeElement = $(document.activeElement);
var $pagination = $activeElement.closest('.pagination-control');
if ($pagination.length) {
focusFallback = {
'parent': this.icinga.utils.getCSSPath($pagination),
'child': '.active > a'
};
}
activeElementPath = this.icinga.utils.getCSSPath($activeElement);
} }
if (typeof containerId !== 'undefined') { if (typeof containerId !== 'undefined') {
@ -815,7 +824,9 @@
if ($activeElement.length && $activeElement.is(':visible')) { if ($activeElement.length && $activeElement.is(':visible')) {
$activeElement.focus(); $activeElement.focus();
} else if (! autorefresh) { } else if (! autorefresh) {
if (typeof $container.attr('tabindex') === 'undefined') { if (focusFallback) {
$(focusFallback.parent).find(focusFallback.child).focus();
} else if (typeof $container.attr('tabindex') === 'undefined') {
$container.attr('tabindex', -1); $container.attr('tabindex', -1);
} }
$container.focus(); $container.focus();