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

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>

diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js
index b3ba8259f91a87cf6ef6d912e29bada79ab9c17d..294b2d74865709badc8e32c5c607f5b3875f5898 100644 (file)
--- a/modules/luci-base/htdocs/luci-static/resources/cbi.js
+++ b/modules/luci-base/htdocs/luci-static/resources/cbi.js
@@ -2292,8 +2292,43 @@ function hideTooltip(ev) {
        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() {
        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('mouseout', hideTooltip, true);