Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Preserve scroll position upon form submits #3661

Merged
merged 6 commits into from
Apr 16, 2019
Merged

Preserve scroll position upon form submits #3661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2a5a403
utils.js: Add new method objectsEqual()
nilmerg Jan 10, 2019
29a8184
loader.js: Remember a request's method
nilmerg Jan 10, 2019
d2214ef
loader.js: Pass-through previous request when peforming a redirection
nilmerg Jan 10, 2019
27569d0
loader.js: Preserve scroll position also for form submits
nilmerg Jan 10, 2019
f54f2f8
js: Prevent flickering when refreshing scrolled content
nilmerg Apr 15, 2019
cb3528a
js: Don't scroll to re-focused elements after auto-refreshes
nilmerg Apr 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 59 additions & 25 deletions public/js/icinga/loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,10 +139,15 @@
req.fail(this.onFailure);
req.complete(this.onComplete);
req.autorefresh = autorefresh;
req.method = method;
req.action = action;
req.addToHistory = true;
req.progressTimer = progressTimer;

if (url.match(/#/)) {
req.forceFocus = url.split(/#/)[1];
}

if (id) {
this.requests[id] = req;
}
Expand Down Expand Up @@ -349,10 +354,7 @@
return true;
}

this.redirectToUrl(
redirect, req.$target, req.url, req.getResponseHeader('X-Icinga-Rerender-Layout'), req.forceFocus,
req.getResponseHeader('X-Icinga-Refresh')
);
this.redirectToUrl(redirect, req.$target, req);
return true;
},

Expand All @@ -361,14 +363,20 @@
*
* @param {string} url
* @param {object} $target
* @param {string} origin
* @param {boolean} rerenderLayout
* @param {XMLHttpRequest} referrer
*/
redirectToUrl: function (url, $target, origin, rerenderLayout, forceFocus, autoRefreshInterval) {
var icinga = this.icinga;
redirectToUrl: function (url, $target, referrer) {
var icinga = this.icinga,
rerenderLayout,
autoRefreshInterval,
forceFocus,
origin;

if (typeof rerenderLayout === 'undefined') {
rerenderLayout = false;
if (typeof referrer !== 'undefined') {
rerenderLayout = referrer.getResponseHeader('X-Icinga-Rerender-Layout');
autoRefreshInterval = referrer.autoRefreshInterval;
forceFocus = referrer.forceFocus;
origin = referrer.url;
}

icinga.logger.debug(
Expand Down Expand Up @@ -416,6 +424,7 @@
var req = this.loadUrl(url, $target);
req.forceFocus = url === origin ? forceFocus : null;
req.autoRefreshInterval = autoRefreshInterval;
req.referrer = referrer;
}
}
},
Expand Down Expand Up @@ -448,9 +457,8 @@
this.failureNotice = null;
}

var url = req.url;
this.icinga.logger.debug(
'Got response for ', req.$target, ', URL was ' + url
'Got response for ', req.$target, ', URL was ' + req.url
);
this.processNotificationHeader(req);

Expand Down Expand Up @@ -570,6 +578,20 @@
rendered = true;
}

var referrer = req.referrer;
if (typeof referrer === 'undefined') {
referrer = req;
}

var autoSubmit = false;
if (referrer.method === 'POST') {
var newUrl = this.icinga.utils.parseUrl(req.url);
var currentUrl = this.icinga.utils.parseUrl(req.$target.data('icingaUrl'));
if (newUrl.path === currentUrl.path && this.icinga.utils.objectsEqual(newUrl.params, currentUrl.params)) {
autoSubmit = true;
}
}

req.$target.data('icingaUrl', req.url);

this.icinga.ui.initializeTriStates($resp);
Expand All @@ -583,13 +605,10 @@
}

// .html() removes outer div we added above
this.renderContentToContainer($resp.html(), req.$target, req.action, req.autorefresh, req.forceFocus);
this.renderContentToContainer($resp.html(), req.$target, req.action, req.autorefresh, req.forceFocus, autoSubmit);
if (oldNotifications) {
oldNotifications.appendTo($('#notifications'));
}
if (url.match(/#/)) {
setTimeout(this.icinga.ui.focusElement, 0, url.split(/#/)[1], req.$target);
}
if (newBody) {
this.icinga.ui.fixDebugVisibility().triggerWindowResize();
}
Expand Down Expand Up @@ -756,17 +775,22 @@
/**
* Smoothly render given HTML to given container
*/
renderContentToContainer: function (content, $container, action, autorefresh, forceFocus) {
renderContentToContainer: function (content, $container, action, autorefresh, forceFocus, autoSubmit) {
// Container update happens here
var scrollPos = false;
var _this = this;
var containerId = $container.attr('id');

var activeElementPath = false;
var navigationAnchor = false;
var focusFallback = false;

if (forceFocus && forceFocus.length) {
activeElementPath = this.icinga.utils.getCSSPath($(forceFocus));
if (typeof forceFocus === 'string') {
navigationAnchor = forceFocus;
} else {
activeElementPath = this.icinga.utils.getCSSPath($(forceFocus));
}
} else if (document.activeElement && document.activeElement.id === 'search') {
activeElementPath = '#search';
} else if (document.activeElement
Expand All @@ -785,8 +809,8 @@
activeElementPath = this.icinga.utils.getCSSPath($activeElement);
}

if (typeof containerId !== 'undefined') {
if (autorefresh) {
if (! forceFocus && typeof containerId !== 'undefined') {
if (autorefresh || autoSubmit) {
scrollPos = $container.scrollTop();
} else {
scrollPos = 0;
Expand Down Expand Up @@ -844,7 +868,9 @@
}
this.icinga.ui.assignUniqueContainerIds();

if (! activeElementPath) {
if (navigationAnchor) {
setTimeout(this.icinga.ui.focusElement, 0, navigationAnchor, $container);
} else if (! activeElementPath) {
// Active element was not in this container
if (! autorefresh) {
setTimeout(function() {
Expand All @@ -862,7 +888,7 @@
var $activeElement = $(activeElementPath);

if ($activeElement.length && $activeElement.is(':visible')) {
$activeElement.focus();
$activeElement[0].focus({preventScroll: autorefresh});
} else if (! autorefresh) {
if (focusFallback) {
$(focusFallback.parent).find(focusFallback.child).focus();
Expand All @@ -874,14 +900,22 @@
}, 0);
}

if (scrollPos !== false) {
setTimeout($container.scrollTop.bind($container), 0, scrollPos);
}
var icinga = this.icinga;
//icinga.events.applyHandlers($container);
icinga.ui.initializeControls($container);
icinga.ui.fixControls();

if (scrollPos !== false) {
$container.scrollTop(scrollPos);

// Fallback for browsers without support for focus({preventScroll: true})
setTimeout(function () {
if ($container.scrollTop() !== scrollPos) {
$container.scrollTop(scrollPos);
}
}, 0);
}

// Re-enable all click events (disabled as of performance reasons)
// $('*').off('click');
},
Expand Down
19 changes: 13 additions & 6 deletions public/js/icinga/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -567,18 +567,22 @@

$container.find('.controls').each(function() {
var $controls = $(this);
if (! $controls.next('.fake-controls').length) {
if (! $controls.prev('.fake-controls').length) {
var $tabs = $controls.find('.tabs', $controls);
if ($tabs.length && $controls.children().length > 1 && ! $tabs.next('.tabs-spacer').length) {
$tabs.after($('<div class="tabs-spacer"></div>'));
}
var $fakeControls = $('<div class="fake-controls"></div>');
$fakeControls.height($controls.height()).css({
display: 'block'
// That's only temporary. It's reset in fixControls, which is called at the end of this
// function. Its purpose is to prevent the content from jumping up upon auto-refreshes.
// It works by making the fake-controls appear at the same vertical level as the controls
// and the height of the content then doesn't change when taking the controls out of the flow.
float: 'right'
});
$controls.css({
$controls.before($fakeControls).css({
position: 'fixed'
}).after($fakeControls);
});
}
});

Expand Down Expand Up @@ -669,12 +673,15 @@

$container.find('.controls').each(function() {
var $controls = $(this);
var $fakeControls = $controls.next('.fake-controls');
var $fakeControls = $controls.prev('.fake-controls');
$fakeControls.css({
float: '', // Set by initializeControls
height: $controls.height()
});
$controls.css({
top: $container.offsetParent().position().top,
width: $fakeControls.outerWidth()
});
$fakeControls.height($controls.height());
});

var $statusBar = $container.children('.monitoring-statusbar');
Expand Down
8 changes: 8 additions & 0 deletions public/js/icinga/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,14 @@
return keys;
},

objectsEqual: function equals(obj1, obj2) {
return Object.keys(obj1)
.concat(Object.keys(obj2))
.every(function (key) {
return obj1[key] === obj2[key];
});
},

/**
* Cleanup
*/
Expand Down