From: Jo-Philipp Wich Date: Tue, 13 Nov 2018 15:30:46 +0000 (+0100) Subject: luci-base: cbi.js: add modal dialog functions X-Git-Url: https://git.librecmc.org/?a=commitdiff_plain;h=333b7e57d3a45bb1d604685ebb78ab167c3faf73;p=oweals%2Fluci.git 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 --- diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js index b3ba8259f..294b2d748 100644 --- 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);