https://www.whitbread.co.uk/wp-content/themes/whitbread/assets/js/blocks.js?ver=24091514202618

1jQuery(document).ready(function ($) {
2	// -----------------------------------------------------------------------------
3	// business model
4	// -----------------------------------------------------------------------------
5	$('.block-business-model').each(function () {
6		if ($(this).length === 0) {
7			return;
8		}
9
10		const $block = $(this);
11		const $hitAreaItems = $block.find('.hit-area-item');
12		const $modelDiagrams = $block.find('.model-diagram');
13		const $accordionItems = $block.find('.model-accordion-item');
14		const $modelDiagramHover = $block.find('.model-diagram-hover');
15		const $accordionTitles = $block.find('.model-accordion-item-title');
16		const $accordionControls = $block.find('.model-accordion-controls');
17
18		const openSection = (modelId) => {
19			if (
20				$accordionItems
21					.filter(`[data-model-id="${modelId}"]`)
22					.hasClass('active')
23			) {
24				return;
25			}
26
27			$accordionItems
28				.removeClass('active')
29				.find('.model-accordion-item-content')
30				.slideUp(300);
31
32			// Open the target accordion item
33			const $targetAccordionItem = $accordionItems.filter(
34				`[data-model-id="${modelId}"]`
35			);
36			$targetAccordionItem
37				.addClass('active')
38				.find('.model-accordion-item-content')
39				.slideDown(300);
40
41			// Show the corresponding diagram
42			$modelDiagrams.removeClass('active').hide();
43			$modelDiagrams
44				.filter(`[data-model-id="${modelId}"]`)
45				.addClass('active')
46				.fadeIn();
47
48			// update the accordion controls
49			$accordionControls
50				.find('.model-accordion-arrow-control-title')
51				.text(`${Number(modelId) + 1} / ${$accordionItems.length}`);
52		};
53
54		const addHoverStates = (modelId) => {
55			$modelDiagramHover.removeClass('has-hover-state');
56			$modelDiagramHover
57				.filter(`[data-model-id="${modelId}"]`)
58				.addClass('has-hover-state');
59			$accordionItems.removeClass('has-hover-state');
60			$accordionItems
61				.filter(`[data-model-id="${modelId}"]`)
62				.addClass('has-hover-state');
63		};
64
65		// Event listener for hit area clicks (image map)
66		$hitAreaItems.on('click', function () {
67			const modelId = $(this).data('hitAreaId');
68			openSection(modelId);
69		});
70
71		$hitAreaItems.on('keydown', function (event) {
72			if (event.key !== 'Enter' && event.key !== ' ') {
73				return;
74			}
75
76			event.preventDefault();
77			const modelId = $(this).data('hitAreaId');
78			openSection(modelId);
79		});
80
81		// Event listener for accordion title clicks
82		$accordionTitles.on('click', function () {
83			const $accordionItem = $(this).parent('.model-accordion-item');
84			const modelId = $accordionItem.data('modelId');
85
86			// If the clicked accordion item is not already active, open it
87			if (!$accordionItem.hasClass('active')) {
88				openSection(modelId);
89			}
90		});
91
92		// Event listener for hit area hover
93		$hitAreaItems.on('mouseenter', function () {
94			const modelId = $(this).data('hitAreaId');
95			addHoverStates(modelId);
96		});
97
98		$hitAreaItems.on('mouseleave', function () {
99			$modelDiagramHover.removeClass('has-hover-state');
100			$accordionItems.removeClass('has-hover-state');
101		});
102
103		$accordionTitles.on('mouseenter', function () {
104			const modelId = $(this).parent('.model-accordion-item').data('modelId');
105			addHoverStates(modelId);
106		});
107
108		$accordionTitles.on('mouseleave', function () {
109			$modelDiagramHover.removeClass('has-hover-state');
110			$accordionItems.removeClass('has-hover-state');
111		});
112
113		$accordionControls
114			.find('.model-accordion-arrow-control.prev')
115			.on('click', function () {
116				const currentIndex = $accordionItems.index(
117					$accordionItems.filter('.active')
118				);
119				const prevIndex =
120					(currentIndex - 1 + $accordionItems.length) % $accordionItems.length;
121				openSection(prevIndex);
122			});
123
124		$accordionControls
125			.find('.model-accordion-arrow-control.next')
126			.on('click', function () {
127				const currentIndex = $accordionItems.index(
128					$accordionItems.filter('.active')
129				);
130				const nextIndex = (currentIndex + 1) % $accordionItems.length;
131				openSection(nextIndex);
132			});
133
134		// Initialize: Ensure the first section is active on load
135		if ($modelDiagrams.length > 0 && $accordionItems.length > 0) {
136			openSection('0'); // Activate the first item (index 0)
137		}
138	});
139
140	// -----------------------------------------------------------------------------
141	// five year plan sliders
142	// -----------------------------------------------------------------------------
143
144	$('.block-five-year-plan-slider').each(function () {
145		if ($(this).length === 0) {
146			return;
147		}
148
149		const $block = $(this);
150		const $swiperNext = $block.find('.custom-slider-arrow.next');
151		const $swiperPrev = $block.find('.custom-slider-arrow.prev');
152		const $swiperWrap = $block.find('.swiper.swiper-five-year-plan');
153
154		// Add check for swiper container and its content
155		if (
156			$swiperWrap.length === 0 ||
157			$swiperWrap.find('.swiper-slide').length === 0
158		) {
159			return;
160		}
161
162		const swiper = new Swiper($swiperWrap[0], {
163			slidesPerView: 1,
164			spaceBetween: 30,
165			loop: true,
166			speed: 1000,
167			effect: 'fade',
168			fadeEffect: {
169				crossFade: true,
170			},
171		});
172
173		$swiperPrev.on('click', () => {
174			swiper.slidePrev();
175		});
176
177		$swiperNext.on('click', () => {
178			swiper.slideNext();
179		});
180	});
181});