1console.log("main.js"); 2//////////////////////////////////////// 3// NAVIGATION 4//////////////////////////////////////// 5var mainSection = document.querySelector('body'); 6var header = document.querySelector('.header'); 7var menuBtn = document.querySelector('.mobile-menu'); 8var menu = document.querySelector('.navigation-mobile-menu'); 9var menuHeader = document.querySelector('.header-mobile'); 10var eventSlides = ''; 11var month = new Array(); 12//************************************************************************************************** 13// forEach function from Todd Motto's blog 14var forEach = function (array, callback, scope) { 15 for (var i = 0; i < array.length; i++) { 16 callback.call(scope, i, array[i]); // passes back stuff we need 17 } 18}; 19 20month['01'] = "January"; 21month['02'] = "February"; 22month['03'] = "March"; 23month['04'] = "April"; 24month['05'] = "May"; 25month['06'] = "June"; 26month['07'] = "July"; 27month['08'] = "August"; 28month['09'] = "September"; 29month['10'] = "October"; 30month['11'] = "November"; 31month['12'] = "December"; 32 33if(header){ 34 menuBtn.onclick = function(){ 35 mainSection.classList.toggle('menu-open'); 36 menu.classList.toggle('menu-open'); 37 menuBtn.classList.toggle('is-active'); 38 menuHeader.classList.toggle('menu-open'); 39 } 40 // Toggle subnav on both desk & mobile 41 var menuPrimaryLink = document.querySelectorAll("#menu .menu-primary-list-item-link"); 42 var menuPrimaryContainer = document.querySelectorAll(".navigation-menu-container"); 43 var menuSecondaryList = document.querySelectorAll(".menu-primary-list-item"); 44 // Mobiel parent & desktop parent 45 var menuPrimaryLinkMobile = document.querySelectorAll("#menuMobile .mobile-toggle"); 46 47 // DESK = #menu 48 // MOBILE = #menuMobile 49 for (i = 0; i < menuPrimaryLink.length; i++) { 50 menuPrimaryLink[i].addEventListener('mouseover', function() { 51 //menuPrimaryLink.classList.remove('active'); 52 forEach(menuPrimaryLink, function(index, element) { 53 element.classList.remove('active'); 54 }); 55 56 this.classList.toggle('active'); 57 }); 58 59 // Removes active state on click in the first section, but not really working 60 var specifiedElement = document.querySelector('body'); 61 document.addEventListener('click', function(event) { 62 var isClickInside = specifiedElement.contains(event.target); 63 64 if (isClickInside) { 65 /*menuPrimaryLink.forEach(function(element) { 66 element.classList.remove('active'); 67 });*/ 68 for(var i = 0; i < menuPrimaryLink.length; i++) { 69 menuPrimaryLink[i].classList.remove('active'); 70 } 71 } 72 }); 73 } 74 // Mobile 75 for (i = 0; i < menuPrimaryLinkMobile.length; i++) { 76 menuPrimaryLinkMobile[i].addEventListener('click', function() { 77 //menuPrimaryLinkMobile.classList.remove('active'); 78 79 //menuPrimaryLinkMobile.forEach(function(element) { 80 //if(element !== this) { 81 //if (element.previousElementSibling.classList.contains('active')){ 82 //element.previousElementSibling.classList.remove('active'); 83 //} 84 85 //} 86 //}); 87 88 this.previousElementSibling.classList.toggle('active'); 89 }); 90 91 // Removes active state on click in the first section, but not really working 92 // var specifiedElement = document.querySelector('body'); 93 // document.addEventListener('click', function(event) { 94 // var isClickInside = specifiedElement.contains(event.target); 95 96 // if (isClickInside) { 97 // menuPrimaryLinkMobile.forEach(function(element) { 98 // element.previousElementSibling.classList.remove('active'); 99 // }); 100 // } 101 // }); 102 } 103} // if header 104 105 106 107//////////////////////////////////////// 108// SLIDER SMALL 109//////////////////////////////////////// 110var smallSlideContainer = document.querySelector('.my-slider-small'); 111// This way is probs better than below 112// var smallSlideContainer = document.querySelectorAll('.my-slider-small'); 113// forEach(smallSlideContainer, function (index, value) { 114// console.log('slider'); 115// }); 116 117function tnsSliderSmall(){ 118 console.log('tnsSliderSmall'); 119 [].forEach.call(document.querySelectorAll('.my-slider-small'), function (el) { 120 tns({ 121 container: el, 122 items: 1, 123 axis: "vertical", 124 autoplay: true, 125 autoplayTimeout: 6000, 126 autoplayButtonOutput: false, 127 touch: false, 128 responsive: { 129 640: { 130 items: 1 131 }, 132 700: { 133 gutter: 0 134 }, 135 900: { 136 items: 1 137 } 138 } 139 }); 140 console.log('test'); 141 }); 142 143}; 144if(smallSlideContainer){ 145 tnsSliderSmall(); 146}else{ 147 console.log('No Small Slider'); 148} 149
150//////////////////////////////////////// 151// SLIDER LARGE 152//////////////////////////////////////// 153var largeSlideContainer = document.querySelector('.my-slider-large'); 154function tnsSliderLarge(){ 155 console.log('tnsSliderLarge'); 156 157 var sliderLarge = tns({ 158 "container": '.my-slider-large', 159 "items": 1, 160 "axis": "vertical", 161 "touch": false, 162 "speed": 800, 163 "autoplay": true, 164 "autoplayHoverPause": false, 165 "autoplayTimeout": 7500, 166 "autoplayButtonOutput":false, 167 "autoplayButton":false, 168 169 responsive: { 170 640: { 171 items: 1 172 }, 173 700: { 174 items: 1 175 }, 176 900: { 177 items: 1 178 } 179 } 180 }); 181}; 182 183if(largeSlideContainer){ 184 tnsSliderLarge(); 185}else{ 186 console.log('No Large Slider'); 187} 188//////////////////////////////////////// 189// SLIDER EVENTS 190//////////////////////////////////////// 191var eventsSlideContainer = document.querySelector('.my-slider-events'); 192// Get attribute of current date and event then run thes slider function.. 193 194// default = "all" 195 196 197 198 199function tnsSliderEvents() { 200 if (eventSlides == '') { 201 eventSlides = document.querySelectorAll("[data-event-type]"); 202 } 203 var eventSliderContainer = document.querySelector('.my-slider-events'); 204 var sliderContainer = document.querySelector('.slider-events-container'); 205 var filterDate = sliderContainer.dataset.date; 206 var filterType = sliderContainer.dataset.type; 207 208 if (typeof filterDate != 'undefined' || typeof filterType != 'undefined') { 209 var div = document.createElement("div"); 210 div.classList.add("my-slider-events", "operas"); 211 [].forEach.call(eventSlides, function (event) { 212 //eventSlides.forEach(function(event) { 213 if(typeof filterDate != 'undefined' && typeof filterType != 'undefined') { 214 if( event.dataset.eventType == filterType && event.dataset.eventDate == filterDate) { 215 div.appendChild(event); 216 } 217 } 218 else if(event.dataset.eventDate == filterDate && typeof filterType == 'undefined') { 219 div.appendChild(event); 220 } 221 else if(event.dataset.eventType == filterType && typeof filterDate == 'undefined') { 222 div.appendChild(event); 223 } 224 else if(typeof filterDate == 'undefined' && typeof filterType == 'undefined') { 225 div.appendChild(event); 226 } 227 }); 228 229 while (sliderContainer.hasChildNodes()) { 230 sliderContainer.removeChild(sliderContainer.firstChild); 231 } 232 sliderContainer.appendChild(div); 233 } 234 else if(typeof filterDate == 'undefined' && typeof filterType == 'undefined') { 235 var div = document.createElement("div"); 236 div.classList.add("my-slider-events", "operas"); 237 [].forEach.call(eventSlides, function(event) { 238 div.appendChild(event); 239 }); 240 241 while (sliderContainer.hasChildNodes()) { 242 sliderContainer.removeChild(sliderContainer.firstChild); 243 } 244 sliderContainer.appendChild(div); 245 } 246 247 var sliderEvents = tns({ 248 container: document.querySelector('.my-slider-events'), 249 items: 1, 250 mouseDrag: false, 251 loop:true, 252 nav: false, 253 gutter:-1, 254 controls:false, 255 lazyload: true, 256 responsive: { 257 640: { 258 items: 2 259 }, 260 820: { 261 items: 3, 262 mouseDrag: true, 263 nav: true, 264 controls: true 265 }, 266 1120: { 267 items: 5, 268 nav: false 269 } 270 } 271 }); 272 273 if (typeof sliderEvents !== 'undefined') { 274 var loadInfo = sliderEvents.getInfo(); 275 var highlightedSlide = 276 loadInfo.slideItems[loadInfo.index].classList.add('current-slide'); 277 var currentSlideClass = function (info) { 278 // direct access to info object 279 var info = sliderEvents.getInfo(); 280 var indexPrev = info.indexCached; 281 var index = info.index; 282 info.slideItems[indexPrev].classList.remove('current-slide'); 283 info.slideItems[index].classList.add('current-slide'); 284 //Update Title 261 285 var dateArray = info.slideItems[index].nextElementSibling.nextElementSibling.getAttribute('data-event-date').split('_'); 286 var title = document.querySelector('.headline-title h1'); 287 if(title){ 288 title.innerHTML = month[dateArray[1]] + ' ' + dateArray[0]; 289 } 290 291 292 } 293 // bind function to event 294 sliderEvents.events.on('indexChanged', currentSlideClass); 295 296 var destroySlider = function (info) { 297 sliderEvents.destroy(); 298 } 299 } 300 301 /****************************************************************/ 302 /*document.getElementById('destroySlider').onclick = function () { 303 sliderEvents.destroy(); 304 }; 305 document.getElementById('rebuildSlider').onclick = function () { 306 sliderEvents.rebuild(); 307 };*/ 308 309 310}; 311if(eventsSlideContainer){ 312 tnsSliderEvents(); 313 let slideIndy = document.querySelectorAll(".tns-item"); 314 //console.log(''); 315 316 //.getAttribute("data-list-size"); 317 /*for (let i = 0; i <= slideIndy.length; i++) { 318 console.log(slideIndy[i]); 319 }*/ 320 321}else{ 322 console.log('No Events Slider'); 323} 324 325var gallerySlideContainer = document.querySelector('.my-slider-gallery'); 326// tiny-slider initialisation 327function tnsSliderGallery(){ 328 var sliderGallery = document.querySelectorAll('.my-slider-gallery');
329 forEach(sliderGallery, function (index, value) { 330 // now fetch YOUR-SLUG from html (use value.getAttribute('data-name') for < IE10 support) 331 //let thumbnail = value.dataset.name; 332 var sliderGallery = tns({ 333 container: value, 334 items: 1, 335 axis: "horizontal", 336 animateIn: 'fadeInDown', 337 animateOut: 'fadeOutDown', 338 //animateDelay: 300, 339 mouseDrag: true, 340 loop:true, 341 nav: true, 342 controls:false, 343 center: true, 344 responsive: { 345 900: { 346 items: 3, 347 nav: false, 348 controls:true 349 }, 350 1120: { 351 items: 3 352 } 353 } 354 }); 355 356 // 357 var loadInfo = sliderGallery.getInfo(); 358 var eventSlides = loadInfo.slideItems; 359 //loadInfo.slideItems[loadInfo.index].classList.add('current-slide'); 360 361 var captionHolder = document.getElementById('caption'); 362 //var captionHolder = captionHolder.innerHTML = document.querySelector('.image-caption-display'); 363 364 captionHolder.innerHTML = document.querySelector('.tns-slide-active .image-caption').innerHTML; 365 366 var currentSlideCaption = function (info) { 367 // direct access to info object 368 var info = sliderGallery.getInfo(); 369 var indexPrev = info.indexCached; 370 var index = info.index; 371 info.slideItems[indexPrev].classList.remove('current-slide'); 372 for (var i = 0; i < info.slideItems.length; i++) { 373 info.slideItems[i].classList.remove('current-slide'); 374 } 375 info.slideItems[index].classList.add('current-slide'); 376 captionHolder.innerHTML = document.querySelector('.tns-slide-active .image-caption').innerHTML; 377 if(parseInt(index + 1) > info.slideItems.length - 1) { 378 captionHolder.innerHTML = info.slideItems[index].querySelector('.image-caption').innerHTML; 379 } 380 else { 381 captionHolder.innerHTML = info.slideItems[parseInt(index + 1)].querySelector('.image-caption').innerHTML; 382 } 383 384 } 385 // bind function to event 386 // Onchange of slider 387 // Need onload 388 window.addEventListener("load", function(){ 389 currentSlideCaption(); 390 }); 391 sliderGallery.events.on('indexChanged', currentSlideCaption); 392 393 394 }); 395}; 396 397 398//////////////////////////////////////// 399// SLIDER GALLERY 400//////////////////////////////////////// 401// var gallerySlideContainer = document.querySelector('.my-slider-gallery'); 402// function tnsSliderGallery(){ 403 404// console.log('tnsSliderGallery') 405// var sliderGallery = tns({ 406// container: '.my-slider-gallery', 407// items: 1, 408// axis: "horizontal", 409// animateIn: 'fadeInDown', 410// animateOut: 'fadeOutDown', 411// animateDelay: 300, 412// mouseDrag: true, 413// loop:true, 414// nav: true, 415// controls:false, 416// responsive: { 417// 900: { 418// items: 3, 419// nav: false, 420// controls:true 421// }, 422// 1120: { 423// items: 3 424// } 425// } 426// }); 427// // Get all kinds of stuff from "slider.getInfo" 428 429 430 431// }; 432 433 434if(gallerySlideContainer){ 435 tnsSliderGallery(); 436}else{ 437 console.log('No Gallery Slider'); 438} 439 440//////////////////////////////////////// 441// BUTTON HACK OFFSET, but cool with anim? 442// Only on centered parents though :/ 443//////////////////////////////////////// 444var primaryBtn = document.querySelectorAll('.slider-header .btn-primary, .flex-center .btn-primary, .slider-header .btn-secondary, .slider-events-more-btn .btn-secondary'),i; 445if (primaryBtn.length){ 446 for (i = 0; i < primaryBtn.length; ++i) { 447 primaryBtn[i].style.marginLeft = -primaryBtn[i].offsetWidth + "px"; 448 } 449} 450 451 452//////////////////////////////////////// 453// LOAD MORE MIMIC - no db 454//////////////////////////////////////// 455var btnBlogLoad = document.getElementById('loadMore'); 456function blogLoad(){ 457 var blogItems = document.querySelector('.blog-overview-items'); 458 var lastEntityId = blogItems.lastElementChild.querySelector('a').dataset.entityId; 459 // set up a request 460 var request = new XMLHttpRequest(); 461 // keep track of the request 462 request.onreadystatechange = function() { 463 if(request.readyState === 4) { 464 if(request.status === 200) { 465 // update the HTML of the element 466 var response = JSON.parse(request.responseText); 467 if (response.status){ 468 for(var i = 0; i < 3; i++) { 469 blogItems.innerHTML += response.blog[i]; 470 } 471 } 472 else { 473 btnBlogLoad.style.display = 'none'; 474 } 475 } else { 476 blogItems.innerHTML += 'An error occurred during your request: ' + request.status + ' ' + request.statusText; 477 } 478 } 479 } 480 request.open('Get', '/_ajax/load_more?last_id='+lastEntityId); 481 request.send(); 482} 483// Onclick of loadmore 484if(btnBlogLoad){ 485 btnBlogLoad.addEventListener('click', function() { 486 blogLoad(); 487 }); 488}else{ 489 console.log("No Load Btn"); 490} 491 492 493//////////////////////////////////////// 494// ACCORDION TOGGLE 495//////////////////////////////////////// 496var accordionSlideContainer = document.querySelectorAll('.section-accordion'); 497if(accordionSlideContainer.length){ 498 forEach(accordionSlideContainer, function(index, accordion) { 499 var accordionWrapperNode = accordion.getElementsByClassName('section-accordion')[0]; 500 var accordionHeadline = accordion.getElementsByTagName('h5'); 501 function accordionToggle (e) { 502 e.preventDefault(); 503 var accordionContent = this; 504 if (accordionContent.classList.contains('active')) { 505 accordionContent.classList.remove('active'); 506 } else { 507 accordionContent.classList.add('active'); 508 } 509 } 510 511 for (var i = 0; i < accordionHeadline.length; i++) { 512 accordionHeadline[i].addEventListener("click", accordionToggle); 513 } 514 }); 515 516}else{ 517 console.log('No Accordion'); 518} 519 520 521//////////////////////////////////////// 522// TIMELINE
523//////////////////////////////////////// 524 525//////////////////////////////////////// 526// CALENDAR Date Picker 527//////////////////////////////////////// 528var date_picker = document.getElementById('datepicker'); 529 530function datePicker(){ 531 var picker = new Pikaday( 532 { 533 field: document.getElementById('datepicker'), 534 firstDay: 1, 535 minDate: new Date(), 536 maxDate: new Date(2020, 12, 31), 537 yearRange: [2018,2022], 538 }); 539 540 date_picker.addEventListener('click', function() { 541 this.classList.add('active'); 542 }); 543 // date_picker.addEventListener('mouseover', function() { 544 // this.classList.add('active'); 545 // }); 546} 547if(date_picker){ 548 datePicker(); 549}else{ 550 console.log("no DatePicker"); 551} 552// DATE 553function eventDateFilter(selectObject) { 554 var value, i; 555 var eventSliderContainer = document.querySelector('.slider-events-container'); 556 value = selectObject.value; 557 eventDate = document.querySelectorAll("[data-event-date]") 558 var dateClass = new Date(value); 559 var dateNumber = dateClass.getDate() < 10 ? '0' + dateClass.getDate().toString() : dateClass.getDate(); 560 var dateMonth = dateClass.getMonth() + 1 < 10 ? '0' + parseInt(dateClass.getMonth() + 1).toString() : dateClass.getMonth() + 1; 561 var dateYear = dateClass.getFullYear(); 562 var fullDate = dateYear + '_' + dateMonth + '_' + dateNumber; 563 if (fullDate != "NaN_NaN_NaN" && fullDate != "NaN_0NaN_0NaN"){ 564 eventSliderContainer.dataset.date = fullDate; 565 } 566 else { 567 eventSliderContainer.removeAttribute('data-date'); 568 } 569 tnsSliderEvents(); 570 571 572}; 573//////////////////////////////////////// 574// EVENTS FILTER 575//////////////////////////////////////// 576function eventTypeFilter(selectObject) { 577 var value, i; 578 var eventSliderContainer = document.querySelector('.slider-events-container'); 579 value = selectObject.value; 580 eventType = document.querySelectorAll("[data-event-type]"); 581 if (value != 'all') { 582 eventSliderContainer.dataset.type = value; 583 } 584 else { 585 eventSliderContainer.removeAttribute('data-type'); 586 } 587 tnsSliderEvents(); 588}; 589 590 591//////////////////////////////////////// 592// SEARCH 593//////////////////////////////////////// 594var search = document.getElementsByName("search"); 595if (search.length) { 596 search[0].addEventListener("keyup", function (event) { 597 if (event.key === "Enter") { 598 var searchText = event.target.value; 599 var s = encodeURI(searchText.toLowerCase()); 600 window.location.href = window.location.origin + '/search?search='+s; 601 } 602 }); 603} 604 605 606//////////////////////////////////////// 607// Buttons 608//////////////////////////////////////// 609var buttons = document.querySelectorAll('button'); 610if (buttons.length) { 611 buttons.forEach(function(button) { 612 if (button.dataset.href && !button.closest('a')) { 613 button.addEventListener('click', function () { 614 if (button.dataset.newTab === "true") { 615 window.open(button.dataset.href, '_blank'); 616 } else { 617 window.location.href = button.dataset.href; 618 } 619 }); 620 } 621 }); 622}
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.