https://www.uwo.ca/web_standards/2023-hp/assets/js/brand-2023.js

1$(document).ready(function() {
2  // Update the URL when an accordion item is clicked
3  $('.accordion-direct-link').click(function(e) {
4    // Prevent the default behavior of the link
5    e.preventDefault();
6    // Get the URL from the href attribute
7    var url = $(this).attr('href');
8    // Open the URL in a new tab or window
9    window.open(url, '_parent');
10  });
11  // Bind click event to the image
12  // Toggle Hidden Ribbon
13  $("#popular-links-image").click(function() {
14    $("#hidden-ribbon").collapse("toggle");
15  });
16  // Mobile Menu Button Click
17  $("#main-menu-toggler").on("click", function() {
18    var searchBtn = $('.default-search');
19    if ($(searchBtn).attr('aria-expanded') === "true") {
20      //alert($(searchBtn).attr('aria-expanded'));
21      $('#search-container').collapse('toggle');
22      //$(searchBtn).attr("aria-expanded", "false");
23      //$('#search-container').removeClass("show");
24    }
25  });
26  // OffCanvas Search Button Click
27  $(".mobile-search").on("click", function() {
28    // Hide Offcanvas
29    $('#offcanvas-1').offcanvas('hide');
30    // Close any mobile menu accordions
31    $.fn.closeMenuAccordion();
32    // overflow hidden on body
33    $(".offcanvas-slide").addClass("d-none");
34    $(".menu-accordion").removeClass("d-none");
35    $('.menu-accordion-button').removeClass('inactive');
36    var delay = 500;
37    setTimeout(function() {
38      $('body').css('overflow', 'hidden');
39    }, delay);
40  });
41  // OffCanvas Close Button Click
42  $('.offcanvas-close').on('click', function() {
43    // Close any mobile menu accordions
44    $(".offcanvas-slide").addClass("d-none");
45    $(".menu-accordion").removeClass("d-none");
46    $('.menu-accordion-button').removeClass('inactive');
47    var delay = 500;
48    setTimeout(function() {
49      $('body').css('overflow', 'auto');
50    }, delay);
51  });
52  // Both Search Buttons Click
53  $(".search-btn").click(function() {
54    $("#mega-nav").addClass("d-none");
55    var popularBtn = $('.popular-btn');
56    if ($(popularBtn).attr('aria-expanded') === "true") {
57      $('#hidden-ribbon').collapse('hide');
58    }
59  });
60  // OffCanvas Sub Link Click
61  $('.sub-link').click(function() {
62    var cat = $(this).data("uwo-category");
63    $(cat).removeClass("d-none");
64    $(".menu-accordion").addClass("d-none");
65  });
66  // OffCanvas Category Link Click
67  $('.offcanvas-category').click((event) => {
68    $(event.target).parents('.offcanvas-slide').addClass('d-none');
69    $(".menu-accordion").removeClass("d-none");
70  });
71  // OffCanvas Close Button Click
72  $('.offcanvas-close').click(function() {
73    // Hide Slides
74    $(".offcanvas-slide").addClass("d-none");
75    // Unhide Menu Accordion
76    $(".menu-accordion").removeClass("d-none");
77    // Close any mobile menu accordions
78    $.fn.closeMenuAccordion();
79    // Update Accordions to be all active
80    $('.menu-accordion-button').removeClass('inactive');
81  });
82  // Menu Accordion Button Click
83  $(".menu-accordion-button").on('click', function() {
84    console.log($(this).attr('aria-expanded'))
85    if ($(this).attr('aria-expanded') === "true") {
86      //opening
87      $(".menu-accordion-button").removeClass("inactive");
88      $(".menu-accordion-button").not(this).addClass("inactive");
89    } else {
90      // closing
91      $(".menu-accordion-button").removeClass("inactive");
92    }
93  });
94  // Add iframe SRC for Social Proof Modal
95  $(".modal-click").on('click', function() {
96    var theModal = $(this).data("bs-target");
97    var string = $(this).attr("data-video").split("&")[0];
98    var videoSRC = string.replace('watch?v=', 'embed/');
99    $(theModal + ' iframe').attr('src', videoSRC);
100  });
101  // Remove iframe SRC for Social Proof Modal
102  $(".uwo-modal-close").on('click', function() {
103    $('.social-iframe').attr('src', "");
104  });
105});
106// Common Functions
107(function($) {
108  $.fn.invisible = function() {
109    return this.each(function() {
110      $(this).css("visibility", "hidden");
111    });
112  };
113  $.fn.visible = function() {
114    return this.each(function() {
115      $(this).css("visibility", "visible");
116    });

117  };
118  $.fn.closeMenuAccordion = function() {
119    $('.accordion-button').each(function() {
120      if ($(this).attr("aria-expanded") === "true") {
121        $(this).click();
122      }
123    })
124  }
125}(jQuery));
126// Handel Responsiveness
127function handleResponsiveness() {
128  if (screen.width >= 1200) {
129    var element1Height = $('#land-acknowledgement').outerHeight();
130    $('#footer-div').height(element1Height);
131  } else {
132    $("#main-wrapper").css("overflow", "hidden");
133    $("#hidden-ribbon").removeClass("show");
134    $('#hidden-ribbon').off('hidden.bs.collapse');
135    $('#footer-div').height('auto');
136  }
137}
138$(window).on('load resize orientationchange', function() {
139  handleResponsiveness();
140});
141// Handle Responsiveness
142handleResponsiveness();
143function closeAllCollapses() {
144  // Select all collapse elements and trigger the 'hide' action
145  $('.collapse').collapse('hide');
146}
147// Mobile Navigation
148$(document).ready(function() {
149  // Get the contents of the source div
150  var sourceContent = $("#leftNavSource").html();
151  // Place the content within the destination div
152  $("#leftNavDestination").html(sourceContent);
153});
154// Hidden Ribbon Collapse
155$(document).ready(function() {
156  // Change Hidden Ribbon Image
157  var img = $("#popular-links-image");
158  var closed = $(img).attr('src').replace('ribbon.svg', 'ribbon-open.svg');
159  var open = $(img).attr('src').replace('ribbon-open.svg', 'ribbon.svg');
160  // Attach event listeners to the collapse element
161  $('#hidden-ribbon').on('show.bs.collapse', function() {
162    //$(this).fadeIn();
163    $(img).attr("src", open);
164  }).on('hide.bs.collapse', function() {
165    // Collapse is closing
166    //$(this).fadeOut();
167    $(img).attr("src", closed);
168  });
169});
170// Search Collapse
171$(document).ready(function() {
172  // Attach event listeners to the collapse element
173  $('#search-container').on('show.bs.collapse', function() {
174    // Collapse is opening
175    $(this).fadeIn(600);
176    toggleSearchImage()
177  }).on('hide.bs.collapse', function() {
178    // Collapse is closing
179    $(this).fadeOut();
180    toggleSearchImage()
181  });
182});
183// Search Image Toggle
184function toggleSearchImage() {
185  var img = $("#default-search");
186  if (img.attr('src').indexOf('search.svg') != -1) {
187    var newSrc = img.attr('src').replace('search.svg', 'search-X.svg');
188    img.attr("src", newSrc);
189    $('body').css('overflow', 'hidden');
190  } else if (img.attr('src').indexOf('search-X.svg') != -1) {
191    var newSrc = img.attr('src').replace('search-X.svg', 'search.svg');
192    img.attr("src", newSrc);
193    $('body').css('overflow', 'auto');
194  }
195}
196// Mobile Menu Accordion
197$(document).ready(function() {
198  // Changes the border of the offcanvas menu accordion item when active
199  $('.menu-accordion-item').on('show.bs.collapse', function() {
200    $(this).addClass('active');
201  });
202
203  $('.menu-accordion-item').on('hide.bs.collapse', function() {
204    $(this).removeClass('active');
205  });
206});
207// Hero Video Pause and Play
208$(document).on('click keyup', '.hero-video .hero-play-btn', function(e) {
209  e.stopPropagation();
210  e.preventDefault();
211  $('.hero-video .hero-play-btn').toggleClass('paused');
212
213  if ($('.hero-video .hero-play-btn').hasClass('paused')) {
214    $('.hero-video video').get(0).pause();
215  } else {
216    $('.hero-video video').get(0).play();
217  }
218});
219
220// Window Scroll
221$(window).scroll(function() {
222  if ($(window).width() >= 1200) {
223    if ($(window).scrollTop() > 0) {
224      //if ($('#hidden-ribbon').hasClass('show')) {
225      // Code to close the collapse
226      //$('#hidden-ribbon').fadeOut('slow');
227      $('#hidden-ribbon').collapse('hide');
228      // }
229      // Code to slide the div up and unset overflow
230      $('#ribbon-menu-container').slideUp('slow');
231      $('#main-wrapper').css('overflow', 'unset');
232      $('.sticky-top').css('margin-top', '23px');
233    } else {
234      // Code to slide the div down and change overflow to hidden
235      $('#ribbon-menu-container').slideDown('slow');
236      $('#main-wrapper').css('overflow', 'hidden');
237      $('.sticky-top').css('margin-top', '0');
238    }
239  }
240});
241// Window Resize 
242$(window).resize(function() {
243  if ($(window).width() < 1200) {
244    // Code to hide the div
245    $('#ribbon-menu-container').hide();
246  } else {
247    // Code to show the div (optional)
248    $('#ribbon-menu-container').show();
249  }
250});
251// Adjust CTA buttons
252$(document).ready(function() {
253  function adjustLinkWidth() {
254    // Find all links with the class "btn-western-purple-light" inside the ".cta-button-group"
255    const links = $(".cta-button-group .btn-western-purple-light");
256    // Check the screen width to decide whether to set width to 100% or equal width
257    const screenWidth = $(window).width();
258    const isMobileOrTablet = screenWidth < 768; // 768px is the common breakpoint for tablets
259    if (isMobileOrTablet) {
260      // Set the width of all links inside the ".cta-button-group" to 100% 

260while retaining the top and bottom padding/margin
261      links.css("width", "100%");
262    } else {
263      // Reset the width style to allow buttons to take their original width
264      links.css("width", "");
265      // Find the widest link's width
266      let maxWidth = 0;
267      links.each(function() {
268        const width = $(this).width();
269        if (width > maxWidth) {
270          maxWidth = width;
271        }
272      });
273      // Set the width of all links inside the ".cta-button-group" to the widest width
274      links.width(maxWidth);
275    }
276  }
277  // Call the adjustLinkWidth function on page load
278  adjustLinkWidth();
279  // Call the adjustLinkWidth function whenever the window is resized
280  $(window).resize(adjustLinkWidth);
281});
282// Match Heights Function
283function matchHeights(elementClass) {
284  // Reset height of all common elements
285  $(elementClass).height('auto');
286  // Get the maximum height among all common elements
287  var maxHeight = 0;
288  $(elementClass).each(function() {
289    maxHeight = Math.max(maxHeight, $(this).height());
290  });
291  // Set the same height to all common elements
292  $(elementClass).height(maxHeight);
293}
294// Match heights on load
295$(document).ready(function() {
296  matchHeights('.social-group .card-body');
297  matchHeights('.western-card .card-body');
298  matchHeights('.factoid-container .factoid');
299  matchHeights('.call-out-container .call-out');
300});
301// Match heights on window resize
302$(window).on('resize', function() {
303  matchHeights('.social-group .card-body');
304  matchHeights('.western-card .card-body');
305  matchHeights('.factoid-container .factoid');
306  matchHeights('.call-out-container .call-out');
307});
308// Event container Test
309$(document).ready(function() {
310  var maxWidth = 0;
311  var maxHeight = 0;
312  $(".event-date2").each(function() {
313    var width = $(this).outerWidth(true);
314    var height = $(this).outerHeight(true);
315    if (width > maxWidth) {
316      maxWidth = width + 4;
317    }
318    if (height > maxHeight) {
319      maxHeight = height;
320    }
321  });
322  $(".event-date2").css({
323    "width": maxWidth + "px",
324    "height": maxHeight + "px"
325  });
326});
327function closeMobileMenu() {
328  $('#offcanvas-1').offcanvas('hide');
329  $(".offcanvas-slide").addClass("d-none");
330  $(".menu-accordion").removeClass("d-none");
331  $('.menu-accordion-button').removeClass('inactive');
332  var delay = 500;
333  setTimeout(function() {
334    $('body').css('overflow', 'auto');
335  }, delay);
336}
337// Call the closeMobileMenu function when the window is resized or when the orientation changes
338$(window).on('resize orientationchange', function() {
339  closeMobileMenu();
340});
341// Slider Setups
342$(document).ready(function() {
343  var $carousels = $('.wu-slider');
344  function initializeCarousel() {
345    $carousels.each(function() {
346      var $carousel = $(this);
347      if ($(window).width() > 1200) {
348        if ($carousel.hasClass('slick-initialized')) {
349          $carousel.slick('unslick');
350          //$(".slider-controls").invisible();
351          $(".slider-controls").css('display', 'none');
352        }
353      } else {
354        if (!$carousel.hasClass('slick-initialized')) {
355          $carousel.slick({
356            infinite: true,
357            dots: true,
358            //centerMode: true,
359            //centerPadding: '20px',
360            mobileFirst: true,
361            slidesToShow: 1, // Default value for smaller screens
362            appendDots: $carousel.parent().find('.slide-m-dots'),
363            prevArrow: $carousel.parent().find('.slide-m-prev'),
364            nextArrow: $carousel.parent().find('.slide-m-next'),
365            slidesToScroll: 1, // Default value for smaller screens
366            responsive: [{
367                breakpoint: 1200,
368                settings: "unslick"
369              },
370              {
371                breakpoint: 767,
372                settings: {
373                  slidesToShow: 2,
374                  slidesToScroll: 2,
375                  centerMode: true,
376                  centerPadding: '20px',
377                }
378              },
379              {
380                breakpoint: 480,
381                settings: {
382                  slidesToShow: 1,
383                  centerMode: false,
384                  slidesToScroll: 1
385                }
386              }
387            ]
388          });

389          //$(".slider-controls").visible();
390          $(".slider-controls").css('display', 'flex');
391        }
392      }
393    });
394  }
395  initializeCarousel(); // Initialize on document ready
396  // Reinitialize on window resize 
397  $(window).resize(function() {
398    initializeCarousel();
399  });  
400});
401
402// Mega Nav
403$(document).ready(function() {
404  const $header = $("header"); // Change this selector to target your header element
405  const $megaNav = $header.find("#mega-nav");
406  const $megaNavLinkContainer = $header.find("#mega-nav-links");
407  const $searchContainer = $header.find("#search-container");
408  const $defaultSearchImg = $header.find("#default-search");
409    const $mainMenuContainer = $("main-menu");
410    const $megaNavContainer = $("#mega-nav");
411  let timer;
412  let isInsideMegaNav, isInsideNavLinkContainer;
413  let isScrolling = false;
414
415  const megaNavId = "#mega-nav";
416  const megaNavLinkContainerId = "#mega-nav-links";
417    
418    // Add a reference to the main element
419const $main = $("main"); // Change this selector to target your main element
420
421  //isInsideMegaNav = false;
422  //isInsideNavLinkContainer = false;
423
424  function hideMegaNav() {
425    $megaNav.addClass("d-none");
426    $megaNav.find(".row").addClass("d-none");
427  }
428
429  // Attach mouseenter event to the header element
430  $header.on("mouseenter", '.mega-nav-link', function(event) {
431    // Rest of mouseenter event handling code
432    if (!$searchContainer.hasClass("show")) {
433      const subMenu = this.id;
434
435      const timeoutId = setTimeout(() => {
436        if (isInsideMegaNav || isInsideNavLinkContainer) {
437          $megaNav.removeClass("d-none");
438          $megaNav.find(".row").addClass("d-none");
439          $('.' + subMenu).removeClass("d-none");
440          $searchContainer.removeClass("show");
441          $('body').css('overflow', 'auto');
442
443          if ($defaultSearchImg.attr('src').includes('search-X.svg')) {
444            $defaultSearchImg.attr("src", (i, val) => val.replace('search-X.svg', 'search.svg'));
445          }
446        }
447      }, 500);
448
449      const x = event.pageX - $('#mega-nav').offset().left;
450      const y = event.pageY - $('#mega-nav').offset().top;
451
452      if (x >= 0 && x <= $megaNavContainer.outerWidth(true) && y >= 0 && y <= $megaNavContainer.outerHeight(true)) {
453        isInsideMegaNav = true;
454      }
455        
456        console.log('Mega Nav Container ' + $megaNavContainer.outerWidth(true));
457
458      const navLinkContainerX = event.pageX - $("#mega-nav-links").offset().left;
459      const navLinkContainerY = event.pageY - $("#mega-nav-links").offset().top;
460
461      if (navLinkContainerX >= 0 && navLinkContainerX <= $("#mega-nav-links").outerWidth(true) &&
462        navLinkContainerY >= 0 && navLinkContainerY <= $("#mega-nav-links").outerHeight(true)) {
463        isInsideNavLinkContainer = true;
464          
465      }
466        
467        console.log($("#mega-nav-links").outerWidth(true));
468    }
469  });
470
471 $megaNav.mouseleave(hideMegaNav);
472    
473
474  function resetTimer() {
475    clearTimeout(timer);
476    if (!isScrolling) {
477      hideMegaNav();
478    }
479  }
480
481  // Attach scroll event to the window
482  $(window).on("scroll", function() {
483    isScrolling = true;
484    if (!$megaNav.hasClass("d-none")) {
485      const headerHeight = $megaNav[0].clientHeight;
486      const scrollThreshold = headerHeight;
487
488      if ($(document).scrollTop() > scrollThreshold) {
489        hideMegaNav();
490      }
491    }
492  });
493
494  // Attach other event handlers to the header element
495  $header.on("mouseenter", "#mega-nav-links", function() {
496    isInsideNavLinkContainer = true;
497  });
498
499  $header.on("mouseleave", "#mega-nav-links", function() {
500    // Check if the mega-nav is open and if so, don't reset isInsideNavLinkContainer
501    if ($megaNav.hasClass("d-none")) {
502      isInsideNavLinkContainer = false;
503    }
504  });
505
506  $header.on("mouseleave", "#mega-nav", function() {
507    isInsideMegaNav = false;
508    resetTimer();
509  });
510
511  $header.on("mouseleave", "#mega-research", function() {
512    isInsideNavLinkContainer = false;
513  });
514
515  // Attach "Ribbon, Search Button, Logo, and Research Mouse Enter" event handler to document
516  $(document).on("mouseenter", "#mega-research, #ribbon-menu-container, .search-btn, .navbar-brand", function() {
517    isInsideNavLinkContainer = false;
518    hideMegaNav();
519  });
520    
521    // Attach mousemove event to the main element
522$main.on("mousemove", function(event) {
523  // Check if the mega nav is open and if the mouse is outside the mega nav area
524  if (!$megaNav.hasClass("d-none")) {
525    const megaNavRect = $megaNav[0].getBoundingClientRect();
526    const mouseX = event.clientX;
527    const mouseY = event.clientY;
528
529    // Check if the mouse is outside the mega nav area
530    if (
531      mouseX < megaNavRect.left ||
532      mouseX > megaNavRect.right ||
533      mouseY < megaNavRect.top ||
534      mouseY > megaNavRect.bottom
535    ) {
536      hideMegaNav();
537    }
538  }
539});
540  // Resize and orientation change events
541  $(window).on("resize orientationchange", function() {
542    // Handle resize and orientation change here
543    resetTimer();
544  });
545});