https://www.waldis-berry.ch/_static/js/scripts.js?dt=202609211358

1$(function(){
2	gsap.registerPlugin(ScrollTrigger);
3
4	// Animation
5	gsap.utils.toArray('[class*="--animate"]').forEach((article) => {
6		const classTokens = Array.from(article.classList);
7
8		const animationMap = {
9			"--animate-from-left":  { opacity: 0, x: -150 },
10			"--animate-from-right": { opacity: 0, x: 150 },
11			"--animate-from-top":   { opacity: 0, y: -150 },
12			"--animate-from-bottom":{ opacity: 0, y: 150 }
13		};
14
15		let fromVars = { opacity: 0, y: 150 };
16
17		// Prüfen welcher Modifier vorhanden ist
18		for (const key in animationMap) {
19			if (classTokens.some(token => token.endsWith(key))) {
20				fromVars = animationMap[key];
21				break;
22			}
23		}
24
25		// Startwerte setzen
26		gsap.set(article, fromVars);
27
28		// Animation starten
29		gsap.to(article, {
30			opacity: 1,
31			x: 0,
32			y: 0,
33			ease: "power1.out",
34			duration: 0.7,
35			scrollTrigger: {
36				trigger: article,
37				start: "top bottom"
38			},
39
40		});
41	});
42
43	// Set resize observer on body to refresh scroll trigger on height change
44	const roResizeObserver = new ResizeObserver(scrollTriggerRefresh);
45	roResizeObserver.observe(document.body);
46
47	let bRefreshPending = false;
48	function scrollTriggerRefresh() {
49		if (bRefreshPending) return;
50		bRefreshPending = true;
51		requestAnimationFrame(() => {
52			ScrollTrigger.refresh();
53			bRefreshPending = false;
54		});
55	}
56
57	highlightWords();
58
59	if (is_touch_device() == true) {
60		$("body").addClass("body--touch");
61	}
62
63	// Cookiehub
64	$(document).on("click", ".show_cookiehub_settings", function(e){
65		e.preventDefault();
66		window.cookiehub.openSettings();
67	});
68
69	/*Menutrigger*/
70	$(document).on("click", ".header__menutrigger", function (e) {
71		e.preventDefault();
72		$(".body").toggleClass("body--shownav");
73	});
74
75	//  Mark active menus
76	if (!$.isEmptyObject($(`a[data-pageid="${active_pageid}"]`)[0])) {
77		setActiveMenus(active_pageid);
78	} else {
79		let aPages = active_pagelist.split(",");
80
81		aPages.shift(); // remove first 'home'-entry
82		aPages.reverse(); // reverse order
83
84		for (let page_id of aPages) {
85			if (!$.isEmptyObject($(`a[data-pageid="${page_id}"]`)[0])) {
86				setActiveMenus(page_id);
87
88				break; // break loop if menu is found
89			}
90		}
91	}
92
93	// Menus ein-/ausblenden
94	let toMenuClose;
95	$(document).on('click', '.nav__li', function (enterEvent) {
96		enterEvent.stopPropagation();
97
98		let $this = $(this),
99			$menutrigger = $(".header__menutrigger");
100
101		clearTimeout(toMenuClose);
102
103		if (!$.isEmptyObject($this.siblings('.nav__li--running')[0]) && !$menutrigger.is(':visible')) {
104			// toMenuClose = setTimeout(function(){
105			$this.siblings('.nav__li--running').removeClass('nav__li--running').find('.nav__list').removeClass('nav__list--show');
106			$this.find('.nav__li--running').removeClass('nav__li--running');
107			// }, 100);
108		}
109
110		if ($this.hasClass('nav__li--isparent')) {
111			enterEvent.preventDefault();
112
113			// Submenu toggle
114			if (!$this.hasClass('nav__li--running')) {
115				$this.addClass('nav__li--running').find('> .nav__list').addClass('nav__list--show');
116			} else {
117				closeNavi($this);
118			}
119		}
120
121		/*$this.one('mouseleave', function (leaveEvent) {
122			if (!$menutrigger.is(':visible')) {
123				clearTimeout(toMenuClose);
124				toMenuClose = setTimeout(function () {
125					closeNavi($this);
126				}, 300);
127			}
128		});*/
129
130		function closeNavi($self) {
131			$self.removeClass('nav__li--running').find('.nav__list').removeClass('nav__list--show');
132			if (!$menutrigger.is(':visible')) {
133				$('.nav__li--running').removeClass('nav__li--running');
134			}
135		}
136	});
137
138	// sessionStorage leeren, wenn Navigation betätigt wird.
139	$(document).on("click", ".nav__link", function (e) {
140		let $this = $(this),
141			sHref = $this.attr("href");
142
143		if (sHref.indexOf("#") !== -1) {
144			let target = "#" + sHref.split("#")[1];
145			if (!$.isEmptyObject($(target)[0])) {
146				e.preventDefault();
147				var Goto = parseInt($(target).offset().top);
148				$(".body,.html").animate({ scrollTop: Goto }, 400);
149			}
150		}
151
152		if (
153			typeof sessionStorage["searchfilter"] !== "undefined" &&
154			$this.attr("data-pageid") !== undefined &&
155			!$.isEmptyObject($this.attr("data-pageid")[0])
156		) {
157			let data = JSON.parse(sessionStorage["searchfilter"]),
158				sPage = "page_" + $this.attr("data-pageid");
159
160			if (data.hasOwnProperty(sPage)) {
161				delete data[sPage];
162
163				sessionStorage["searchfilter"] = JSON.stringify(data);
164			}
165		}
166	});
167
168	// Scrolltop
169	$(document).on("click", ".scrolltop", function (event) {
170		event.preventDefault();
171		$("body,html").animate({ scrollTop: 0 }, 800);
172		$(".body").removeClass("body--shownav");
173	});
174
175	// E-Mail senden
176	$(document).on("click", 'a[href^="#msg="]', function (event) {
177		event.preventDefault();
178
179		let string = $(this).attr("href"),
180			code = string.substring(string.indexOf("=") + 1);
181
182		msg(code);
183	});
184
185	$(document).on("click", 'a[href*="tel:"]', function(){
186		let sPhoneNr = $(this).attr("href").replace("tel:", "");
187		gtag('event', 'Telefon', {'event_category': 'Kontakt','event_label':sPhoneNr, 'value': 1});
188	});
189
190	// Modal öffnen
191	$(document).on("click", "a.modal", function (event) {
192		event.preventDefault();
193		let sHref = $(this).attr("data-url");
194
195		loadModal(sHref);
196	});
197
198	// Modal ausblenden
199	$(document).on("click", ".modal, .modal__close", function (e) {
200		e.preventDefault();
201		closeModal();
202	});
203
204	// Video in Modal öffnen
205	$(document).on("click", '.main a[href*="youtu"], .main a[href*="vimeo"]', function (event) {
206		event.preventDefault();
207
208		let sHref = $(this).attr("href"),
209			sVideotype = "",
210			sVideocode = "",
211			aRegGroups = [];
212
213		if (sHref.search("youtu") !== -1) {
214			sVideotype = "youtube";

215			aRegGroups = sHref.match(/https:\/\/(www.)?youtu(\.)?be(\.com)?\/(watch\?v\=)?(.+)/);
216		} else if (sHref.search("vimeo") !== -1) {
217			sVideotype = "vimeo";
218			aRegGroups = sHref.match(/https:\/\/(player.)?vimeo(\.)?(\.com)?(.*)?\/(video\/)?(.+)/);
219		} else {
220			return false;
221		}
222		sVideocode = aRegGroups[aRegGroups.length - 1];
223
224		loadModal(
225			siterelpath + "apps/services/video.cfm",
226			"modal__popup--video", {
227				code: sVideocode,
228				type: sVideotype
229			}
230		);
231	});
232
233	let ticking = false;
234	setTimeout(() => {
235		handleScrollEvents();
236	},100);
237
238	$(window).on("scroll resize", function () {
239		handleScrollEvents();
240	});
241
242	function handleScrollEvents() {
243		var scrolled = $(this).scrollTop();
244		if (scrolled > 300) {
245			$("body").addClass("body--scrolled");
246		} else {
247			$("body").removeClass("body--scrolled");
248		}
249
250		if (!ticking) {
251			window.requestAnimationFrame(function() {
252				updateElementBackground();
253				ticking = false;
254			});
255			ticking = true;
256		}
257	}
258});
259
260
261function loadModal(dataURL, dataClass, dataPOST) {
262	let sInitClass = "modal__popup",
263		$popup = $("." + sInitClass);
264
265	$popup.attr("class", sInitClass);
266
267	$("body").addClass("body--hide-scrollbar");
268
269	if (typeof dataClass !== "undefined") $popup.addClass(dataClass);
270	dataPOST = dataPOST || {};
271
272	if (
273		dataURL.indexOf(window.location.host) !== -1 ||
274		dataURL.indexOf("video.cfm") !== -1
275	) {
276		$.ajax({
277			type: "POST",
278			data: dataPOST,
279			url: dataURL,
280			success: function (response) {
281				$popup.html($.trim(response)).addClass("modal__popup--show");
282				$(".modal").addClass("modal--show");
283			},
284		});
285	} else {
286		dataPOST.url = dataURL;
287
288		$.ajax({
289			type: "POST",
290			data: dataPOST,
291			url: siterelpath + "apps/services/iframe.cfm",
292			success: function (response) {
293				$popup.html($.trim(response)).addClass("modal__popup--show");
294				$(".modal").addClass("modal--show");
295			},
296		});
297	}
298}
299
300function closeModal() {
301	$("body").removeClass("body--hide-scrollbar");
302
303	// iFrame Inhalt neu laden (allfällige Videos werden gestoppt.)
304	$(".modal__popup iframe").each(function (i, frame) {
305		let $frame = $(frame);
306		if (typeof $frame.attr("src") !== "undefined") {
307			let iframeLink = $frame.attr("src");
308			// Autoplay auf false setzen, sonst beginnt das Video von vorne!
309			iframeLink = iframeLink.replace("autoplay=1", "autoplay=0");
310			iframeLink = iframeLink.replace("autoplay=true", "autoplay=false");
311			$frame.attr("src", "");
312			$frame.attr("src", iframeLink);
313		}
314	});
315
316	$(".modal__popup").removeClass("modal__popup--show").empty();
317	$(".modal").removeClass("modal--show");
318}
319
320function is_touch_device(){
321	try {
322		document.createEvent("TouchEvent");
323		return true;
324	} catch (e) {
325		return false;
326	}
327}
328
329function setActiveMenus(_pageid) {
330	$(`a[data-pageid="${_pageid}"]`).each((i, elLink) => {
331		let sBlockClass = "nav";
332
333		if (elLink.classList.length) {
334			sBlockClass = elLink.classList[1].split("__")[0];
335		}
336
337		$(elLink).removeClass(sBlockClass + "__link--inactive").addClass(sBlockClass + "__link--active");
338
339		$(elLink).parents("li").each((i, elListItem) => {
340			$(elListItem).removeClass(sBlockClass + "__li--inactive").addClass(sBlockClass + "__li--active");
341			$(elListItem).find("> a").removeClass(sBlockClass + "__link--inactive").addClass(sBlockClass + "__link--active");
342		});
343	});
344}
345
346function updateElementBackground() {
347	function getDesignOfElement(element){
348		const $element = $(element);
349
350		if ($element.length > 0) {
351			const posX = $element.offset().left - 5;
352			const posY = $element.position().top + ($element.height() / 2);
353			const elAtPos = document.elementFromPoint(posX, posY);
354			let $article = $(elAtPos).closest("article");
355
356			if ($article.length) {
357				let sClasslist = [... $article[0].classList].join(" ");
358
359				for (let x = 1; x <= 5; x++) {
360					if (sClasslist.search("--design-" + x) !== -1) {
361						return x;
362					}
363				}
364
365				return 1;
366			} else {
367				let $footer = $(elAtPos).closest("footer");
368
369				if ($footer.length) {
370					return 1;
371				} else {
372					// empty main
373					return 5;
374				}
375			}
376		}
377
378		return 1;
379	}
380
381	[".header__logo",".header__menutrigger",".header__quicklinks",".scrolltop",".popupform__button"].forEach((el,idx) => {
382		$(el).attr("data-design", getDesignOfElement(el));
383	});
384}
385
386function getUrlParam() {
387	let sURL = window.location.search,
388		oParameter = {};
389
390	if (sURL.length <= 0) return oParameter;
391
392	sURL = sURL.replace("?", "");

393	urlParams = sURL.split("&");
394
395	for(let i = 0; i < urlParams.length; i++) {
396		let aParam = urlParams[i].split("=");
397
398		oParameter[aParam[0]] = aParam[1];
399	}
400
401	return oParameter;
402}
403
404function highlightWords() {
405	//Get URL-Parameter
406	const queryString = window.location.search;
407	const urlParams = new URLSearchParams(queryString);
408	const keyword = urlParams.get("so_search");
409
410	if (keyword !== null) {
411		$.ajax({
412			url: rooturl + "cis-data/plugins/markjs/mark.min.js",
413			dataType: "script",
414			cache: true,
415		}).done(function () {
416			var instance = new Mark("main");
417			instance.mark(keyword);
418
419			if (
420				!$.isEmptyObject($("mark")[0]) &&
421				urlParams.get("scrollto") !== null
422			) {
423				setTimeout(function () {
424					$("body,html").animate(
425						{ scrollTop: $("mark").offset().top - 50 },
426						800
427					);
428				}, 700);
429			}
430		});
431	}
432}
433
434function msg(encoded_email){
435	var decoded_email = window.atob(encoded_email);
436	gtag('event', 'Email', {'event_category': 'Kontakt','event_label':decoded_email, 'value': 1});
437	window.location.href="mailto:"+decoded_email;
438}
439
440$.fn.shuffle = function(callback) {
441	var allElems = this.get(),
442		getRandom = function(max) {
443			return Math.floor(Math.random() * max);
444		},
445		shuffled = $.map(allElems, function(){
446			var random = getRandom(allElems.length),
447				randEl = $(allElems[random]).clone(true)[0];
448			allElems.splice(random, 1);
449			return randEl;
450	   });
451
452	this.each(function(i){
453		$(this).replaceWith($(shuffled[i]));
454	});
455
456	if(typeof callback !== 'undefined') callback();
457};