https://www.eurekausd.org/scripts/D-top-bar-Eureka.js

1// 20-10-13
2/* ---------- Top Bar D top bar Eureka Scripts ---------- */
3
4// Toggles search input field when search icon is clicked
5$('.search-icon').click(function()
6{
7  $('.search-field').fadeToggle();
8});
9
10// Fades out the search field if it is open and translate, the navigation, or schools are clicked
11$('.schools-dropdown > a, .translate-dropdown > a, .main-nav-icon').click(
12  function()
13  {
14    if ($('.search-field').css('display') !== 'none')
15    {
16      $('.search-field').fadeOut();
17    }
18  }
19);
20
21// Remove empty links
22function RemoveEmptyLinks()
23{
24  try
25  {
26    ElementEmptyCheck($('.top-bar-link'), undefined);
27  }
28  catch (error)
29  {
30    console.log(error);
31  }
32}
33
34// Over ten items in a menu makes a new column
35let dropdownsToWrap = $('.dropdown-wrap');
36let numberOfItemsInAColumn = 10;
37let groupCounter = 0;
38
39function WrapDropdowns() {
40  $(dropdownsToWrap).each(function (index) {
41    let anchors = $(this).find('a');
42    let numberOfItems = $(anchors).length;
43    // if (numberOfItems > numberOfItemsInAColumn && $(window).width() < 768) {
44    //   numberOfItemsInAColumn = Math.ceil(numberOfItems / 2);
45    // }
46
47    $(anchors).addClass('menu-' + index);
48    $(anchors).wrapAll('<div class="row" />');
49
50    if (numberOfItems > numberOfItemsInAColumn) {
51      $(this).addClass('too-many-items');
52    }
53
54    $(anchors).each(function (index) {
55      $(this).addClass('group-' + groupCounter);
56
57      if ((index + 1) % numberOfItemsInAColumn === 0 && index !== 0) {
58        groupCounter++;
59      }
60    });
61
62    for (let i = 0; i <= groupCounter; i++) {
63      if ($(this).hasClass('too-many-items')) {
64        $('.menu-' + index + '.group-' + i).wrapAll('<div class = "col-12 col-lg-auto px-md-3" />');
65      }
66
67      else {
68        $('.menu-' + index + '.group-' + i).wrapAll('<div class = "col-12 px-md-3" />');
69      }
70    }
71  });
72}
73
74// // Moves the topbar right side links into under-banner-utility when in mobile (< 992)
75let topBarLinks = $('.top-bar-link');
76let topBarLinksRound = $('.round-link-container');
77
78const topBarLinksFiltered = $(topBarLinks).filter(function (index) {
79  return $(this).find('.schools-dropdown').length > 0 || $(this).find('.translate-dropdown').length > 0;
80});
81
82function MoveTopBarLinks()
83{
84  try
85  {
86    ElementEmptyCheck($('.top-bar-link'), '992');
87    ElementEmptyCheck($('.round-link-container'), '992');
88    let topBarLinksToMove;
89    if($(window).width() < 768)
90    {
91      topBarLinksToMove = topBarLinksFiltered;
92    }
93    else
94    {
95      topBarLinksToMove = topBarLinks;
96    }
97
98    if (IsMobile())
99    {
100        if($(topBarLinksToMove).exists())
101        {
102            $('.under-banner-utility').append($(topBarLinksToMove));
103        }
104
105        else if($(topBarLinksRound).exists())
106        {
107            $('.under-banner-utility').append($(topBarLinksRound));
108        }
109
110    }
111
112    else
113    {
114        if($(topBarLinksToMove).exists())
115        {
116            $('.top-bar-title-wrapper').after($(topBarLinksToMove));
117        }
118
119        else if($(topBarLinksRound).exists())
120        {
121            $('.header .container .row').append($(topBarLinksRound));
122        }
123    }
124  }
125  catch (error)
126  {
127    console.log('Top bar links to under banner did not work');
128  }
129}
130
131// Checks if any of the dropdowns go off of the screen to the right and adds a class to them and moves them back on the screen
132let dropdowns = $('.top-bar .dropdown-menu');
133let dropdownOffset;
134let arrowOffset;
135
136function MoveOffscreenDropdowns()
137{
138  $(dropdowns).each(function()
139  {
140    $(this).show();
141    dropdownOffset = $(window).width() - $(this).outerWidth() - 12;
142    arrowOffset = $(this).offset().left;
143    if ($(this).is(':off-right') && !$(this).hasClass('main-nav-dropdown'))
144    {
145      $(this).addClass('went-off-right');
146      $(this).offset({ left: dropdownOffset });
147      $(this).children('i').offset({ left: arrowOffset });
148    }
149
150    else
151    {
152      $(this).removeClass('went-off-right');
153      $(this).css('left', '');
154      $(this).children('i').css('left', '');
155    }
156    $(this).css('display', '');
157  });
158
159  $('.dropdown-menu.main-nav-dropdown').removeClass('went-off-right');
160}
161
162// Sets padding-top of the banner equal to the height of the top-bar because of the top-bar being absolutely positioned.
163let topBar = $('.top-bar');

164let nTopBarV3Height;
165let underTopBarNav = $('.under-top-bar-nav');
166let underTopBarNavHeight;
167let banner = $('.banner');
168let subPageHighTraffic = $('.high-traffic-icon-subpage-container');
169let underBannerUtility = $('.under-banner-utility');
170let navPlaceholder = $('.nav-placeholder');
171
172function SetBannerTopPadding() {
173  try {
174      let topBarHeaderHeight = $('.top-bar-header').height();
175
176      if (CheckMobile()) {
177          $('header').css('padding-top', topBarHeaderHeight);
178      } else {
179          $('header').css('padding-top', '');
180      }
181
182  } catch (error) {}
183}
184
185// function SetBannerTopPadding()
186// {
187//   try
188//   {
189//     nTopBarV3Height = $(topBar).height();
190//     underTopBarNavHeight = $(underTopBarNav).height();
191
192//     if ($(topBar).css('position') === 'fixed' && !$('.nav-placeholder').exists())
193//     {
194//       $(banner).css('padding-top', nTopBarV3Height);
195//     }
196
197//     else if ($(topBar).css('position') !== 'fixed' && !$('.nav-placeholder').exists())
198//     {
199//       $(banner).css('padding-top', '');
200//     }
201
202//     else if ($(topBar).css('position') === 'fixed' && $('.nav-placeholder').exists())
203//     {
204//       $(navPlaceholder).height(nTopBarV3Height);
205//     }
206//   }
207//   catch (error) {}
208// }
209
210function SetSubHighTrafficTopPadding()
211{
212  nTopBarV3Height = $(topBar).height();
213  underTopBarNavHeight = $(underTopBarNav).height();
214
215  if ($(topBar).css('position') === 'fixed' && !$('.nav-placeholder').exists())
216  {
217    $(subPageHighTraffic).css('padding-top', '');
218
219    if ($('.banner').exists())
220    {
221      $(underBannerUtility).css('padding-top', '');
222    }
223
224    else
225    {
226      $(underBannerUtility).css('padding-top', nTopBarV3Height + 2);
227    }
228  }
229
230  else if ($(topBar).css('position') !== 'fixed' && !$('.nav-placeholder').exists())
231  {
232    if (IsMobile())
233    {
234      $(subPageHighTraffic).css('padding-top', underTopBarNavHeight);
235    }
236
237    else
238    {
239      $(subPageHighTraffic).css('padding-top', '');
240    }
241  }
242
243  else if ($(topBar).css('position') !== 'fixed' && $('.nav-placeholder').exists())
244  {
245    $(navPlaceholder).height(underTopBarNavHeight);
246  }
247}
248
249$(document).ready(function()
250{
251//   SetBannerTopPadding();
252//   SetSubHighTrafficTopPadding();
253  WrapDropdowns();
254  MoveTopBarLinks();
255  MoveOffscreenDropdowns();
256  RemoveEmptyLinks();
257});
258
259$(window).resize(function()
260{
261  SetBannerTopPadding();
262//   SetSubHighTrafficTopPadding();
263  MoveTopBarLinks();
264  MoveOffscreenDropdowns();
265});
266
267$(window).on('load', SetBannerTopPadding);