theme and plugin sync

2024-03-20 17:38:18 -04:00
commit 03e44e02f0
224 changed files with 56542 additions and 0 deletions
--- a/autocart_assets/js/Modal.js
+++ b/autocart_assets/js/Modal.js
@@ -0,0 +1,98 @@
+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');
+  });
+