parent
a50563ba0c
commit
570c41a27a
@ -1,137 +0,0 @@ |
||||
var yo = require('yo-yo') |
||||
var css = require('./styles/modaldialog-styles') |
||||
|
||||
module.exports = (title, content, ok, cancel, focusSelector, opts) => { |
||||
let agreed = true |
||||
opts = opts || {} |
||||
var container = document.querySelector(`.${css.modal}`) |
||||
if (!container) { |
||||
document.querySelector('body').appendChild(html(opts)) |
||||
container = document.querySelector(`.${css.modal}`) |
||||
} |
||||
|
||||
var closeDiv = document.getElementById('modal-close') |
||||
if (opts.hideClose) closeDiv.style.display = 'none' |
||||
|
||||
var okDiv = document.getElementById('modal-footer-ok') |
||||
okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' |
||||
okDiv.style.display = okDiv.innerHTML === '' ? 'none' : 'inline-block' |
||||
|
||||
var cancelDiv = document.getElementById('modal-footer-cancel') |
||||
cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel' |
||||
cancelDiv.style.display = cancelDiv.innerHTML === '' ? 'none' : 'inline-block' |
||||
|
||||
var modal = document.querySelector(`.${css.modalBody}`) |
||||
var modalTitle = document.querySelector(`.${css.modalHeader} h3`) |
||||
|
||||
modalTitle.innerHTML = '' |
||||
if (title) modalTitle.innerHTML = title |
||||
|
||||
modal.innerHTML = '' |
||||
if (content) modal.appendChild(content) |
||||
|
||||
setFocusOn('ok') |
||||
|
||||
show() |
||||
|
||||
function setFocusOn (btn) { |
||||
var okDiv = document.getElementById('modal-footer-ok') |
||||
var cancelDiv = document.getElementById('modal-footer-cancel') |
||||
if (btn === 'ok') { |
||||
okDiv.className = okDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') |
||||
cancelDiv.className = cancelDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') |
||||
} else { |
||||
cancelDiv.className = cancelDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') |
||||
okDiv.className = okDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') |
||||
} |
||||
} |
||||
|
||||
function okListener () { |
||||
removeEventListener() |
||||
hide() |
||||
if (ok && ok.fn && agreed) ok.fn() |
||||
} |
||||
|
||||
function cancelListener () { |
||||
removeEventListener() |
||||
hide() |
||||
if (cancel && cancel.fn) cancel.fn() |
||||
if (container) { |
||||
container.class = css.modal |
||||
container = null |
||||
} |
||||
} |
||||
|
||||
function modalKeyEvent (e) { |
||||
if (e.keyCode === 27) { |
||||
cancelListener() |
||||
} else if (e.keyCode === 13) { |
||||
e.preventDefault() |
||||
okListener() |
||||
} else if (e.keyCode === 37) { |
||||
e.preventDefault() |
||||
agreed = true |
||||
setFocusOn('ok') |
||||
} else if (e.keyCode === 39) { |
||||
e.preventDefault() |
||||
agreed = false |
||||
setFocusOn('cancel') |
||||
} |
||||
} |
||||
|
||||
function hide () { |
||||
if (container) container.style.display = 'none' |
||||
} |
||||
|
||||
function show () { |
||||
if (!container) return |
||||
container.style.display = 'block' |
||||
if (focusSelector) { |
||||
const focusTarget = document.querySelector(`.${css.modal} ${focusSelector}`) |
||||
if (focusTarget) { |
||||
focusTarget.focus() |
||||
if (typeof focusTarget.setSelectionRange === 'function') { |
||||
focusTarget.setSelectionRange(0, focusTarget.value.length) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
function removeEventListener () { |
||||
okDiv.removeEventListener('click', okListener) |
||||
cancelDiv.removeEventListener('click', cancelListener) |
||||
closeDiv.removeEventListener('click', cancelListener) |
||||
document.removeEventListener('keydown', modalKeyEvent) |
||||
if (document.getElementById('modal-background')) { |
||||
document.getElementById('modal-background').removeEventListener('click', cancelListener) |
||||
} |
||||
} |
||||
okDiv.addEventListener('click', okListener) |
||||
cancelDiv.addEventListener('click', cancelListener) |
||||
closeDiv.addEventListener('click', cancelListener) |
||||
document.addEventListener('keydown', modalKeyEvent) |
||||
if (document.getElementById('modal-background')) { |
||||
document.getElementById('modal-background').addEventListener('click', cancelListener) |
||||
} |
||||
return { container, okListener, cancelListener } |
||||
} |
||||
|
||||
function html (opts) { |
||||
return yo`<div id="modal-dialog" class="${css.modal}"> |
||||
<div id="modal-background" class="${css['modalBackground']}"> </div> |
||||
<div class="${css['modalContent']} bg-light text-secondary ${opts.class}"> |
||||
<div class="${css['modalHeader']}"> |
||||
<h3></h3> |
||||
<i id="modal-close" title="Close" class="fa fa-times ${css['modalClose']}" aria-hidden="true"></i> |
||||
</div> |
||||
<div class="${css['modalBody']}"> - |
||||
</div> |
||||
<div class="${css['modalFooter']}"> |
||||
<span id="modal-footer-ok" class="${css['modalFooterOk']} btn btn-sm btn-light">OK</span> |
||||
<span id="modal-footer-cancel" class="${css['modalFooterCancel']} btn btn-sm btn-light">Cancel</span> |
||||
</div> |
||||
</div> |
||||
</div>` |
||||
} |
||||
|
||||
|
Loading…
Reference in new issue