Merged latest changes from insitutional-homepage branch

src/data/data.yml

@@ -433,11 +433,26 @@ midd_nav:
     text: Offices and Services
 
 institutional_nav:
-  - text: A Sense of Purpose
+  - text: Our Schools
     href: "#"
-  - text: The Experience of Place
+    items:
+      - href: http://www.middlebury.edu
+        text: Middlebury College
+      - href: http://www.middlebury.edu/ls
+        text: Language Schools
+      - href: http://www.middlebury.edu/blse
+        text: Bread Loaf School of English
+      - href: http://www.middlebury.edu/bread-loaf-conferences
+        text: Bread Loaf Writers' Conference
+      - href: https://www.middlebury.edu/institute/
+        text: Institute of International Studies at Monterey
+      - href: http://www.middlebury.edu/study-abroad
+        text: C.V. Starr Schools Abroad
+      - href: http://www.middlebury.edu/environment
+        text: School of the Environment
+  - text: About Middlebury
     href: "#"
-  - text: Our Approach to Learning
+  - text: Office and Services
     href: "#"
 
 system_status:
@@ -653,3 +668,64 @@ area_of_study:
   - category: W
     course_names:
       - name: Writing and Rhetoric Program
+
+journey_gallery_data:
+  - src: http://placekitten.com/1376/774
+    width: 1376
+    height: 774
+    srcset:
+      - 1376/774
+      - 1136/639
+      - 736/414
+      - 320/180
+    alt: ""
+    sizes: ""
+    caption: Lorem ipsum <a href="#">dolor</a> sit amet consectetur adipisicing elit.
+
+  - src: http://placekitten.com/1376/774
+    width: 1376
+    height: 774
+    srcset:
+      - 1376/774
+      - 1136/639
+      - 736/414
+      - 320/180
+    alt: ""
+    sizes: ""
+    caption: Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat aspernatur accusantium eveniet accusamus tempora sequi fugiat magnam? Porro illo cumque error praesentium dolore labore tenetur obcaecati rerum, inventore sequi totam!
+
+  - src: http://placekitten.com/1376/774
+    width: 1376
+    height: 774
+    srcset:
+      - 1376/774
+      - 1136/639
+      - 736/414
+      - 320/180
+    alt: ""
+    sizes: ""
+    caption: Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+  - src: http://placekitten.com/1376/774
+    width: 1376
+    height: 774
+    srcset:
+      - 1376/774
+      - 1136/639
+      - 736/414
+      - 320/180
+    alt: ""
+    sizes: ""
+    caption: Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+  - src: http://placekitten.com/1376/774
+    width: 1376
+    height: 774
+    srcset:
+      - 1376/774
+      - 1136/639
+      - 736/414
+      - 320/180
+    alt: ""
+    sizes: ""
+    caption: Repellat aspernatur accusantium eveniet accusamus tempora sequi fugiat magnam? Porro illo cumque error praesentium dolore labore tenetur obcaecati rerum, inventore sequi totam!

src/data/image_styles.yml

@@ -202,3 +202,23 @@ image_styles:
     ratio: "16:9"
     srcset:
       - 1136x639
+  journey_poster:
+    title: Background poster image
+    ratio: "16:9"
+    srcset:
+      - 1440x810
+      - 1200x675
+  journey_fluencies:
+    title: Four fluencies display image
+    ratio: "1:1"
+    srcset:
+      - 332x332
+      - 278x278
+      - 224x224
+  journey_image_text:
+    title: Image with Text component
+    ratio: "3:4"
+    srcset:
+      - 168x225
+      - 300x400
+    sizes: "(max-width: 512px) 168px, 300px"

src/js/journey-swiper.ts

@@ -1,5 +1,6 @@
 import { $, $$, checkElement } from './utils/dom';
 import VideoSwap from './video';
+import lozad from 'lozad';
 
 class JourneySwiper {
   swiperEl: any;
@@ -20,7 +21,7 @@ class JourneySwiper {
 
   constructor(el: HTMLElement) {
     this.elem = el;
-    this.swiperClass = '.mySwiper';
+    this.swiperClass = '.journey-swiper';
     this.paginationClass = '.swiper-pagination';
     this.paginationEl = $(this.paginationClass);
     this.swiperParentEl = $('.journey-modal__pagination');
@@ -36,9 +37,26 @@ class JourneySwiper {
     this.init();
   }
 
+  elementOnLoad(cn: string, cb: (...args: any[]) => void) {
+    checkElement(cn).then((selector) => {
+      cb(selector);
+    });
+  }
+
   init() {
     this.addListeners();
     this.elementOnLoad('.journey-modal--block.is-open', this.swiperInit);
+
+    // init lazy loaded gallery images
+
+    const lazyGalleryImages = lozad('[data-journey-gallery-item] img');
+    lazyGalleryImages.observe();
+
+    this.elementOnLoad('.journey-modal--block.is-open', () => {
+      this.swiperInit();
+      this.swiperParentEl.style.transform = `translateX(${this.translate}px)`;
+    });
+    this.addListeners();
   }
 
   async getSwiper() {
@@ -117,22 +135,18 @@ class JourneySwiper {
     });
   }
 
-  elementOnLoad(cn: string, cb: (...args: any[]) => void) {
-    checkElement(cn).then(() => {
-      cb();
-    });
-  }
-
   addListeners() {
-    checkElement('.journey-modal__cb-link').then((selector) => {
+    this.elementOnLoad('.journey-modal__cb-link', (selector) => {
       this.paginationDotEls = $$(selector);
       this.paginationDotEls.forEach((el) => {
-        el.addEventListener('mouseenter', (e) => {
-          this.handleMouseEvent(e);
-        });
-        el.addEventListener('mouseleave', (e) => {
-          this.handleMouseEvent(e);
-        });
+        if (window.matchMedia('(min-width: 1024px)').matches) {
+          el.addEventListener('mouseenter', (e) => {
+            this.handleMouseEvent(e);
+          });
+          el.addEventListener('mouseleave', (e) => {
+            this.handleMouseEvent(e);
+          });
+        }
       });
     });
 
@@ -157,9 +171,10 @@ class JourneySwiper {
       MicroModal?.close();
     }
 
-    if (this.swiperEl && hash !== this.swiperEl.activeIndex) {
-      this.swiperEl.slideTo(hash, 350, false);
+    if (hash !== this.swiperEl.activeIndex) {
+      this.swiperEl.slideTo(hash, 300, false);
     }
+    // this.swiperUpdate();
   }
 
   resetNavigation() {
@@ -182,9 +197,16 @@ class JourneySwiper {
 
   swiperUpdate() {
     this.currentEl = $('.swiper-pagination-bullet-active', this.paginationEl);
+    let scrollWidth = this.swiperParentEl.scrollWidth;
+
+    // Check if the scrolling distance exceeds the element width,
+    // if it does set it to the element width so that it doesn't
+    // scroll past the width
+    if (scrollWidth > this.swiperParentEl.offsetWidth) {
+      scrollWidth = this.swiperParentEl.offsetWidth;
+    }
 
-    this.hiddenWidth =
-      this.swiperParentEl.scrollWidth - this.swiperParentWrapperEl.clientWidth;
+    this.hiddenWidth = scrollWidth - this.swiperParentWrapperEl.offsetWidth;
 
     const currentElLeft = this.currentEl?.getBoundingClientRect().left;
 
@@ -207,8 +229,4 @@ class JourneySwiper {
   }
 }
 
-const swiper = $$('.mySwiper');
-
-swiper.forEach((elem) => new JourneySwiper(elem));
-
 export default JourneySwiper;