https://www.gardeningaustraliamag.com.au/wp-content/themes/gardeningaustralia-2023/js/theme.js

1/*--------------------------------------------------------------
2Theme JS
3--------------------------------------------------------------*/
4jQuery(function ($) {
5  // Close offcanvas on click a, keep .dropdown-menu open (see https://github.com/bootscore/bootscore/discussions/347)
6  $('.offcanvas a:not(.dropdown-toggle, .remove_from_cart_button)').on('click', function () {
7    $('.offcanvas').offcanvas('hide');
8  });
9
10  // Search collapse button hide if empty
11  // Deprecated v5.2.3.4, done by php if (is_active_sidebar('top-nav-search')) in header.php
12  // Remove in v6
13  if ($('#collapse-search').children().length == 0) {
14    $('.top-nav-search-md, .top-nav-search-lg').remove();
15  }
16
17  // Searchform focus
18  $('#collapse-search').on('shown.bs.collapse', function () {
19    $('.top-nav-search input:first-of-type').trigger('focus');
20  });
21
22  // Close collapse if click outside searchform
23  $(document).on('click', function (event) {
24    if ($(event.target).closest('#collapse-search').length === 0) {
25      $('#collapse-search').collapse('hide');
26    }
27  });
28
29  // Scroll to top Button
30  $(window).on('scroll', function () {
31    var scroll = $(window).scrollTop();
32
33    if (scroll > 200) {
34        $(".header").removeClass("normal").addClass("shrink");
35        
36    } else {
37        $(".header").removeClass("shrink").addClass("normal");
38    }
39
40    if (scroll >= 500) {
41      $('.top-button').addClass('visible');
42    } else {
43      $('.top-button').removeClass('visible');
44    }
45  });
46
47  // div height, add class to your content
48  $('.height-50').css('height', 0.5 * $(window).height());
49  $('.height-75').css('height', 0.75 * $(window).height());
50  $('.height-85').css('height', 0.85 * $(window).height());
51  $('.height-100').css('height', 1.0 * $(window).height());
52
53  // IE Warning
54  if (window.document.documentMode) {
55    let IEWarningDiv = document.createElement('div');
56    IEWarningDiv.setAttribute('class', 'position-fixed top-0 end-0 bottom-0 start-0 d-flex justify-content-center align-items-center');
57    IEWarningDiv.setAttribute('style', 'background:white;z-index:1999');
58    IEWarningDiv.innerHTML = '<div style="max-width: 90vw;">' + '<h1>' + bootscore.ie_title + '</h1>' + '<p className="lead">' + bootscore.ie_limited_functionality + '</p>' + '<p className="lead">' + bootscore.ie_modern_browsers_1 + bootscore.ie_modern_browsers_2 + bootscore.ie_modern_browsers_3 + bootscore.ie_modern_browsers_4 + bootscore.ie_modern_browsers_5 + '</p>' + '</div>';
59    document.body.appendChild(IEWarningDiv);
60  }
61  // IE Warning End
62
63  // search expand
64  $(".search-btn").click(function () {
65    $(".search-bar").toggleClass("active").focus;
66
67    if ($(".search-bar").hasClass("active")) {
68      $(".search-field").val("");
69      $(".search-field").focus();
70    }
71  });
72
73  $(".navbar-toggler").click(function () {
74    $("#navbarNav .search-bar").toggleClass("active").focus;
75  });
76
77  // Add class for make dropdown menu function
78  $("ul.sub-menu").parent().addClass("dropdown");
79  $("ul.sub-menu").addClass("dropdown-menu");
80
81  $('.dropdown-toggle').on('click', function(e) {
82    if ($(window).width() < 992) {
83      e.preventDefault();  // Prevents the default action
84      e.stopPropagation();  // Stops the event from bubbling up the DOM tree
85      $(this).closest('li').find('> .sub-menu').slideToggle();
86    }
87  });  
88 
89  //Slick Carousel and Synchronize with Menu
90  const $carousel = $('.slick-carousel');

91  const $carouselMenu = $('.carousel-menu button[data-slide]');
92
93  $carousel.slick(
94  );
95
96  $carousel.on('afterChange', function(event, slick, currentSlide) {
97    // Remove 'active' class from all menu items
98    $carouselMenu.removeClass('active');
99    // Add 'active' class to the current slide menu item
100    $carouselMenu.eq(currentSlide).addClass('active');
101  });
102
103  // Custom Navigation Arrows
104  $carouselMenu.on('click', function() {
105    const slideIndex = $(this).data('slide');
106    // Go to the selected slide
107    $carousel.slick('slickGoTo', slideIndex);
108  });  
109
110  // Show images inside the .slick-carousel container
111   $('.carousel-img__desktop').css('display', 'block');
112   $('.carousel-home__link .article-box__body').css('display', 'block')
113
114	// make it as accordion for smaller screens
115	if (window.innerWidth > 992) {
116		document.querySelectorAll('.navbar .nav-item').forEach(function (everyitem) {
117
118			everyitem.addEventListener('mouseover', function (e) {
119
120				let el_link = this.querySelector('a[data-bs-toggle]');
121
122				if (el_link != null) {
123					let nextEl = el_link.nextElementSibling;
124					el_link.classList.add('show');
125					nextEl.classList.add('show');
126				}
127
128				});
129				everyitem.addEventListener('mouseleave', function (e) {
130				let el_link = this.querySelector('a[data-bs-toggle]');
131
132				if (el_link != null) {
133					let nextEl = el_link.nextElementSibling;
134					el_link.classList.remove('show');
135					nextEl.classList.remove('show');
136				}
137
138
139			})
140		});
141
142	} // end if innerWidth
143
144	// print
145	var printLink = document.getElementById("print-link");
146  
147	if (printLink) {
148		printLink.addEventListener("click", function(e) {
149			e.preventDefault(); // Prevent the link from navigating			
150			window.print(); // Open the print dialog
151		});
152	}
153
154	// Gravity Forms functionality
155	// This function checks to see if there is a competition form & concats the first and last name to a hidden full name input if so
156	if(document.querySelector(".ginput_container_text input[value='[FULLNAME]']")){
157		// set state variables for name fields
158		let firstName = '';
159		let lastName = '';
160		let fullName = '';
161		
162		// get form DOM elements
163		let fullNameInput = document.querySelector(".ginput_container_text input[value='[FULLNAME]']");
164		let form = fullNameInput.parentNode.parentNode.parentNode ;
165		let firstNameInput = form.querySelectorAll('input')[0];
166		let lastNameInput = form.querySelectorAll('input')[1];
167
168		// Add event listeners on the input filed changes
169		firstNameInput.addEventListener('change' , (e) => {firstName = e.target.value; setFullName()});
170		lastNameInput.addEventListener('change' , (e) => {lastName = e.target.value; setFullName()});
171
172		// Set the full name input
173		function setFullName(){
174		fullName = firstName + " " + lastName;
175		fullNameInput.value = fullName;
176		}
177	}
178
179	// This looks for CSS class of limit-x applied to checkboxes to limit the maximum number allowed to be selected
180	// Find all checkbox groups in Gravity Forms and apply functionality
181    $('form .gfield--type-checkbox').each(function() {
182        // Look for custom class like 'limit-3', 'limit-5', etc.
183        var checkboxGroup = $(this);
184        var limitClass = checkboxGroup.attr('class').split(/\s+/).find(function(cls) {
185            return cls.startsWith('limit-');
186        });
187
188        if (!limitClass) return; // Skip if no limit class is found
189
190        var maxAllowed = parseInt(limitClass.split('-')[1], 10); // Extract the number from class
191        var checkboxes = checkboxGroup.find('input[type="checkbox"]');
192
193        checkboxes.change(function() {
194            var checkedCount = checkboxes.filter(':checked').length;
195
196            if (checkedCount >= maxAllowed) {
197                checkboxes.not(':checked').prop('disabled', true);
198            } else {
199                checkboxes.prop('disabled', false);
200            }
201        });
202    });
203}); // jQuery End