parent
1a260c518c
commit
070a0d4110
@ -1,135 +0,0 @@ |
||||
var yo = require('yo-yo') |
||||
var csjs = require('csjs-inject') |
||||
|
||||
var css = csjs` |
||||
.modal { |
||||
display: none; /* Hidden by default */ |
||||
position: fixed; /* Stay in place */ |
||||
z-index: 1000; /* Sit on top of everything including the dragbar */ |
||||
left: 0; |
||||
top: 0; |
||||
width: 100%; /* Full width */ |
||||
height: 100%; /* Full height */ |
||||
overflow: auto; /* Enable scroll if needed */ |
||||
background-color: rgb(0,0,0); /* Fallback color */ |
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ |
||||
} |
||||
.modalHeader { |
||||
padding: 2px 16px; |
||||
background-color: orange; |
||||
color: white; |
||||
} |
||||
.modalBody { |
||||
padding: 1.5em; |
||||
line-height: 1.5em; |
||||
} |
||||
.modalFooter { |
||||
padding: 10px 30px; |
||||
background-color: orange; |
||||
color: white; |
||||
text-align: right; |
||||
font-weight: 700; |
||||
cursor: pointer; |
||||
} |
||||
.modalContent { |
||||
position: relative; |
||||
background-color: #fefefe; |
||||
margin: auto; |
||||
padding: 0; |
||||
line-height: 18px; |
||||
font-size: 13px; |
||||
border: 1px solid #888; |
||||
width: 50%; |
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); |
||||
-webkit-animation-name: animatetop; |
||||
-webkit-animation-duration: 0.4s; |
||||
animation-name: animatetop; |
||||
animation-duration: 0.4s |
||||
} |
||||
.modalFooterOk { |
||||
cursor: pointer; |
||||
} |
||||
@-webkit-keyframes animatetop { |
||||
from {top: -300px; opacity: 0}
|
||||
to {top: 0; opacity: 1} |
||||
} |
||||
@keyframes animatetop { |
||||
from {top: -300px; opacity: 0} |
||||
to {top: 0; opacity: 1} |
||||
} |
||||
` |
||||
|
||||
module.exports = (content, title, ok, cancel) => { |
||||
var containerOrig = document.querySelector('.modal') |
||||
var container |
||||
if (!containerOrig) { |
||||
container = document.querySelector(`.${css.modal}`) |
||||
if (!container) { |
||||
document.querySelector('body').appendChild(html()) |
||||
container = document.querySelector(`.${css.modal}`) |
||||
} |
||||
} else { |
||||
var parent = document.querySelector('body') |
||||
var child = document.getElementById('modaldialog') |
||||
parent.removeChild(child) |
||||
document.querySelector('body').appendChild(html()) |
||||
container = document.querySelector(`.${css.modal}`) |
||||
} |
||||
|
||||
var okDiv = document.getElementById('modal-footer-ok') |
||||
okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' |
||||
|
||||
var modal = document.querySelector(`.${css.modalBody}`) |
||||
var modalTitle = document.querySelector(`.${css.modalHeader} h2`) |
||||
var modalFooter = document.querySelector(`.${css.modalFooter}`) |
||||
|
||||
modalTitle.innerHTML = '' |
||||
if (title) modalTitle.innerHTML = title |
||||
|
||||
modal.innerHTML = '' |
||||
if (content) modal.innerHTML = content |
||||
|
||||
container.style.display = container.style.display === 'block' ? hide() : show() |
||||
|
||||
function clickModalFooterListener (event) { |
||||
hide() |
||||
removeEventListener() |
||||
} |
||||
|
||||
function okListener () { |
||||
hide() |
||||
// if (ok && ok.fn) ok.fn() - what is ok.fn doing?
|
||||
removeEventListener() |
||||
} |
||||
|
||||
function hide () { |
||||
container.style.display = 'none' |
||||
} |
||||
|
||||
function show () { |
||||
container.style.display = 'block' |
||||
} |
||||
|
||||
function removeEventListener () { |
||||
okDiv.removeEventListener('click', okListener) |
||||
modal.removeEventListener('click', clickModalFooterListener) |
||||
} |
||||
|
||||
okDiv.addEventListener('click', okListener) |
||||
modalFooter.addEventListener('click', clickModalFooterListener) |
||||
} |
||||
|
||||
function html () { |
||||
return yo`<div id="modal-dialog" class="${css.modal}" onclick="clickModal()" >
|
||||
<div class="${css['modalContent']}"> |
||||
<div class="${css['modalHeader']}"> |
||||
<h2></h2> |
||||
</div> |
||||
<div class="${css['modalBody']}"> -
|
||||
</div> |
||||
<div class="${css['modalFooter']}"> |
||||
<span id="modal-footer-ok" class="modalFooterOk">OK</span> |
||||
</div> |
||||
</div> |
||||
</div>` |
||||
} |
Loading…
Reference in new issue