| 1 |
import React from 'react'; |
| 2 |
import { createRoot } from 'react-dom/client'; |
| 3 |
import Gallery from './react/gallery'; |
| 4 |
|
| 5 |
class Modal { |
| 6 |
|
| 7 |
constructor() { |
| 8 |
this.triggers = document.querySelectorAll('[data-modal]'); |
| 9 |
this.close = document.querySelectorAll('.js-close-modal'); |
| 10 |
this.modals = document.querySelectorAll('.modal'); |
| 11 |
this.modalInners = document.querySelectorAll('.modal-inner'); |
| 12 |
this.select = document.querySelectorAll('.modal .button-primary'); |
| 13 |
this.clearButtons = document.querySelectorAll('.ag-media-clear'); |
| 14 |
this.selected = false; |
| 15 |
|
| 16 |
this.listeners(); |
| 17 |
} |
| 18 |
|
| 19 |
listeners() { |
| 20 |
window.addEventListener('keydown', this.keyDown); |
| 21 |
|
| 22 |
this.triggers.forEach(el => { |
| 23 |
el.addEventListener('click', this.openModal, false); |
| 24 |
}); |
| 25 |
|
| 26 |
this.modals.forEach(el => { |
| 27 |
el.addEventListener('transitionend', this.revealModal, false); |
| 28 |
el.addEventListener('click', this.backdropClose, false); |
| 29 |
}); |
| 30 |
|
| 31 |
this.close.forEach(el => { |
| 32 |
el.addEventListener('click', Modal.hideModal, false); |
| 33 |
}); |
| 34 |
|
| 35 |
this.modalInners.forEach(el => { |
| 36 |
el.addEventListener('transitionend', this.closeModal, false); |
| 37 |
}); |
| 38 |
|
| 39 |
this.select.forEach(el => { |
| 40 |
el.addEventListener('click', this.choose, false); |
| 41 |
}); |
| 42 |
|
| 43 |
this.clearButtons.forEach(el => { |
| 44 |
el.addEventListener('click', this.clear, false); |
| 45 |
}); |
| 46 |
} |
| 47 |
|
| 48 |
clear = (e) => { |
| 49 |
const root = e.currentTarget.parentNode; |
| 50 |
root.querySelector('input').value = ''; |
| 51 |
root.querySelector('.ag-preview').innerHTML = ''; |
| 52 |
} |
| 53 |
|
| 54 |
keyDown = (e) => { |
| 55 |
if (27 === e.keyCode && document.body.classList.contains('modal-body')) { |
| 56 |
Modal.hideModal(); |
| 57 |
} |
| 58 |
} |
| 59 |
|
| 60 |
backdropClose = (el) => { |
| 61 |
if (!el.target.classList.contains('modal-visible')) { |
| 62 |
return; |
| 63 |
} |
| 64 |
|
| 65 |
let backdrop = el.currentTarget.dataset.backdrop !== undefined ? el.currentTarget.dataset.backdrop : true; |
| 66 |
|
| 67 |
if (backdrop === true) { |
| 68 |
Modal.hideModal(); |
| 69 |
} |
| 70 |
} |
| 71 |
|
| 72 |
choose = () => { |
| 73 |
const root = this.selected.parentNode; |
| 74 |
const preview = root.querySelector('.ag-preview'); |
| 75 |
const checked = document.querySelector('#ag-media-gallery input:checked'); |
| 76 |
|
| 77 |
|
| 78 |
preview.innerHTML = ''; |
| 79 |
|
| 80 |
if (!checked) { |
| 81 |
root.querySelector('input').value = ''; |
| 82 |
} else { |
| 83 |
root.querySelector('input').value = checked.value; |
| 84 |
const img = document.createElement(checked.dataset.type.match(/video/) ? 'video' : 'img'); |
| 85 |
|
| 86 |
img.src = checked.dataset.full; |
| 87 |
|
| 88 |
preview.appendChild(img); |
| 89 |
|
| 90 |
} |
| 91 |
|
| 92 |
Modal.hideModal(); |
| 93 |
} |
| 94 |
|
| 95 |
static hideModal = () => { |
| 96 |
let modalOpen = document.querySelector('.modal.modal-visible'); |
| 97 |
|
| 98 |
modalOpen.querySelector('.modal-inner').classList.remove('modal-reveal'); |
| 99 |
document.querySelector('.modal-body').addEventListener('transitionend', Modal.modalBody, false); |
| 100 |
document.body.classList.add('modal-fadeOut'); |
| 101 |
} |
| 102 |
|
| 103 |
closeModal = (el) => { |
| 104 |
if ('opacity' === el.propertyName && !el.target.classList.contains('modal-reveal')) { |
| 105 |
document.querySelector('.modal.modal-visible').classList.remove('modal-visible'); |
| 106 |
} |
| 107 |
} |
| 108 |
|
| 109 |
openModal = (el) => { |
| 110 |
if (!el.currentTarget.dataset.modal) { |
| 111 |
console.error('No data-modal attribute defined!'); |
| 112 |
return; |
| 113 |
} |
| 114 |
|
| 115 |
window.agPreSelected = el.currentTarget.parentNode.querySelector('input').value; |
| 116 |
this.selected = el.currentTarget; |
| 117 |
|
| 118 |
console.log(this.selected); |
| 119 |
|
| 120 |
const modalID = el.currentTarget.dataset.modal; |
| 121 |
const modal = document.getElementById(modalID); |
| 122 |
|
| 123 |
document.body.classList.add('modal-body'); |
| 124 |
modal.classList.add('modal-visible'); |
| 125 |
|
| 126 |
if (!modal.classList.contains('modal-init')) { |
| 127 |
modal.classList.add('modal-init') |
| 128 |
const wrapper = document.getElementById('ag-media-gallery'); |
| 129 |
const root = createRoot(wrapper); |
| 130 |
root.render(<Gallery />); |
| 131 |
} |
| 132 |
|
| 133 |
const event = new Event('ag_gallery_update'); |
| 134 |
window.dispatchEvent(event); |
| 135 |
} |
| 136 |
|
| 137 |
revealModal = (el) => { |
| 138 |
if ('opacity' === el.propertyName && el.target.classList.contains('modal-visible')) { |
| 139 |
el.target.querySelector('.modal-inner').classList.add('modal-reveal'); |
| 140 |
} |
| 141 |
} |
| 142 |
|
| 143 |
static modalBody = (el) => { |
| 144 |
if ('opacity' === el.propertyName && el.target.classList.contains('modal') && !el.target.classList.contains('modal-visible')) { |
| 145 |
document.body.classList.remove('modal-body', 'modal-fadeOut'); |
| 146 |
} |
| 147 |
} |
| 148 |
|
| 149 |
} |
| 150 |
|
| 151 |
export default Modal; |
| 152 |
|
