98 lines
3.6 KiB
JavaScript
98 lines
3.6 KiB
JavaScript
class Modal {
|
|
constructor(vehicle) {
|
|
this.vehicle = vehicle;
|
|
|
|
this.modalDiv;
|
|
this.initModal();
|
|
}
|
|
toggleModal(html) {
|
|
if (this.modalDiv) {
|
|
const modalBody = this.modalDiv.querySelector('#ac-modal-body');
|
|
modalBody.innerHTML = '';
|
|
if (html) {
|
|
modalBody.appendChild(html.initForm());
|
|
}
|
|
}
|
|
const body = document.querySelector('body');
|
|
const modal = document.querySelector('.modal');
|
|
modal.classList.toggle('opacity-0');
|
|
modal.classList.toggle('pointer-events-none');
|
|
body.classList.toggle('modal-active');
|
|
}
|
|
initModal() {
|
|
// Create a new div element
|
|
const modalDiv = document.createElement('div');
|
|
modalDiv.classList.add(
|
|
'modal',
|
|
'z-50',
|
|
'opacity-0',
|
|
'pointer-events-none',
|
|
'fixed',
|
|
'w-full',
|
|
'h-full',
|
|
'top-0',
|
|
'left-0',
|
|
'flex',
|
|
'items-center',
|
|
'justify-center'
|
|
);
|
|
modalDiv.innerHTML = `
|
|
<div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
|
|
<div class="modal-container bg-white w-11/12 md:w-3/4 h-3/4 lg:h-11/12 mx-auto rounded shadow-lg z-50 overflow-y-scroll relative no-scrollbar">
|
|
<div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
|
|
<svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
|
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
|
|
</svg>
|
|
<span class="text-sm">(Esc)</span>
|
|
</div>
|
|
|
|
<div class="modal-content py-4 text-left px-6">
|
|
<!--Title-->
|
|
<div class="flex justify-between items-center pb-3">
|
|
<p class="text-2xl font-bold">Private Vehicle Appointment Booking</p>
|
|
<div class="modal-close cursor-pointer z-50">
|
|
<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
|
|
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- BODY -->
|
|
<div id="ac-modal-body"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const overlay = modalDiv.querySelector('.modal-overlay');
|
|
|
|
overlay.addEventListener('click', function () {
|
|
const activeModal = modalDiv.querySelector('.modal');
|
|
activeModal &&
|
|
activeModal.classList.contains('opacity-0') &&
|
|
this.toggleModal();
|
|
});
|
|
|
|
var closemodal = modalDiv.querySelectorAll('.modal-close');
|
|
for (var i = 0; i < closemodal.length; i++) {
|
|
closemodal[i].addEventListener('click', this.toggleModal);
|
|
}
|
|
|
|
document.onkeydown = (evt) => {
|
|
evt = evt || window.event;
|
|
var isEscape = false;
|
|
if ('key' in evt) {
|
|
isEscape = evt.key === 'Escape' || evt.key === 'Esc';
|
|
} else {
|
|
isEscape = evt.keyCode === 27;
|
|
}
|
|
if (isEscape && document.body.classList.contains('modal-active')) {
|
|
this.toggleModal();
|
|
}
|
|
};
|
|
this.modalDiv = modalDiv;
|
|
return modalDiv;
|
|
}
|
|
}
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
console.log('modal is here');
|
|
});
|
|
|