76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
export const el = function (el = 'div') {
|
|
let f = document.createElement(el) as HTMLElement
|
|
return f
|
|
}
|
|
|
|
export const OpenGlobalEvent = function (event) {
|
|
event.stopPropagation()
|
|
let target = event.target as HTMLElement
|
|
if (target.tagName === 'IMG' && target.className == 'popup-image') {
|
|
let imgE = el('img')
|
|
imgE.style.width = 'auto%'
|
|
imgE.style.display = 'inline-block'
|
|
imgE.style.margin = 'auto'
|
|
imgE.style.marginTop = '20px'
|
|
imgE.style.marginBottom = '20px'
|
|
imgE.setAttribute('src', target.getAttribute('src'))
|
|
imgE.style.height = '80vh'
|
|
|
|
let popUpConteiner = el('div')
|
|
popUpConteiner.style.position = 'fixed'
|
|
popUpConteiner.style.display = 'flex'
|
|
popUpConteiner.style.justifyItems = 'center'
|
|
popUpConteiner.style.alignItems = 'center'
|
|
popUpConteiner.style.zIndex = '1024'
|
|
popUpConteiner.style.width = '100vw'
|
|
popUpConteiner.style.height = '100vh'
|
|
popUpConteiner.style.padding = '20px'
|
|
popUpConteiner.style.top = '0'
|
|
popUpConteiner.style.left = '0'
|
|
popUpConteiner.style.overflow = 'auto'
|
|
popUpConteiner.style.background = 'rgba(0,0,0,.5)'
|
|
let imgContainer = el('div').appendChild(imgE)
|
|
imgContainer.style.padding = '20px'
|
|
imgContainer.style.display = 'inline-block'
|
|
imgContainer.style.height = 'auto'
|
|
imgContainer.style.position = 'reltive'
|
|
imgContainer.className = 'bg-white rounded shadow-xl'
|
|
let closeD = document.createElement('div') as HTMLElement
|
|
closeD.innerHTML = `x`
|
|
closeD.className = `x-m-l font-sans bg-white rounded shadow-xl`
|
|
closeD.style.position = `fixed`
|
|
closeD.style.display = `flex`
|
|
closeD.style.justifyContent = `center`
|
|
closeD.style.alignItems = `center`
|
|
closeD.style.right = `30px`
|
|
closeD.style.top = `30px`
|
|
closeD.style.cursor = `pointer`
|
|
closeD.style.padding = `5px`
|
|
closeD.style.width = `50px`
|
|
closeD.style.height = `50px`
|
|
closeD.style.textAlign = `center`
|
|
closeD.style.fontSize = `2rem`
|
|
popUpConteiner.appendChild(closeD)
|
|
popUpConteiner.appendChild(imgContainer)
|
|
|
|
popUpConteiner.onclick = function (e) {
|
|
let contain = e.target as HTMLElement
|
|
if (
|
|
contain.tagName === 'DIV' &&
|
|
contain.className.indexOf('x-m-l') == -1
|
|
) {
|
|
contain.remove()
|
|
}
|
|
if (
|
|
contain.tagName === 'DIV' &&
|
|
contain.className.indexOf('x-m-l') != -1
|
|
) {
|
|
let f = contain.parentNode as HTMLElement
|
|
f.remove()
|
|
}
|
|
}
|
|
// console.log(popUpConteiner)
|
|
document.body.appendChild(popUpConteiner)
|
|
}
|
|
}
|