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
* 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) {
var icinga = this.icinga,
main,
parts;
applyLocationBar: function (onload = false) {
let col2State = this.getCol2State();
if (typeof onload === 'undefined') {
onload = false;
if (onload && document.querySelector('#layout > #login')) {
// 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
main = document.location.pathname + document.location.search;
if (! onload && $('#col1').data('icingaUrl') !== main) {
icinga.loader.loadUrl(
main,
$('#col1')
).addToHistory = false;
let col1 = document.getElementById('col1'),
col2 = document.getElementById('col2'),
col1Url = document.location.pathname + document.location.search;
let col2Url;
if (col2State && col2State.match(/^#!/)) {
col2Url = col2State.split(/#!/)[1];
}
if (this.getPaneAnchor(0)) {
$('#col1').data('icingaUrl', $('#col1').data('icingaUrl') + '#' + this.getPaneAnchor(0));
// This uses jQuery only because of its internal data attribute cache -.-
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 (hash && hash.match(/^#!/)) {
parts = hash.split(/#!/);
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;
}
if (loadCol1 && currentCol1Url !== col1Url) {
let anchor = this.getPaneAnchor(0);
if (anchor) {
col1Url += '#' + anchor;
}
// TODO: Replace with dynamic columns
icinga.ui.layout2col();
this.icinga.loader.loadUrl(col1Url, $(col1)).addToHistory = false;
}
} else {
// TODO: Replace with dynamic columns
icinga.ui.layout1col();
if (loadCol2 && currentCol2Url !== col2Url) {
let col2Req = this.icinga.loader.loadUrl(col2Url, $(col2));
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'));
},
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) {
var props = {
'elements': $('#' + $col.attr('id') + ' > *').detach(),
@ -335,6 +345,8 @@
$c.removeData('icingaRefresh');
$c.removeData('lastUpdate');
$c.removeData('icingaModule');
delete $c[0].dataset.icingaContainerId;
$c.removeAttr('class').attr('class', 'container');
this.icinga.loader.stopPendingRequestsFor($c);
$c.trigger('close-column');
$c.html('');