https://www.sharjahart.org/assets/js/site.js?v=1.3

1function handleDesktopHamburgerClick() {
2  $('.dd-header , #searchHeader, #closeHeader').click(function () {
3    // If nav menu is open, close it directly without removing bg-white
4    if ($('.dropdown-nav-menu').hasClass('active')) {
5      $('.dropdown-nav-menu.active').css('transform', 'translateY(-120%)');
6      $('.dropdown-nav-menu').removeClass('active');
7      $('.dd-nav-menu').prop('checked', false);
8    }
9    toggleDropDownHeaderDesktop();
10    $('#searchHeader , #closeHeader').toggleClass('active');
11  });
12}
13
14function handleMobileHamburgerClick() {
15  $('.dd-header-mobile').click(function () {
16    toggleDropDownHeaderMobile();
17  });
18}
19
20function handleHamburgerClick(){
21  $('.dd-header, .dd-header-mobile, #searchHeader ,#closeHeader').click(function () {
22    // If nav menu is open, close it first
23    if ($('.dropdown-nav-menu').hasClass('active')) {
24      toggleNavMenu();
25      $('.dd-nav-menu').prop('checked', false);
26    }
27    toggleDropDownHeader();
28    $('#searchHeader , #closeHeader').toggleClass('active');
29  });
30}
31
32function toggleDropDownHeaderDesktop(){  
33  var headerDesktopHeight = $(".main-header").outerHeight();
34  var roundedHeight = parseFloat(headerDesktopHeight.toFixed(2));
35    // If '.main-header' does not have the 'bg-white' class and '.dropdown-header' does not have the 'active' class
36    if (!$('.main-header').hasClass('bg-white') && !$('.dropdown-header').hasClass('active')) {
37      // Toggle the 'bg-white' class on '.main-header'
38      $('.main-header').toggleClass('bg-white');
39      // Toggle the 'active' class on '.dropdown-header'
40      $('.dropdown-header').toggleClass('active');
41      // Add the top value based on the header height
42      $('.dropdown-header.active').css('transform','translateY(' + roundedHeight + 'px)');
43    }
44    // If '.main-header' has the 'bg-white' class and '.dropdown-header' does not have the 'active' class
45    else if ($('.main-header').hasClass('bg-white') && !$('.dropdown-header').hasClass('active')) {
46      // Toggle the 'active' class on '.dropdown-header'
47      $('.dropdown-header').toggleClass('active');
48      // Add the top value based on the header height
49      $('.dropdown-header.active').css('transform','translateY(' + roundedHeight + 'px)');
50    }
51    // If '.dropdown-header' has the 'active' class and '.main-header' has the 'bg-white' class
52    else if ($('.dropdown-header').hasClass('active') && $('.main-header').hasClass('bg-white')) {
53      // Add the top value based on the header height
54      $('.dropdown-header.active').css('transform','translateY(-120%)');
55      // Toggle the 'active' class on '.dropdown-header'
56      $('.dropdown-header').toggleClass('active');
57      // If '.main-header' is at the top of the page (offset top is 0)
58      if ($('.main-header').offset().top === 0) {
59        // After a delay of 500 milliseconds, toggle the 'bg-white' class on '.main-header'
60        setTimeout(function () {
61          $('.main-header').toggleClass('bg-white');
62        }, 500);
63      }
64    }
65}
66
67function toggleDropDownHeaderMobile(){
68  var headerMobileHeight = $(".mobile-header").outerHeight();
69  var roundedHeight = parseFloat(headerMobileHeight.toFixed(2));
70
71  // If '.mobile-header' does not have the 'bg-white' class and '.dropdown-header' does not have the 'active' class
72  if (!$('.mobile-header').hasClass('bg-white') && !$('.dropdown-header').hasClass('active')) {
73    // Toggle the 'bg-white' class on '.mobile-header'
74    $('.mobile-header').toggleClass('bg-white');
75    // Toggle the 'active' class on '.dropdown-header'
76    $('.dropdown-header').toggleClass('active');
77    // Add the top value based on the header height
78    $('.dropdown-header.active').css('transform','translateY(' + roundedHeight + 'px)');
79  }
80  // If '.mobile-header' has the 'bg-white' class and '.dropdown-header' does not have the 'active' class
81  else if ($('.mobile-header').hasClass('bg-white') && !$('.dropdown-header').hasClass('active')) {
82    // Toggle the 'active' class on '.dropdown-header'
83    $('.dropdown-header').toggleClass('active');
84    // Add the top value based on the header height
85    $('.dropdown-header.active').css('transform','translateY(' + rounded

85Height + 'px)');
86  }
87  // If '.dropdown-header' has the 'active' class and '.mobile-header' has the 'bg-white' class
88  else if ($('.dropdown-header').hasClass('active') && $('.mobile-header').hasClass('bg-white')) {
89    // Add the top value based on the header height
90    $('.dropdown-header.active').css('transform','translateY(-120%)');
91    // Toggle the 'active' class on '.dropdown-header'
92    $('.dropdown-header').toggleClass('active');
93    // If '.mobile-header' is at the top of the page (offset top is 0)
94    if ($('.mobile-header').offset().top === 0) {
95      // After a delay of 500 milliseconds, toggle the 'bg-white' class on '.mobile-header'
96      setTimeout(function () {
97        $('.mobile-header').toggleClass('bg-white');
98      }, 500);
99    }
100  }
101}
102
103function toggleDropDownHeader(){
104  var headerHeight = $(".main-header").outerHeight() + $(".mobile-header").outerHeight();
105  var roundedHeight = parseFloat(headerHeight.toFixed(2));
106
107  if (!$('.dropdown-header').hasClass('active')) {
108    // Toggle the 'active' class on '.dropdown-header'
109    $('.dropdown-header').toggleClass('active');
110    // Add the top value based on the header height
111    $('.dropdown-header.active').css('transform','translateY(' + roundedHeight + 'px)');
112  } else {
113    // Add the top value based on the header height
114    $('.dropdown-header').css('transform','translateY(-120%)');
115    // Toggle the 'active' class on '.dropdown-header'
116    $('.dropdown-header').toggleClass('active');
117  }
118
119}
120
121// Desktop nav menu hamburger toggle functions
122function handleDesktopNavMenuClick() {
123  $('.dd-nav-menu').click(function () {
124    // If search dropdown is open, close it directly without removing bg-white
125    if ($('.dropdown-header').hasClass('active')) {
126      $('.dropdown-header.active').css('transform', 'translateY(-120%)');
127      $('.dropdown-header').removeClass('active');
128      $('#searchHeader, #closeHeader').toggleClass('active');
129    }
130    toggleNavMenuDesktop();
131  });
132}
133
134function toggleNavMenuDesktop() {
135  var headerDesktopHeight = $(".main-header").outerHeight();
136  var roundedHeight = parseFloat(headerDesktopHeight.toFixed(2));
137
138  if (!$('.main-header').hasClass('bg-white') && !$('.dropdown-nav-menu').hasClass('active')) {
139    $('.main-header').toggleClass('bg-white');
140    $('.dropdown-nav-menu').toggleClass('active');
141    $('.dropdown-nav-menu.active').css('transform', 'translateY(' + roundedHeight + 'px)');
142  }
143  else if ($('.main-header').hasClass('bg-white') && !$('.dropdown-nav-menu').hasClass('active')) {
144    $('.dropdown-nav-menu').toggleClass('active');
145    $('.dropdown-nav-menu.active').css('transform', 'translateY(' + roundedHeight + 'px)');
146  }
147  else if ($('.dropdown-nav-menu').hasClass('active') && $('.main-header').hasClass('bg-white')) {
148    $('.dropdown-nav-menu.active').css('transform', 'translateY(-120%)');
149    $('.dropdown-nav-menu').toggleClass('active');
150    if ($('.main-header').offset().top === 0) {
151      setTimeout(function () {
152        $('.main-header').toggleClass('bg-white');
153      }, 500);
154    }
155  }
156}
157
158function handleNavMenuClick() {
159  $('.dd-nav-menu').click(function () {
160    // If search dropdown is open, close it first
161    if ($('.dropdown-header').hasClass('active')) {
162      toggleDropDownHeader();
163      $('#searchHeader, #closeHeader').toggleClass('active');
164    }
165    toggleNavMenu();
166  });
167}
168
169function toggleNavMenu() {
170  var headerHeight = $(".main-header").outerHeight() + $(".mobile-header").outerHeight();
171  var roundedHeight = parseFloat(headerHeight.toFixed(2));
172
173  if (!$('.dropdown-nav-menu').hasClass('active')) {
174    $('.dropdown-nav-menu').toggleClass('active');
175    $('.dropdown-nav-menu.active').css('transform', 'translateY(' + roundedHeight + 'px)');
176  } else {
177    $('.dropdown-nav-menu').css('transform', 'translateY(-120%)');
178    $('.dropdown-nav-menu').toggleClass('active');
179  }
180}
181
182function handleClearSearchButton() {
183  // When the clear search button is clicked
184  $('.btn-clear-search').click(function (event) {
185    // Prevent the form from submitting
186    event.preventDefault();
187
188    // Clear the input field with class 'search-input'
189    $('.search-dd-header').val('');
190
191    $(this).hide();
192  });
193}
194
195function handleResourcesClickOnMobile() {
196  $("#btn-res-nav").on('click', function () {
197    $('.res-wrapper').toggleClass('open');
198    $(this).find('.nav-icon-plus, .nav-icon-minus').toggleClass('d-none');
199  });
200}
201
202function handleWhatsOnClickOnMobile() {
203  $("#btn-whatson-nav").on('click', function () {
204    $('.whatson-wrapper').toggleClass('open');
205    $(this).find('.nav-icon-plus, .nav-icon-minus').toggleClass('d-none');
206  });
207}
208
209function handleMoreLinksClickOnMobile() {
210  $("#btn-more-nav").on('click', function () {
211    $('.more-wrapper').toggleClass('open');
212    $(this).find('.nav-icon-plus, .nav-icon-minus').toggleClass('d-none');
213  });
214}
215
216function handleResourcesHoverOnDesktop() {
217  $(".navbar li").hover(
218    function () {
219      var $subNavbar = $(this).find(".sub-navbar");
220      if ($subNavbar.length) {
221        // Calculate top offset so sub-navbar starts at header's bottom border
222        var headerBottom = $(".main-header")[0].getBoundingClientRect().bottom;
223        var liRect = this.getBoundingClientRect();
224        $subNavbar.css('top', (headerBottom - liRect.top) + 'px');
225        // Size the invisible hover bridge (.sub-navbar::before) to the gap
226        // between the bottom of the <li> and the dropdown, so it never
227        // overlaps the nav link itself.
228        $subNavbar[0].style.setProperty('--subnav-gap', Math.max(0, headerBottom - liRect.bottom) + 'px');

229        $subNavbar.stop().slideDown("fast");
230      }
231    },
232    function () {
233      $(this).find(".sub-navbar").stop().slideUp("fast");
234    }
235  );
236}
237
238function toggleStickyHeaderHomePage() {
239  // Select the header element with id "header-main"
240  var headerDesktop = $("header.main-header");
241  var headerMobile = $("header.mobile-header");
242
243  // Get the offset top position of the header
244  //var sticky = header.offset().top;
245  var sticky = 0;
246
247  // Check if the scroll position is greater than the header's offset top position
248  if ($(window).scrollTop() > sticky) {
249    // Add the "sticky" class to the header
250    headerDesktop.addClass("bg-white");
251    headerMobile.addClass("bg-white");
252  } else if (!$(".dropdown-header").hasClass('active') && !$(".dropdown-nav-menu").hasClass('active')) {
253    // Remove the "sticky" class from the header
254    headerDesktop.removeClass("bg-white");
255    headerMobile.removeClass("bg-white");
256  }
257}
258
259function toggleStickyHeader(){
260  $("header.main-header , header.mobile-header").addClass("bg-white");
261}
262
263function alignNavMenuDropdown() {
264  var firstNavLink = $('.main-header ul.navbar > li:first-child > a');
265  if (!firstNavLink.length) return;
266  var navTextLeft = firstNavLink[0].getBoundingClientRect().left + (parseInt(firstNavLink.css('padding-left')) || 0);
267
268  // Align hamburger dropdown menu
269  var ddList = $('.dropdown-nav-menu .dd-nav-menu-list');
270  if (ddList.length) {
271    ddList.css('padding-left', '0');
272    var ddListLeft = ddList[0].getBoundingClientRect().left;
273    ddList.css('padding-left', (navTextLeft - ddListLeft) + 'px');
274  }
275
276  // Align search modal content
277  var searchRow = $('.dropdown-header > .container > .row');
278  if (searchRow.length) {
279    searchRow.css('padding-left', '0');
280    var searchRowLeft = searchRow[0].getBoundingClientRect().left;
281    searchRow.css('padding-left', (navTextLeft - searchRowLeft) + 'px');
282  }
283}
284
285function setHeaderHeight() {
286  var headerHeight =
287    $(".main-header").outerHeight(true) + $(".mobile-header").outerHeight(true);
288
289  // Get the element that comes right after the section with ID "header"
290  var afterHeader = $("section#header").next();
291
292  // Check if the next element's ID is not "hero-section"
293  if (afterHeader.attr("id") !== "hero-section") {
294    // Apply padding-top = 105px to the element
295    afterHeader.css("padding-top", headerHeight);
296  }
297}
298
299function handleFooterCollapsedButtonsOnMobile() {
300  // When any element with the class "read" is clicked
301  $('.read').click(function () {
302    // Toggle the class "oopen" on the clicked element
303    $(this).toggleClass('oopen');
304  });
305
306  // When any <h2> element within a container with the class "f_cont" is clicked
307  $('.f_cont h2').click(function () {
308    // Toggle the class "oopen" on the clicked element
309    $(this).toggleClass('oopen');
310  });
311
312  // When any element with the class "mb-toggle" is clicked
313  $('.mb-toggle').click(function () {
314    // Toggle the class "oopen" on the clicked element
315    $(this).toggleClass('oopen');
316    // Find the child element with the class "dd-none" and add the class "far fa-times"
317    $(this).find('.dd-none').addClass('far fa-times');
318    // Remove the class "far fa-bars" from the child element with the class "dd-none"
319    $(this).find('.dd-none').removeClass('far fa-bars');
320  });
321}
322
323function handleCookiesBar() {
324  // Check if cookies have been accepted
325  if (!localStorage.getItem('cookiesAccepted')) {
326    // Show the cookies bar if no cookies acceptance is found
327    $('#cookies-bar').removeClass('d-none');
328  }
329
330  // Handle click event on "Cookies Settings" button
331  $('#cookies-settings').click(function () {
332    // Show the cookies settings modal
333    $('#cookiesModal').modal('show');
334  });
335
336  // Handle click event on "Accept All" button
337  $('#accept-all').click(function () {
338    // Store the acceptance of all cookies in local storage
339    localStorage.setItem('cookiesAccepted', 'all');
340    // Hide the cookies bar
341    $('#cookies-bar').addClass('d-none');
342  });
343
344  // Handle click event on "Reject All" button
345  $('#reject-all').click(function () {
346    // Store the rejection of all cookies in local storage
347    localStorage.setItem('cookiesAccepted', 'none');
348    // Hide the cookies bar
349    $('#cookies-bar').addClass('d-none');
350  });
351
352  // Handle click event on "Save Settings" button in the modal
353  $('#save-cookies-settings').click(function () {
354    // Initialize an array to store accepted cookies types
355    let acceptedCookies = [];
356
357    // Check if the Functionality Cookies checkbox is checked
358    if ($('#functionality-cookies').is(':checked')) {
359      // Add 'functionality' to the accepted cookies array
360      acceptedCookies.push('functionality');
361    }
362
363    // Check if the Performance Cookies checkbox is checked

364    if ($('#performance-cookies').is(':checked')) {
365      // Add 'performance' to the accepted cookies array
366      acceptedCookies.push('performance');
367    }
368
369    // Check if the Targeting Cookies checkbox is checked
370    if ($('#targeting-cookies').is(':checked')) {
371      // Add 'targeting' to the accepted cookies array
372      acceptedCookies.push('targeting');
373    }
374
375    // Store the accepted cookies array as a JSON string in local storage
376    localStorage.setItem('cookiesAccepted', JSON.stringify(acceptedCookies));
377
378    // Hide the cookies settings modal
379    $('#cookiesModal').modal('hide');
380    // Hide the cookies bar
381    $('#cookies-bar').addClass('d-none');
382  });
383}
384
385function handleDropDownHeaderCloseOnDesktop(){
386  // Close the dropdown if clicked outside
387  $(document).click(function (event) {
388    var target = $(event.target);
389    var ddlHeader = $(".dropdown-header");
390    var ddlNavMenu = $(".dropdown-nav-menu");
391    if (
392      !target.closest(".dropdown-header").length &&
393      !target.closest(".dropdown-nav-menu").length &&
394      !target.closest(".main-header").length &&
395      (ddlHeader.hasClass('active') || ddlNavMenu.hasClass('active'))
396    ) {
397       // Close search dropdown if open
398       if (ddlHeader.hasClass('active')) {
399         $('.dropdown-header.active').css('transform','translateY(-120%)');
400         $('.dropdown-header').toggleClass('active');
401         $('#searchHeader , #closeHeader').toggleClass('active');
402       }
403       // Close nav menu if open
404       if (ddlNavMenu.hasClass('active')) {
405         $('.dropdown-nav-menu.active').css('transform','translateY(-120%)');
406         $('.dropdown-nav-menu').toggleClass('active');
407         $('.dd-nav-menu').prop('checked', false);
408       }
409       // If '.main-header' is at the top of the page (offset top is 0)
410       if ($('.main-header').offset().top === 0) {
411         // After a delay of 500 milliseconds, toggle the 'bg-white' class on '.main-header'
412         setTimeout(function () {
413           $('.main-header').toggleClass('bg-white');
414         }, 500);
415       }
416      $('.dd-header').prop('checked', false);
417    }
418  });
419}
420
421function handleDropDownHeaderCloseOnMobile(){
422  // Close the dropdown if clicked outside
423  $(document).click(function (event) {
424    var target = $(event.target);
425    if (
426      !target.closest(".dropdown-header").length &&
427      !target.closest(".mobile-header").length
428    ) {
429      $(".dropdown-header.active").css("transform", "translateY(-120%)");
430      $(".dropdown-header.active").toggleClass("active");
431      $(".dd-header-mobile").prop("checked", false);
432    }
433  });
434}
435
436function handleDropDownHeaderClose(){
437  // Close the dropdown if clicked outside
438  $(document).click(function (event) {
439    var target = $(event.target);
440    if (
441      !target.closest(".dropdown-header").length &&
442      !target.closest(".dropdown-nav-menu").length &&
443      !target.closest(".main-header").length
444    ) {
445      // Close search dropdown if open
446      if ($(".dropdown-header").hasClass('active')) {
447        $('.dropdown-header').css('transform','translateY(-120%)');
448        $('.dropdown-header').toggleClass('active');
449        $('#searchHeader , #closeHeader').toggleClass('active');
450      }
451      // Close nav menu if open
452      if ($(".dropdown-nav-menu").hasClass('active')) {
453        $('.dropdown-nav-menu').css('transform','translateY(-120%)');
454        $('.dropdown-nav-menu').toggleClass('active');
455        $('.dd-nav-menu').prop('checked', false);
456      }
457      $('.dd-header').prop('checked', false);
458      $('.dd-header-mobile').prop('checked', false);
459    }
460  });
461
462}
463
464function toggleNavbarClearSearchButton(){
465  if ($('.search-dd-header').val().length > 0) {
466    $('.btn-clear-search').show();
467  } else {
468    $('.btn-clear-search').hide();
469  }
470
471  $('.search-dd-header').on('input', function() {
472    if ($(this).val().length > 0) {
473      $('.btn-clear-search').show();
474    } else {
475      $('.btn-clear-search').hide();
476    }
477  });
478}
479
480function scrollFunction() {
481  if ($(window).scrollTop() > 40) {
482    scrollTopButton.css('display','inline-flex');
483  } else {
484    scrollTopButton.hide();
485  }
486}
487
488$(document).ready(function () {
489  // Defining the homepage URL
490  var homepageUrl = window.location.origin + '/'; 
491  var homepageUrlEn = window.location.origin + '/en/'; 
492  var homepageUrlAr = window.location.origin + '/ar/'; 
493
494  handleClearSearchButton();
495
496  // Check if the current URL is not the homepage URL to apply breadcrumbs spacing + fixed white header
497  if (window.location.href === homepageUrl || window.location.href === homepageUrlEn || window.location.href === homepageUrlAr) {
498    if ($(window).width() <= 991.98) {
499      // Functions to be handled only on mobile for home page
500      handleMobileHamburgerClick();
501
502      handleResourcesClickOnMobile();
503
504      handleWhatsOnClickOnMobile();
505
506      handleMoreLinksClickOnMobile();
507
508      handleFooterCollapsedButtonsOnMobile();
509    } else {
510      // Functions to be handled only on desktop for home page
511      handleDesktopHamburgerClick();
512
513      handleDesktopNavMenuClick();
514
515      handleResourcesHoverOnDesktop();
516

517      handleDropDownHeaderCloseOnDesktop();
518    }
519
520    toggleStickyHeaderHomePage();
521  
522    // Add a scroll event listener to the window
523    $(window).on("scroll", function () {
524      toggleStickyHeaderHomePage();
525    });
526
527  } else {
528    if ($(window).width() <= 991.98) {
529      handleResourcesClickOnMobile();
530
531      handleWhatsOnClickOnMobile();
532
533      handleMoreLinksClickOnMobile();
534
535      handleFooterCollapsedButtonsOnMobile();
536      
537    } else {
538
539      handleResourcesHoverOnDesktop();
540
541      handleDropDownHeaderClose();
542      
543    }
544
545    toggleStickyHeader();
546    handleHamburgerClick();
547    handleNavMenuClick();
548
549  }
550
551  handleCookiesBar();
552
553  toggleNavbarClearSearchButton();
554
555  alignNavMenuDropdown();
556});
557
558$(window).on('resize', function () {
559  setHeaderHeight();
560  alignNavMenuDropdown();
561});
562
563$(document).on("DOMContentLoaded", function () {
564  setHeaderHeight();
565  alignNavMenuDropdown();
566});
567
568// Get the button
569let scrollTopButton = $("#btn-back-to-top");
570
571// When the user scrolls down 20px from the top of the document, show the button
572$(window).scroll(function() {
573  scrollFunction();
574});
575
576// When the user clicks on the button, scroll to the top of the document
577scrollTopButton.on("click", function() {
578  $("html, body").animate({ scrollTop: 0 }, "fast");
579});