OCW Stories & Quotes New Design Implementation

base-theme/assets/index.ts

@@ -9,6 +9,7 @@ import PDFObject from "pdfobject"
 import "./js/polyfill"
 import "video.js/dist/video-js.css"
 import { initExternalLinkModal } from "./js/external_link_modal"
+import { initQuotesModalHandler } from "./quotes_card_modal_handler"
 import { initVideoDownloadPopup } from "./js/video_download_popup"
 
 export interface OCWWindow extends Window {
@@ -18,6 +19,7 @@ export interface OCWWindow extends Window {
   Sentry: typeof Sentry
   PDFObject: typeof PDFObject
   initVideoJS: () => void
+  initModalHandler: () => void
 }
 
 declare let window: OCWWindow
@@ -41,4 +43,5 @@ window.initVideoJS = () => {
 $(function() {
   window.Sentry = initSentry()
   initExternalLinkModal()
+  initQuotesModalHandler()
 })

base-theme/assets/quotes_card_modal_handler.ts

@@ -0,0 +1,38 @@
+export function initQuotesModalHandler() {
+  $(document).ready(() => {
+    const modalElement = $(".js-quotes-modal")
+
+    // let carouselId: string | undefined
+
+    $(".js-modal-trigger").on("click", event => {
+      event.preventDefault()
+
+      const target = $(event.currentTarget)
+      const modalContentId = target.data("modal-content-id")
+      const contentDiv = $(`#${modalContentId}`)
+
+      // const carouselElement = target.closest(".carousel")
+      // carouselId = carouselElement.attr("id")
+
+      if (contentDiv.length) {
+        const content = contentDiv.html()
+        modalElement.find(".modal-body").html(content)
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        modalElement.modal("show")
+      } else {
+        console.error("Modal content not found for ID:", modalContentId)
+      }
+    })
+
+    // modalElement.on("shown.bs.modal", () => {
+    //   modalElement.focus()
+    // })
+
+    // modalElement.on("hidden.bs.modal", () => {
+    //   if (carouselId) {
+    //     $(`#${carouselId}`).focus()
+    //   }
+    // })
+  })
+}