https://www.campaignmonitor.com/wp-content/themes/cm-theme/assets/js/_template/header.js?ver=415

1//  DISPLAY A 'STICKY' NAVIGATION
2function fixNavigationDesktop(e) {
3  if (e > 1015) {
4    if (window.scrollY > 0) {
5      document.getElementById('darker').style.backgroundColor = '#2F353E'
6      document.getElementById('darker').style.position = 'fixed'
7    } else {
8      document.getElementById('darker').style.backgroundColor = '#2F353E'
9      document.getElementById('darker').style.position = 'relative'
10    }
11  } else {
12    $('#darker').removeAttr('style')
13  }
14}
15
16//  HANDLE TRANSPARENT NAV
17
18var header_anchor = $('.header-anchor')
19if (header_anchor.length > 0 && $('body').hasClass('headscroll')) {
20  $(window).scroll(function() {
21    var win_pos = document.documentElement.scrollTop
22      ? document.documentElement.scrollTop
23      : document.body.scrollTop
24    var anchor_pos = header_anchor.offset().top + header_anchor.outerHeight()
25    //console.log(win_pos+" >= "+anchor_pos);
26    if (win_pos >= anchor_pos && $('body').hasClass('transparent')) {
27      // Slide in sticky nav
28      //console.log(win_pos+" >= "+anchor_pos+" | Slide in");
29      $('header')
30        .css({ top: '-62px' })
31        .animate({ top: '0' }, 300, function() {
32          $(this).removeAttr('style')
33        })
34      $('body')
35        .removeClass('transparent')
36        .css('padding-top', '0px')
37    } else if (
38      win_pos < anchor_pos &&
39      !$('body').hasClass('transparent') &&
40      !$('body').hasClass('temptransparent')
41    ) {
42      // Slide out sticky nav
43      //console.log(win_pos+" >= "+anchor_pos+" | Slide out");
44      $('body').addClass('temptransparent')
45      $('header')
46        .css({ top: '0' })
47        .animate({ top: '-62px' }, 100, function() {
48          $(this).removeAttr('style')
49          $('body')
50            .addClass('transparent')
51            .removeClass('temptransparent')
52            .removeAttr('style')
53        })
54    }
55  })
56}
57
58//  SHOW THE MOBILE NAVIGATION
59function toggleMobileNav() {
60  var html = $('html')
61  var body = $('body')
62  var menu = $('#mainNav')
63  var menulink = $('.menu-link')
64  var winHeight = $(window).height()
65  var setHeight
66
67  menulink.click(function() {
68    winHeight = $(window).height()
69    menulink.toggleClass('active')
70    menulink.parent().toggleClass('active')
71    html.toggleClass('noscroll')
72    if (menu.hasClass('active')) {
73      menu.removeClass('active', 400).removeAttr('style')
74    } else {
75      setHeight = winHeight - 62
76      menu.css('height', setHeight).addClass('active', 400)
77    }
78
79    return false
80  })
81
82  $(window).resize(function() {
83    if (menu.hasClass('active')) {
84      winHeight = $(window).height()
85      setHeight = winHeight - 62
86      menu[0].style.height = setHeight + 'px'
87    }
88  })
89
90  $('#mainNav').removeAttr('style')
91}
92
93// SHOW MOBILE SIGN UP BUTTON
94$(window).scroll(function() {
95  var banner = $('#mobileBanner');
96  var cmLogo = $('#cmlogo');
97  var isScrolled = window.scrollY > 10;
98
99  if(isScrolled) {
100    cmLogo.addClass('logo-small');
101    banner.addClass('visible');
102  } else {
103    banner.removeClass('visible');
104    cmLogo.removeClass('logo-small');
105  }
106
107})
108
109// SET ACTIVE CLASSES ON DROPDOWN MENUS
110var mobileNav = $('#mainNav')
111
112$('.dropdown').each(function() {
113  $(this).click(function(event) {
114    var width = $(window).width()
115    if (width < 850) {
116      if (event.target.id) {
117        var menu = $(this).find('.dropdown_menu--' + event.target.id)
118        var link = $('#' + event.target.id)
119        menu.toggleClass('active')
120        link.toggleClass('active')
121      }
122    }
123  })
124})
125
126function hideOnClickOutside(selector) {
127  function outsideClickListener(event) {
128    $target = $(event.target)
129    if (!$target.closest('.dropdown').length) {
130      $('.dropdown_link').each(function(i) {
131        if ($(this).hasClass('active')) {
132          $(this).removeClass('active')
133        }
134      })
135      $('.dropdown_menu').each(function(i) {
136        if ($(this).hasClass('active')) {
137          $(this).removeClass('active')
138        }
139      })
140    }
141  }
142
143  function removeClickListener() {
144    document.removeEventListener('click', outsideClickListener)
145  }
146
147  document.addEventListener('click', outsideClickListener)
148}
149
150hideOnClickOutside($('.dropdown'))
151
152$(document).ready(function() {
153  toggleMobileNav()
154
155  $('body').addClass('js')
156})
157
158/*
159 * Header menu subnav
160 */
161
162$('header ul#second .open-subnav').click(function() {
163  if ($(this).next('.subnav').length > 0) {
164    var winHeight = $(window).height()
165    var gap = deviceDetectGap()

166    winHeight = winHeight + gap
167    $(this)
168      .next('.subnav')
169      .css('height', winHeight)
170      .addClass('open')
171      .animate({ opacity: 1 }, 300, function() {})
172  }
173})
174
175$(document).on('click touchstart keyup', function(e) {
176  if (
177    (!$(e.target).hasClass('block') &&
178      !$(e.target).closest('.block').length > 0 &&
179      !$(e.target).hasClass('open-subnav')) ||
180    e.keyCode == 27
181  ) {
182    e.stopPropagation()
183    $('header ul#second .subnav').animate({ opacity: 0 }, 300, function() {
184      $(this)
185        .removeClass('open')
186        .removeAttr('style')
187      $('#overlay-display-sales')
188        .show()
189        .next('.sales-info')
190        .hide()
191        .parent()
192        .removeAttr('style')
193        .next()
194        .removeAttr('style')
195        .parent()
196        .removeAttr('style')
197    })
198  }
199})
200
201$('#overlay-display-sales').click(function() {
202  var btn = $(this)
203  var sales_cont = $(this).parent()
204  var sales_width = sales_cont.width()
205  var support_cont = sales_cont.next()
206  var block = sales_cont.parent()
207  support_cont.fadeOut(200, function() {
208    sales_cont.css({ width: sales_width })
209    block.animate(
210      { width: sales_width, 'margin-left': -(sales_width / 2) },
211      300,
212      function() {
213        btn.hide()
214        sales_cont.children('.sales-info').slideDown()
215      }
216    )
217  })
218})
219
220$('.subtitle.call')
221  .parent()
222  .click(function(e) {
223    if ($(e.target).hasClass('call')) {
224      e.preventDefault()
225      var href = $(this)
226        .children('.call')
227        .data('href')
228      window.location = href
229    }
230  })
231
232function deviceDetectGap() {
233  // Assign a variable for the application being used
234  var nVer = navigator.appVersion
235  // Assign a variable for the device being used
236  var nAgt = navigator.userAgent
237  var nameOffset, verOffset, ix
238
239  // First check to see if the platform is an iPhone or iPod
240  if (
241    navigator.platform == 'iPhone' ||
242    navigator.platform == 'iPod' ||
243    navigator.platform == 'iPad'
244  ) {
245    // In Safari, the true version is after "Safari"
246    if ((verOffset = nAgt.indexOf('Safari')) != -1) {
247      // Set a variable to use later
248      var mobileSafari = 'Safari'
249    }
250  }
251
252  // If is mobile Safari set window height +60
253  if (mobileSafari == 'Safari') {
254    return 60
255  } else {
256    return 0
257  }
258}
259
260/*
261 * Accessible Nav Handlers
262 */
263
264$(document).ready(function() {
265  var navLinks = $('.primary-nav-link')
266  var dropdownMenus = $('.dropdown_menu')
267  var subnav = $('.subnav')
268  var contact = $('#contact')
269  var ARROW_DOWN = 40
270  var ARROW_UP = 38
271  var ARROW_RIGHT = 39
272  var ARROW_LEFT = 37
273  var ENTER = 13
274  var TAB = 9
275
276  // Hide all open dropdown menus
277  function hideDropdowns() {
278    navLinks.each(function() {
279      if ($(this).hasClass('dropdown_link')) {
280        if (
281          $(this)
282            .parent()
283            .siblings('.dropdown_menu')
284            .hasClass('active')
285        ) {
286          $(this).toggleClass('active')
287          $(this)
288            .parent()
289            .siblings('.dropdown_menu')
290            .toggleClass('active')
291          $(this).attr('aria-expanded', false)
292        }
293      }
294    })
295  }
296
297  function handleDropdownClick(self) {
298    // Only do work on desktop
299    var width = $(window).width()
300    if (width > 850) {
301      hideDropdowns()
302
303      // Set current active dropdown
304      if ($(self).hasClass('dropdown_link')) {
305        $(self).toggleClass('active')
306        $(self)
307          .parent()
308          .siblings('.dropdown_menu')
309          .toggleClass('active')
310        $(self).attr('aria-expanded', true)
311
312        // Move focus to first item in menu
313        $(self)
314          .parent()
315          .siblings('.dropdown_menu')
316          .find('.dropdown_menu-item:first-of-type > a')
317          .focus()
318      }
319    }
320  }
321
322  function handleDropdownKeydown(event) {
323    // Only do work on desktop
324    var width = $(window).width()
325    if (width > 850) {
326      switch (event.keyCode) {
327        case ARROW_DOWN:
328        case ENTER:
329          var self = this
330
331          handleDropdownClick(self)
332
333          // Show contact nav
334          if ($(self).is('#contact')) {
335            $(subnav).addClass('open')
336            $(subnav).css('height', '100vh')
337            $(subnav).css('opacity', '1')
338            $('.sublink:first-of-type').focus()
339          }
340
341          break
342        case ARROW_RIGHT:
343          hideDropdowns()
344
345          // Move focus to next nav link
346          if ($(this).hasClass('dropdown_link')) {
347            // Handle dropdown links
348            if ($(this).parents('.nav_item-secondary').length) {
349              // Handle secondary nav
350              $(this)
351                .parent()
352                .parent()
353                .prev('.nav_item')
354                .find('a')
355                .focus()
356            } else {
357              // Handle primary nav
358              $(this)
359                .parent()
360                .parent()
361                .next()
362                .find('a')
363                .focus()
364            }
365          } else {
366            // Handle main menu links
367            if ($(this).parents('.nav_item-secondary').length) {
368              // Handle secondary nav
369              $(this)
370                .parent()
371                .prev('.nav_item')
372                .find('a')
373                .focus()
374            } else {
375              if (
376                $(this)
377                  .parent()
378                  .next('.nav_item').length === 0
379              ) {
380                // Handle last item in primary nav
381                $(this)
382                  .parent()
383                  .parent()
384                  .siblings('.secondary-nav')
385                  .find('.nav_item-secondary:last-of-type a')
386                  .focus()
387              } else {
388                // Handle parary nav
389                $(this)
390                  .parent()
391                  .next('.nav_item')
392                  .find('a')
393                  .focus()
394              }
395            }
396          }
397          break
398        case ARROW_LEFT:
399          hideDropdowns()
400
401          // Move focus to previous nav link
402          if ($(event.target).hasClass('dropdown_link')) {
403            // Handle dropdown links
404            if (
405              $(this)
406                .parent()
407                .parent()
408                .parent()
409                .parent()
410                .hasClass('secondary-nav')
411            ) {
412              // Handle secondary nav
413              $(this)
414                .parent()
415                .parent()
416                .next('.nav_item')
417                .find('a')
418                .focus()
419            } else {
420              console.log('running second')
421              // Handle primary nav
422              $(this)
423                .parent()
424                .parent()
425                .prev('.nav_item')
426                .find('a')
427                .focus()
428            }
429          } else {
430            // Handle main nav links
431            if (
432              $(this)
433                .parent()
434                .parent()
435                .parent()
436                .hasClass('secondary-nav')
437            ) {
438              // Handle secondary nav
439              if (
440                $(this)
441                  .parent()
442                  .next('.nav_item').length === 0
443              ) {
444                // Handle last item in secondary nav
445                $(this)
446                  .parent()
447                  .parent()
448                  .parent()
449                  .siblings('.primary-nav')
450                  .find('.nav_item a#agencies')
451                  .focus()
452              } else {
453                $(this)
454                  .parent()
455                  .parent()
456                  .next('.nav_item')
457                  .find('a')
458                  .focus()
459              }
460            } else {
461              // Handle primary nav
462              $(this)
463                .parent()
464                .prev('.nav_item')
465                .find('a')
466                .focus()
467            }
468          }
469        case TAB:
470          hideDropdowns()
471      }
472    }
473  }
474
475  function handleNavItemKeydown(event) {
476    if (event.keyCode === ARROW_UP) {
477      if ($(event.target).hasClass('dropdown_menu-link')) {
478        // Move focus to main nav link if first item
479        if (
480          $(event.target)
481            .parent('li')
482            .prev('li').length == 0
483        ) {
484          $(event.target)
485            .parent()
486            .parent()
487            .siblings('.dropdown_head')
488            .find('a')
489            .focus()
490        } else {
491          // Move focus to next nav item if not first item
492          $(event.target)
493            .parent()
494            .siblings('.dropdown_menu-item')
495            .find('a')
496            .focus()
497        }
498      }
499    }
500
501    if (event.keyCode === ARROW_DOWN) {
502      // Move focus to main nav link if last item
503      if (
504        $(event.target)
505          .parent('li')
506          .next('li').length == 0
507      ) {
508        $(event.target)
509          .parent()
510          .parent()
511          .siblings('.dropdown_head')
512          .find('a')
513          .focus()
514      } else {
515        // Move focus to main nav link if not last item
516        $(event.target)
517          .parent()
518          .siblings('.dropdown_menu-item')
519          .find('a')
520          .focus()
521      }
522    }
523  }
524
525  navLinks.each(function() {
526    var self = this
527    $(this).on('click', function() {
528      handleDropdownClick(self)
529    })
530
531    $(this).on('keydown', handleDropdownKeydown)
532  })
533
534  dropdownMenus.each(function() {
535    $(this).on('keydown', handleNavItemKeydown)
536  })
537
538  contact.on('click', function() {
539    $('.sublink:first-of-type').focus()
540  })
541})
542
543
544// * IMPLEMENTING FEATURES DROPDOWN - enables dropdown on mobile menu
545const enable = $('header > div');
546
547const toggler = $('li.has-dropdown');
548if (enable.length) {
549  toggler.removeClass('open');
550
551  toggler.click(function(e) {
552    if (e.target == this) {
553      toggler.toggleClass('open');
554    }
555  });
556}