https://www.technoseum.de/typo3conf/ext/sitepackage/Resources/Public/JavaScript/Main.js?1719328284

1
2
3//
4// Funktionen
5//
6
7
8// ViewportHeight on mobile
9
10function viewportHeight() {
11	// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
12	let vh = window.innerHeight * 0.01;
13	// Then we set the value in the --vh custom property to the root of the document
14	document.documentElement.style.setProperty('--vh', vh+'px');
15}
16viewportHeight();
17// per css dann: height:calc(var(--vh, 1vh) * 100); Variable – wir per JS generiert
18/* resize lieber nicht, da es unter iOS auch beim ersten Scrollen greift, wenn die BottomBar verschwindet
19window.addEventListener('resize', () => {
20	viewportHeight();
21});
22*/
23
24
25
26function scaleGalleryItemsToFit() {
27	var browserWidth = $(window).width();
28	
29	var fullSize = ( browserWidth - browserWidth % 4 );
30	var halfSize = ( browserWidth - browserWidth % 4 ) / 2;
31	var quarterSize = ( browserWidth - browserWidth % 4 ) / 4;
32	
33	if ((browserWidth) > '750'){
34		$(".frame-type-r2_gallery.layout-0").width(halfSize).css("padding-bottom",halfSize+"px");			// großes Quadrat
35		$(".frame-type-r2_gallery.layout-4").width(quarterSize).css("padding-bottom",quarterSize+"px");		// kleines Quadrat
36		$(".frame-type-r2_gallery.layout-5").width(halfSize).css("padding-bottom",quarterSize+"px");		// Querformat
37		$(".frame-type-r2_gallery.layout-6").width(quarterSize).css("padding-bottom",halfSize+"px");		// Hochformat
38	} else {
39		$(".frame-type-r2_gallery.layout-0").width(fullSize).css("padding-bottom",fullSize+"px");			// großes Quadrat
40		$(".frame-type-r2_gallery.layout-4").width(halfSize).css("padding-bottom",halfSize+"px");			// kleines Quadrat
41		$(".frame-type-r2_gallery.layout-5").width(fullSize).css("padding-bottom",halfSize+"px");			// Querformat
42		$(".frame-type-r2_gallery.layout-6").width(fullSize).css("padding-bottom",(fullSize * 2)+"px");		// Hochformat
43	}
44}
45
46
47//
48// resize
49//
50
51$(window).resize(function(){
52	scaleGalleryItemsToFit();
53});
54
55
56
57//
58// Kontrast-Wechsel
59//
60	var contrast = window.sessionStorage.getItem("contrast");
61	if (contrast == "true") {
62		//console.log("Kontrast-Modus ist aktiv");
63		$('html').addClass("contrast");                         
64		$("#toggleContrast").attr("aria-pressed", "true");
65    }
66
67	$(document).ready(function() {
68		$("#toggleContrast", this).click(function(){
69			if($(this).attr('aria-pressed') === 'true'){
70				//console.log("Kontrast-Modus deaktiviert");
71				$(this).attr("aria-pressed", "false");
72				$('html').removeClass("contrast");
73				sessionStorage.removeItem("contrast")
74			} else{
75				//console.log("Kontrast-Modus aktiviert");
76				$(this).attr("aria-pressed", "true");
77				$('html').addClass("contrast");
78				sessionStorage.setItem("contrast", "true");
79			}
80		});
81	});
82
83
84//
85// $(document).scroll
86//
87
88/*
89$(document).scroll(function() {
90	//alert($(window).height());
91
92	if($(this).scrollTop() >= ( $(window).height() / 2 )) {
93		$('html').addClass("after-half-scroll");
94		$('html').removeClass("before-half-scroll");
95	} else {
96		$('html').removeClass("after-half-scroll");
97		$('html').addClass("before-half-scroll");
98		
99		var opacity = 1 - $(this).scrollTop() / ( ($(window).height() / 2) / 100 ) / 100;
100		$('#triangle').css('opacity', opacity);
101		$('#signet img').css('opacity', opacity);
102	}
103});
104*/
105
106//
107// $(document).ready
108//
109
110$(document).ready(function(){
111	// The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet.
112	// (if you want to hook up your events for certain elements before the window loads)
113
114	scaleGalleryItemsToFit();
115	
116	$('#toggleMenu').click(function(){
117		if ($("html").hasClass("overlay-collapsed")) {
118			$('#toggleMenu').addClass('act');
119			$("toggleMenu").attr("aria-expanded","true");
120			$('html').removeClass('overlay-collapsed');
121			$('html').addClass('overlay-menu overlay');
122		}
123		else if ($("html").hasClass("overlay-menu")){
124			$('#toggleMenu').removeClass('act');
125			$("toggleMenu").attr("aria-expanded","false");
126			$('html').removeClass('overlay-menu overlay');
127			$('html').addClass('overlay-collapsed');
128		}
129		else if ($("html").hasClass("overlay-quicksearch")){
130			$('#toggleMenu').addClass('act');
131			$("toggleMenu").attr("aria-expanded","true");
132			$('html').removeClass('overlay-quicksearch');
133			$('html').addClass('overlay-menu');
134		}
135	});

136	$('#iconSearch').click(function(){
137		if ($("html").hasClass("overlay-collapsed")) {
138			$('html').removeClass('overlay-collapsed');
139			$('html').addClass('overlay-quicksearch overlay');
140			$('header .main-search-query').focus();
141		}
142		else if ($("html").hasClass("overlay-menu")){
143			$('#toggleMenu').removeClass('act');
144			$('html').removeClass('overlay-menu');
145			$("toggleMenu").attr("aria-expanded","false");
146			$('html').addClass('overlay-quicksearch');
147			$('header .main-search-query').focus();
148		}
149		else if ($("html").hasClass("overlay-quicksearch")){
150			$('html').removeClass('overlay-quicksearch overlay');
151			$('html').addClass('overlay-collapsed');
152		}
153		return false;
154	});
155
156	// Fokus im Overlay behalten
157	$('#mainNav > ul > li:last-child > a, header .tx-solr-submit').on('blur', function(){
158		if ($("html").hasClass("overlay")){
159			$('#signet').focus();
160		}
161	});
162
163	
164	$('span.short-wpfeil').parent().addClass('js-short-wpfeil-parent');;
165
166	// Aufklapp-Icons für Menüpunkte generieren
167	// $('#mainNav a.ifsub').append('<span class="exp"></span>');
168	// Menüpunkte auf- oder zuklappen
169	$('#mainNav a span.exp').on('click.mynamespace', function(){
170		// andere zuklappen
171		$(this).parent().parent().siblings(".sub-expanded").children("ul").slideToggle(200, function(){
172			// display-value entfernen (wird von slideToggle gesetzt) ...
173			$(this).css('display', '');
174			// anschließend ...
175			$(this).parent().toggleClass('sub-collapsed sub-expanded');
176		});
177		// diesen aufklappen
178		$(this).parent().next("ul").slideToggle(200, function(){
179			// display-value entfernen (wird von slideToggle gesetzt) ...
180			$(this).css('display', '');
181			// anschließend ...
182			$(this).parent().toggleClass('sub-collapsed sub-expanded');
183		});
184		// Linkziel nicht öffnen
185		return false;
186	});
187
188
189	$('.toggleSubMenu').on('click', function(){
190		// andere zuklappen
191		$(this).parent().siblings(".sub-expanded").children("ul").slideToggle(200, function(){
192			// display-value entfernen (wird von slideToggle gesetzt) ...
193			$(this).css('display', '');
194			// anschließend ...
195			$(this).parent().toggleClass('sub-collapsed sub-expanded');
196			$(this).siblings(".toggleSubMenu").attr("aria-expanded","false");
197		});
198		// diesen aufklappen
199		$(this).next("ul").slideToggle(200, function(){
200			// display-value entfernen (wird von slideToggle gesetzt) ...
201			$(this).css('display', '');
202			// anschließend ...
203			$(this).parent().toggleClass('sub-collapsed sub-expanded');
204			$(this).siblings(".toggleSubMenu").attr('aria-expanded', function (i, attr) {
205				return attr == 'true' ? 'false' : 'true'
206			});
207		});
208		// Linkziel nicht öffnen
209		return false;
210	});
211	
212	
213	// Teaser auf Touch-Devices anklickbar machen
214	$('.frame-type-r2_teaser.mouseover').click(function(){
215		$(this).toggleClass('clicked');
216	});
217	
218	
219	//
220	// Fancybox 3 */
221	//
222	/* typical */
223	$('[data-fancybox]').fancybox({
224		idleTime: false,
225		buttons : [
226			'slideShow',
227			'fullScreen',
228			'thumbs',
229			//'share',
230			//'download',
231			//'zoom',
232			'close'
233		],
234		lang: "de"
235	});
236
237	$('[data-fancybox="gallery"]').fancybox({
238		idleTime: false,
239		caption : function( instance, item ) {
240			return $(this).next('figcaption').html();
241		},
242		lang: "de"
243	});
244
245});
246
247
248//
249// $(window).load
250//
251
252$(window).on('load', function(){
253	// The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images.
254	// Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.
255
256	if($('.flexslider').length){
257		$('.flexslider').flexslider({
258			animation: "slide",
259			slideshowSpeed: 5000, // 7000
260			animationSpeed: 1000,
261			animationLoop: true,
262			directionNav: true,
263			controlNav: true,
264			pausePlay: true,
265			useCSS: true, // "false" fixes 1px-center-bug: https://github.com/woocommerce/FlexSlider/issues/1470
266			prevText: "<span>&lsaquo;</span>",
267			nextText: "<span>&rsaquo;</span>"
268			// touch: false, // IE-Fade-Bugfix
269			//itemMargin:20,
270			//itemWidth:750
271			//direction: 'vertical',
272		});
273	}
274
275	if($('.event-teaser').length){
276		$('.event-teaser').flexslider({
277			animation: 'slide',
278			controlNav: false,
279			slideshow:false,

280			controlsContainer: '.teaser-controls',
281			prevText: '<i class="icon icon-slider-prev"></i>',
282			nextText: '<i class="icon icon-slider-next"></i>'
283		});
284		$('.flex-prev').prop('title', 'zurück');
285		$('.flex-next').prop('title', 'vor');
286	}
287
288});
289
290
291