Dynamically load Modal via Webpack

mitodl · Nov 18, 2024 · 251f481 · 251f481
1 parent 91151b5
commit 251f481
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 87 deletions.
diff --git a/base-theme/assets/images/ocw_story_single_arrow_left.svg b/base-theme/assets/images/ocw_story_single_arrow_left.svg
diff --git a/base-theme/assets/images/quote_close.svg b/base-theme/assets/images/quote_close.svg
diff --git a/base-theme/assets/index.ts b/base-theme/assets/index.ts
@@ -18,6 +18,7 @@ export interface OCWWindow extends Window {
   Sentry: typeof Sentry
   PDFObject: typeof PDFObject
   initVideoJS: () => void
+  initModalHandler: () => void
 }
 
 declare let window: OCWWindow
@@ -38,6 +39,15 @@ window.initVideoJS = () => {
   videoJSLoaded = true
 }
 
+let modalHandlerLoaded = false
+
+window.initModalHandler = () => {
+  if (modalHandlerLoaded) return
+  import("./quotes_card_modal_handler").then(module => {
+    module.initModalHandler()
+  })
+  modalHandlerLoaded = true
+}
 $(function() {
   window.Sentry = initSentry()
   initExternalLinkModal()

diff --git a/base-theme/assets/quotes_card_modal_handler.js b/base-theme/assets/quotes_card_modal_handler.js
@@ -0,0 +1,27 @@
+export const updateContent = (
+  /** @type {{ getAttribute: (arg0: string) => any; }} */ element
+) => {
+  console.log("inside")
+  const modalContentId = element.getAttribute("data-modal-content-id")
+  const contentDiv = document.getElementById(modalContentId)
+
+  if (contentDiv) {
+    const content = contentDiv.innerHTML
+    const modalElement = document.getElementById("exampleModalCenter")
+    // @ts-ignore
+    modalElement.querySelector(".modal-body").innerHTML = content
+  } else {
+    console.error("Modal content not found for ID:", modalContentId)
+  }
+}
+
+export const initModalHandler = () => {
+  console.log("Modal handler initialized.")
+  const modalTriggers = document.querySelectorAll(".js-modal-trigger")
+  modalTriggers.forEach(trigger => {
+    trigger.addEventListener("click", event => {
+      event.preventDefault()
+      updateContent(trigger)
+    })
+  })
+}
diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss
@@ -101,7 +101,6 @@
 }
 .item-wrapper.testimonial-link {
   padding: 0 10px;
-  // max-width: 411px;
   border-radius: 10px;
   border: 1px solid var(--Border-Grey, #dfe5ec);
   background: #fff;
@@ -136,7 +135,6 @@
 }
 .quotation-btn {
   position: relative;
-  // padding: 20px 50px;
 }
 
 .quotation-btn::before {
@@ -146,24 +144,20 @@
   top: -0.64rem;
   color: white;
   color: var(--white, var(--white-mit-brand, #fff));
-  font-family: Arial;
   font-size: 50px;
   font-style: normal;
   font-weight: 700;
   line-height: 30px;
 }
 .testimonial-title.quote {
   position: relative;
-  // padding: 20px 50px;
 }
 
 .testimonial-title.quote::before {
   content: "“";
   position: absolute;
-  // right: 1px;
   left: 1.1rem;
   top: -3rem;
-  font-family: Arial;
   color: var(--Red-Brand, var(--Red, #a31f34)) !important;
   font-size: 100px;
   font-style: normal;
@@ -173,7 +167,6 @@
 .testimonial-image-wrapper {
   position: relative;
   width: 100%;
-  // max-width:391px;
   padding-top: 56.25%; // 16:9 aspect ratio
 
   .testimonial-image {
@@ -182,7 +175,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    // max-height:197px;
     object-fit: cover;
     border-radius: 5px;
   }
@@ -195,7 +187,6 @@
   text-overflow: ellipsis;
 }
 .quote-body div.content {
-  // background-color: purple;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 6;
@@ -204,9 +195,8 @@
   border-left: 1px solid var(--DarkBorder, #9c9d9e);
   padding-left: 20px;
   align-self: stretch;
-  color: #000;
+  color: hsl(0, 0%, 0%);
   text-overflow: ellipsis;
-  font-family: Arial;
   font-size: 16px;
   font-style: italic;
   font-weight: 400;
@@ -230,37 +220,75 @@ div.content {
     filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%)
       hue-rotate(142deg) brightness(96%) contrast(103%);
   }
+}
+body.modal-open {
+  overflow: auto;
+  overflow-y: auto;
+}
 
-  // .view-all-stories-arrow {
-  //   fill: #fff;
-  //   background:white !important;
-  // }
+.modal-open,
+body {
+  overflow: inherit !important;
 }
-.carousel-inner::after {
-  display: block;
-  clear: both;
-  content: "";
+
+.modal-close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: black;
+  cursor: pointer;
+  z-index: 999;
+  padding: 15px !important;
+  background: #a31f34 !important;
+  opacity: 1 !important;
+  border-bottom-left-radius: 8px;
+  border-top-right-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s ease;
 }
-.modal-dialog-centered::before {
-  display: block !important;
-  height: calc(100vh - 3.5rem) !important;
-  height: -webkit-min-content !important;
-  height: -moz-min-content !important;
-  height: min-content !important;
+
+.modal-close-btn:hover {
+  background: black !important;
 }
-.modal {
-  display: block !important;
-  opacity: 0;
-  visibility: hidden;
-  position: fixed !important;
-  z-index: 1050 !important;
+
+.modal-content {
+  position: relative;
 }
 
-.modal.show {
+.carousel-control-prev,
+.carousel-control-next {
+  width: auto;
+  background: none;
   opacity: 1;
-  visibility: visible;
-  position: fixed;
+}
+
+.carousel-control-prev .material-icons,
+.carousel-control-next .material-icons {
+  font-size: 3.75rem;
+  color: inherit;
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: none;
+}
+
+.carousel-control-prev {
+  left: auto;
+}
+
+.carousel-control-next {
+  right: auto;
+}
+
+.carousel-control-prev,
+.carousel-control-next {
   top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateY(-50%);
 }
diff --git a/www/assets/css/home.scss b/www/assets/css/home.scss
@@ -786,7 +786,7 @@ $promo-carousel-height: 200px;
 }
 a.share-story-btn {
   color: var(--Primary, #03152d);
-  font-family: Arial;
+  // font-family: Arial;
   font-size: 18px;
   font-style: normal;
   font-weight: 400;

diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html
@@ -6,42 +6,33 @@
     "lg"    (dict "size" 3 "class" "d-none d-lg-flex d-xl-none")
     "xl"    (dict "size" 3 "class" "d-none d-xl-flex")
 -}}
-<div class="test-div">
-  <div class="test-div2">content goes here!</div>
-</div>
-
-<div class="test-div3">empty placeholder content</div>
-
 
-  <div class="home-testimonials mx-auto my-3">
+<div class="home-testimonials mx-auto my-3">
 
     {{ range $breakpoint, $carouselInfo := $breakdowns }}
       {{ $itemsInCarousel := index $carouselInfo "size" }}
       {{ $breakpointVisibilityClass := index $carouselInfo "class" }}
       {{ $carouselId := printf "testimonial-carousel-%v" $breakpoint }}
       <div class="{{ $breakpointVisibilityClass }}">
-        <div class="d-flex flex-direction-row align-items-center justify-content-between w-100">
+        <div class="d-flex flex-direction-row align-items-center justify-content-between w-100 mx-auto carousel slide" data-interval="false" data-touch="true" data-ride="carousel" style="max-width: 1447px;">
           <a href="#{{ $carouselId }}" role="button" data-slide="prev" class="bg-white prev">
             <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_left</span>
             <span class="sr-only">Previous</span>
           </a>
-          <div id="{{ $carouselId }}" class="carousel slide" data-interval="false" data-touch="true" data-ride="carousel">
-            <h2>OCW Stories</h2>
-            <!-- <div class="carousel-header d-flex flex-row justify-content-between font-weight-bold">
-              {{ if gt (len $stories) 3 }}
-                {{ partial "carousel_controls.html" $carouselId }}
-              {{ end }}
-            </div> -->
-
-            <div class="carousel-inner standard-width container">
+          <div id="{{ $carouselId }}" class="carousel slide standard-width mx-auto" data-interval="false" data-touch="true" data-ride="carousel">
+            <div class="d-flex flex-column">
+            <h2 class="mx-auto">OpenCourseWare Stories</h2>
+            <p class="mx-auto" style="text-align: center">MIT students' stories reflect a relentless pursuit of knowledge and innovation. From coding breakthroughs to launching startups, their journey showcases the Institute's commitment to pushing boundaries and changing the world.</p>
+            </div>
+            <div class="carousel-inner standard-width">
               {{ range $index, $testimonial := $stories }}
                 {{ with $testimonial }}
                   {{ $modulo := mod $index $itemsInCarousel }}
                   {{ $group := div $index $itemsInCarousel }}
                   {{ if eq $modulo 0 }}
-                  <div class="carousel-item row {{ if eq $group 0 }}active{{ end }} flex-nowrap justify-content-center">
+                  <div class="carousel-item row {{ if eq $group 0 }}active{{ end }} flex-nowrap justify-content-between">
                   {{ end }}
-                  <a data-modal-content-id="modal-content-{{ $index }}" class="item-wrapper d-block testimonial-link" style="flex: 1 1; padding:10px; margin-left: 10px;" {{if $testimonial.Params.is_quote}} onclick="updateContent(this); return false;" href="#" data-testimonial="{{ $testimonial }}" data-toggle="modal" data-target="#exampleModalCenter"{{else}}href="{{ $testimonial.RelPermalink }}"{{end}}>
+                  <a data-modal-content-id="modal-content-{{ $index }}" class="item-wrapper d-block testimonial-link {{if $testimonial.Params.is_quote}}js-modal-trigger{{end}}" style="flex: 1 1; padding:10px; margin-left: 10px;" {{if $testimonial.Params.is_quote}} onclick="updateContent(this); return false;" href="#" data-testimonial="{{ $testimonial }}" data-toggle="modal" data-target="#exampleModalCenter"{{else}}href="{{ $testimonial.RelPermalink }}"{{end}}>
                     {{ partial "stories_card.html" (dict "testimonial" $testimonial) }}
                   </a>
                   {{ if $testimonial.Params.is_quote }}
@@ -56,7 +47,7 @@ <h2>OCW Stories</h2>
               {{ end }}
             </div>
           </div>
-          <a href="#{{ $carouselId }}" role="button" data-slide="next" class="bg-white next" >
+          <a href="#{{ $carouselId }}" role="button" data-slide="next" class="bg-white next" tabindex="0">
             <span class="material-icons" aria-hidden="true" style="font-size: 3.75rem">keyboard_arrow_right</span>
             <span class="sr-only">Next</span>
           </a>
@@ -79,23 +70,27 @@ <h2>OCW Stories</h2>
   </div>
 </div>
 
-<!-- Modal -->
 <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered" style="max-width: 600px" role="document">
+  <div class="modal-dialog modal-dialog-centered" style="max-width: 600px; margin: 1rem auto;" role="document">
     <div class="modal-content">
-      <!-- <div class="modal-header"> -->
-        <!-- <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> -->
-      <!-- </div> -->
-      <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-        <span aria-hidden="true">&times;</span>
-      </button> -->
+      <button type="button" class="close modal-close-btn" data-dismiss="modal" aria-label="Close">
+        <!-- <span aria-hidden="true">&times;</span> -->
+        <img
+        class="p-0 m-0"
+        src="{{ partial "get_asset_webpack_url.html" "images/quote_close.svg" }}"
+        alt=""
+        style="margin-left:10px; color: white;"
+      />
+      </button>
       <div class="modal-body" style="padding: 10px;">
       </div>
-      <!-- <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary">Save changes</button>
-      </div> -->
     </div>
   </div>
 </div>
-<!-- {{ partialCached "quotes_card_modal_handler.html" . }} -->
+<script>
+  window.addEventListener("load", function () {
+    if (window.initModalHandler) {
+      window.initModalHandler();
+    }
+  });
+</script>
diff --git a/www/layouts/partials/stories_card.html b/www/layouts/partials/stories_card.html
@@ -1,10 +1,6 @@
 {{$testimonial := .testimonial}}
 {{$jsurls := .jsurls}}
 {{$context := .context | default "carousel"}}
-<!-- <div>{{$testimonial.Title}}</div> -->
-<!-- <div>{{$jsurls}}</div> -->
-<!-- <div>{{$context}}</div> -->
-<!-- <div>otherwise</div> -->
 <div class="h-100">
     <div class="testimonial d-flex flex-column rounded h-100">
       <div class="testimonial-image-wrapper" style="margin-bottom: 20px">
@@ -17,7 +13,6 @@
       <div class="testimonial-title {{if $testimonial.Params.is_quote}}quote{{ end }}" style="padding: 0px 20px; margin-bottom: 20px">
         <div class="name font-weight-bold" style="font-size: 20px; margin-bottom: 10px;">
           {{ $testimonial.Title }}
-          <!-- <div>{{$context}}</div> -->
         </div>
         <div class="occupation-wrapper d-flex justify-content-between">
           <div class="occupation">
@@ -28,7 +23,7 @@
           </div>
         </div>
       </div>
-      <div class="{{ if not $testimonial.Params.is_quote}}story-body{{ else }}quote-body{{ end }} d-flex flex-column justify-content-between h-100" style="padding: 0px 20px 20px 20px">
+      <div class="{{ if not $testimonial.Params.is_quote}}story-body{{ else }}quote-body{{ end }}{{if eq $context "carousel"}} carousel{{else}}modal{{end}} d-flex flex-column justify-content-between h-100" style="padding: 0px 20px 20px 20px">
         <div class="content {{ if eq $context "carousel" }}testimonial-carousel{{ else }}testimonial-modal{{ end }}">
           {{ $testimonial.Content | plainify | replaceRE "\\s+" " " }}
         </div>