diff --git a/src/components/DownloadPopup.astro b/src/components/DownloadPopup.astro new file mode 100644 index 000000000..2192988c3 --- /dev/null +++ b/src/components/DownloadPopup.astro @@ -0,0 +1,47 @@ +--- +import Popup from "./Popup/Popup.astro"; +--- + + +
+ + + +
+ + + + + + + +
+ diff --git a/src/components/InteractiveRoadmap/InteractiveRoadmap.astro b/src/components/InteractiveRoadmap/InteractiveRoadmap.astro index e978ddd4d..50d736b76 100644 --- a/src/components/InteractiveRoadmap/InteractiveRoadmap.astro +++ b/src/components/InteractiveRoadmap/InteractiveRoadmap.astro @@ -1,6 +1,8 @@ --- +import DownloadPopup from "../DownloadPopup.astro"; import Loader from "../Loader.astro"; import ShareIcons from "../ShareIcons.astro"; +import SubscribePopup from "../SubscribePopup.astro"; import TopicOverlay from "../TopicOverlay.astro"; import "./InteractiveRoadmap.css"; @@ -34,6 +36,8 @@ const { roadmapId, jsonUrl, dimensions, description, roadmapPermalink } = description={description} pageUrl={`https://roadmap.sh/${roadmapId}`} /> + +
+ + + + diff --git a/src/components/Popup/popup.js b/src/components/Popup/popup.js new file mode 100644 index 000000000..cadc097db --- /dev/null +++ b/src/components/Popup/popup.js @@ -0,0 +1,65 @@ +export class Modal { + constructor() { + this.triggerModal = this.triggerModal.bind(this); + this.onDOMLoaded = this.onDOMLoaded.bind(this); + this.handleCloseModal = this.handleCloseModal.bind(this); + this.handleKeydown = this.handleKeydown.bind(this); + } + + /** + * Triggers the modal on target elements + * @param {Event} e + */ + triggerModal(e) { + const modalToShow = e?.target?.closest('[data-modal]')?.dataset?.modal || 'unknown-modal'; + const modalEl = document.querySelector(`#${modalToShow}`); + + if (!modalEl) { + return; + } + + modalEl.classList.remove('hidden'); + const focusEl = modalEl.querySelector('[autofocus]'); + if (focusEl) { + focusEl.focus(); + } + } + + handleCloseModal(e) { + const target = e.target; + const modalBody = target.closest('.modal-body'); + const closestModal = target.closest('.modal'); + + if (modalBody) { + return; + } + + if (closestModal) { + closestModal.classList.add('hidden'); + } + } + + handleKeydown(e) { + if (e.key !== 'Escape') { + return; + } + + const modal = document.querySelector('.modal:not(.hidden)'); + if (modal) { + modal.classList.add('hidden'); + } + } + + onDOMLoaded() { + document.addEventListener('click', this.triggerModal); + document.addEventListener('click', this.handleCloseModal); + document.addEventListener('keydown', this.handleKeydown); + } + + init() { + window.addEventListener('DOMContentLoaded', this.onDOMLoaded); + } + } + + const modalRef = new Modal(); + modalRef.init(); \ No newline at end of file diff --git a/src/components/SubscribePopup.astro b/src/components/SubscribePopup.astro new file mode 100644 index 000000000..0d61751cd --- /dev/null +++ b/src/components/SubscribePopup.astro @@ -0,0 +1,46 @@ +--- +import Popup from "./Popup/Popup.astro"; +--- + + +
+ + + +
+ + + + + + + +
+