Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-base: cbi.js: add modal dialog functions

Browse source 
Add two new functions showModal() and hideModal() which will fade in and
close an open modal respectively.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2018-11-13 16:30:46 +01:00
parent 1c84826242
commit 333b7e57d3
1 changed files with 35 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
modules/luci-base/htdocs/luci-static/resources/cbi.js
View file

@ -2292,8 +2292,43 @@ function hideTooltip(ev) {
tooltipTimeout = window.setTimeout(function() { tooltipDiv.removeAttribute('style'); }, 250); tooltipTimeout = window.setTimeout(function() { tooltipDiv.removeAttribute('style'); }, 250);
} }
var modalDiv = null;
function showModal(title, children)
{
var dlg = modalDiv.firstElementChild;
while (dlg.firstChild)
dlg.removeChild(dlg.firstChild);
dlg.setAttribute('class', 'modal');
dlg.appendChild(E('h4', {}, title));
if (!Array.isArray(children))
children = [ children ];
for (var i = 0; i < children.length; i++)
if (isElem(children[i]))
dlg.appendChild(children[i]);
else
dlg.appendChild(document.createTextNode('' + children[i]));
document.body.classList.add('modal-overlay-active');
return dlg;
}
function hideModal()
{
document.body.classList.remove('modal-overlay-active');
}
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
tooltipDiv = document.body.appendChild(E('div', { 'class': 'cbi-tooltip' })); tooltipDiv = document.body.appendChild(E('div', { 'class': 'cbi-tooltip' }));
modalDiv = document.body.appendChild(E('div', { 'id': 'modal_overlay' },
E('div', { 'class': 'modal' })));
document.addEventListener('mouseover', showTooltip, true); document.addEventListener('mouseover', showTooltip, true);
document.addEventListener('mouseout', hideTooltip, true); document.addEventListener('mouseout', hideTooltip, true);