https://www.vims.edu/js/main.js

1// ????????????????????????????
2
3// Give Infogram emebds the scrollable table treatment because many have a fixed width
4$('iframe[src*="infogr"]').each(function() {
5    $(this).wrap('<div class="tablewrap infogramwrap" style="padding-top:1em;margin-top-1em;"></div>').before('<p class="scroll-message" style="font-size:0.8rem;font-style:italic;position:absolute;right:0;color:#999;margin-top:-1.5em;">Scroll right for more</p>');
6});
7 
8$('.infogramwrap').scroll(function() {
9    $(this).find('.scroll-message').fadeOut(200);
10});
11
12
13$(document).ready(function(){
14
15    // jQuery Globals Variables 
16    var scrollbarWidth = window.innerWidth - $(document).width();
17    var mastheadHeight = $('.o-menu__primary-bar').height();
18    var tacticalSearchToggle = $(".vims-tactical-bar__searchtoggle");
19    var mobileSearchToggle = $('.vims-mobile-menu__searchbutton');
20    if($(".o-vims-hero").length) {
21        var heroHeight = $(".o-vims-hero").height();
22    }
23
24
25    // Vanilla Globals Variables 
26    var bodyTag = document.querySelector("body");
27    var masthead = document.querySelector(".vims-primary-bar");
28    var tacticalBarContent = document.querySelector(".vims-tactical-bar__content");
29    var tacticalSearch = document.getElementById("tacticalsearch");
30    var mobileMenu = document.querySelector(".vims-mobile-menu");
31    var mobileMenuClose = document.querySelector(".close-mobile-menu");
32    var mobileMenuOpen = document.getElementById("mobile-menu");
33
34
35    // keyup listener
36    $(document).keyup(function(e) {
37		if (e.key === "Escape") { 
38			closeMobileMenu();
39			closeDesktopSearch();
40		}
41	});
42
43	// window resize listener
44	window.addEventListener("resize", function() {
45		if(window.innerWidth >= 1278) {
46			closeMobileMenu();
47		}
48		var heroHeight = $(".o-vims-hero").height();
49		console.log(heroHeight);
50	});
51
52
53    $('.close-mobile-menu').on('click', function(){
54        closeMobileMenu();
55    });
56
57  //==========================================
58  // MEGA MENU
59  //==========================================
60
61
62  // Set up the desktop mega menu
63  $("#vpblinks").wmMegaMenu();
64  
65  var debounce = null;
66  $(window).on("scroll", function(e){
67     clearTimeout(debounce );
68     debounce = setTimeout(function(){
69            $(".vims-primary-bar__links button[aria-expanded=true]").trigger("click");
70            
71            if($("body.homepage").length) {
72                var scrolledNum = $(window).scrollTop();
73                if (scrolledNum > heroHeight) {
74                    $("body").addClass("blue-menu");
75                }
76                else {
77                    $("body").removeClass("blue-menu");
78                }
79                if (scrolledNum < heroHeight - 200) {
80                    $("body").addClass("fastchange");
81                }
82                else {
83                    $("body").removeClass("fastchange");
84                }
85                
86                window.onscroll = function(e) {
87                  // print "false" if direction is down and "true" if up
88                  if(this.oldScroll > this.scrollY) {
89                      $("body").addClass("up");
90                  }
91                  else {
92                     $("body").removeClass("up");
93                  }
94                  this.oldScroll = this.scrollY;
95                }
96                
97                
98            }
99            
100     }, 2);
101  });
102
103
104  //========================================
105  // DESKTOP, TACTICAL BAR SEARCH 
106  //========================================
107
108  $(".vims-tactical-bar__searchtoggle").on("click", function(e) {
109    toggleDesktopSearch();
110  });
111
112  $(".vims-tactical-bar__form").focusout(function(e) {
113    if (document.hasFocus() && !$(e.relatedTarget).is(".vims-tactical-bar__form, .vims-tactical-bar__form *, .vims-tactical-bar__searchtoggle") ) {
114      closeDesktopSearch();
115    }
116  });
117
118  function toggleDesktopSearch() {
119    if(tacticalSearchToggle.attr('aria-expanded') == "true") {
120      closeDesktopSearch();
121    }
122    else {
123      // vanilla
124      tacticalBarContent.classList.add('search-open');
125      // jquery
126      tacticalSearchToggle.attr("aria-expanded", true);
127      tacticalSearchToggle.children('.sr-only').text("Close Search");
128      tacticalSearchToggle.children('i').removeClass("fa-search").addClass("fa-close");
129      
130      setTimeout(() => {
131        tacticalSearchToggle.next("form").find("input").focus();
132      }, 200);
133    }
134  }
135
136  function closeDesktopSearch() {
137      // vanilla
138      tacticalSearch.addEventListener("transitionend", afterDesktopSearchClose(), false);
139      tacticalBarContent.classList.add("-closing");
140  }
141
142  function afterDesktopSearchClose() {
143    //jquery
144    tacticalSearchToggle.attr("aria-expanded", false);
145    tacticalSearchToggle.children('.sr-only').text("Open Search");
146    tacticalSearchToggle.children('i').removeClass("fa-close").addClass("fa-search");
147    setTimeout(() => {
148      // vanilla
149      tacticalSearch.removeEventListener("transitionend", afterDesktopSearchClose, false);
150      tacticalBarContent.classList.remove("-closing", "search-open");
151    }, 600); 
152  }
153
154
155
156  //=================================================
157  // MOBILE MENU
158  //=================================================
159
160	$(".o-menu__backdrop").click(function(e) {
161    e.preventDefault();
162    closeMobileMenu();
163	});
164
165	$("#menu-button").click(function(e) {
166    e.preventDefault();
167		if(!$("body").hasClass("mobile-menu-open")) {
168			openMobileMenu();
169		}
170		else { 
171			closeMobileMenu();
172		}
173	});
174
175  $(".vims-mobile-menu").focusout(function(e) {
176    e.stopPropagation();
177    if ($("body").hasClass("mobile-menu-open") && document.hasFocus() && !$(e.relatedTarget).is(".vims-mobile-menu, .vims-mobile-menu *")) {
178        closeMobileMenu();
179    }
180  });
181
182  function openMobileMenu() {
183    if(!$("body").hasClass("mobile-menu-open")) { 
184      
185      // resetting this here, because the slideshows are loading slowly and messing with the page width    
186      var scrollbarWidth = window.innerWidth - $(document).width();
187      var scrollY = window.pageYOffset;
188      var mastheadToTop = $('.vims-primary-bar').offset().top - $(window).scrollTop();
189      var mastheadHeight = $('.vims-primary-bar').outerHeight();
190      // Body
191      $("body").css("position","fixed");
192      $("body").css("margin-top", scrollY*-1);
193      $("body").css("padding-right",scrollbarWidth+"px");
194      $("body").addClass("mobile-menu-open"); // triggers open animation
195      
196      //topbar
197      $('.vims-primary-bar').css("position","fixed");
198      $('.vims-primary-bar').css("top",mastheadToTop+"px");
199      $('.vims-primary-bar').css("padding-right",scrollbarWidth+"px");
200      
201      // toggle menu button
202      $("#menu-button").attr("aria-expanded", "true");
203
204      // hero or header
205      $('#main-header').css("margin-top",mastheadHeight);
206      $('.herosection').css("margin-top",mastheadHeight);
207
208      
209      setTimeout(() => { afterMobileMenuOpen();}, 400); 
210    }
211  }
212  
213  function afterMobileMenuOpen() {
214    mobileMenuClose.focus();
215    document.querySelector(".close-mobile-menu").focus();
216  }
217
218	function closeMobileMenu() {
219		if($("body").hasClass("mobile-menu-open")) {
220      $('.o-menu__backdrop').addClass("-closing");
221      $("#menu-button").attr("aria-expanded", "false");
222      // add menu listener
223      mobileMenu.classList.add("-closing");
224      setTimeout(() => {
225        afterMobileMenuClose();
226      }, 400); 
227    }
228	}
229  // things we want to do after the menu finishes closing so our layout isn't jumpy
230	function afterMobileMenuClose() {
231    
232        var originalScrollPos = Math.abs(parseInt(bodyTag.style.marginTop));
233    
234        // Body
235        bodyTag.style.removeProperty("position");
236        bodyTag.style.removeProperty("margin-top");
237        bodyTag.style.removeProperty("padding-right");
238        
239        // topbar
240        masthead.style.removeProperty("position");
241        masthead.style.removeProperty("top");
242        masthead.style.removeProperty("padding-right");
243        bodyTag.classList.remove("mobile-menu-open");
244        
245        // Toggle menu button
246        $('#menu-button').css("right","0px");
247        
248        // Hero or Header
249        $('#main-header').css("margin-top",0);
250        $('.herosection').css("margin-top","");
251        
252        // backdrop for open menu
253        $('.o-menu__backdrop').removeClass("-closing");
254        
255        // scroll the page back to where it was before we position:fixed the body
256        if(originalScrollPos) {
257          window.scrollTo({
258            top: originalScrollPos,
259            behavior: 'instant'
260          });
261        }
262        mobileMenu.classList.remove("-closing");
263        mobileMenuOpen.focus();
264        closeMobileSearch(mobileSearchToggle);
265        closeAllPanels();
266	}
267
268  // close all mobile submenus
269  function closeAllPanels() {
270    $('.vims-mobile-menu__primarybutton[aria-expanded="true"]').each(function() {
271      closePanel($(this),"false");
272    });  
273  }
274
275
276  //=========================================
277  // MOBILE SEARCH
278  //==========================================
279	$('.vims-mobile-menu__searchbutton').click(function(e) {
280		if($(this).attr("aria-expanded") == "false") {
281		    console.log("open");
282			openMobileSearch($(this));
283		}
284		else { 
285		    console.log("close");
286			closeMobileSearch($(this));
287		}
288	});
289
290  function openMobileSearch(el){
291    el.attr("aria-expanded","true");
292    el.children('i').removeClass("fa-search fa-regular").addClass("fa-close fa-light");
293    el.css("font-size", "44px");
294    $('.vims-mobile-menu__search').show();
295    $('.close-mobile-menu').hide();
296    $('.vims-mobile-menu__search input').focus();
297  }
298
299  function closeMobileSearch(el){

300    el.attr("aria-expanded","false");
301    el.children('i').removeClass("fa-close fa-light").addClass("fa-search fa-regular");
302    el.css("font-size", "28px");
303    $('.vims-mobile-menu__search').hide();
304    $('.close-mobile-menu').show();
305    $('.vims-mobile-menu__primary li:first-of-type button').focus(); 
306  }
307
308
309$(".vims-mobile-menu__bottom").on("focus", function() {
310     if(mobileSearchToggle.attr("aria-expanded") == "true") {
311        closeMobileSearch(mobileSearchToggle);
312     }
313});
314
315//   $(".vims-mobile-menu__search").focusout(function(e) {
316//     if (document.hasFocus() && !$(e.relatedTarget).is(".vims-mobile-menu__search, .vims-mobile-menu__search *, .vims-mobile-menu__searchbutton")) {
317//         console.log("focusout");
318//       closeMobileSearch($(this).prev("button"),false);
319//     }
320//   });
321
322
323  ///==============================================
324  // MOBILE SUB MENUS (MM Panels)
325  //===============================================
326
327  $(".mm-panel").focusout(function(e) {
328    if (document.hasFocus() && !$(e.relatedTarget).is(".mm-panel, .mm-panel *")) {
329      // Add a delay if related target is not a primary or tactical link or a close panel button
330      if(!$(e.relatedTarget).is(".vims-mobile-menu__panelclose, .vims-mobile-menu, .vims-mobile-menu *")) {
331        $(this).addClass("-delay");
332      }
333      closePanel($(this).prev("button"),false);
334    }
335  });
336
337  $('.vims-mobile-menu__primarybutton').on('click', function(e) { 
338    if($(this).attr("aria-expanded") == "false") { 
339      openPanel($(this));
340    }
341    else {
342      closePanel($(this));
343    }
344  });
345
346  function openPanel(el) {
347    el.attr("aria-expanded", "true");
348    myId = "#" + el.attr("aria-controls");
349    $(myId).addClass("open");
350    setTimeout(() => {
351      afterPanelOpen(myId);
352    }, 400); 
353  }
354
355  function afterPanelOpen(myId) {
356    $(myId).children(".vims-mobile-menu__panelclose").focus();
357  }
358
359  function closePanel(el,setfocus=true) {
360    //console.log(el);
361    if(!el) {
362      return;
363    }
364    el.attr("aria-expanded","false");
365    myPanelSelector = "#" + el.attr("aria-controls");
366    myPanel = document.querySelector(myPanelSelector);
367    myPanel.classList.add("-closing");
368
369    setTimeout(() => {
370      afterPanelClose(myPanel,el,setfocus);
371    }, 400); 
372  }
373
374  function afterPanelClose(myPanel,el,setfocus){
375    myPanel.classList.remove("open","-closing", "-delay");
376    if(setfocus) {
377      el.focus();
378    }
379  }
380
381  $('.vims-mobile-menu__panelclose').on('click', function(e) {
382    closePanel($(this).closest('.mm-panel').prev('.vims-mobile-menu__primarybutton'));
383  });
384
385
386  // SWIPE ACTIONS USING TOUCHSWIPE PLUGIN IN /JS/PLUGINS.JS FILE
387  $(".vims-mobile-menu__top, .vims-mobile-menu__bottom").swipe({
388    swipeRight:function(e, direction, distance, duration, fingerCount) {
389        e.stopPropagation();
390        closeMobileMenu();
391        return false;
392    },
393    threshold: 100
394}); 
395$(".mm-panel").swipe({
396  swipeRight:function(e, direction, distance, duration, fingerCount) {
397      e.stopPropagation();
398      closePanel($(this).closest('.mm-panel').prev('.vims-mobile-menu__primarybutton'));
399      return false;
400  },
401  threshold: 100
402}); 
403
404//TODO: Add one for search div
405
406
407}); // End: Document.ready()
408
409
410
411
412// MOVED TO SHARED SECONDARY PAGES SCRIPT (4-28-25)
413// --------------------- BREADCRUMBS ---------------------------- //
414
415// document.addEventListener("DOMContentLoaded", function () {
416    
417//   // remove the 'no-js' class from html tag, add 'js'
418//   const html_tag = document.querySelector('html');
419//   html_tag.classList.remove('no-js');
420//   html_tag.classList.add('js');
421
422
423//   // BREADCRUMB POPPER
424//   if (
425//     document.querySelector(".m-breadcrumbs") &&
426//     document.querySelector(".m-breadcrumbs").length != 0
427//   ) {
428//     // Make sure Popper is loaded
429//     if (typeof Popper != "undefined") {
430//       var mySelector = "main .m-breadcrumbs";
431//       var breadLists = document.querySelectorAll(mySelector);
432
433//       var breadlistNum = 0;
434//       for (b=0; b<breadLists.length; b++) {
435//         var thisBreadList = breadLists[b];  
436//         var breadListItems = thisBreadList.getElementsByTagName("li");
437//         var numBreadListItems = breadListItems.length;
438//         if (numBreadListItems > 3) {
439//           var newCollapsedLinks = document.createElement("div");
440//           newCollapsedLinks.setAttribute("id", "collapsedlinks" + breadlistNum);
441//           for (i = 1; i < numBreadListItems - 2; ++i) {
442//             newCollapsedLinks.appendChild(breadListItems[1]); // as items are taken away, the "next" item remains index 1
443//           }
444//           newArrow = document.createElement("div");

445//           newArrow.setAttribute("id", "bc_arrow" + breadlistNum);
446//           newArrow.setAttribute("data-popper-arrow", "true");
447//           newCollapsedLinks.appendChild(newArrow);
448
449//           // ELLIPSE
450//           var newListItem = document.createElement("li");
451//           newListItem.setAttribute("class", "m-breadcrumbs__link");
452//           newButton = document.createElement("button");
453//           newButton.innerHTML = "…";
454//           newButton.setAttribute("aria-expanded", "false");
455//           newButton.setAttribute(
456//             "aria-controls",
457//             "collapsedlinks" + breadlistNum
458//           );
459//           newListItem.appendChild(newButton);
460//           thisBreadList.insertBefore(newListItem, thisBreadList.children[1]);
461//           thisBreadList.insertBefore(
462//             document.createTextNode("\n"),
463//             thisBreadList.children[2]
464//           );
465//           newListItem.appendChild(newCollapsedLinks);
466//           //newListItem.appendChild(document.createTextNode('\n'));
467
468//           // create the Popper
469//           const button = thisBreadList.querySelector(
470//             ".m-breadcrumbs__link button"
471//           );
472//           const tooltip = thisBreadList.querySelector(
473//             "#collapsedlinks" + breadlistNum
474//           );
475
476//           let popperInstance = null;
477
478//           function create() {
479//             popperInstance = Popper.createPopper(button, tooltip, {
480//               placement: "bottom-start",
481//               modifiers: [
482//                 { name: "offset", options: { offset: [-5, 20] } },
483//                 {
484//                   name: "flip",
485//                   options: { behavior: ["top-start", "bottom-start"] },
486//                 },
487//               ],
488//             });
489//           }
490//           function destroy() {
491//             if (popperInstance) {
492//               popperInstance.destroy();
493//               popperInstance = null;
494//             }
495//           }
496//           function toggleLinks() {
497//             if (tooltip.hasAttribute("data-show")) {
498//               tooltip.removeAttribute("data-show");
499//               button.setAttribute("aria-expanded", "false");
500//               destroy();
501//             } else {
502//               tooltip.setAttribute("data-show", "");
503//               button.setAttribute("aria-expanded", "true");
504//               create();
505//             }
506//           }
507//           button.addEventListener("click", toggleLinks);
508//           document.addEventListener(
509//             "click",
510//             function (event) {
511//               if (event.target.closest(".m-breadcrumbs__link button")) return;
512//               if (tooltip.hasAttribute("data-show")) {
513//                 tooltip.removeAttribute("data-show");
514//                 button.setAttribute("aria-expanded", "false");
515//                 destroy();
516//               }
517//             },
518//             true
519//           );
520//         } else if (numBreadListItems == 1) {
521//           thisBreadList.style.display = "none";
522//         }
523
524//         breadlistNum++;
525//       } // end loop multiple breadcrumb lists
526//     }
527//   }
528// });
529