Enable captcha and refactor popup

astro
Kamran Ahmed 2 years ago
parent 577613132b
commit d7b201c7f7
  1. 1
      package.json
  2. 2
      src/components/Captcha/captcha.js
  3. 2
      src/components/DownloadPopup.astro
  4. 8
      src/components/Popup/Popup.astro
  5. 52
      src/components/Popup/popup.js
  6. 4
      src/components/RoadmapHeader.astro
  7. 2
      src/components/SubscribePopup.astro
  8. 2
      src/pages/signup.astro

@ -5,6 +5,7 @@
"private": true,
"scripts": {
"dev": "astro dev",
"dev:verbose": "astro dev --verbose",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",

@ -25,7 +25,7 @@ class Captcha {
target.querySelector('.recaptcha-response').value = captchaResponse;
}
target.closest('.modal').classList.add('hidden');
target.closest('.popup').classList.add('hidden');
return true;
}

@ -25,7 +25,7 @@ import Captcha from './Captcha/Captcha.astro';
placeholder='Enter your Email'
/>
<!-- <Captcha /> -->
<Captcha />
<input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
<input type='hidden' name='subform' value='yes' />

@ -15,17 +15,17 @@ const { id, title, subtitle } = Astro.props;
<div
id={id}
tabindex='-1'
class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 h-full flex items-center justify-center modal'
class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 h-full items-center justify-center popup'
>
<div class='relative p-4 w-full max-w-md h-full md:h-auto'>
<div class='relative bg-white rounded-lg shadow modal-body'>
<div class='relative bg-white rounded-lg shadow popup-body'>
<button
type='button'
class='absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center'
onclick='this.closest(".modal").classList.add("hidden")'
onclick='this.closest(".popup").classList.add("hidden")'
>
<Icon icon='close' />
<span class='sr-only'>Close modal</span>
<span class='sr-only'>Close popup</span>
</button>
<div class='p-5'>
<h3 class='text-2xl mb-0.5 font-medium'>

@ -1,41 +1,44 @@
export class Modal {
export class Popup {
constructor() {
this.triggerModal = this.triggerModal.bind(this);
this.triggerPopup = this.triggerPopup.bind(this);
this.onDOMLoaded = this.onDOMLoaded.bind(this);
this.handleCloseModal = this.handleCloseModal.bind(this);
this.handleClosePopup = this.handleClosePopup.bind(this);
this.handleKeydown = this.handleKeydown.bind(this);
}
/**
* Triggers the modal on target elements
* Triggers the popup on target elements
* @param {Event} e
*/
triggerModal(e) {
const modalToShow = e?.target?.closest('[data-modal]')?.dataset?.modal || 'unknown-modal';
const modalEl = document.querySelector(`#${modalToShow}`);
triggerPopup(e) {
const popupToShow =
e?.target?.closest('[data-popup]')?.dataset?.popup || 'unknown-popup';
const popupEl = document.querySelector(`#${popupToShow}`);
if (!modalEl) {
if (!popupEl) {
return;
}
modalEl.classList.remove('hidden');
const focusEl = modalEl.querySelector('[autofocus]');
popupEl.classList.remove('hidden');
popupEl.classList.add('flex');
const focusEl = popupEl.querySelector('[autofocus]');
if (focusEl) {
focusEl.focus();
}
}
handleCloseModal(e) {
handleClosePopup(e) {
const target = e.target;
const modalBody = target.closest('.modal-body');
const closestModal = target.closest('.modal');
const popupBody = target.closest('.popup-body');
const closestPopup = target.closest('.popup');
if (modalBody) {
if (popupBody) {
return;
}
if (closestModal) {
closestModal.classList.add('hidden');
if (closestPopup) {
closestPopup.classList.add('hidden');
closestPopup.classList.remove('flex');
}
}
@ -44,22 +47,23 @@ export class Modal {
return;
}
const modal = document.querySelector('.modal:not(.hidden)');
if (modal) {
modal.classList.add('hidden');
const popup = document.querySelector('.popup:not(.hidden)');
if (popup) {
popup.classList.add('hidden');
popup.classList.remove('flex');
}
}
onDOMLoaded() {
document.addEventListener('click', this.triggerModal);
document.addEventListener('click', this.handleCloseModal);
document.addEventListener('click', this.triggerPopup);
document.addEventListener('click', this.handleClosePopup);
document.addEventListener('keydown', this.handleKeydown);
}
init() {
window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
}
}
}
const modalRef = new Modal();
modalRef.init();
const popupRef = new Popup();
popupRef.init();

@ -48,7 +48,7 @@ const isRoadmapReady = !isUpcoming;
{isRoadmapReady && (
<button
data-modal="download-popup"
data-popup="download-popup"
class="inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500"
aria-label="Download Roadmap"
>
@ -58,7 +58,7 @@ const isRoadmapReady = !isUpcoming;
)}
<button
data-modal="subscribe-popup"
data-popup="subscribe-popup"
class="inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500"
aria-label="Subscribe for Updates"
>

@ -24,7 +24,7 @@ import Captcha from './Captcha/Captcha.astro';
placeholder='Enter your Email'
/>
<!-- <Captcha /> -->
<Captcha />
<input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
<input type='hidden' name='subform' value='yes' />

@ -36,7 +36,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
placeholder='Enter your email'
/>
<!-- <Captcha /> -->
<Captcha />
<input type='hidden' name='list' value='tTqz1w7nexY3cWDpLnI88Q' />
<input type='hidden' name='subform' value='yes' />

Loading…
Cancel
Save