tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

js: Prevent flickering when refreshing scrolled content

This commit is contained in:
Johannes Meyer 2019-04-15 14:27:14 +02:00
parent 27569d09d8
commit f54f2f8627
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/js/icinga/loader.js
View File

@ -893,14 +893,15 @@
}, 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);
}
// Re-enable all click events (disabled as of performance reasons)
// $('*').off('click');
},

19
public/js/icinga/ui.js
View File

@ -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);
});
}
});
@ -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');