https://www.fph.org.uk/scripts/main.js

1let ARKOM = window.ARKOM || {};
2
3/* 
4##########################################
5### Home - Main Banner Slider
6########################################## 
7*/
8
9ARKOM.carouselPrimary = function () {
10	var options = {
11		accessibility: true,
12		adaptiveHeight: true,
13		autoplay: false,
14		autoplaySpeed: 4000,
15		arrows: true,
16		speed: 500,
17		dots: false,
18		prevArrow: '.slick-prev',
19		nextArrow: '.slick-next',
20		pauseOnHover: false,
21		draggable: true,
22		swipe: true,
23		touchMove: true,
24		fade: true,
25		variableWidth: false,
26		useCSS: false,
27		lazyLoad: 'ondemand',
28		vertical: false,
29		responsive: [
30			{
31				breakpoint: 1275,
32				settings: {
33					fade: true,
34					arrows: false,
35					dots: true
36				}
37			}
38		]
39	}
40
41	$('.carousel-primary').each(function () {
42		var carousel = $(this).find('.carousel');
43		var appendDots = $(this).find('.carousel-primary__dots');
44		var prevArrow = $(this).find('.carousel-primary__arrows .slick-prev');
45		var nextArrow = $(this).find('.carousel-primary__arrows .slick-next');
46
47
48		var $bannerFirstSlide = carousel.find(".slide:first-child");
49
50		carousel.on('init', function (e, slick) {
51			var $firstAnimatingElements = $bannerFirstSlide.find('[data-animation-in]');
52			doAnimationsIn($firstAnimatingElements);
53		});
54
55		carousel.slick($.extend({}, options, { appendDots: appendDots, prevArrow: prevArrow, nextArrow: nextArrow, }));
56
57		carousel.on('beforeChange', function (e, slick, currentSlide, nextSlide) {
58			var $animatingElements = $('.slide[data-slick-index="' + currentSlide + '"]').find('[data-animation-out]');
59			doAnimationsOut($animatingElements);
60		});
61
62		carousel.on('beforeChange', function (e, slick, currentSlide, nextSlide) {
63			var $animatingElements = $('.slide[data-slick-index="' + nextSlide + '"]').find('[data-animation-in]');
64			doAnimationsIn($animatingElements);
65		});
66	});
67
68}
69
70function doAnimationsIn(elements) {
71	
72	var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
73	elements.each(function () {
74		var $this = $(this);
75		var $animationDelay = $this.data('delay-in');
76		var $animationType = 'animate__animated ' + $this.data('animation-in');
77		console.log()
78		$this.css({
79			'animation-delay': $animationDelay,
80			'-webkit-animation-delay': $animationDelay
81		});
82		$this.addClass($animationType).one(animationEndEvents, function () {
83			$this.removeClass($animationType);
84		});
85	});
86}
87
88function doAnimationsOut(elements) {
89	var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
90	elements.each(function () {
91		var $this = $(this);
92		var $animationDelay = $this.data('delay-out');
93		var $animationType = 'animate__animated ' + $this.data('animation-out');
94		$this.css({
95			'animation-delay': $animationDelay,
96			'-webkit-animation-delay': $animationDelay
97		});
98		$this.addClass($animationType).one(animationEndEvents, function () {
99			$this.removeClass($animationType);
100		});
101	});
102}
103
104/*
105##########################################
106### Homepage - Content Spots Carousel
107##########################################
108*/
109
110ARKOM.carouselSecondary = function () {
111	var options = {
112		accessibility: true,
113		autoplay: false,
114		autoplaySpeed: 4000,
115		arrows: false,
116		speed: 500,
117		dots: false,
118		prevArrow: '.slick-prev',
119		nextArrow: '.slick-next',
120		pauseOnHover: false,
121		draggable: true,
122		swipe: true,
123		touchMove: true,
124		fade: false,
125		variableWidth: true,
126		useCSS: false,
127		lazyLoad: 'ondemand',
128		vertical: false,
129		responsive: [
130			{
131				breakpoint: 768,
132				settings: {
133					fade: false
134				}
135			}
136		]
137	}
138
139	$('.carousel-secondary').each(function () {
140		var carousel = $(this).find('.carousel');
141		var appendDots = $(this).find('.carousel-secondary__dots');
142		var prevArrow = $(this).find('.carousel-secondary__arrows .slick-prev');
143		var nextArrow = $(this).find('.carousel-secondary__arrows .slick-next');
144
145		carousel.slick($.extend({}, options, { appendDots: appendDots, prevArrow: prevArrow, nextArrow: nextArrow }));
146	});
147}
148
149
150/* 
151##########################################
152### Home - Main Banner Slider
153########################################## 
154*/
155
156ARKOM.latestNewsCarousel = function () {
157	var options = {
158		accessibility: true,
159		adaptiveHeight: true,
160		autoplay: false,
161		autoplaySpeed: 4000,
162		arrows: true,
163		speed: 500,
164		dots: false,
165		prevArrow: '.slick-prev',
166		nextArrow: '.slick-next',
167		pauseOnHover: false,
168		draggable: true,
169		swipe: true,
170		touchMove: true,
171		fade: true,
172		variableWidth: false,

173		useCSS: false,
174		lazyLoad: 'ondemand',
175		vertical: false,
176		responsive: [
177			{
178				breakpoint: 768,
179				settings: {
180					fade: false,
181					arrows: false,
182					dots: true
183				}
184			}
185		]
186	}
187
188	function activateCarousel() {
189		$('.carousel-latest-news').each(function () {
190			var carousel = $(this).find('.carousel');
191
192			if (!carousel.hasClass('slick-initialized')) {
193				var appendDots = $(this).find('.carousel-latest-news__dots');
194				var prevArrow = $(this).find('.carousel-latest-news__arrows .slick-prev');
195				var nextArrow = $(this).find('.carousel-latest-news__arrows .slick-next');
196
197				carousel.slick($.extend({}, options, { appendDots: appendDots, prevArrow: prevArrow, nextArrow: nextArrow }));
198			}
199		});
200	}
201
202	function deactivateCarousel() {
203		var $carousel = $('.carousel-latest-news .carousel');
204
205		if ($carousel.hasClass('slick-initialized')) {
206			$carousel.slick('unslick');
207		}
208	}
209
210	var resizeTimeout;
211
212	function handleViewportChange() {
213		// ... existing code ...
214
215		// Debounce the execution of activateCarousel() or deactivateCarousel()
216		clearTimeout(resizeTimeout);
217		resizeTimeout = setTimeout(function () {
218			var isMobile = window.innerWidth <= 767;
219
220			if (isMobile) {
221				activateCarousel();
222			} else {
223				deactivateCarousel();
224			}
225		}, 100); // Adjust the debounce delay as needed
226	}
227
228	$(window).on('resize', handleViewportChange);
229	handleViewportChange();
230
231}
232
233/* 
234##########################################
235### Article Images
236########################################## 
237*/
238
239ARKOM.pageImages = function () {
240
241	var options = {
242		accessibility: true,
243		autoplay: false,
244		autoplaySpeed: 4000,
245		arrows: true,
246		speed: 500,
247		dots: true,
248		prevArrow: '.slick-prev',
249		nextArrow: '.slick-next',
250		pauseOnHover: false,
251		draggable: true,
252		swipe: true,
253		touchMove: true,
254		fade: true,
255		variableWidth: false,
256		useCSS: false,
257		lazyLoad: 'ondemand',
258		vertical: false,
259		responsive: [
260			{
261				breakpoint: 768,
262				settings: {
263					fade: false
264				}
265			}
266		]
267	}
268
269	$('.page-images').each(function () {
270		var carousel = $(this).find('.carousel');
271		var appendDots = $(this).find('.page-images__dots');
272		var prevArrow = $(this).find('.page-images__arrows .slick-prev');
273		var nextArrow = $(this).find('.page-images__arrows .slick-next');
274
275		carousel.slick($.extend({}, options, { appendDots: appendDots, prevArrow: prevArrow, nextArrow: nextArrow }));
276	});
277
278}
279
280/*
281##########################################
282### Search Bar
283##########################################
284*/
285
286ARKOM.searchBar = function () {
287
288	$('button[data-search="search-bar"]').on('click', function (event) {
289		event.preventDefault();
290		$('#search-bar').fadeIn(0, function () {
291			$("body").addClass('search-bar-on');
292		});
293		$('#search-bar > form > input[type="search"]').focus();
294	});
295
296	$('#search-bar-close').on('click', function (event) {
297		$("#search-bar").fadeOut(100, function () {
298			$("body").removeClass('search-bar-on');
299			clearSuggestions();
300		});
301	});
302
303	$('#search-bar, #search-bar-close').on('keyup', function (event) {
304		if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
305			$("#search-bar").fadeOut(100, function () {
306				$(this).removeClass('open');
307				clearSuggestions();
308			});
309		}
310	});
311
312	$(document).on("keyup", "#search-bar-query", function (e) {
313		if (e.keyCode != 27) {
314			var $form = $('#search-bar-form');
315			var $input = $("#search-bar-query");
316
317			$('.autoGenerated').remove();
318
319			$('<input>').attr({
320				type: 'hidden',
321				name: 'query',
322				class: 'autoGenerated',
323				value: $input.val()
324			}).appendTo($form);
325
326			if ($input.val().length > 2) {
327				$form.submit();
328				$('#search-bar-results').fadeIn(300);
329				$('#search-bar-query').addClass("search-active");
330			}
331			else {
332				clearSuggestions();
333			}
334		}
335	});
336
337	$(document).on("keyup", "#search-page-query", function (e) {
338		if (e.keyCode != 27) {
339			var $form = $('#search-page-form');
340			var $input = $("#search-page-query");
341
342			$('.autoGenerated').remove();
343
344			$('<input>').attr({
345				type: 'hidden',
346				name: 'query',
347				class: 'autoGenerated',
348				value: $input.val()
349			}).appendTo($form);
350
351			if ($input.val().length > 2) {
352				$form.submit();
353				$('#search-page-results').fadeIn(300);
354				$('#search-page-query').addClass("search-active");
355			}
356			else {
357				clearSuggestions();
358			}
359		}
360	});
361
362	$(document).on("keyup", "#lookingfor-bar-query", function (e) {
363		if (e.keyCode != 27) {
364			var $form = $('#lookingfor-bar-form');
365			var $input = $("#lookingfor-bar-query");
366
367			$('.autoGenerated').remove();
368
369			$('<input>').attr({
370				type: 'hidden',
371				name: 'query',
372				class: 'autoGenerated',
373				value: $input.val()
374			}).appendTo($form);
375
376			if ($input.val().length > 2) {
377				$form.submit();
378				$('#lookingfor-bar-results').fadeIn(300);
379				$('#lookingfor-bar-query').addClass("search-active");
380			}
381			else {
382				clearSuggestions();
383			}
384		}
385	});
386
387	function clearSuggestions() {
388		$('#search-bar-results').html('');
389	}
390}
391
392/*
393##########################################
394###  JQuery Validation Bootstrap Clases
395##########################################
396*/
397ARKOM.setDefaultValidationClasses = function () {
398	$.validator.setDefaults({
399		errorClass: "",
400		validClass: "",
401		highlight: function (element, errorClass, validClass) {
402			$(element).addClass("is-invalid").removeClass("is-valid");

403			$(element.form).find("[data-valmsg-for=" + element.id + "]").addClass("invalid-feedback");
404		},
405		unhighlight: function (element, errorClass, validClass) {
406			$(element).addClass("is-valid").removeClass("is-invalid");
407			$(element.form).find("[data-valmsg-for=" + element.id + "]").removeClass("invalid-feedback");
408		},
409	});
410}
411
412/*
413##########################################
414###  Match Height
415##########################################
416*/
417
418ARKOM.matchHeight = function () {
419	var MHOptions = {
420		byRow: true,
421		property: 'height',
422		target: null,
423		remove: false
424	};
425
426	var matchHeightFn = function () {
427
428	};
429
430	setTimeout(matchHeightFn, 700);
431}
432
433/*
434##########################################
435###  Nav Hover Fix
436##########################################
437*/
438
439navigationBreak = 1030;
440
441$(document).ready(function () {
442	$('.navbar .nav-item.dropdown').hover(function (e) {
443		$this = $(this);
444		if ($(window).width() >= navigationBreak) {
445			var el_link = $(this).find('[data-bs-toggle]');
446			if (el_link.length > 0) {
447				var nextEl = el_link.siblings(".dropdown-menu");
448				console.log(nextEl);
449				$this.addClass('nav-show-active');
450				nextEl.stop(true, true).delay(200).fadeIn(300);
451			}
452		}
453	}, function () {
454		if ($(window).width() >= navigationBreak) {
455			var el_link = $(this).find('[data-bs-toggle]');
456			if (el_link.length > 0) {
457				var nextEl = el_link.siblings(".dropdown-menu");
458				console.log(nextEl);
459				$this.removeClass('nav-show-active');
460				nextEl.stop(true, true).fadeOut(200);
461			}
462		}
463	});
464
465	$(".navbar-nav > .nav-item.dropdown > .nav-link").on("touchstart click", function (e) {
466		if (!$(this).hasClass("no-link")) {
467			e.preventDefault();
468			
469				$(this).siblings(".dropdown-menu").removeClass("show");
470				window.location = e.target.href;
471			
472		} else {
473			$(this).siblings(".dropdown-menu").removeClass("show");
474		}
475	});
476
477	$(".navbar-nav > .nav-item.dropdown > .nav-arrow").on("touchstart click", function (e) {
478		e.preventDefault();
479		$this = $(this);
480		navItemActive = $this.parent().hasClass("nav-show-active");
481
482		if ($(e.target).closest('.nav-arrow').length > 0 && navItemActive) {
483			$(".navbar .nav-item").removeClass("nav-show-active");
484			$(".navbar .nav-item > .dropdown-menu").removeClass("show");
485		} else if (navItemActive) {
486			window.location = e.target.href;
487			$(".navbar .nav-item").removeClass("nav-show-active");
488			$(".navbar .nav-item > .dropdown-menu").removeClass("show");
489			$this.parent().addClass("nav-show-active");
490			$this.next().addClass("show");
491		} else {
492			$(".navbar .nav-item").removeClass("nav-show-active");
493			$(".navbar .nav-item > .dropdown-menu").removeClass("show");
494			$this.parent().addClass("nav-show-active");
495			$this.next().addClass("show");
496		}
497
498
499	});
500
501	$(document).on("touchstart click", function (e) {
502		var navbar = $(".navbar");
503		if (!navbar.is(e.target) && navbar.has(e.target).length === 0) {
504			$(".navbar .nav-item").removeClass("nav-show-active");
505			$(".navbar .nav-item > .dropdown-menu").removeClass("show");
506		}
507	});
508});
509
510
511/* 
512########################################## 
513###  Call Functions
514########################################## 
515*/
516
517ARKOM.setDefaultValidationClasses();
518$(function () {
519	ARKOM.searchBar();
520	ARKOM.pageImages();
521	ARKOM.matchHeight();
522
523	$(".map-element").addClass("clickable");
524});
525
526
527function isTouchEvent() {
528	return 'ontouchstart' in document.documentElement
529		|| navigator.maxTouchPoints > 0
530		|| navigator.msMaxTouchPoints > 0;
531}
532
533function wrapTablesInDiv(className) {
534	const parentDiv = document.querySelector('.' + className);
535	if (!parentDiv) return;
536
537	const tables = parentDiv.querySelectorAll('table');
538
539	tables.forEach(table => {
540		const wrapperDiv = document.createElement('div');
541		wrapperDiv.classList.add('table-responsive');
542
543		table.parentNode.insertBefore(wrapperDiv, table);
544		wrapperDiv.appendChild(table);
545	});
546}
547
548wrapTablesInDiv('article');
549
550$(".navbar-toggler").on("click", function () {
551	if ($(this).hasClass("collapsed")) {
552		$("body").removeClass("nav-open");
553	} else {
554		$("body").addClass("nav-open");
555	}
556})