https://www.cchr.nl/js/routes/home.js

1
2(function () {
3
4	// handlerLoaded = false;
5	// var precept_video;
6
7	// JavascriptHandler.AddHandler(function() {
8
9	// check if it is root page
10	// if(!handlerLoaded && window.location.pathname == "/") {
11	// handlerLoaded = true;
12
13	JavascriptHandler.AddDestructor(function () {
14		// handlerLoaded =  false;
15		$(window).unbind('scroll');
16	});
17
18	initSearch();
19	initMainMenu();
20	initSubscribeForm();
21
22
23	function initSubscribeForm() {
24		if ($('.subscribe-form').length == 0) {
25			return;
26		}
27
28		function submitForm($form, formRes) {
29			$.ajax({
30				url: $form.attr('action'),
31				type: $form.attr('method'),
32				data: formRes,
33				success: function (data) {
34					$form.html('Thank you for subscribing!');
35				},
36				error: function (xhr, status, error) {
37					var err = xhr.responseText;
38					window.console && console.error && console.error(err);
39					alert('Error submitting your form: ' + xhr.responseText);
40				}
41			});
42
43		}
44
45		$('.subscribe-form').on('submit', function (e) {
46			e.preventDefault();
47			var data = $(".subscribe-form :input").serializeArray();
48			submitForm($('.subscribe-form'), data);
49			// console.log(data);
50		});
51	}
52
53	function initSearch() {
54		/**
55		 * main.js
56		 * http://www.codrops.com
57		 *
58		 * Licensed under the MIT license.
59		 * http://www.opensource.org/licenses/mit-license.php
60		 *
61		 * Copyright 2016, Codrops
62		 * http://www.codrops.com
63		 */
64		; (function (window) {
65
66			'use strict';
67
68			// disabled for now
69			return;
70
71			if (document.querySelector('#shell #btn-search') == undefined) {
72				return;
73			}
74
75			var mainContainer = document.querySelector('#shell'),
76				openCtrl = document.querySelector('#shell #btn-search'),
77				closeCtrl = document.querySelector('#btn-search-close'),
78				searchContainer = document.querySelector('.search'),
79				inputSearch = searchContainer.querySelector('.search__input');
80
81			function init() {
82				initEvents();
83			}
84
85			function initEvents() {
86				openCtrl.addEventListener('click', openSearch);
87				closeCtrl.addEventListener('click', closeSearch);
88				document.addEventListener('keyup', function (ev) {
89					// escape key.
90					if (ev.keyCode == 27) {
91						closeSearch();
92					}
93				});
94			}
95
96			function openSearch() {
97				mainContainer.classList.add('main-wrap--move');
98				searchContainer.classList.add('search--open');
99				inputSearch.focus();
100				// $('body').css('overflow', 'hidden');
101			}
102
103			function closeSearch() {
104				mainContainer.classList.remove('main-wrap--move');
105				searchContainer.classList.remove('search--open');
106				inputSearch.blur();
107				inputSearch.value = '';
108				// $('body').css('overflow', '');
109			}
110
111			init();
112
113		})(window);
114	}
115
116	function initMainMenu() {
117		// https://css-tricks.com/scroll-fix-content/
118		var main_navbar = $(".navbar-main");
119		$(window).on('scroll', function (e) {
120			if (document.body.scrollTop > 26) {
121				if (!main_navbar.hasClass("fixed")) {
122					main_navbar.addClass("fixed");
123				}
124			} else {
125				main_navbar.removeClass("fixed");
126			}
127		});
128
129		var revertBack = true;
130
131		// preload background for mobile menu
132
133		img1 = new Image();
134		img1.src = "/images/cchr-logo-blur.jpg";
135
136
137	}
138
139
140})();
141
142if (window.location.pathname == "/") {
143	var HomeHeader = function () {
144		this.percentTime = 0;
145		this.isPause = false;
146		this.time = 10;
147		this.muted = true;
148		this.init();
149	}
150
151	HomeHeader.prototype = {
152
153		init: function () {
154			var self = this;
155
156			 var homeSwiper = new Swiper('.home-header--carousel', {
157				speed: 400,
158				spaceBetween: 0,
159				slidesPerView: 1,
160				simulateTouch: false,
161				loop: true,
162				effect: 'fade',
163				navigation: {
164					nextEl: '.home-header--carousel .swiper-button-next',
165					prevEl: '.home-header--carousel .swiper-button-prev',
166				},
167				on: {
168					init: function (swiper) {
169						self.swiper = this;
170						$(this.el).addClass('visible');
171						self.start();
172
173						setTimeout(function () {
174							self.playPreview();
175						}, 500);
176
177						$('.mobile-header-sidebar').html(
178							$(this.slides[ this.activeIndex ]).find('.sidebar-side').html()
179						);
180					},
181					slideChange: self.slideChange,
182				},
183			});
184
185			self.homeSwiper = homeSwiper;
186
187			// When user clicks muted icon, treat it as intent to watch with sound
188			$('.video-preview__label-icon').on('click', function () {
189				self.handleUserPlay();
190			});
191

192			// Also handle click anywhere on the video to start from beginning with controls and sound
193			$('.home-header--carousel').on('click', '.video-js', function () {
194				self.handleUserPlay();
195			});
196
197			$('.home-header--carousel .swiper-button-next, .home-header--carousel .swiper-button-prev').click(function (event) {
198				if (event && event.originalEvent) {
199					self.isPause = true;
200					$(".home-header--progress-bar").hide();
201				}
202			});
203		},
204
205		start: function () {
206			var self = this;
207			//reset timer
208			self.percentTime = 0;
209			self.isPause = false;
210			//run interval every 0.01 second
211			self.tick = setInterval(self.interval, 10*12); // 120 seconds
212		},
213
214		interval: function () {
215			var self = window.homeHeader;
216			if (self.isPause === false) {
217				var $elem = $(".home-header--progress-bar");
218				if (self.percentTime > 0) {
219					$elem.show();
220				}
221
222				self.percentTime += 1 / self.time;
223
224				self.percentTime = Math.min(100, self.percentTime);
225				$elem.css({
226					'-webkit-transform': 'scaleX(' + (self.percentTime / 100) + ')',
227					'-moz-transform': 'scaleX(' + (self.percentTime / 100) + ')',
228					'-ms-transform': 'scaleX(' + (self.percentTime / 100) + ')',
229					'-o-transform': 'scaleX(' + (self.percentTime / 100) + ')',
230					'transform': 'scaleX(' + (self.percentTime / 100) + ')'
231				});
232
233				//if self.percentTime is equal or greater than 100
234				if (self.percentTime >= 100) {
235					//slide to next item
236					$elem.hide();
237					$('.home-header--carousel .swiper-button-next').click();
238					self.percentTime = 0;
239				}
240			}
241		},
242
243		slideChange: function () {
244			var self = window.homeHeader;
245			var players = videojs.getAllPlayers();
246			for (var i = 0; i < players.length; i++) {
247				var player = players[i];
248				if($(player.el()).closest('.home-header--carousel').length > 0) {
249					player.pause();
250				}
251			}
252			if(!self) {
253				return;
254			}
255			if (self.tick) {
256				clearTimeout(self.tick);
257			}
258			//start again
259			if (!self.isPause) {
260				self.start();
261			}
262
263			$('.mobile-header-sidebar').html(
264				$(self.homeSwiper.slides[ self.homeSwiper.activeIndex ]).find('.sidebar-side').html()
265			);
266
267			// Ensure next slide preview starts muted again
268			self.muted = true;
269
270			self.playPreview();
271		},
272
273		playPreview: function () {
274			var self = window.homeHeader || this;
275			// autoplay active video
276			var $el = $(self.swiper.slides[self.swiper.activeIndex]).find('.video-js');
277
278			var video = videojs.players[$el[0].id];
279
280			$el.addClass('videojs-autoplay__loading');
281
282			$el.closest('.video-16-9').addClass('cursor-pointer');
283
284			video.muted(self.muted);
285			video.controls(false);
286			// Determine preview start time from HTML attribute when available (data-preview-start only)
287			var fallbackStart = 10;
288			var startTime = fallbackStart;
289			if ($el && $el.length) {
290				var raw = $el.attr('data-preview-start');
291				if (raw != null && raw !== '') {
292					var num = parseFloat(raw);
293					if (!isNaN(num) && num >= 0) {
294						startTime = num;
295					}
296				}
297			}
298
299			try { video.currentTime(startTime); } catch (e) {
300				// If setting currentTime fails due to metadata not loaded yet, try once on loadedmetadata
301				video.one && video.one('loadedmetadata', function(){
302					try { video.currentTime(startTime); } catch (e2) {}
303				});
304			}
305			video.one("timeupdate", function () {
306				$el.removeClass('videojs-autoplay__loading');
307			});
308
309			video.play();
310		},
311
312		// Unified user-intent handler: unmute, restart once, show controls, and pause auto-advance
313		handleUserPlay: function () {
314			var self = window.homeHeader || this;
315			if (!self || !self.swiper) { return; }
316			var $el = $(self.swiper.slides[self.swiper.activeIndex]).find('.video-js');
317			if ($el.length === 0) { return; }
318			var playerId = $el[0].id;
319			var video = videojs.players[playerId];
320			if (!video) { return; }
321
322			// If already started for this slide, do not restart on subsequent clicks
323			if ($el.data('userStarted') && video.controls()) {
324				return;
325			}
326
327			$el.closest('.cursor-pointer').removeClass('cursor-pointer');
328
329			// Pause carousel progress and hide the progress bar
330			self.isPause = true;
331			$(".home-header--progress-bar").hide();
332
333			// Ensure unmuted, controls visible, and play from the beginning
334			self.muted = false;

335			$el.removeClass('videojs-autoplay__loading');
336			video.muted(false);
337			video.controls(true);
338			try { video.currentTime(0); } catch (e) {}
339
340			// Hide the muted badge/label if present
341			var $label = $(self.swiper.slides[self.swiper.activeIndex]).find('.video-preview__label');
342			if ($label.length) { $label.addClass('d-none'); }
343
344			// Start playback (user gesture should allow autoplay with sound)
345			var p = video.play();
346			if (p && typeof p.catch === 'function') {
347				p.catch(function(){ /* ignore autoplay promise errors on some browsers */ });
348			}
349
350			// Mark this slide as user-started to prevent restarting on further clicks
351			$el.data('userStarted', true);
352		}
353
354	}
355
356	// swiper must be requested here, not inherited from the ads-slider carousel below:
357	// that block is hidden for es_ES, leaving Swiper undefined and the header dead.
358	requireJS(['videojs', 'swiper'], function(){
359		window.homeHeader = new HomeHeader();
360	});
361}