| 1 |
/* |
| 2 |
* Photonic Modal |
| 3 |
* Used as the overlay panel |
| 4 |
* License: MIT |
| 5 |
*/ |
| 6 |
|
| 7 |
export const Modal = function(modal, options) { |
| 8 |
const body = document.body; |
| 9 |
|
| 10 |
//Defaults |
| 11 |
const settings = Object.assign({ |
| 12 |
modalTarget: 'photonicModal', |
| 13 |
closeCSS: '', |
| 14 |
closeFromRight: 0, |
| 15 |
width: '80%', |
| 16 |
height: '100%', |
| 17 |
top: '0px', |
| 18 |
left: '0px', |
| 19 |
zIndexIn: '9999', |
| 20 |
zIndexOut: '-9999', |
| 21 |
color: '#39BEB9', |
| 22 |
opacityIn: '1', |
| 23 |
opacityOut: '0', |
| 24 |
animationDuration: '.6s', |
| 25 |
overflow: 'auto', |
| 26 |
}, options); |
| 27 |
|
| 28 |
let overlay = document.querySelector('.photonicModalOverlay'), |
| 29 |
scrollable = document.querySelector('.photonicModalOverlayScrollable'); |
| 30 |
|
| 31 |
if (!overlay) { |
| 32 |
overlay = document.createElement('div'); |
| 33 |
overlay.className = 'photonicModalOverlay'; |
| 34 |
|
| 35 |
scrollable = document.createElement('div'); |
| 36 |
scrollable.className = 'photonicModalOverlayScrollable'; |
| 37 |
|
| 38 |
overlay.appendChild(scrollable); |
| 39 |
body.appendChild(overlay); |
| 40 |
} |
| 41 |
|
| 42 |
let closeIcon = modal.querySelector('.photonicModalClose'); |
| 43 |
if (!closeIcon) { |
| 44 |
closeIcon = document.createElement('a'); |
| 45 |
closeIcon.className = 'photonicModalClose ' + settings.closeCSS; |
| 46 |
closeIcon.style.right = settings.closeFromRight; |
| 47 |
closeIcon.innerHTML = '×'; |
| 48 |
closeIcon.setAttribute('href', '#'); |
| 49 |
modal.insertAdjacentElement('afterbegin', closeIcon); |
| 50 |
} |
| 51 |
|
| 52 |
closeIcon = modal.querySelector('.photonicModalClose'); |
| 53 |
|
| 54 |
const id = document.querySelector('#' + settings.modalTarget); |
| 55 |
|
| 56 |
// Default Classes |
| 57 |
// id.addClass('photonicModal'); |
| 58 |
// id.addClass(settings.modalTarget+'-off'); |
| 59 |
|
| 60 |
//Init styles |
| 61 |
const initStyles = { |
| 62 |
'width': settings.width, |
| 63 |
'height': settings.height, |
| 64 |
'top': settings.top, |
| 65 |
'left': settings.left, |
| 66 |
'background-color': settings.color, |
| 67 |
'overflow-y': settings.overflow, |
| 68 |
'z-index': settings.zIndexOut, |
| 69 |
'opacity': settings.opacityOut, |
| 70 |
'-webkit-animation-duration': settings.animationDuration, |
| 71 |
'-moz-animation-duration': settings.animationDuration, |
| 72 |
'-ms-animation-duration': settings.animationDuration, |
| 73 |
'animation-duration': settings.animationDuration |
| 74 |
}; |
| 75 |
|
| 76 |
if (id) { |
| 77 |
id.classList.add('photonicModal'); |
| 78 |
id.classList.add(settings.modalTarget + '-off'); |
| 79 |
let style = ''; |
| 80 |
for (let [key, value] of Object.entries(initStyles)) { |
| 81 |
style += `${key}: ${value}; `; |
| 82 |
} |
| 83 |
id.style.cssText += style; // initStyles.reduce((a, v, i) => a + i + ': ' + v + ';'); |
| 84 |
open(id); |
| 85 |
} |
| 86 |
|
| 87 |
closeIcon.addEventListener('click', function(event) { |
| 88 |
event.preventDefault(); |
| 89 |
document.documentElement.style.overflow = 'auto'; |
| 90 |
document.body.style.overflow = 'auto'; |
| 91 |
|
| 92 |
if (id.classList.contains(settings.modalTarget+'-on')) { |
| 93 |
id.classList.remove(settings.modalTarget+'-on'); |
| 94 |
id.classList.add(settings.modalTarget+'-off'); |
| 95 |
} |
| 96 |
|
| 97 |
if (id.classList.contains(settings.modalTarget+'-off')) { |
| 98 |
id.addEventListener('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose, {once: true}); |
| 99 |
} |
| 100 |
|
| 101 |
id.style.overflowY = 'hidden'; |
| 102 |
slideUp(id); |
| 103 |
// Util.slideUpDown(id.closest('.photonicModalOverlayScrollable'), 'hide'); |
| 104 |
overlay.style.overflowY = 'hidden'; |
| 105 |
// Util.fadeOut(overlay); |
| 106 |
overlay.style.display = 'none'; |
| 107 |
}); |
| 108 |
|
| 109 |
function slideDown(element) { |
| 110 |
element.style.height = 'auto'; |
| 111 |
element.style.height = `${element.scrollHeight}px`; |
| 112 |
element.style.height = 'auto'; |
| 113 |
} |
| 114 |
|
| 115 |
const slideUp = element => { |
| 116 |
element.style.height = 0; |
| 117 |
element.style.display = 'none'; |
| 118 |
} |
| 119 |
|
| 120 |
function open(el) { |
| 121 |
document.documentElement.style.overflow = 'hidden'; |
| 122 |
document.body.style.overflow = 'hidden'; |
| 123 |
|
| 124 |
if (el.classList.contains(settings.modalTarget+'-off')) { |
| 125 |
el.classList.remove(settings.modalTarget+'-off'); |
| 126 |
el.classList.add(settings.modalTarget+'-on'); |
| 127 |
} |
| 128 |
|
| 129 |
if (el.classList.contains(settings.modalTarget+'-on')) { |
| 130 |
el.style.opacity = settings.opacityIn; |
| 131 |
el.style.zIndex = settings.zIndexIn; |
| 132 |
} |
| 133 |
|
| 134 |
overlay.style.overflowY = settings.overflow; |
| 135 |
overlay.style.display = 'block'; |
| 136 |
// Util.fadeIn(overlay); |
| 137 |
|
| 138 |
scrollable.appendChild(el); |
| 139 |
el.style.display = 'block'; |
| 140 |
el.style.overflowY = settings.overflow; |
| 141 |
slideDown(scrollable); |
| 142 |
// Util.slideUpDown(scrollable, 'show'); |
| 143 |
} |
| 144 |
|
| 145 |
function afterClose() { |
| 146 |
id.style.zIndex = settings.zIndexOut; |
| 147 |
} |
| 148 |
}; |
| 149 |
|
