1/* 2 * JavaScript | Master-Template 3 * 4 * Bayerisches Staatministerium fuer Arbeit und 5 * Sozialordnung, Familie und Frauen 6 * 7 * (c) 2019 8 */ 9 10var sliderInterval = 5000; 11var svgIconPath = '/imperia/md/images/stmas/master_2020/system/icons/icons.svg'; 12var menuLastOpenedBy = 'mouse'; 13 14jQuery.fn.extend({ 15 renameAttr: function( name, newName, removeData ) { 16 var val; 17 return this.each(function() { 18 val = jQuery.attr( this, name ); 19 jQuery.attr( this, newName, val ); 20 jQuery.removeAttr( this, name ); 21 // remove original data 22 if (removeData !== false){ 23 jQuery.removeData( this, name.replace('data-','') ); 24 } 25 }); 26 } 27 }); 28 29 30$(document).ready(function () { 31 32 //JavaScript Detection 33 $('body').addClass('js-on').removeClass('js-off'); 34 $('.picture-credits').renameAttr('aria-describedby', 'data-aria-describedby' ); 35 $('.picture-credits').attr('aria-expanded', 'false'); 36 37 //Service- und Hauptnavigation initialisieren 38 initNav(); 39 40 // Responsive Tables 41 $('.table-responsive').basictable(); 42 43 /* 44 * Window onLoad 45 * 46 * @context all 47 */ 48 $(window).on('load', function () { 49 $('.module-page-control .go-top').topLink({ 50 min: 400, 51 fadeSpeed: 200, 52 }); 53 $('.close-all button').fadeOut(); 54 var hashID = window.location.hash.substring(1); 55 if (typeof hashID != 'undefined' && hashID != '') { 56 scrollToAnchor(hashID, 'onLoad'); 57 } 58 59 // .module-slider-2box .slider 60 let mySlider = $('#content .module-slider-2box .slider'); 61 let mySliderControl = $(mySlider).next('.slider-control'); 62 let totalSlides = $('#content .module-slider-2box .slide:not(.slick-cloned)').length; 63 64 // console.log('Slider: ' +mySlider); 65 // console.log('Slidercontrol: ' +mySliderControl); 66 // console.log('Total Slides: ' +totalSlides); 67 // console.log('Bildschirmbreite bei onload: ' +$(window).width()); 68 69 if( ($(window).width() >= 640) && (totalSlides <= 2) ) { 70 mySliderControl.css('display', "none"); 71 } 72 73 }); 74 75 $('#content .module-slider-2box .slider').on('setPosition', function (event, slick) { 76 77 // Pfeile prev / next im Slidercontrol der 2Box auf disable setzen, 78 // wenn nicht mehr weitergeblättert werden kann 79 let mySliderControl = $(this).next('.slider-control'); 80 81 let buttons = mySliderControl.find('button'); 82 (buttons).each(function(index, value) { 83 if($(this).hasClass("slick-disabled")) { 84 // console.log('button in slider module-slider-2box has class slick-disabled'); 85 $(this).prop('disabled', true); 86 } else { 87 // console.log('button in slider module-slider-2box has NOT class slick-disabled'); 88 $(this).prop('disabled', false); 89 }; 90 }); 91 }); 92 93 94 95 $('a[href^="http"]').on('click', function () { 96 if ($(this).hasClass('self')) { 97 this.target = '_self'; 98 } else { 99 this.target = '_blank'; 100 } 101 }); 102 103 104 /* 105 * Window onScroll 106 * 107 * @context all 108 */ 109 $(window).scroll(function () { 110 111 }); 112 113 114 /* 115 * Window onResize 116 * 117 * @context all 118 */ 119 $(window).resize(function (e) { 120 121 //Overlays innerhalb der Teaserboxen gleich ausrichten 122 if (typeof nameOfFunction === 'adjustOverlayBoxes') { 123 adjustOverlayBoxes('.module-slider-2box', '.overlay'); 124 adjustOverlayBoxes('.module-teaser-slider', '.overlay'); 125 } 126 127 if ($('.module-news-latest .items').length > 0) { 128 $('.module-news-latest .items').slick('resize'); 129 } 130 131 $('.module-page-control .go-top').topLink({ 132 min: 400, 133 fadeSpeed: 200, 134 }); 135 136 }); 137 138 /* RSe Workaround 26.02.2024: Die Neuppositionierung der Overlays z.B. auf dem 2sp Slider auf der Startseite funktioniert nicht, wenn z.B. das Handy gedreht wird*/ 139 screen.orientation.addEventListener("change", (event) => { 140 location.href = location.href; 141 });
142 143 /* 144 * Window onHashChange 145 * 146 * @context all 147 */ 148 $(window).on('hashchange', function () { 149 var hashID = window.location.hash.substring(1); 150 scrollToAnchor(hashID, 'onHashChange'); 151 }); 152 153 154 /* 155 * Top-Link 156 * 157 * Zum Seitenfang scrollen, sobald 158 * der GoToTop-Link angeklickt wurde 159 * 160 * @context all 161 */ 162 $(document).on('click', '.module-page-control .go-top', function (e) { 163 164 /* Wichtig: 165 * Auf preventDefault() verzichten, damit der Hashtag #top 166 * in der URL gesetzt wird und die Bedienung der Seite auch 167 * per Tab-Bedienung richtig am Anfang der Seite beginnt 168 * 169 */ 170 171 scrollToAnchor('top', 'onGoTop'); 172 }); 173 174 175 /* 176 * Hauptnavigation initialisieren 177 * 178 * @context all 179 */ 180 function initNav() { 181 182 //Close-Button zu Service-Navigation hinzufuegen 183 if ($('#service-navigation ul li.close').length == 0) { 184 var closeBtn = '<li class="close"><a href="#"><span class="icon icon-close" aria-hidden="true"><svg width="11" height="11"><use xlink:href="' + svgIconPath + '#close"/></svg></span><span class="label">Menü schließen</span></a></li>'; 185 $(closeBtn).appendTo('#service-navigation ul'); 186 } 187 188 //Close-Button zu Haupt-Navigation hinzufuegen 189 if ($('#nav ul.level-1 li.close').length == 0) { 190 var closeBtn = '<li class="close"><a href="#"><span class="icon icon-close" aria-hidden="true"><svg width="16" height="16"><use xlink:href="' + svgIconPath + '#close"/></svg></span><span class="label">Menü schließen</span></a></li>'; 191 $(closeBtn).appendTo('#nav ul.level-1'); 192 } 193 194 //Die auf-/zuklappbaren Eintraegen erweitern 195 $('#nav li.has-childs > a, #nav li.has-childs > button').each(function (index, el) { 196 197 //Icon zu auf-/zuklappbaren Menue-Eintraegen hinzufuegen 198 if ($(el).children('.icon').length == 0) { 199 $(el).children('.label').after('<span class="icon icon-arrow-down" aria-hidden="true"><svg width="11" height="11"><use xlink:href="' + svgIconPath + '#arrow-down"/></svg></span>'); 200 } 201 202 //Wenn der Menuepunkt nicht die Klasse "inactive-link" besitzt, also eine richtige Url aufweist: 203 //dann den auf-/zuklappbaren Eintrag erreichbar machen, indem ein Menue-Eintrag bei den Unterpunkten ergaenzt wird 204 //über data('linkname') kann dem Link ein indiv. Name in der php.inc zugewiesen werden (Standard: "Einstieg ins Thema") 205 var entryLink = $(this).attr('href'); 206 let entryLinkName = ''; 207 208 if(typeof($(this).data('linkname')) === 'undefined') { 209 entryLinkName = 'Einstieg ins Thema'; 210 } else { 211 entryLinkName = $(this).data('linkname'); 212 } 213 214 if(!$(this).hasClass('inactive-link')) { 215 $(this).next('ul').children('li:eq(0)').before('<li class="entry-page"><a href="' + entryLink + '"><span class="label">' +entryLinkName+ '</span></a></li>'); 216 } 217 218 }); 219 } 220 221 /* 222 * Suchbox oeffnen 223 * 224 * @context all 225 */ 226 $(document).on('click', '#service-navigation .searchbox .toggler', function () { 227 if ($('#service-navigation > .col-right .wrapper').is(':visible')) { 228 $('#service-navigation > .col-right .wrapper').slideUp(); 229 } else { 230 $('#service-navigation > .col-right .wrapper').slideDown(); 231 } 232 }); 233 234 235 /* 236 * Mobile-Navigation: Toggler (Burger-Button) 237 * 238 * Steuert das Auf-/Zuklappen der 239 * mobilen Haupt-Navigation 240 * 241 * @context mobile 242 */ 243 244 $(document).on('click', '#nav > button', function (e) { 245 e.preventDefault(); 246 247 if ($('#nav').hasClass('open')) { 248 $(this).attr('aria-expanded', 'false'); 249 $(this).children('.btn').children('.hamburger').removeClass('is-active'); 250 $('#nav >
250 .level-1').slideUp('slow', function () { 251 $(this).attr('style', ''); 252 $('#nav').removeClass('open'); 253 $('#nav .level-1 > li').find('> a, > button').attr('tabindex', -1); 254 $('#nav .level-2 > li').find('> a.inactive-link').attr('tabindex', -1); 255 $('#nav .level-2 > li').find('> a.inactive-link').attr('role', 'none'); 256 }); 257 } else { 258 $(this).attr('aria-expanded', 'true'); 259 $(this).children('.btn').children('.hamburger').addClass('is-active'); 260 $('#nav > .level-1').slideDown('slow', function () { 261 $('#nav').addClass('open'); 262 $(this).attr('style', ''); 263 $('#nav .level-1 > li').find('> a, > button').attr('tabindex', 0); 264 $('#nav .level-2 > li').find('> a.inactive-link').attr('tabindex', 0); 265 $('#nav .level-2 > li').find('> a.inactive-link').removeAttr('role'); 266 }); 267 } 268 }); 269 270 271 /* 272 * Mobile-Navigation: Close-Btn 273 * 274 * Steuert das Klickverhalten des Close-Button 275 * am Ende der mobilen Navigation 276 * 277 * @context mobile 278 */ 279 $(document).on('click', '#nav .level-1 > li.close a', function (e) { 280 e.preventDefault(); 281 282 if ($('#nav').hasClass('open')) { 283 $('#nav > button').attr('aria-expanded', 'false'); 284 $('#nav > button .hamburger').removeClass('is-active'); 285 $('#nav .level-1').slideUp('slow', function () { 286 $(this).removeAttr('style'); 287 $('#nav').removeClass('open'); 288 }); 289 $('#nav .level-1').find('a, button').attr('tabindex', -1); 290 } 291 292 if ($('#nav').hasClass('active')) { 293 $('#nav > button .hamburger').removeClass('is-active'); 294 $('#nav .level-1').slideUp('slow', function () { 295 $(this).removeAttr('style'); 296 $('#nav').removeClass('active'); 297 $('#nav .level-1').find('a, button').attr('tabindex', -1); 298 }); 299 } 300 301 }); 302 303 304 /* 305 * Mobile-Navigation: Toggler (Ebene 1) 306 * 307 * Steuer das Auf-/Zuklappen der Unterpunkte 308 * in der mobilen Haupt-Navigation 309 * 310 * @context mobile 311 */ 312 if ($(window).outerWidth() < 1200) { 313 $('#nav').find('.dropdown').fadeOut(); 314 $('#nav').find('.dropdown ul.level-3').fadeOut(); 315 $('#nav .level-1').find('li.level-1-link a').attr('tabindex', -1); 316 } else { 317 $('#nav .level-1').find('a:not(.inactive-link), button').attr('tabindex', 0); 318 $('#nav .level-1').find('li.level-1-link a').attr('tabindex', 0); 319 } 320 321 322 323 $(document).on('click', '#nav .level-1 > li.has-childs > a, #nav .level-1 > li.has-childs > button', function () { 324 $('.dropdown').hide(); 325 $('#nav .level-1 > li.has-childs > a, #nav .level-1 > li.has-childs > button').attr("aria-expanded","false"); 326 if ($(this).parent('li').hasClass('active')) { 327 //Unterpunkte zuklappen 328 $(this).parent('li').removeClass('active'); 329 $(this).attr("aria-expanded","false"); 330 } else { 331 //Bereits geoeffnete Menuepunkte zuklappen 332 $(this).parent('li').parent('ul').children('li.active').removeClass('active'); 333 $(this).parent('li').addClass('active'); 334 $(this).next('.dropdown').show(); 335 $(this).attr("aria-expanded","true"); 336 } 337 return false; 338 }); 339 340 /* 341 * Mobile-Navigation: Toggler 342 * 343 * Steuer das Auf-/Zuklappen der Unterpunkte 344 * in der mobilen Haupt-Navigation 345 * 346 * @context mobile 347 */ 348 $('html').keyup(function(e) { 349 if (e.keyCode == 27){ 350 $('.dropdown').hide(); 351 $('#nav .level-1 > li.has-childs').removeClass('active'); 352 $('#nav .level-1 > li.has-childs > a, #nav .level-1 > li.has-childs > button').attr("aria-expanded","false"); 353 } 354 }); 355 356 $('html').on('click',function(e){
357 if (($(e.target).parents('.level-1').length)<=0) { 358 $('.dropdown').hide(); 359 $('#nav .level-1 > li.has-childs').removeClass('active'); 360 $('#nav .level-1 > li.has-childs > a, #nav .level-1 > li.has-childs > button').attr("aria-expanded","false"); 361 } 362 363 }); 364 $('header + div, .picture-credits').on('focusin',function(e){ 365 if (($(e.target).parents('.level-1').length)<=0) { 366 $('.dropdown').hide(); 367 $('#nav .level-1 > li.has-childs').removeClass('active'); 368 $('#nav .level-1 > li.has-childs > a, #nav .level-1 > li.has-childs > button').attr("aria-expanded","false"); 369 } 370 }); 371 $(document).on('click', '#nav .level-2 li.has-childs > a, #nav .level-2 li.has-childs > a.inactive-link', function (e) { 372 click_keypress_level2(this, e); 373 }); 374 375 $(document).on('keypress', '#nav .level-2 li.has-childs > a, #nav .level-2 li.has-childs > a.inactive-link', function (e) { 376 var key = e.which; 377 if (key == 13) { // the enter key code 378 click_keypress_level2(this, e) 379 } 380 }); 381 382 function click_keypress_level2(element, e) { 383 $('#nav .level-2 > li.has-childs > a').attr("aria-expanded", "false"); 384 $('#nav .level-2 > li.has-childs > a.inactive-link').attr("aria-expanded", "false"); 385 //Nur Mobil 386 if ($(window).outerWidth() < 1200) { 387 if ($(element).parent('li').hasClass('active')) { 388 //Unterpunkte zuklappen 389 $(element).parent('li').removeClass('active'); 390 $(element).attr("aria-expanded", "false"); 391 $(element).parent('li').children('.level-3').hide(); 392 } else { 393 //Bereits geoeffnete Menuepunkte zuklappen 394 //$(this).parent('li').parent('ul').children('li.active').removeClass('active'); 395 $('#nav .level-2 li.has-childs ul.level-3').hide(); 396 $('#nav .level-2 li.has-childs').removeClass('active'); 397 $(element).parent('li').children('.level-3').show(); 398 $(element).parent('.dropdown').show(); 399 $(element).parent('li').addClass('active'); 400 $(element).attr("aria-expanded", "true"); 401 } 402 e.preventDefault(); 403 } 404 } 405 406 407 /* 408 * Service-Navigation (Toggler) 409 * 410 * Fuegt in der mobilen Ansicht einen Toogler, 411 * zum Auf-/Zuklappen der Service-Navigation, 412 * hinzu 413 * 414 * @context mobile 415 */ 416 $(document).on('click', '#service-navigation .toggle', function (e) { 417 e.preventDefault(); 418 419 if ($('#service-navigation').hasClass('open')) { 420 $('#service-navigation').removeClass('open'); 421 $('#service-navigation > .col-left ul').slideUp('slow'); 422 $('#service-navigation .close').hide(); 423 $('#service-navigation .toggle .icon').removeClass('icon icon-arrow-top').addClass('icon icon-arrow-bottom'); 424 } else { 425 $('#service-navigation').addClass('open'); 426 $('#service-navigation > .col-left ul').slideDown('slow'); 427 $('#service-navigation .close').show(); 428 $('#service-navigation .toggle .icon').removeClass('icon icon-arrow-bottom').addClass('icon icon-arrow-top'); 429 } 430 }); 431 432 433 /* 434 * Service-Navigation (Close-Btn) 435 * 436 * Fuegt in der Service-Navigation einen 437 * zusaetzlichen Close-Button hinzu 438 * 439 * @context mobile 440 */ 441 $(document).on('click', '#service-navigation .close a', function (e) { 442 e.preventDefault(); 443 444 if (!$('#service-navigation').hasClass('open')) return false; 445 $('#service-navigation').removeClass('open'); 446 $('#service-navigation > .col-left ul').slideUp('slow'); 447 $('#service-navigation .close').hide(); 448 $('#service-navigation .toggle .icon').removeClass('icon icon-arrow-top').addClass('icon icon-arrow-bottom'); 449 }); 450 451 452 /* 453 * Module: Keyvisual-Slider 454 * 455 * Initialisiert den Keyvisual-Slider auf der Startseite 456 * [RSe] "focusOnChange: true" verursacht ein "Hüpfen" der Startseite nach oben, 457 * - wenn man sich schon ein Stück weiter unten in der Seite befindet 458 * - wenn der Slider auf autoplay steht 459 * => Daher wurde der Schalter am 05.11.2024 wieder auf false gestellt 460 * 461 * @context all 462 */ 463 464 $('.module-keyvisual-slider .slider').on('setPosition', function (event, slick) { 465 466 //Ausrichtung der Steuerelemente bei Resize Events aktualisieren 467 var slideNum = slick.currentSlide - 1; 468 var maxHeight = $(this).find('.slick-slide:not(.slick-cloned):eq(' + slideNum + ') figure img').outerHeight(); 469 470 $(this).find('.slick-arrow').animate({top: (maxHeight / 2) + 'px'}, 300); 471 472 // Pfeile prev / next im Slider der Keyvisual auf disable setzen, 473 // wenn nicht mehr weitergeblättert werden kann 474 let buttons = $(this).find('button'); 475 (buttons).each(function(index, value) { 476 if($(this).hasClass("slick-disabled")) { 477 // console.log('button in slider module-keyvisual has class slick-disabled'); 478 $(this).prop('disabled', true); 479 } else { 480 // console.log('button in slider module-keyvisual has NOT class slick-disabled'); 481 $(this).prop('disabled', false); 482 }; 483 }); 484 485 }).slick({ 486 dots: false, 487 accessibility: true, 488 adaptiveHeight: true, 489 autoplay: false, 490 autoplaySpeed: sliderInterval, 491 prevArrow: '<button type="button" aria-label="Vorheriger Slide" class="slick-prev"><svg width="17" height="28"><use xlink:href="' + svgIconPath + '#arrow-left"></use></svg></button>', 492 nextArrow: '<button type="button" aria-label="Nächster Slide" class="slick-next"><svg width="17" height="28"><use xlink:href="' + svgIconPath + '#arrow-right"></use></svg></button>', 493 slidesToShow: 1, 494 slidesToScroll: 1, 495 });
496 497 498 /* 499 * Module: Keyvisual-Slider (Slide-Wechsel) 500 * 501 * Wird vor dem Wechsel zum naechsten Slide 502 * angetriggert und aktualisiert dabei die 503 * Anzeig der aktuellen Slide-Nummer 504 * 505 * @context all 506 */ 507 $('.module-keyvisual-slider .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { 508 var currentSlideNo = nextSlide + 1; 509 $(this).next('.slider-control').find('.slide-current').html(currentSlideNo); 510 }); 511 512 513 /* 514 * Module: Keyvisual-Slider (AutoPlay) 515 * 516 * Steuerbuttons zum Starten/Beenden der 517 * AutoPlay-Funktion 518 * 519 * @context all 520 */ 521 $(document).on('click', '.module-keyvisual-slider .slider-wrap .control-2 .btn', function (e) { 522 e.preventDefault(); 523 524 var playLabel = $(this).data('play-label'); 525 var playClass = $(this).data('play-class'); 526 var playHref = svgIconPath + '#' + $(this).data('play-href'); 527 528 var stopLabel = $(this).data('stop-label'); 529 var stopClass = $(this).data('stop-class'); 530 var stopHref = svgIconPath + '#' + $(this).data('stop-href'); 531 532 if ($(this).children('span').hasClass(stopClass)) { 533 $(this).children('span.label').text(playLabel); 534 $(this).children('span.icon').addClass(playClass).removeClass(stopClass); 535 $(this).find('svg use').attr('xlink:href', playHref); 536 $(this).closest('.slider-wrap').children('.slider').slick('slickPause'); 537 } else { 538 $(this).children('span.label').text(stopLabel); 539 $(this).children('span.icon').addClass(stopClass).removeClass(playClass); 540 $(this).find('svg use').attr('xlink:href', stopHref); 541 $(this).closest('.slider-wrap').children('.slider').slick('slickNext').slick('slickPlay'); 542 } 543 }); 544 545 546 $('.module-keyvisual-slider .slick-prev').on('click', function(e) { 547 $(this).attr("data-click","1"); 548 $('.module-keyvisual-slider .slick-next').attr("data-click","0"); 549 }); 550 551 $('.module-keyvisual-slider .slick-next').on('click', function(e) { 552 $(this).attr("data-click","1"); 553 $('.module-keyvisual-slider .slick-prev').attr("data-click","0"); 554 }); 555 556 $('.module-keyvisual-slider .slider.autoplay').slick('slickPlay'); 557 $('.module-keyvisual-slider .slide').attr('tabindex', null); 558 $('.module-keyvisual-slider .slider').on('afterChange', function(e) { 559 setTimeout(function() { 560 $('.module-keyvisual-slider .slick-prev').on('click', function(e) { 561 $(this).attr("data-click","1"); 562 $('.module-keyvisual-slider .slick-next').attr("data-click","0"); 563 }); 564 565 $('.module-keyvisual-slider .slick-next').on('click', function(e) { 566 $(this).attr("data-click","1"); 567 $('.module-keyvisual-slider .slick-prev').attr("data-click","0"); 568 }); 569 $(e.target).find('.slide').attr('tabindex', null); 570 $(e.target).find('[data-click="1"]').focus(); 571 }, 0); 572 }); 573 574 575 /* 576 * Module: News Latest Slider 577 * initial: erstmal nur auf der Startseite der neuen ZBFS Website 578 * Anstelle der "Aktuelles"-Meldungen rechts in der Spalte 579 * werden die Meldungen weiter unten in einem Slider dargestellt 580 * 581 * Steuerbuttons zum Starten/Beenden der 582 * AutoPlay-Funktion 583 * 584 * @context all 585 */ 586 587 $('.module-news-latest-slider .items').slick({ 588 dots: false, 589 accessibility: true, 590 infinite: false, 591 adaptiveHeight: true, 592 autoplay: false, 593 slidesToShow: 4, 594 slidesToScroll: 1, 595 prevArrow: '<button type="button" aria-label="Vorheriger Slide" class="slick-prev"><span class="icon arrow-left" aria-hidden="true"><svg width="11" height="18"><use xlink:href="' + svgIconPath + '#arrow-left"/></svg></span></button>', 596 nextArrow: '<button type="button" aria-label="Nächster Slide" class="slick-next"><span class="icon arrow-right" aria-hidden="true"><svg width="11" height="18"><use xlink:href="' + svgIconPath + '#arrow-right"/></svg></span></button>', 597 responsive: [ 598 { 599 breakpoint: 540, 600 settings: { 601 slidesToShow: 1, 602 slidesToScroll: 1, 603 }, 604 }, { 605 breakpoint: 767, 606 settings: { 607 slidesToShow: 2, 608 slidesToScroll: 1, 609 }, 610 }, { 611 breakpoint: 1300, 612 settings: { 613 slidesToShow: 3, 614 slidesToScroll: 1, 615 }, 616 }, 617 ], 618 }).on('afterChange', function () { 619 $('.module-news-latest-slider .items .item').attr('tabindex', null); 620 $('.module-news-latest-slider .items .item').attr('aria-hidden', false); 621 $('.module-news-latest-slider .items .item a').attr('tabindex', null); 622 });
623 624 $('.module-news-latest-slider .items .item').attr('tabindex', null); 625 $('.module-news-latest-slider .items .item').attr('aria-hidden', false); 626 $('.module-news-latest-slider .items .item a').attr('tabindex', null); 627 628 /* 629 * Module: module-blog-teasers 630 * 631 * Initialisiert den module-blog-teasers - Slider 632 * (z.B. fuer "Erfolgsgeschichten") 633 * 634 */ 635 let activeFilter = -1; 636 637 // Set first page active 638 function resetPagination() { 639 setTimeout(function() { 640 const links = $('li[role=presentation]'); 641 $(links).removeClass('slick-active'); 642 links.each(function(i, el) { 643 if (parseInt($(el).find('a')[0].innerHTML) === 1) { 644 $(el).addClass('slick-active'); 645 } 646 }); 647 }, 100) 648 } 649 650 // Init slick carousel for blog-teasers 651 const slider = $('#carousel.module-blog-teasers').slickFilterable({ 652 filterName: 'filter-heading', 653 filter: function( category, slider, settings ) { 654 return $(this).hasClass( category ); 655 }, 656 slick: { 657 rows: 2, 658 slidesPerRow: 3, 659 slidesToScroll: 1, 660 speed: 700, 661 dots: true, 662 accessibility: true, 663 appendDots: '.pagination--blog', 664 responsive: [ 665 { 666 rows: 2, 667 breakpoint: 992, 668 settings: { 669 slidesPerRow: 2, 670 } 671 }, 672 { 673 rows: 1, 674 breakpoint: 640, 675 settings: { 676 slidesPerRow: 1, 677 } 678 }, 679 680 ], 681 customPaging: function(slick,index) { 682 return '<a class="pagination__link"> ' + (index + 1) + ' </a>'; 683 } 684 } 685 }).on('afterChange', function (slick, curr) { 686 // Update bottom pagination 687 const links = $('li[role=presentation]'); 688 $(links).removeClass('slick-active'); 689 links.each(function(i, el) { 690 if (parseInt($(el).find('a')[0].innerHTML) === curr.currentSlide + 1) { 691 $(el).addClass('slick-active'); 692 } 693 }); 694 }); 695 $('#carousel.module-blog-teasers .slick-list .slick-track .slick-slide.slick-current').attr('tabindex', null); 696 // $('#carousel.module-blog-teasers .slick-list .slick-track .slick-slide.slick-current').attr('aria-hidden', null); 697 698 resetPagination(); 699 700 // Update active filter element 701 $('.module-blog-area-chooser__item div').on('click', function (item) { 702 activeFilter = $('.module-blog-area-chooser__item div').index(this); 703 704 // Set first page active 705 resetPagination(); 706 707 $('.module-blog-area-chooser__item-overlay').css('pointer-events', 'none'); 708 709 if (item.currentTarget.classList.contains('active')) { 710 item.currentTarget.classList.remove('active'); 711 } else { 712 $('.module-blog-area-chooser__item div').each(function (_, i) { 713 i.classList.remove('active'); 714 }); 715 item.currentTarget.classList.add('active'); 716 $(item.currentTarget).parent().find('.module-blog-area-chooser__item-overlay').css('pointer-events', 'all'); 717 } 718 }); 719 720 721 /* 722 * Module: Slider-2Box 723 * 724 * Initialisiert den 2Box Slider auf 725 * der Startseite 726 * 727 * @context all 728 */ 729 function initBoxSlider() { 730 var el = $('#content .module-slider-2box'); 731 732 return $(el).find('.slider').not('.slick-initialized').slick({ 733 dots: false, 734 accessibility: true, 735 adaptiveHeight: true, 736 autoplay: false, 737 infinite: false, 738 autoplaySpeed: sliderInterval, 739 prevArrow: $(el).find('.slick-prev'), 740 nextArrow: $(el).find('.slick-next'), 741 slidesToShow: 2, 742 slidesToScroll: 2, 743 responsive: [ 744 { 745 breakpoint: 639, 746 settings: { 747 slidesToShow: 1, 748 slidesToScroll: 1, 749 prevArrow: '<button type="button" aria-label="Vorheriger Slide" class="slick-prev"><svg width="17" height="28"><use xlink:href="' + svgIconPath + '#arrow-left"></use></svg></button>', 750 nextArrow: '<button type="button" aria-label="Nächster Slide" class="slick-next"><svg width="17" height="28"><use xlink:href="' + svgIconPath + '#arrow-right"></use></svg></button>', 751 }, 752 }, 753 ], 754 }); 755 } 756 757 var boxSlider = initBoxSlider(); 758 759 // $(window).on('resize', function () { 760 // $(boxSlider).slick('unslick'); 761 // setTimeout(function () { 762 // initBoxSlider(); 763 // }, 300); 764 // }); 765 766 $(window).on('orientationchange', function () { 767 $(boxSlider).slick('unslick'); 768 setTimeout(function () { 769 initBoxSlider(); 770 }, 300); 771 });
772 773 $('.module-slider-2box .slick-prev').on('click', function(e) { 774 $(this).attr("data-click","1"); 775 $('.module-slider-2box .slick-next').attr("data-click","0"); 776 }); 777 778 $('.module-slider-2box .slick-next').on('click', function(e) { 779 $(this).attr("data-click","1"); 780 $('.module-slider-2box .slick-prev').attr("data-click","0"); 781 }); 782 783 $('.module-slider-2box .slide').attr('tabindex', null); 784 $('.module-slider-2box .slider').on('afterChange', function(e) { 785 setTimeout(function() { 786 $('.module-slider-2box .slick-prev').on('click', function(e) { 787 $(this).attr("data-click","1"); 788 $('.module-slider-2box .slick-next').attr("data-click","0"); 789 }); 790 791 $('.module-slider-2box .slick-next').on('click', function(e) { 792 $(this).attr("data-click","1"); 793 $('.module-slider-2box .slick-prev').attr("data-click","0"); 794 }); 795 $(e.target).find('.slide').attr('tabindex', null); 796 $(e.target).find('[data-click="1"]').focus(); 797 }, 0); 798 }); 799 800 801 /* 802 * Module: Slider-2Box (Slide-Wechsel) 803 * 804 * Wird vor dem Wechsel zum naechsten Slide 805 * angetriggert und aktualisiert dabei die 806 * Anzeige der aktuellen Slide-Nummer 807 * 808 * @context all 809 */ 810 $('#content .module-slider-2box .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { 811 var totalSlides = $('#content .module-slider-2box .slide:not(.slick-cloned)').length; 812 813 //Ermitteln ob schrittweiser Wechsel auf mobil oder Grupppen-Wechsel auf Tablet/Desktop durchgefuehrt wird 814 if ((nextSlide - currentSlide) === 1) { 815 816 //Mobil nur Schrittweise zaehlen 817 $(this).next('.slider-control').find('.slide-current').html(nextSlide + 1); 818 819 } else { 820 821 if ((totalSlides - nextSlide) === 1) { 822 823 //Bei ungerader Anzahl Slide am Ende einzelnen Schritt beruecksichtigen 824 $(this).next('.slider-control').find('.slide-current').html(nextSlide + ' und ' + (nextSlide + 1)); 825 826 } else { 827 //Bei ungerader Anzahl Slides in 2er Schritten hochzaehlen 828 $(this).next('.slider-control').find('.slide-current').html((nextSlide + 1) + ' und ' + (nextSlide + 2)); 829 830 } 831 } 832 }); 833 834 835 /* 836 * Module: Slider-2Box (AutoPlay) 837 * 838 * Steuerbuttons zum Starten/Beenden der 839 * AutoPlay-Funktion 840 * 841 * @context all 842 */ 843 $(document).on('click', '#content .module-slider-2box .slider-wrap .control-2 .btn', function (e) { 844 e.preventDefault(); 845 846 var playLabel = $(this).data('play-label'); 847 var playClass = $(this).data('play-class'); 848 var playHref = svgIconPath + '#' + $(this).data('play-href'); 849 850 var stopLabel = $(this).data('stop-label'); 851 var stopClass = $(this).data('stop-class'); 852 var stopHref = svgIconPath + '#' + $(this).data('stop-href'); 853 854 if ($(this).children('span').hasClass(stopClass)) { 855 856 $(this).children('span.label').text(playLabel); 857 $(this).children('span.icon').addClass(playClass).removeClass(stopClass); 858 $(this).find('svg use').attr('xlink:href', playHref); 859 $(this).closest('.slider-wrap').children('.slider').slick('slickPause'); 860 } else { 861 $(this).children('span.label').text(stopLabel); 862 $(this).children('span.icon').addClass(stopClass).removeClass(playClass); 863 $(this).find('svg use').attr('xlink:href', stopHref); 864 $(this).closest('.slider-wrap').children('.slider').slick('slickNext').slick('slickPlay'); 865 } 866 }); 867 868 869 /* 870 * Module: Content-Slider 871 * 872 * Initialisiert den Content-Slider auf 873 * den Contentseiten 874 * 875 * @context all 876 */ 877 $('.module-content-slider .slider').on('setPosition', function (event, slick) { 878 879 //Ausrichtung der Steuerelemente bei Resize Events aktualisieren 880 var slideNum = slick.currentSlide - 1; 881 var maxHeight = $(this).find('.slick-slide:not(.slick-cloned):eq(' + slideNum + ') figure img').outerHeight(); 882 883 $(this).find('.slick-arrow').animate({top: (maxHeight / 2) + 'px'}, 300); 884
885 // Pfeile prev / next im Slider der content-slider auf disable setzen, 886 // wenn nicht mehr weitergeblättert werden kann 887 let buttons = $(this).find('button'); 888 (buttons).each(function(index, value) { 889 if($(this).hasClass("slick-disabled")) { 890 // console.log('button in slider module-content-slider has class slick-disabled'); 891 $(this).prop('disabled', true); 892 } else { 893 // console.log('button in slider module-content-slider has NOT class slick-disabled'); 894 $(this).prop('disabled', false); 895 }; 896 }); 897 898 }).slick({ 899 dots: false, 900 accessibility: true, 901 adaptiveHeight: true, 902 autoplay: false, 903 autoplaySpeed: sliderInterval, 904 prevArrow: '<button type="button" aria-label="Vorheriger Slide" class="slick-prev"><span class="icon arrow-left" aria-hidden="true"><svg width="11" height="18"><use xlink:href="' + svgIconPath + '#arrow-left"/></svg></span></button>', 905 nextArrow: '<button type="button" aria-label="Nächster Slide" class="slick-next"><span class="icon arrow-right" aria-hidden="true"><svg width="11" height="18"><use xlink:href="' + svgIconPath + '#arrow-right"/></svg></span></button>', 906 slidesToShow: 1, 907 slidesToScroll: 1, 908 }); 909 910 911 /* 912 * Module: Content-Slider (Slide-Wechsel) 913 * 914 * Wird vor dem Wechsel zum naechsten Slide 915 * angetriggert und aktualisiert dabei die 916 * Anzeige der aktuellen Slide-Nummer 917 * 918 * @context all 919 */ 920 $('.module-content-slider .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { 921 var currentSlideNo = nextSlide + 1; 922 $(this).next('.slider-control').find('.slide-current').html(currentSlideNo); 923 }); 924 925 926 /* 927 * Module: Content-Slider (AutoPlay) 928 * 929 * Steuerbuttons zum Starten/Beenden der 930 * autoSlide Funktion 931 * 932 * @context all 933 */ 934 $(document).on('click', '.module-content-slider .slider-wrap .control-2 .btn', function (e) { 935 e.preventDefault(); 936 937 var playLabel = $(this).data('play-label'); 938 var playClass = $(this).data('play-class'); 939 var playHref = svgIconPath + '#' + $(this).data('play-href'); 940 941 var stopLabel = $(this).data('stop-label'); 942 var stopClass = $(this).data('stop-class'); 943 var stopHref = svgIconPath + '#' + $(this).data('stop-href'); 944 945 if ($(this).children('span').hasClass(stopClass)) { 946 $(this).children('span.label').text(playLabel); 947 $(this).children('span.icon').addClass(playClass).removeClass(stopClass); 948 $(this).find('svg use').attr('xlink:href', playHref); 949 $(this).closest('.slider-wrap').children('.slider').slick('slickPause'); 950 } else { 951 $(this).children('span.label').text(stopLabel); 952 $(this).children('span.icon').addClass(stopClass).removeClass(playClass); 953 $(this).find('svg use').attr('xlink:href', stopHref); 954 $(this).closest('.slider-wrap').children('.slider').slick('slickNext').slick('slickPlay'); 955 } 956 }); 957 958 $('.module-content-slider .slick-prev').on('click', function(e) { 959 $(this).attr("data-click","1"); 960 $('.module-content-slider .slick-next').attr("data-click","0"); 961 }); 962 963 $('.module-content-slider .slick-next').on('click', function(e) { 964 $(this).attr("data-click","1"); 965 $('.module-content-slider .slick-prev').attr("data-click","0"); 966 }); 967 968 $('.module-content-slider .slider').on('afterChange', function(e) { 969 setTimeout(function() { 970 $('.module-content-slider .slick-prev').on('click', function(e) { 971 $(this).attr("data-click","1"); 972 $('.module-content-slider .slick-next').attr("data-click","0"); 973 }); 974 975 $('.module-content-slider .slick-next').on('click', function(e) { 976 $(this).attr("data-click","1"); 977 $('.module-content-slider .slick-prev').attr("data-click","0"); 978 }); 979 $(e.target).find('[data-click="1"]').focus(); 980 }, 0); 981 982 });
983 984 985 /* 986 * Module: Teaser-Slider 987 * 988 * Initialisiert den Teaser-Slider auf 989 * den Contentseiten 990 * 991 * @context all 992 */ 993 $('aside .module-teaser-slider .slider').on('setPosition', function (event, slick) { 994 995 //Ausrichtung der Steuerelemente bei Resize Events aktualisieren 996 var slideNum = slick.currentSlide - 1; 997 998 if ($(this).find('.slick-slide:not(.slick-cloned):eq(' + slideNum + ') figure img').length > 0) { 999 var maxHeight = $(this).find('.slick-slide:not(.slick-cloned):eq(' + slideNum + ') figure img').outerHeight(); 1000 } 1001 1002 if ($(this).find('.slick-slide:not(.slick-cloned):eq(' + slideNum + ') figure svg').length > 0) { 1003 var maxHeight = $(this).find('.slick-slide:not(.slick-cloned):eq(' + slideNum + ') figure svg').outerHeight(); 1004 } 1005 1006 $(this).find('.slick-arrow').animate({top: (maxHeight / 2) + 'px'}, 300); 1007 1008 // Pfeile prev / next im Slider der Teaser Slider auf disable setzen, 1009 // wenn nicht mehr weitergeblättert werden kann 1010 let buttons = $(this).find('button'); 1011 (buttons).each(function(index, value) { 1012 if($(this).hasClass("slick-disabled")) { 1013 // console.log('button in slider module-teaser-slider has class slick-disabled'); 1014 $(this).prop('disabled', true); 1015 } else { 1016 // console.log('button in slider module-teaser-slider has NOT class slick-disabled'); 1017 $(this).prop('disabled', false); 1018 }; 1019 }); 1020 }).slick({ 1021 dots: false, 1022 accessibility: true, 1023 adaptiveHeight: true, 1024 infinite: false, 1025 autoplay: false, 1026 autoplaySpeed: sliderInterval, 1027 prevArrow: '<button type="button" class="slick-prev" aria-label="Vorheriger Slide" title="Vorherigen Beitrag anzeigen"><svg width="29" height="49"><use xlink:href="' + svgIconPath + '#arrow-left"></use></svg></button>', 1028 nextArrow: '<button type="button" class="slick-next" aria-label="Nächster Slide" title="Nächsten Beitrag anzeigen"><svg width="29" height="49"><use xlink:href="' + svgIconPath + '#arrow-right"></use></svg></button>', 1029 slidesToShow: 3, 1030 slidesToScroll: 3, 1031 responsive: [ 1032 { 1033 breakpoint: 992, 1034 settings: { 1035 slidesToShow: 2, 1036 slidesToScroll: 2, 1037 }, 1038 }, { 1039 breakpoint: 680, 1040 settings: { 1041 slidesToShow: 1, 1042 slidesToScroll: 1, 1043 }, 1044 }, 1045 ], 1046 }); 1047 1048 $('.module-teaser-slider .slick-prev').on('click', function(e) { 1049 $(this).attr("data-click","1"); 1050 $('.module-teaser-slider .slick-next').attr("data-click","0"); 1051 }); 1052 1053 $('.module-teaser-slider .slick-next').on('click', function(e) { 1054 $(this).attr("data-click","1"); 1055 $('.module-teaser-slider .slick-prev').attr("data-click","0"); 1056 }); 1057 1058 $('.module-teaser-slider .slide').attr('tabindex', null); 1059 $('.module-teaser-slider .slider').on('afterChange', function(e) { 1060 setTimeout(function() { 1061 $('.module-teaser-slider .slick-prev').on('click', function(e) { 1062 $(this).attr("data-click","1"); 1063 $('.module-teaser-slider .slick-next').attr("data-click","0"); 1064 }); 1065 1066 $('.module-teaser-slider .slick-next').on('click', function(e) { 1067 $(this).attr("data-click","1"); 1068 $('.module-teaser-slider .slick-prev').attr("data-click","0"); 1069 }); 1070 $(e.target).find('.slide').attr('tabindex', null); 1071 $(e.target).find('[data-click="1"]').focus(); 1072 }, 0); 1073 }); 1074 1075 1076 1077 1078 /* 1079 * Module: Teaser-Slider (Slide-Wechsel) 1080 * 1081 * Wird vor dem Wechsel zum naechsten Slide 1082 * angetriggert und aktualisiert dabei die 1083 * Anzeige der aktuellen Slide-Nummer 1084 * 1085 * @context all 1086 */ 1087 $('aside .module-teaser-slider .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { 1088 var currentSlideNo = nextSlide + 1; 1089 $(this).next('.slider-control').find('.slide-current').html(currentSlideNo); 1090 });
1091 1092 1093 /* 1094 * Module: Teaser-Slider (AutoPlay) 1095 * 1096 * Steuerbuttons zum Starten/Beenden der 1097 * autoSlide Funktion 1098 * 1099 * @context all 1100 */ 1101 $(document).on('click', 'aside .module-teaser-slider .slider-wrap .control-2 .btn', function (e) { 1102 e.preventDefault(); 1103 1104 var textPlay = $(this).data('label-play'); 1105 var classPlay = $(this).data('icon-play'); 1106 var textStop = $(this).data('label-stop'); 1107 var classStop = $(this).data('icon-stop'); 1108 1109 if ($(this).children('span').hasClass(classStop)) { 1110 $(this).children('span.icon').addClass(classPlay).removeClass(classStop); 1111 $(this).children('span.label').text(textPlay); 1112 $(this).closest('.slider-wrap').children('.slider').slick('slickPause'); 1113 } else { 1114 $(this).children('span.icon').addClass(classStop).removeClass(classPlay); 1115 $(this).children('span.label').text(textStop); 1116 $(this).closest('.slider-wrap').children('.slider').slick('slickNext').slick('slickPlay'); 1117 } 1118 }); 1119 1120 1121 /* 1122 * Module: News-Slider 1123 * 1124 * Initialisiert den News-Slider, mit dem die 1125 * News-Eintraege in der mobilen Ansicht aus 1126 * Platzgruenden als Slider dargestellt werden 1127 * 1128 * @context mobile 1129 */ 1130 $('.module-news-latest .items').on('destroy', function (e, slick) { 1131 let carousel = $(this), 1132 reinitSlickSliderNewsLatest = debounce(function () { 1133 1134 /* 1135 * slick.activeBreakpoint will tell us the breakpoint 1136 * at which the carousel was destroyed. 1137 */ 1138 if (slick.activeBreakpoint < window.innerWidth) return; 1139 1140 // Re-initialize with the old settings. 1141 carousel.slick(slick.options); 1142 1143 // Remove this event listener. 1144 window.removeEventListener(reinitSlickSliderNewsLatest); 1145 }, 500); 1146 1147 // Assign our debounced callback to window.resize. 1148 window.addEventListener('resize', reinitSlickSliderNewsLatest); 1149 }).slick({ 1150 mobileFirst: true, 1151 dots: false, 1152 accessibility: true, 1153 infinite: false, 1154 adaptiveHeight: true, 1155 autoplay: false, 1156 autoplaySpeed: sliderInterval, 1157 slidesToShow: 1, 1158 slidesToScroll: 1, 1159 prevArrow: '<button type="button" aria-label="Vorheriger Slide" class="slick-prev"><span class="icon arrow-left" aria-hidden="true"><svg width="11" height="18"><use xlink:href="' + svgIconPath + '#arrow-left"/></svg></span></button>', 1160 nextArrow: '<button type="button" aria-label="Nächster Slide" class="slick-next"><span class="icon arrow-right" aria-hidden="true"><svg width="11" height="18"><use xlink:href="' + svgIconPath + '#arrow-right"/></svg></span></button>', 1161 responsive: [ 1162 { 1163 breakpoint: 540, 1164 settings: { 1165 slidesToShow: 2, 1166 slidesToScroll: 1, 1167 }, 1168 }, { 1169 breakpoint: 767, 1170 settings: 'unslick', 1171 }, 1172 ], 1173 }).on('afterChange', function () { 1174 $('.module-news-latest .items .item').attr('tabindex', null); 1175 $('.module-news-latest .items .item').attr('aria-hidden', false); 1176 $('.module-news-latest .items .item a').attr('tabindex', null); 1177 }); 1178 1179 1180 $('.module-news-latest .items .item').attr('tabindex', null); 1181 $('.module-news-latest .items .item').attr('aria-hidden', false); 1182 $('.module-news-latest .items .item a').attr('tabindex', null); 1183 1184 1185 /* 1186 * ScrollToAnchor 1187 * 1188 * Handelt bei Aufruf von Anchor-Links und bei internen Aufrufen 1189 * zu Aenderung der Scrollposition die optimale Positionierung. 1190 * 1191 * Unter anderem werden Accordion-Eintraege automatisch geoeffnet, 1192 * zusaetzliche Hoehen fuer Sticky-Header Elemente einberechnet usw. 1193 * 1194 * Dadurch wird die Sichtbarkeit des Ziel-Elements sichergestellt 1195 * 1196 */ 1197 window.scrollToAnchor = function (hashID, context) { 1198 1199 if (typeof hashID == 'undefined' || hashID == '') return true; 1200 //console.log('init scrollToAnchor (Context: ' +context+ ', hashID:' +hashID+ ')'); 1201 1202 var isTopAnchor = false; 1203 1204 //Zusaetzliche Hoehe 1205 var addHeight = 30; 1206 1207 //Position des Content-Abschnittes ermitteln 1208 if ($('#' + hashID).length > 0) { 1209 1210 if ($('#' + hashID).hasClass('collapse')) { 1211 $('#' + hashID).collapse('show'); 1212 var offset = $('#' + hashID).parent('.card').offset().top; 1213 } else if ($('#' + hashID).hasClass('card')) { 1214 $('#' + hashID).children('.collapse').collapse('show'); 1215 var offset = $('#' + hashID).offset().top; 1216 } else if ($('#' + hashID).hasClass('form-control')) { 1217 if ($('#' + hashID).prev('label').length > 0) { 1218 var offset = $('#' + hashID).prev('label').offset().top - 10; 1219 } else { 1220 var offset = $('#' + hashID).offset().top; 1221 } 1222 } else if (hashID == 'top') { 1223 var offset = 0; 1224 var isTopAnchor = true; 1225 } else { 1226 var offset = $('#' + hashID).offset().top; 1227 } 1228 1229 } else if ($('a[name=' + hashID + ']').length > 0) { 1230 var offset = $('a[name=' + hashID + ']').offset().top; 1231 } else { 1232 var offset = 0; 1233 } 1234 1235 if (offset > 0 || isTopAnchor) {
1236 //console.log('scrollToAnchor(addHeight: ' +addHeight+ ', Offset: ' +offset+ ', hashID:' +hashID+ ')'); 1237 $('html,body').animate({scrollTop: offset - addHeight}, 500); 1238 } 1239 }; 1240 1241 1242 /* 1243 * Module: Quick-Links 1244 * 1245 * 1246 * @context all 1247 */ 1248 $('.module-quicklinks .slider').on('setPosition', function (event, slick) { 1249 1250 //Ausrichtung der Steuerelemente bei Resize Events aktualisieren 1251 var slideNum = slick.currentSlide - 1; 1252 1253 if ($(this).find('.slick-slide:not(.slick-cloned):eq(' + slideNum + ') figure img').length > 0) { 1254 var maxHeight = $(this).find('.slick-slide:not(.slick-cloned):eq(' + slideNum + ') figure img').outerHeight(); 1255 } 1256 1257 if ($(this).find('.slick-slide:not(.slick-cloned):eq(' + slideNum + ') figure svg').length > 0) { 1258 var maxHeight = $(this).find('.slick-slide:not(.slick-cloned):eq(' + slideNum + ') figure svg').outerHeight(); 1259 } 1260 1261 $(this).find('.slick-arrow').animate({top: (maxHeight / 2) + 'px'}, 300); 1262 1263 // Pfeile prev / next im Slider der Quicklinks auf disable setzen, 1264 // wenn nicht mehr weitergeblättert werden kann 1265 let buttons = $(this).find('button'); 1266 (buttons).each(function(index, value) { 1267 if($(this).hasClass("slick-disabled")) { 1268 // console.log('button in slider module-quicklinks has class slick-disabled'); 1269 $(this).prop('disabled', true); 1270 } else { 1271 // console.log('button in slider module-quicklinks has NOT class slick-disabled'); 1272 $(this).prop('disabled', false); 1273 }; 1274 }); 1275 1276 }).slick({ 1277 dots: false, 1278 accessibility: true, 1279 adaptiveHeight: true, 1280 infinite: false, 1281 autoplay: false, 1282 autoplaySpeed: sliderInterval, 1283 prevArrow: '<button type="button" aria-label="Vorheriger Slide" class="slick-prev"><span class="icon arrow-left" aria-hidden="true"><svg width="11" height="18"><use xlink:href="' + svgIconPath + '#arrow-left"/></svg></span></button>', 1284 nextArrow: '<button type="button" aria-label="Nächster Slide" class="slick-next"><span class="icon arrow-right" aria-hidden="true"><svg width="11" height="18"><use xlink:href="' + svgIconPath + '#arrow-right"/></svg></span></button>', 1285 slidesToShow: 5, 1286 slidesToScroll: 5, 1287 responsive: [ 1288 { 1289 breakpoint: 992, 1290 settings: { 1291 slidesToShow: 3, 1292 slidesToScroll: 3, 1293 }, 1294 }, { 1295 breakpoint: 680, 1296 settings: { 1297 slidesToShow: 1, 1298 slidesToScroll: 1, 1299 }, 1300 }, 1301 ], 1302 }); 1303 1304 1305 $('.module-quicklinks .slick-prev').on('click', function(e) { 1306 $(this).attr("data-click","1"); 1307 $('.module-quicklinks .slick-next').attr("data-click","0"); 1308 }); 1309 1310 $('.module-quicklinks .slick-next').on('click', function(e) { 1311 $(this).attr("data-click","1"); 1312 $('.module-quicklinks .slick-prev').attr("data-click","0"); 1313 }); 1314 1315 $('.module-quicklinks .slide').attr('tabindex', null); 1316 $('.module-quicklinks .slider').on('afterChange', function(e) { 1317 setTimeout(function() { 1318 $('.module-quicklinks .slick-prev').on('click', function(e) { 1319 $(this).attr("data-click","1"); 1320 $('.module-quicklinks .slick-next').attr("data-click","0"); 1321 }); 1322 1323 $('.module-quicklinks .slick-next').on('click', function(e) { 1324 $(this).attr("data-click","1"); 1325 $('.module-quicklinks .slick-prev').attr("data-click","0"); 1326 }); 1327 $(e.target).find('.slide').attr('tabindex', null); 1328 $(e.target).find('[data-click="1"]').focus(); 1329 }, 0); 1330 }); 1331 1332 /* 1333 * Module: Accordion (Steuerlemente) 1334 * 1335 * Handelt die Anzeige und Funktionalitaet der 1336 * SchlieÃen- und Oeffnen-Buttons 1337 * 1338 * @context all 1339 */ 1340 $(document).on('click', '.accordion .close-item', function (e) { 1341 e.preventDefault(); 1342 $(this).parent().parent().collapse('hide'); 1343 });
1344 1345 $('.accordion .collapse').on('show.bs.collapse', function () { 1346 $(this).prev().find('.icon').removeClass('icon-open-item').addClass('icon-close-item'); 1347 $(this).prev().find('.icon').find('svg use').attr('xlink:href', svgIconPath + '#close-item'); 1348 1349 var panelGroup = $(this).parent('.card').parent('.accordion'); 1350 $(panelGroup).find('.control-bottom').children('button').fadeIn(); 1351 1352 }).on('hide.bs.collapse', function () { 1353 $(this).prev().find('.icon').removeClass('icon-close-item').addClass('icon-open-item'); 1354 1355 $(this).prev().find('.icon').find('svg use').attr('xlink:href', svgIconPath + '#open-item'); 1356 1357 }).on('hidden.bs.collapse', function () { 1358 1359 var panelGroup = $(this).parent('.card').parent('.accordion'); 1360 1361 if ($(panelGroup).find('.collapse.show').length == 0) { 1362 $(panelGroup).find('.control-bottom').children('button').fadeOut(); 1363 } else { 1364 $(panelGroup).find('.control-bottom').children('button').fadeIn(); 1365 } 1366 1367 }); 1368 1369 1370 /* 1371 * Module: Accordion (Steuerelement "Alle Oeffnen") 1372 * 1373 * Handelt die Anzeige und Funktionalitaet des 1374 * Steuerelements zum Oeffnen aller Eintraege 1375 * 1376 * @context all 1377 */ 1378 $(document).on('click', '.accordion .open-all > button', function (e) { 1379 e.preventDefault(); 1380 1381 var groupId = $(this).parent('.control').parent('.accordion').attr('id'); 1382 $('#' + groupId + ' .collapse').removeAttr('data-parent'); 1383 $('#' + groupId + ' .collapse').collapse('show'); 1384 1385 $('#' + groupId + ' .control-top.open-all').each(function () { 1386 var el = $(this).removeClass('open-all').addClass('close-all'); 1387 $(el).find('.icon').removeClass('icon-open-item').addClass('icon-close-item'); 1388 $(el).find('.label').text('Alle Einträge schlieÃen'); 1389 1390 $(el).find('.icon').find('svg use').attr('xlink:href', svgIconPath + '#close-item'); 1391 }); 1392 }); 1393 1394 /* 1395 * Module: Accordion (Steuerelement "Alle schlieÃen") 1396 * 1397 * Handelt die Anzeige und Funktionalitaet des 1398 * Steuerelements zum schlieÃen aller Eintraege 1399 * 1400 * @context all 1401 */ 1402 $(document).on('click', '.accordion .close-all > button', function (e) { 1403 e.preventDefault(); 1404 1405 var groupId = $(this).parent('.control').parent('.accordion').attr('id'); 1406 $('#' + groupId + ' .collapse').attr('data-parent', '#' + groupId); 1407 $('#' + groupId + ' .collapse').collapse('hide'); 1408 1409 $('#' + groupId + ' .control-top.close-all').each(function () { 1410 var el = $(this).removeClass('close-all').addClass('open-all'); 1411 $(el).find('.icon').removeClass('icon-close-item').addClass('icon-open-item'); 1412 $(el).find('.label').text('Alle Einträge öffnen'); 1413 1414 $(el).find('.icon').find('svg use').attr('xlink:href', svgIconPath + '#open-item'); 1415 }); 1416 }); 1417 1418 /* 1419 * Module: Share 1420 * 1421 * Kopierfunktion fuer die Seiten-URL 1422 * innerhalb des Share Modals 1423 * 1424 * @context all 1425 */ 1426 $(document).on('click', '.pagelink-wrap button', function (e) { 1427 let copyText = document.querySelector('input.pagelink'); 1428 copyText.select(); 1429 // console.log(copyText); 1430 navigator.clipboard.writeText(copyText.value); 1431 }); 1432 /* 1433 * Oeffnet bei Klick auf ein Video Vorschaubild 1434 * den Datenschutz-Hinweis 1435 * 1436 * @context all 1437 */ 1438 $(document).on('click','.module-youtube .open-privacy-modal',function(e) { 1439 e.preventDefault(); 1440 1441 $(this).next('.overlay').removeClass('hide'); 1442 $(this).next('.overlay').find('.action-activate').focus(); 1443 $(this).closest('.video.preview').removeClass('preview'); 1444 $('body').addClass('mobile-modal-open'); 1445 $(this).hide(); 1446 }); 1447 1448 /* 1449 * Schliesst den Datenschutzhinweis 1450 * mit Klick auf das X rechts oben 1451 * 1452 * @context all 1453 */ 1454 $(document).on('click','.module-youtube .close-privacy-modal',function(e) { 1455 e.preventDefault(); 1456 1457 var allActivationRequiredDivs = $(".activation-required"); 1458 1459 // falls auf einer Seite mehrere solche DIVs geoeffnet sind 1460 // dann diese alle schlieÃen 1461 allActivationRequiredDivs.each(function() { 1462 $(this).children('.overlay').addClass('hide'); 1463 $(this).children('.overlay').find('.open-privacy-modal').focus(); 1464 $(this).closest('.video').addClass('preview'); 1465 $('body').removeClass('mobile-modal-open'); 1466 $('button.open-privacy-modal').show(); 1467 }); 1468 }); 1469 1470 /* 1471 * Module: YouTube 1472 * 1473 * Entzieht die Einwilligung fuer die 1474 * YouTube Nutzung 1475 * 1476 * @context all 1477 */ 1478 if(isCookieSet('youtube_aktiv')){ 1479 $('.video').each(function() { 1480 let flexid= $(this).data("flexid"); 1481 show_youtube(flexid); 1482 }); 1483 } 1484 1485 $( ".youtube_aktivieren").click(function(e) { 1486 e.preventDefault()
1487 setCookie('youtube_aktiv' , "1"); 1488 1489 var allVideos = $(".module-youtube .video"); 1490 // fuer alle Videos im .module-youtube auf dieser Seite show_youtube ausuehren 1491 // damit nicht fuer jedes einzelne Videomodul explizit die Erlaubnis erteilt werden muss 1492 allVideos.each(function() { 1493 let flexid = $(this).data("flexid"); 1494 show_youtube(flexid); 1495 }); 1496 activateVideosInGalleryModal(); 1497 }); 1498 1499 function show_youtube(flexid) { 1500 $('#youtube_' + flexid).addClass('filled'); 1501 let videoid = $('#youtube_' + flexid).data("videoid"); 1502 let videourl = $('#youtube_' + flexid).data("videourl"); 1503 if (videoid!=""){ 1504 $('#youtube_' + flexid + ' .video-container').html('<iframe src="https://www.youtube-nocookie.com/embed/' + videoid + '?rel=0" frameborder="0" allowfullscreen referrerpolicy="strict-origin-when-cross-origin" title="Video"></iframe>'); 1505 } else { 1506 $('#youtube_' + flexid + ' .video-container').html('<iframe src="' + videourl + '" frameborder="0" allowfullscreen referrerpolicy="strict-origin-when-cross-origin" title="Video"></iframe>'); 1507 } 1508 } 1509 1510 function activateVideosInGalleryModal() { 1511 // fuer alle Videos im .module-gallery auf dieser Seite 1512 // damit diesen Videomodulen nicht zusaetzlich die Erlaubnis erteilt werden muss 1513 const privacyOverlays = document.querySelectorAll('[data-vid-id]'); 1514 1515 for (let i = 0; i < privacyOverlays.length; i++) { 1516 let videoId = privacyOverlays[i].getAttribute('data-vid-id'); 1517 let videoPlatform = privacyOverlays[i].getAttribute('data-platform'); 1518 const possibleYoutubeNames = ['youtube', 'yt', 'Youtube', 'YouTube', 'YT']; 1519 const possibleVimeoNames = ['Vimeo', 'vimeo']; 1520 let videoElement = ''; 1521 if (possibleYoutubeNames.includes(videoPlatform)) { 1522 videoElement = `<iframe width="580" height="350" class="gallery-modal__vid" src="https://www.youtube.com/embed/${videoId}" tabindex="-1" referrerpolicy="strict-origin-when-cross-origin"></iframe>`; 1523 } else if (possibleVimeoNames.includes(videoPlatform)) { 1524 videoElement = `<iframe width="580" height="350" class="gallery-modal__vid" src="https://player.vimeo.com/video/${videoId}" tabIndex="-1" referrerpolicy="strict-origin-when-cross-origin"></iframe>`; 1525 } 1526 1527 privacyOverlays[i].parentElement.insertAdjacentHTML('afterbegin', videoElement); 1528 privacyOverlays[i].style.display = 'none'; 1529 1530 } 1531 } 1532 1533 $('#youtube_deaktivieren').on('click', function (e) { 1534 removeCookie('youtube_aktiv'); 1535 removeCookie('videoplayer-youtube-accepted'); // fuer Videomodul Youtube barrierefrei 1536 $('.div_youtube_deaktivieren').html('<p>Datenübertragung wurde deaktiviert.</p>'); 1537 }); 1538 1539 1540 /* 1541 * adjustOverlayBoxes 1542 * 1543 * Gleicht die Hoehe der Overlays bei 1544 * nebeneinander stehenden Boxen an 1545 * 1546 * @context all 1547 */ 1548 window.adjustOverlayBoxes = function (selector, subselector, unsetOnMobile) { 1549 if (!selector || $(selector).length == 0) return false; 1550 1551 if (typeof unsetOnMobile == 'undefined') var unsetOnMobile = false; 1552 1553 //Alle Container durchlaufen und die Box mit der groessten Hoehe ermitteln 1554 $(selector).each(function (indexParent, elParent) { 1555 window.maxHeightTotal = 0; 1556 1557 $(elParent).find(subselector).each(function (index, el) { 1558 $(el).css('min-height', ''); 1559 if ($(el).outerHeight() > window.maxHeightTotal) window.maxHeightTotal = $(el).outerHeight(); 1560 }); 1561 1562 if ($(window).outerWidth() < 768 && unsetOnMobile) { 1563 $(elParent).find(subselector).each(function (index, el) { 1564 $(el).css('min-height', ''); 1565 }); 1566 } else { 1567 $(elParent).find(subselector).each(function (index, el) { 1568 $(el).css('min-height', window.maxHeightTotal + 'px'); 1569 }); 1570 } 1571 }); 1572 1573 }; 1574 1575 //Overlays initial innerhalb der Teaserboxen gleich ausrichten 1576 adjustOverlayBoxes('.module-slider-2box', '.overlay'); 1577 adjustOverlayBoxes('.module-teaser-slider', '.overlay'); 1578 1579 // Alle Slides innnerhalb von allen Slick Slidern bekommen eine eindeutige ID 1580 $('.slick-track').each(function (i, slider) { 1581 $(slider).find('.slide').each(function (j, slide) { 1582 $(slide).attr('id', 'slider-' + i + '-slide-' + j); 1583 }); 1584 });
1585 1586 // Highlighting von Woertern 1587 const allWrappers = document.querySelectorAll(".module-introduction p, .module-introduction ul, .module-introduction ol, .module-text p, .module-text ul, .module-text ol, .module-topic-overview p, .module-topic-overview ul, .module-topic-overview ol, .module-highlight p, .module-highlight ul, .module-highlight ol, .module-accordions p, .module-accordions ul, .module-accordions ol, .module-teaser-textpic p, .module-teaser-textpic ul, .module-teaser-textpic ol, .module-topics p, .module-topics ul, .module-topics ol, .module-program-items p, .module-program-items ul, .module-program-items ol"); 1588 // console.log(allWrappers); 1589 const className = "in-view"; 1590 const options = { 1591 root: null, // Der Viewport ist das Root-Element 1592 threshold: 0.8, // 80% des Elements muessen sichtbar sein, um die Animation zu starten 1593 rootMargin: "-50px", // zusaetzlicher Margin um das root 1594 } 1595 const sectionObserver = new IntersectionObserver(callback, options) 1596 1597 allWrappers.forEach((section) => { 1598 sectionObserver.observe(section); 1599 }); 1600 1601 // callback Funktion, die das Scrollen ueberwacht und entsprechend reagiert 1602 function callback(entries, observer) { 1603 entries.forEach(entry => { 1604 if (entry.isIntersecting) { 1605 entry.target.classList.add(className); 1606 // Optional - falls nur einmalig: 1607 // observer.unobserve(entry.target); 1608 } 1609 }); 1610 } 1611 1612}); 1613 1614// the current open accordion will not be able to close itself 1615// https://stackoverflow.com/a/49306356 1616$('[data-toggle="collapse"]').on('click', function (e) { 1617 if ($(this).parents('.accordion').find('.collapse.show')) { 1618 var idx = $(this).index('[data-toggle="collapse"]'); 1619 if (idx == $('.collapse.show').index('.collapse')) { 1620 e.stopPropagation(); 1621 } 1622 } 1623}); 1624 1625// picture credits 1626function onPictureCreditsClick(e) { 1627 e.preventDefault(); 1628 1629 const target = e.currentTarget; 1630 const isOpen = $(target).hasClass('picture-credits--open'); 1631 1632 if (!isOpen) { 1633 $(target).attr('aria-expanded', 'true'); 1634 $(target).renameAttr('data-aria-describedby', 'aria-describedby'); 1635 $(target).addClass('picture-credits--open'); 1636 1637 } else { 1638 $(target).attr('aria-expanded', 'false'); 1639 $(target).renameAttr('aria-describedby', 'data-aria-describedby'); 1640 $(target).removeClass('picture-credits--open'); 1641 } 1642} 1643 1644function reInitPictureCreditHandler() { 1645 $('.picture-credits').unbind(); 1646 $('.picture-credits').click(onPictureCreditsClick); 1647} 1648 1649$(window).on('load', function () { 1650 $('.picture-credits').click(onPictureCreditsClick); 1651}); 1652 1653 1654$(document).ready(function () { 1655 1656//START: Podcast 1657// getting elements from mp3 html 1658 const player = document.getElementsByClassName('content2-audio'); 1659 const start = document.getElementsByClassName('content2-audio_controls-start'); 1660 const btnMute = document.getElementsByClassName('content2-audio_controls-volume_mute'); 1661 const volumeBar = document.getElementsByClassName('content2-audio_controls-volume-bar'); 1662 const progressBar = document.getElementsByClassName('content2-audio_controls-progress-bar'); 1663 const current = document.getElementsByClassName('content2-audio_controls-progress_current'); 1664 var arrowkeys = []; 1665 var playing = []; 1666 1667//go over all Podcast Modules 1668 for (let i = 0; i < player.length; i++) { 1669 arrowkeys[i] = false; 1670 playing[i] = false; 1671 1672 if (player[i]) { 1673 player[i].onloadedmetadata = function () { 1674 current[i].innerHTML = time_convert(player[i].duration); 1675 }; 1676 1677// event Listener 1678 volumeBar[i].addEventListener('change', volume); 1679 player[i].addEventListener('timeupdate', updateprogressBar); 1680 progressBar[i].addEventListener('click', seekMousclick); 1681 progressBar[i].addEventListener('keydown', seekArrowkey); 1682 progressBar[i].addEventListener('keyup', finishArrowKey); 1683 start[i].addEventListener('click', PlayOrPause); 1684 btnMute[i].addEventListener('click', muteVolume); 1685 } 1686 1687 function PlayOrPause() { 1688 if (playing[i] === true) { 1689 player[i].pause(); 1690 playing[i] = false; 1691 start[i].innerHTML = '<button aria-label="Abspielen" class="content2-audio_controls-play"><svg width="17" height="17"><use xlink:href="' + svgIconPath + '#play"></use></svg></button>'; 1692 start[i].querySelector('button').focus(); 1693 } else { 1694 player[i].play(); 1695 playing[i] = true; 1696 start[i].innerHTML = ' <button aria-label="Pausieren" class="content2-audio_controls-pause" ><svg width="17" height="17"><use xlink:href="' + svgIconPath + '#stop"></use></svg></button>'; 1697 start[i].querySelector('button').focus(); 1698 } 1699 } 1700 1701// Update the video volume. Adjust the volume button 1702 function volume() { 1703 player[i].volume = parseInt(volumeBar[i].value) / 10; 1704 if (player[i].volume === 0) { 1705 muteVolume(); 1706 } 1707 if (0 < player[i].volume && player[i].volume < 0.5) { 1708 if (player[i].muted) { 1709 muteVolume(); 1710 } 1711 btnMute[i].innerHTML = ' <svg aria-label="geringe Lautstärke" width="17" height="17"><use xlink:href="' + svgIconPath + '#volumedown"></use></svg>'; 1712 } 1713 if (player[i].volume > 0.5) { 1714 if (player[i].muted) { 1715 muteVolume(); 1716 } 1717 btnMute[i].innerHTML = '<svg aria-label="Stummschalten" width="17" height="17"><use xlink:href="' + svgIconPath + '#volumeup"></use></svg>'; 1718 } 1719 } 1720 1721// Toggles the media player's mute and unmute status 1722 function muteVolume() { 1723 if (player[i].src) { 1724 if (player[i].muted) { 1725 player[i].muted = false; 1726 volume(); 1727 } else { 1728 player[i].muted = true; 1729 btnMute[i].innerHTML = '<svg aria-label="Stummschalten beenden" width="17" height="17"><use xlink:href="' + svgIconPath + '#volumemute"></use></svg>'; 1730 } 1731 } 1732 } 1733 1734// Update the progress bar. paused when progress with arrow keys 1735 function updateprogressBar() { 1736 if (arrowkeys[i] === false) { 1737 // Work out how much of the media has played via the duration and currentTime parameters 1738 var percentage = Math.floor((100 / player[i].duration) * player[i].currentTime); 1739 // Update the progress bar's value 1740 progressBar[i].value = percentage; 1741 1742 // Update the progress bar's text (for browsers that don't support the progress element) 1743 current[i].innerHTML = time_convert(player[i].duration - player[i].currentTime); 1744 } 1745 if (player[i].duration - player[i].currentTime === 0) { 1746 player[i].currentTime = 0; 1747 pauseMusic(); 1748 } 1749 } 1750 1751// get the position user drags progress to 1752 function seekMousclick(e) { 1753 if (player[i].src) { 1754 var percent = e.offsetX / this.offsetWidth; 1755 player[i].currentTime = percent * player[i].duration; 1756 e.target.value = Math.floor(percent / 100); 1757 e.target.innerHTML = progressBar[i].value; 1758 } 1759 } 1760 1761//move progress with arrow keys 1762 function seekArrowkey(e) { 1763 if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') { 1764 arrowkeys[i] = true; 1765 var percent = (progressBar[i].value); 1766 player[i].currentTime = player[i].duration * percent / 100; 1767 current[i].innerHTML = time_convert(player[i].duration - player[i].currentTime); 1768 } 1769 } 1770 1771//enable automatic progress again 1772 function finishArrowKey(e) { 1773 if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') { 1774 arrowkeys[i] = false; 1775 } 1776 } 1777 1778// convert secounds to minutes and secounds with the layout 00:00 1779 function time_convert(num) { 1780 var minutes = Math.floor(num / 60); 1781 var secounds = num % 60; 1782 return minutes + ':' + secounds.toFixed(0).padStart(2, '0'); 1783 } 1784 } 1785 1786//END: Podcast 1787 1788
1789//////////// START: Gallery Module Script ////////////// 1790 const documentHTML = document.querySelector('html'); 1791 // const galleryModuleButtons = document.querySelectorAll('.gallery-module-button'); 1792 const galleryModuleLightboxes = document.querySelectorAll('.module-gallery-lightbox'); 1793 const galleryModuleImageButtons = document.getElementsByClassName('gallery-module__img-btn'); 1794 const galleryModals = document.querySelectorAll('.gallery-modal'); 1795 const galleryModalCloseButtons = document.querySelectorAll('.gallery-modal__close-btn'); 1796 const scrollToTopButton = document.querySelector('.go-top'); 1797 1798 1799// add event listeners to all gallery module buttons 1800 if (galleryModuleLightboxes && galleryModals) { 1801 // galleryModuleButtons.forEach((button) => button.addEventListener('click', openLightbox)); 1802 galleryModuleLightboxes.forEach((lightbox) => lightbox.addEventListener('click', closeLightbox)); 1803 1804 galleryModalCloseButtons.forEach((button) => button.addEventListener('click', closeLightbox)); 1805 galleryModalCloseButtons.forEach((button) => button.addEventListener('keypress', closeLightbox)); 1806 } 1807 1808 const galleryModuleImageButtonsArray = Array.from(galleryModuleImageButtons); 1809 1810 galleryModuleImageButtonsArray.forEach((button) => button.addEventListener('click', openLightbox)); 1811 galleryModuleImageButtonsArray.forEach((button) => button.addEventListener('keypress', openLightbox)); 1812 1813 1814// const galleryModalContainer = document.querySelector('#gallery-modal__container'); 1815 const galleryModalContainers = document.querySelectorAll('.gallery-modal__container'); 1816 1817 let galleryModalContainer = null; 1818 1819 let focusableElements = [], firstFocusableElement, lastFocusableElement, iFramesInModal = []; 1820 1821 function openLightbox(e) { 1822 1823 // getting galleryModalContainer from galleryModal which contains the button that was clicked 1824 galleryModalContainer = this.closest('.module-gallery').previousElementSibling; 1825 1826 const galleryModalSlider = galleryModalContainer.querySelector('.module-content-slider'); 1827 1828 // getting all focusable elements on the active slide and storing them in an array 1829 focusableElements = galleryModalContainer.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]'); 1830 firstFocusableElement = focusableElements[0]; 1831 lastFocusableElement = focusableElements[focusableElements.length - 1]; 1832 1833 1834 let galleryImgIndex = 0; 1835 // checking if the button that was clicked is a gallery module image button 1836 if (this.classList.contains('gallery-module__img-btn')) { 1837 // getting container of the button that was clicked 1838 const galleryModuleContainer = this.closest('.module-gallery'); 1839 // getting all gallery module image buttons in the container 1840 const galleryModuleImageButtonsInContainer = galleryModuleContainer.querySelectorAll('.gallery-module__img-btn'); 1841 1842 // converting galleryModuleImageButtonsInContainer to array (to use indexOf in next step) 1843 const galleryModuleImageButtonsInContainerArray = Array.from(galleryModuleImageButtonsInContainer); 1844 1845 // getting index of the button that was clicked inside the container 1846 galleryImgIndex = galleryModuleImageButtonsInContainerArray.indexOf(this); 1847 1848 } 1849 1850 // opening correct image in lightbox at previously stored index 1851 const contentSlider = $(`#${galleryModalSlider.id} .slider`); 1852 contentSlider.slick('slickGoTo', galleryImgIndex, true); 1853 1854 1855 if (e.type === 'click' || e.key === 'Enter') { 1856 if (galleryModalContainer.style.visibility === 'hidden') { 1857 galleryModalContainer.style.visibility = 'visible'; 1858 scrollToTopButton.style.visibility = 'hidden'; 1859 documentHTML.style.overflow = 'hidden'; 1860 firstFocusableElement.focus(); 1861 } 1862 } 1863 } 1864 1865 function closeLightbox(e) { 1866 if (e.type === 'click' || e.key === 'Enter') { 1867
1868 galleryModalContainers.forEach(galleryModalContainer => { 1869 if (galleryModalContainer.style.visibility === 'visible') { 1870 galleryModalContainer.style.visibility = 'hidden'; 1871 } 1872 }); 1873 scrollToTopButton.style.visibility = 'visible'; 1874 documentHTML.style.overflow = 'auto'; 1875 } 1876 } 1877 1878// Closing lightbox on escape if it is active right now 1879 document.onkeydown = function (e) { 1880 if (e.key === 'Escape') { 1881 galleryModalContainers.forEach(galleryModalContainer => { 1882 if (galleryModalContainer.style.visibility === 'visible') { 1883 galleryModalContainer.style.visibility = 'hidden'; 1884 } 1885 }); 1886 scrollToTopButton.style.visibility = 'visible'; 1887 documentHTML.style.overflow = 'auto'; 1888 } 1889 }; 1890 1891 if (galleryModals) { 1892// "Locking" Focus inside Lightbox Modal 1893 galleryModals.forEach(galleryModal => { 1894 galleryModal.addEventListener('keydown', function (e) { 1895 const activeSlide = galleryModal.querySelector('.slick-active'); 1896 1897 // getting every iFrame in each modal 1898 let iFramesInModal = galleryModal.querySelectorAll('iframe'); 1899 1900 // Making iFrame tabbable when on slide with iFrame embedded in it 1901 for (let i = 0; i < iFramesInModal.length; i++) { 1902 if (activeSlide.contains(iFramesInModal[i])) { 1903 iFramesInModal[i].tabIndex = 0; 1904 } else { 1905 iFramesInModal[i].tabIndex = -1; 1906 } 1907 } 1908 1909 if (galleryModalContainer.style.visibility === 'visible') { 1910 if (e.key === 'Tab') { 1911 if (e.shiftKey) /* shift + tab (backwards) */ { 1912 if (document.activeElement === firstFocusableElement) { 1913 lastFocusableElement.focus(); 1914 e.preventDefault(); 1915 } 1916 } else /* tab (forwards) */ { 1917 if (document.activeElement === lastFocusableElement) { 1918 firstFocusableElement.focus(); 1919 e.preventDefault(); 1920 } 1921 } 1922 } 1923 } 1924 1925 }); 1926 }); 1927 1928 } 1929 1930 // Adding event listeners to all privacy policy buttons in gallery modal 1931 const acceptPrivacyPolicyButtons = document.querySelectorAll('.accept-privacy-policy'); 1932 1933 for (let i = 0; i < acceptPrivacyPolicyButtons.length; i++) { 1934 acceptPrivacyPolicyButtons[i].addEventListener('click', activateVideo); 1935 } 1936 1937 if(isCookieSet('youtube_aktiv')){ 1938 activateVideo(); 1939 } 1940 1941 function activateVideo() { 1942 setCookie('youtube_aktiv', '1'); 1943 // show_youtube_1(); 1944 // for each data-vid-id element 1945 // remove that element 1946 // if data-platform === YT/Vimeo 1947 // => use correct platform in link 1948 // insert <iframe> with correct link and video-id into modal 1949 1950 // data-vid-id HAS to be set 1951 const privacyOverlays = document.querySelectorAll('[data-vid-id]'); 1952 1953 for (let i = 0; i < privacyOverlays.length; i++) { 1954 let videoId = privacyOverlays[i].getAttribute('data-vid-id'); 1955 let videoPlatform = privacyOverlays[i].getAttribute('data-platform'); 1956 const possibleYoutubeNames = ['youtube', 'yt', 'Youtube', 'YouTube', 'YT']; 1957 const possibleVimeoNames = ['Vimeo', 'vimeo']; 1958 let videoElement = ''; 1959 if (possibleYoutubeNames.includes(videoPlatform)) { 1960 videoElement = `<iframe width="580" height="350" class="gallery-modal__vid" src="https://www.youtube.com/embed/${videoId}" tabindex="-1" referrerpolicy="strict-origin-when-cross-origin"></iframe>`; 1961 } else if (possibleVimeoNames.includes(videoPlatform)) { 1962 videoElement = `<iframe width="580" height="350" class="gallery-modal__vid" src="https://player.vimeo.com/video/${videoId}
1962" tabIndex="-1" referrerpolicy="strict-origin-when-cross-origin"></iframe>`; 1963 } 1964 1965 privacyOverlays[i].parentElement.insertAdjacentHTML('afterbegin', videoElement); 1966 privacyOverlays[i].style.display = 'none'; 1967 1968 // fuer alle Videos im .module-youtube auf dieser Seite show_youtube ausfuehren 1969 // damit diesen Videomodulen nicht zusaetzlich die Erlaubnis erteilt werden muss 1970 var allVideos = $(".module-youtube .video"); 1971 allVideos.each(function() { 1972 let flexid = $(this).data("flexid"); 1973 show_youtube_in_gallery_module(flexid); 1974 }); 1975 } 1976 } 1977 1978 function show_youtube_in_gallery_module(flexid) { 1979 $('#youtube_' + flexid).addClass('filled'); 1980 let videoid = $('#youtube_' + flexid).data("videoid"); 1981 let videourl = $('#youtube_' + flexid).data("videourl"); 1982 if (videoid!=""){ 1983 $('#youtube_' + flexid + ' .video-container').html('<iframe src="https://www.youtube-nocookie.com/embed/' + videoid + '?rel=0" frameborder="0" allowfullscreen referrerpolicy="strict-origin-when-cross-origin" title="Video"></iframe>'); 1984 }else { 1985 $('#youtube_' + flexid + ' .video-container').html('<iframe src="' + videourl + '" frameborder="0" allowfullscreen referrerpolicy="strict-origin-when-cross-origin" title="Video"></iframe>'); 1986 } 1987 } 1988 1989 $( ".gallery-module-button").click(function(e) { 1990 e.preventDefault() 1991 $(this).parent().parent().children('ul.gallery-module__img-container').children('li.slide_hide').toggle(); 1992 if ($(this).hasClass('active')){ 1993 $(this).html("Weitere Bilder anzeigen") 1994 $(this).removeClass('active') 1995 }else { 1996 $(this).html("Weniger Bilder anzeigen") 1997 $(this).addClass('active') 1998 } 1999 }); 2000 2001}); 2002 2003function isCookieSet(cookie_name) { 2004 var return_value = "false"; 2005 var action = '/imperia/md/content/stmas/cookie/ajax_cookie.php', 2006 method = 'post', 2007 data = { 2008 'name' : cookie_name, 2009 'value' : '', 2010 'do' : 'get' 2011 }; 2012 2013 $.ajax({
2014 url : action, 2015 async: false, 2016 type : method, 2017 data : data 2018 }).done(function (data) { 2019 2020 if (data=="true"){ 2021 return_value= "true"; 2022 } 2023 }) 2024 if (return_value=="true"){ 2025 return true; 2026 }else { 2027 return false; 2028 } 2029} 2030 2031function setCookie(cname, cvalue) { 2032 var action = '/imperia/md/content/stmas/cookie/ajax_cookie.php', 2033 method = 'post', 2034 data = { 2035 'name' : cname, 2036 'value' : cvalue, 2037 'do': 'set' 2038 }; 2039 2040 $.ajax({ 2041 url : action, 2042 type : method, 2043 data : data 2044 }); 2045} 2046 2047function removeCookie(cname) { 2048 var action = '/imperia/md/content/stmas/cookie/ajax_cookie.php', 2049 method = 'post', 2050 data = { 2051 'name' : cname, 2052 'value' : 0, 2053 'do': 'remove' 2054 }; 2055 2056 $.ajax({ 2057 url : action, 2058 type : method, 2059 data : data 2060 }); 2061}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.