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

history.js: Properly handle data attributes upon navigation 

I've rewritten `applyLocationBar` basically. It now also just
moves a column if only the location has changed, not the url.
This commit is contained in:
Johannes Meyer 2022-04-21 17:10:20 +02:00
parent ec27f77861
commit 96460a2027
2 changed files with 55 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
public/js/icinga/history.js
View File

@ -224,57 +224,60 @@
* Read the pane url from the current URL and load the corresponding panes into containers to * Read the pane url from the current URL and load the corresponding panes into containers to
* match the current history state. * match the current history state.
* *
* @param {Boolean|Null} onload Set to true when the main pane should not be updated, defaults to false * @param {Boolean} onload Set to true when the main pane should not be updated, defaults to false
*/ */
applyLocationBar: function (onload) { applyLocationBar: function (onload = false) {
var icinga = this.icinga, let col2State = this.getCol2State();
main,
parts;
if (typeof onload === 'undefined') { if (onload && document.querySelector('#layout > #login')) {
onload = false; // The user landed on the login
let redirectInput = document.querySelector('#login form input[name=redirect]');
redirectInput.value = redirectInput.value + col2State;
return;
} }
// TODO: Still hardcoding col1/col2, shall be dynamic soon let col1 = document.getElementById('col1'),
main = document.location.pathname + document.location.search; col2 = document.getElementById('col2'),
if (! onload && $('#col1').data('icingaUrl') !== main) { col1Url = document.location.pathname + document.location.search;
icinga.loader.loadUrl(
main, let col2Url;
$('#col1') if (col2State && col2State.match(/^#!/)) {
).addToHistory = false; col2Url = col2State.split(/#!/)[1];
} }
if (this.getPaneAnchor(0)) { // This uses jQuery only because of its internal data attribute cache -.-
$('#col1').data('icingaUrl', $('#col1').data('icingaUrl') + '#' + this.getPaneAnchor(0)); let currentCol1Url = $(col1).data('icingaUrl'),
currentCol2Url = $(col2).data('icingaUrl');
let loadCol1 = ! onload,
loadCol2 = !! col2Url;
if (currentCol2Url === col1Url) {
// User navigated forward
this.icinga.ui.moveToLeft();
loadCol1 = false;
} else if (currentCol1Url === col2Url) {
// User navigated back
this.icinga.ui.moveToRight();
loadCol2 = false;
} }
var hash = this.getCol2State(); if (loadCol1 && currentCol1Url !== col1Url) {
if (hash && hash.match(/^#!/)) { let anchor = this.getPaneAnchor(0);
parts = hash.split(/#!/); if (anchor) {
col1Url += '#' + anchor;
if ($('#layout > #login').length) {
// We are on the login page
var redirect = $('#login form input[name=redirect]').first();
redirect.val(
redirect.val() + '#!' + parts[1]
);
} else {
if ($('#col2').data('icingaUrl') !== parts[1]) {
var req = icinga.loader.loadUrl(
parts[1],
$('#col2')
);
req.addToHistory = false;
req.scripted = onload;
}
} }
// TODO: Replace with dynamic columns this.icinga.loader.loadUrl(col1Url, $(col1)).addToHistory = false;
icinga.ui.layout2col(); }
} else { if (loadCol2 && currentCol2Url !== col2Url) {
// TODO: Replace with dynamic columns let col2Req = this.icinga.loader.loadUrl(col2Url, $(col2));
icinga.ui.layout1col(); col2Req.addToHistory = false;
col2Req.scripted = onload;
this.icinga.ui.layout2col();
} else if (! loadCol2 && ! col2Url) {
this.icinga.ui.layout1col();
} }
}, },

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

@ -212,6 +212,16 @@
this.icinga.behaviors.navigation.trySetActiveAndSelectedByUrl($('#col1').data('icingaUrl')); this.icinga.behaviors.navigation.trySetActiveAndSelectedByUrl($('#col1').data('icingaUrl'));
}, },
moveToRight: function () {
let col1 = document.getElementById('col1'),
col2 = document.getElementById('col2'),
col1Backup = this.cutContainer($(col1));
this.cutContainer($(col2)); // Clear col2 states
this.pasteContainer($(col2), col1Backup);
this.layout2col();
},
cutContainer: function ($col) { cutContainer: function ($col) {
var props = { var props = {
'elements': $('#' + $col.attr('id') + ' > *').detach(), 'elements': $('#' + $col.attr('id') + ' > *').detach(),
@ -335,6 +345,8 @@
$c.removeData('icingaRefresh'); $c.removeData('icingaRefresh');
$c.removeData('lastUpdate'); $c.removeData('lastUpdate');
$c.removeData('icingaModule'); $c.removeData('icingaModule');
delete $c[0].dataset.icingaContainerId;
$c.removeAttr('class').attr('class', 'container');
this.icinga.loader.stopPendingRequestsFor($c); this.icinga.loader.stopPendingRequestsFor($c);
$c.trigger('close-column'); $c.trigger('close-column');
$c.html(''); $c.html('');