1/* 2===================================== 3Add website specific custom fucntions 4This JS reference is given to site-script.js 5===================================== 6*/ 7let header = $("#site-header"); 8let headerSmall = "site-header-small"; 9let body = $("body"); 10let bodyClass = "no-scroll"; 11let bodyEdit = "cms-page-is-in-edit-mode"; 12let bodyPreview = "cms-page-is-in-preview-mode"; 13let bodyPublished = "cms-page-is-published"; 14let hamburger = header.find(".site-header-hamburger-button"); 15 16let mm = gsap.matchMedia(); 17 18function pinSpacersOrder(wrapper) { 19 setTimeout(function () { 20 let spacer = $(".pin-spacer").length * -1; 21 22 wrapper.addClass("pin-spacer-ordered"); 23 24 wrapper.attr("data-order", $(".pin-spacer-ordered").length * -1); 25 }, 50); 26} 27 28function onElementHeightChange(elm, callback) { 29 // Store initial height 30 var lastHeight = elm.height(), 31 newHeight; 32 // Self-executing function that continuously checks height 33 (function run() { 34 newHeight = elm.height(); 35 // Call callback if height has changed 36 if (lastHeight != newHeight) callback(); 37 lastHeight = newHeight; 38 39 // Clear any existing timer 40 if (elm.onElementHeightChangeTimer) 41 clearTimeout(elm.onElementHeightChangeTimer); 42 43 // Set timer to run check again 44 elm.onElementHeightChangeTimer = setTimeout(run, 0); 45 })(); 46} 47 48function refreshTriggers() { 49 // Helper function that monitors an element's height and calls callback when it changes 50 51 // Get the main wrapper element 52 let refresh_wrapper = $(".site-main-wrapper"); 53 54 // Watch for height changes on the wrapper and refresh ScrollTrigger when detected 55 onElementHeightChange(refresh_wrapper, function () { 56 setTimeout(function () { 57 ScrollTrigger.refresh(); 58 }, 50); 59 }); 60} 61 62function getVideoIdFromURL(url) { 63 const youtubeRegex = 64 /(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?/ ]{11})/; 65 const vimeoRegex = 66 /vimeo\.com\/(?:channels\/|groups\/[^\/]*\/videos\/|video\/|)([0-9]+)/; 67 68 const youtubeMatch = url.match(youtubeRegex); 69 const vimeoMatch = url.match(vimeoRegex); 70 71 if (youtubeMatch) { 72 return youtubeMatch[1]; 73 } else if (vimeoMatch) { 74 return vimeoMatch[1]; 75 } else { 76 return null; 77 } 78} 79 80function isYouTubeVideo(url) { 81 return /(?:youtube\.com\/(?:[^/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)/.test( 82 url, 83 ); 84} 85 86function isVimeoVideo(url) { 87 return /vimeo\.com/.test(url); 88} 89 90function videoConvert(href, wrapper, background) { 91 const videoUrl = href; 92 const videoId = getVideoIdFromURL(videoUrl); 93 94 if (isVimeoVideo(videoUrl)) { 95 let videoSrc; 96 if (background === true) { 97 videoSrc = `https://player.vimeo.com/video/${videoId}?autoplay=1&background=1`; 98 } else { 99 videoSrc = `https://player.vimeo.com/video/${videoId}?autoplay=1`; 100 } 101 102 wrapper.append( 103 `<iframe width="100%" height="500" src="${videoSrc}" frameborder="0" allow="autoplay" allowfullscreen></iframe>`, 104 ); 105 } else if (isYouTubeVideo(videoUrl)) { 106 const videoSrc = `https://www.youtube.com/embed/${videoId}?autoplay=1`; 107 wrapper.append( 108 `<iframe width="100%" height="500" src="${videoSrc}" frameborder="0" allow="autoplay" allowfullscreen></iframe>`, 109 ); 110 } else if ( 111 !isYouTubeVideo(videoUrl) && 112 !isVimeoVideo(videoUrl) && 113 !videoUrl.endsWith(".mp4") && 114 !videoUrl.endsWith(".webm") 115 ) { 116 wrapper.append( 117 `<iframe class="has-page-link" width="100%" height="500" src="${videoUrl}" frameborder="0" allow="autoplay" allowfullscreen></iframe>`, 118 ); 119 } else { 120 wrapper.append(` 121 <video width="100%" height="auto" controls autoplay> 122 <source src="${videoUrl}" type="video/mp4"> 123 Your browser does not support the video tag. 124 </video> 125 `); 126 } 127} 128 129function footerTable() { 130 if (!body.hasClass(bodyEdit)) { 131 $("table.custom-footer-table").each(function () { 132 let table = $(this); 133 let headers = table.find("> thead > tr > th"); 134 headers.each(function (i) { 135 let header = $(this); 136 137 let data = table.find("> tbody > tr > td:nth-child(" + (i + 1) + ")"); 138 header.prependTo(data); 139 }); 140 table.find("> thead").remove(); 141 142 let dataHeaders = table.find("> tbody > tr > td > th"); 143 144 function setEqualHeight() { 145 if ($(window).width() > 599) { 146 let maxHeight = 0; 147 dataHeaders.each(function () { 148 let height = $(this).outerHeight(); 149 if (height > maxHeight) { 150 maxHeight = height; 151 } 152 dataHeaders.css("height", maxHeight + "px"); 153 }); 154 } else { 155 dataHeaders.css("height", "auto"); 156 } 157 } 158 setTimeout(() => { 159 setEqualHeight(); 160 }, 100); 161 162 $(window).resize(function () { 163 setTimeout(() => { 164 setEqualHeight(); 165 }, 100); 166 }); 167 });
168 } 169} 170 171function backToTop() { 172 if (!body.hasClass(bodyEdit)) { 173 $("a.custom-back-to-top").click(function (event) { 174 event.preventDefault(); 175 $("html, body").animate({ scrollTop: 0 }, 1000); 176 }); 177 } 178} 179 180function siteHeader() { 181 if (!body.hasClass(bodyEdit)) { 182 if (!body.hasClass("header-page")) { 183 let logo = header.find(".site-header-logo-main"); 184 ScrollTrigger.create({ 185 trigger: body, 186 start: "top -100px", 187 markers: false, 188 189 onEnter() { 190 header.addClass(headerSmall); 191 logo.fadeOut(); 192 }, 193 onLeaveBack() { 194 header.removeClass(headerSmall); 195 logo.fadeIn(); 196 }, 197 }); 198 199 header.find(".site-header-hamburger-button").click(function () { 200 if (header.hasClass("was-small") && !header.hasClass(headerSmall)) { 201 header.addClass(headerSmall); 202 header.removeClass("was-small"); 203 } else if (header.hasClass(headerSmall)) { 204 header.removeClass(headerSmall); 205 header.addClass("was-small"); 206 } 207 }); 208 } 209 } 210} 211 212function search() { 213 if (!body.hasClass(bodyEdit)) { 214 let customSearchWrapper = $("#custom-search-wrapper"); 215 customSearchWrapper.prepend('<div class="custom-search-mask"></div>'); 216 let customSearchMask = $(".custom-search-mask"); 217 $(".custom-search-button").click(function (e) { 218 e.preventDefault(); 219 customSearchWrapper.addClass("custom-search-active"); 220 }); 221 customSearchMask.click(function () { 222 customSearchWrapper.removeClass("custom-search-active"); 223 }); 224 } 225} 226 227function customNavigation() { 228 header.find("#site-navigation").each(function () { 229 let wrapper = $(this); 230 let col = wrapper.parent(); 231 let level1Items = wrapper.find( 232 "> ul.site-nav-block > li:not(.custom-nav-hide-in-nav):not(.hide-in-nav):not(.custom-hide-in-nav)", 233 ); 234 235 let menuGallery = header.find(".custom-menu-gallery-wrapper .slick-slider"); 236 237 menuGallery.slick("slickSetOption", { 238 draggable: false, 239 touchMove: false, 240 arrows: false, 241 dots: false, 242 speed: 500, 243 fade: true, 244 }); 245 246 col.append('<div class="custom-nav-subnav-wrapper"></div>'); 247 let subNavWrapper = col.find(".custom-nav-subnav-wrapper"); 248 249 wrapper 250 .clone() 251 .appendTo(subNavWrapper) 252 .removeAttr("id") 253 .addClass("custom-nav-subnav"); 254 let activeClass = "site-nav-active-path"; 255 let expandClass = "site-nav-expand-active"; 256 let subNavClass = "site-subnav-wrapper-active";
257 let customSubNavWrapper = subNavWrapper.find(".custom-nav-subnav"); 258 259 let activeCount = wrapper.find( 260 "> ul.site-nav-block > li." + activeClass, 261 ).length; 262 263 customSubNavWrapper 264 .find( 265 "> ul.site-nav-block > li.custom-nav-hide-in-nav, ul.site-nav-block > li.hide-in-nav, ul.site-nav-block > li.custom-hide-in-nav ", 266 ) 267 .remove(); 268 let allSubNavs = col.find( 269 ".site-navigation > ul.site-nav-block > li > .site-subnav-wrapper", 270 ); 271 let allExpands = col.find( 272 ".site-navigation > ul.site-nav-block > li > .site-nav-expand", 273 ); 274 customSubNavWrapper 275 .find("> ul.site-nav-block > li > a.site-nav-link") 276 .remove(); 277 278 if (!level1Items.hasClass(activeClass)) { 279 level1Items.eq(0).addClass(activeClass); 280 menuGallery.slick("slickGoTo", 0); 281 allSubNavs.eq(0).addClass(subNavClass); 282 allExpands.eq(0).addClass(expandClass); 283 284 customSubNavWrapper 285 .find("> ul.site-nav-block > li") 286 .eq(0) 287 .find("> .site-subnav-wrapper") 288 .addClass(subNavClass); 289 customSubNavWrapper 290 .find("> ul.site-nav-block > li") 291 .eq(0) 292 .find("> .site-nav-expand") 293 .addClass(expandClass); 294 } 295 level1Items.each(function (i) { 296 let item = $(this); 297 let link = item.find("> a.site-nav-link"); 298 let expand = item.find(">.site-nav-expand"); 299 let subNav = item.find(">.site-subnav-wrapper"); 300 301 let customSubNavItem = customSubNavWrapper 302 .find("> ul.site-nav-block > li") 303 .eq(i); 304 let customSubNav = customSubNavItem.find("> .site-subnav-wrapper"); 305 let customSubNavExpand = customSubNavItem.find("> .site-nav-expand"); 306 307 if (activeCount > 1 || activeCount == 0) { 308 menuGallery.slick("slickGoTo", 0); 309 level1Items.removeClass(activeClass); 310 level1Items.eq(0).addClass(activeClass);
311 allSubNavs.removeClass(subNavClass); 312 allSubNavs.eq(0).addClass(subNavClass); 313 allExpands.removeClass(expandClass); 314 allExpands.eq(0).addClass(expandClass); 315 customSubNavWrapper 316 .find("> ul > li >.site-subnav-wrapper") 317 .removeClass(subNavClass); 318 customSubNavWrapper 319 .find("> ul > li > .site-nav-expand") 320 .removeClass(expandClass); 321 allExpands.eq(0).addClass(expandClass); 322 customSubNavWrapper 323 .find("> ul > li:first-child >.site-subnav-wrapper") 324 .addClass(subNavClass); 325 allExpands.eq(0).addClass(expandClass); 326 customSubNavWrapper 327 .find("> ul > li:first-child >.site-subnav-wrapper") 328 .addClass(expandClass); 329 330 // customSubNavWrapper 331 // .find("> ul.site-nav-block > li") 332 // .removeClass(activeClass); 333 } else { 334 if (item.hasClass(activeClass)) { 335 menuGallery.slick("slickGoTo", i); 336 } 337 } 338 339 link.click(function (e) { 340 if (subNav.length != 0) { 341 e.preventDefault(); 342 level1Items.not(item).removeClass(activeClass); 343 allExpands.not(expand).removeClass(expandClass);
344 allSubNavs.not(subNav).removeClass(subNavClass); 345 item.addClass(activeClass); 346 expand.addClass(expandClass); 347 subNav.addClass(subNavClass); 348 customSubNavExpand.addClass(expandClass); 349 customSubNav.addClass(subNavClass); 350 menuGallery.slick("slickGoTo", i); 351 } 352 }); 353 }); 354 }); 355} 356 357function customSidebar() { 358 $(".custom-sidebar-wrapper").each(function () { 359 let wrapper = $(this); 360 let nav = wrapper.find("#site-navigation"); 361 362 function setSidebarHeight(nav) { 363 let topLinks = nav.find( 364 ".site-nav-block > .site-nav-active-path > .site-subnav-wrapper > .site-subnav-block > li", 365 ); 366 let activeSubNav = topLinks.find("> .site-subnav-wrapper-active"); 367 let activeSubNavHeight = activeSubNav.outerHeight(); 368 369 let numberOfTopLinks; 370 371 if (topLinks.length < 4) { 372 numberOfTopLinks = topLinks.length; 373 } else { 374 numberOfTopLinks = 4; 375 } 376 377 let firstFourLinks = topLinks.slice(0, numberOfTopLinks); 378 let totalHeight = 0; 379 firstFourLinks.each(function () { 380 totalHeight += $(this).outerHeight(); 381 }); 382 383 // nav.height(totalHeight - activeSubNavHeight + 20 + "px"); 384 } 385 386 if (!body.hasClass(bodyEdit)) { 387 setSidebarHeight(nav); 388 $(window).resize(function () { 389 setSidebarHeight(nav); 390 }); 391 } 392 393 if (!body.hasClass(bodyEdit)) { 394 pinSpacersOrder(wrapper); 395 wrapper.wrapInner('<div class="custom-sidebar-inner"></div>'); 396 } else { 397 setTimeout(() => { 398 wrapper.wrapInner('<div class="custom-sidebar-inner"></div>'); 399 }, 1000); 400 } 401 402 let pinnedLinks = wrapper.find( 403 ".site-nav-block > li > .site-subnav-wrapper > .site-subnav-block > li ", 404 ); 405 let pinnedImage = pinnedLinks.find( 406 "> .site-nav-description .site-nav-image-wrapper", 407 ); 408 if (!body.hasClass(bodyEdit)) { 409 let scrollBar = new SimpleBar(nav[0], { 410 autoHide: false, 411 }); 412 413 // pinnedImage.each(function (i) { 414 // let imgWrapper = $(this); 415 // let list = imgWrapper.parent().parent(); 416 // let expand = list.find(".site-nav-expand"); 417 418 // let st = ScrollTrigger.create({ 419 // trigger: imgWrapper, 420 // start: "top top", 421 // end: "bottom 169px", 422 // pin: true, 423 // endTrigger: list, 424 // pinSpacing: false, 425 // markers: false, 426 // id: "sidebar-image-pin" + i, 427 // scroller: nav, 428 // refreshPriority: wrapper.attr("data-order"), 429 // }); 430 431 // setTimeout(() => { 432 // st.refresh(); 433 // }, 100); 434 // expand.click(function () { 435 // setTimeout(() => { 436 // st.refresh(); 437 // }, 100); 438 // }); 439 // }); 440 } 441 }); 442} 443 444function linkSliderFix(wrapper) { 445 if (wrapper.hasClass("site-slider-link-wrapper")) { 446 let slides = wrapper.find(".site-slide"); 447 slides.each(function () { 448 let slide = $(this); 449 450 let slide_link = slide.find(".site-slide-link"); 451 slide_link.each(function () { 452 let link = $(this); 453 454 if (!link.children().length) { 455 link.remove(); 456 } else if (!link.children().hasClass("site-slider-image-block")) { 457 link.children().unwrap(); 458 slide 459 .find(".site-slider-caption") 460 .appendTo(slide.find("> .site-slide-link")); 461 } 462 463 let href = link.attr("href"); 464 465 if (href === undefined) { 466 slide.addClass("no-link"); 467 } 468 }); 469 }); 470 } 471} 472 473function sliderTablet() { 474 const sliderTabletSettings = { 475 "slider-tablet-slides-1": 1, 476 "slider-tablet-slides-2": 2, 477 "slider-tablet-slides-3": 3, 478 }; 479 480 $.each(sliderTabletSettings, function (name, slideNumber) { 481 $(`.site-slider.${name} .slick-slider`).each(function () { 482 const $slider = $(this); 483 484 if (!$slider.hasClass("slick-initialized")) return; 485 if ($slider.data("tablet-configured")) return; 486 487 const responsive = $slider.slick("slickGetOption", "responsive") || []; 488 const mobileSlides = 489 responsive.find((bp) => bp.breakpoint === 600)?.settings 490 ?.slidesToShow ?? 1; 491 492 $slider.slick( 493 "slickSetOption", 494 "responsive", 495 [ 496 { 497 breakpoint: 900, 498 settings: { slidesToShow: slideNumber }, 499 }, 500 { 501 breakpoint: 600, 502 settings: { slidesToShow: mobileSlides }, 503 }, 504 ], 505 true, 506 ); 507 508 $slider.data("tablet-configured", true); 509 });
510 }); 511} 512function calloutLink() { 513 if (!body.hasClass(bodyEdit)) { 514 $("table.custom-callout-link").each(function () { 515 let wrapper = $(this); 516 let links = wrapper.find("a"); 517 links.each(function (i) { 518 let link = $(this); 519 let href = link.attr("href"); 520 let linkHTML = link.html(); 521 let parent = link.parent(); 522 let target = link.attr("target"); 523 if (target === "_blank") { 524 href += '" target="_blank'; 525 } 526 527 if (i === 0) { 528 wrapper.prepend( 529 '<a href="' + href + '" class="custom-callout-link-overlay" ></a>', 530 ); 531 parent.html(linkHTML); 532 } 533 }); 534 }); 535 } 536} 537 538function splitTextGallery() { 539 $(".custom-split-text-gallery-wrapper").each(function () { 540 let wrapper = $(this); 541 let slider = wrapper.find(".slick-slider"); 542 543 slider.slick("slickSetOption", { 544 adaptiveHeight: true, 545 }); 546 }); 547} 548 549function customGrid() { 550 $(".site-row-container.site-row-block-bg-alt").each(function () { 551 let row = $(this); 552 let features = row.find(".cms-feature-wrapper"); 553 features.addClass("custom-in-alt-row"); 554 row.prepend('<div class="custom-row-alt-bg"></div>'); 555 }); 556} 557 558function numberSlider() { 559 $(".custom-number-slider-wrapper").each(function () { 560 let wrapper = $(this); 561 let slider = wrapper.find(".slick-slider"); 562 let arrows = slider.find(".slick-arrow"); 563 let row = wrapper.closest(".site-row-container"); 564 let slideNo = slider.slick("slickGetOption", "slidesToShow"); 565 slider.find(".site-slider-image-block, .site-slider-video-block").remove(); 566 567 slider.slick("slickSetOption", { 568 slidesToShow: slideNo + 0.5, 569 }); 570 571 if (arrows.length) { 572 wrapper 573 .find(".site-slider") 574 .append('<div class="custom-number-slider-arrows"></div>'); 575 let arrowWrapper = wrapper.find(".custom-number-slider-arrows"); 576 arrows.appendTo(arrowWrapper); 577 function arrowSeperator(seperatorWrapper) { 578 let row = seperatorWrapper.closest(".site-row-container"); 579 if (wrapper.hasClass("custom-insert-seperator-wrapper")) { 580 seperatorWrapper.prepend("<hr />"); 581 seperatorWrapper 582 .addClass("site-col-12-wrapper cms-feature-datablock") 583 .appendTo(row); 584 } 585 } 586 587 arrowSeperator(arrowWrapper); 588 } 589 590 setTimeout(() => { 591 wrapper.addClass("loaded"); 592 }, 500); 593 }); 594} 595 596function pinnedContent() { 597 $(".cms-gallery-feature.custom-pinned-content-wrapper").each(function () { 598 let wrapper = $(this); 599 let slider = wrapper.find(".slick-slider"); 600 let datablock = wrapper.find(".cms-feature-datablock"); 601 pinSpacersOrder(wrapper); 602 603 let slickSettings = slider.slick("getSlick").originalSettings; 604 slider.slick("unslick"); 605 let slides = datablock.find(".site-slide"); 606 607 datablock.append('<div class="custom-pinned-content-slides"></div>'); 608 datablock.prepend('<div class="custom-pinned-content-title"></div>'); 609 datablock.prepend('<div class="custom-pinned-content-background"></div>'); 610 611 let titleBlock = datablock.find(".custom-pinned-content-title"); 612 let backgroundBlock = datablock.find(".custom-pinned-content-background"); 613 let slidesBlock = datablock.find(".custom-pinned-content-slides"); 614 615 wrapper.prepend( 616 '<div class="custom-pinned-content-inner-desktop cms-feature-datablock"></div>', 617 ); 618 619 let innerDesktop = wrapper.find(".custom-pinned-content-inner-desktop"); 620 621 slides.each(function () { 622 let slide = $(this); 623 let media = slide.find( 624 ".site-slider-image-block, .site-slider-video-block", 625 ); 626 let data = slide.find(".site-slider-capton-data"); 627 let link = slide.find(".site-slide-link"); 628 if (link.length) { 629 let href = link.attr("href"); 630 let target = link.attr("target"); 631 632 let linkStart = 633 '<p style="text-align:right;"><a class="site-button-arrow-theme" href="' + 634 href + 635 '"'; 636 if (target === "'_blank'" || target === "_blank") { 637 linkStart += ' target="_blank"'; 638 } 639 linkStart += ">Discover</a></p>"; 640 data.append(linkStart); 641 // slide 642 // .find(".site-slider-more-desc-data") 643 // .append('<span class="site-button-arrow-theme">Discover</span>'); 644 } 645 646 slide.find(".custom-heading-1-size").appendTo(titleBlock); 647 media.appendTo(backgroundBlock); 648 if (slide.find(".site-slider-more-desc").length === 0) { 649 slide.addClass("no-card"); 650 data.addClass("no-card"); 651 } 652 653 if (data.hasClass("no-card")) { 654 data.clone().appendTo(titleBlock); 655 } 656 data.appendTo(slidesBlock); 657 });
658 659 wrapper.find(".site-slick-wrapper").addClass("custom-pinned-cards"); 660 661 titleBlock.clone().appendTo(innerDesktop); 662 backgroundBlock.appendTo(innerDesktop); 663 slidesBlock.clone().appendTo(innerDesktop); 664 665 let innerDesktopSlides = innerDesktop.find(".custom-pinned-content-slides"); 666 let innerDesktopBackground = innerDesktop.find( 667 ".custom-pinned-content-background > div", 668 ); 669 670 mm.add("(min-width: 1024px)", () => { 671 if (wrapper.find(".custom-pinned-cards").hasClass("slick-initialized")) { 672 wrapper.find(".custom-pinned-cards").slick("unslick"); 673 } 674 675 if (slidesBlock.hasClass("slick-initialized")) { 676 slidesBlock.slick("unslick"); 677 } 678 679 if (!innerDesktopSlides.hasClass("slick-initialized")) { 680 innerDesktopSlides.slick({ 681 arrows: false, 682 dots: false, 683 fade: true, 684 adaptiveHeight: true, 685 draggable: false, 686 touchMove: false, 687 infinite: false, 688 }); 689 } 690 691 if (!body.hasClass(bodyEdit)) { 692 ScrollTrigger.create({ 693 trigger: wrapper, 694 start: "top top", 695 pin: innerDesktop, 696 scrub: true, 697 refreshPriority: wrapper.attr("data-order"), 698 end: "bottom bottom", 699 markers: false, 700 }); 701 702 slides.each(function (i) { 703 let slide = $(this); 704 let start; 705 let end; 706 if (i === slides.length - 1) { 707 start = "top center"; 708 end = "bottom center"; 709 } else { 710 start = "top 200px"; 711 end = "bottom 200px"; 712 } 713 ScrollTrigger.create({ 714 trigger: slide, 715 markers: false, 716 start: start, 717 end: end, 718 refreshPriority: wrapper.attr("data-order"), 719 onEnter() { 720 innerDesktopSlides.slick("slickGoTo", i); 721 722 innerDesktopBackground.eq(i).addClass("active-bg"); 723 if (i > 0) { 724 innerDesktopBackground.eq(i - 1).removeClass("active-bg"); 725 } 726 }, 727 onEnterBack() { 728 innerDesktopBackground.eq(i + 1).removeClass("active-bg"); 729 innerDesktopBackground.eq(i).addClass("active-bg"); 730 }, 731 onLeaveBack() { 732 innerDesktopSlides.slick("slickGoTo", i - 1); 733 }, 734 }); 735 }); 736 } 737 }); 738 mm.add("(max-width: 1023px)", () => { 739 wrapper.find(".custom-pinned-cards").slick(slickSettings); 740 slidesBlock.slick({ 741 arrows: false, 742 dots: false, 743 fade: true, 744 adaptiveHeight: true, 745 draggable: false, 746 touchMove: false, 747 infinite: false, 748 }); 749 750 if (innerDesktopSlides.hasClass("slick-initialized")) { 751 innerDesktopSlides.slick("unslick"); 752 } 753 754 if (wrapper.find(".custom-pinned-cards").hasClass("slick-initialized")) { 755 wrapper.find(".custom-pinned-cards").slick("unslick"); 756 } 757 wrapper.find(".custom-pinned-cards").slick({ 758 adaptiveHeight: true, 759 asNavFor: slidesBlock, 760 infinite: false, 761 }); 762 763 slidesBlock.slick( 764 "slickFilter", 765 slidesBlock.find(".slick-slide:not(.no-card)"), 766 ); 767 768 wrapper 769 .find(".custom-pinned-cards") 770 .slick( 771 "slickFilter", 772 wrapper 773 .find(".custom-pinned-cards") 774 .find(".slick-slide:not(.no-card)"), 775 ); 776 }); 777 }); 778} 779 780function cardSlider() { 781 $(".custom-card-slider-wrapper").each(function () { 782 let wrapper = $(this); 783 if (wrapper.hasClass("cms-gallery-feature")) { 784 let slider = wrapper.find(".slick-slider"); 785 786 let slickSettings = slider.slick("getSlick").originalSettings; 787 788 if (slickSettings.slidesToShow > 2) { 789 slider.slick( 790 "slickSetOption", 791 { 792 responsive: [ 793 { 794 breakpoint: 900, 795 settings: { 796 slidesToShow: 2, 797 }, 798 }, 799 ], 800 }, 801 true, 802 ); 803 } 804 805 let slides = wrapper.find(".site-slide"); 806 slides.each(function (i) { 807 let slide = $(this); 808 let link = slide.find(".site-slide-link"); 809 if (link.length) { 810 let href = link.attr("href"); 811 let target = link.attr("target"); 812 let linkStart = 813 '<span class="site-button-arrow-theme" href="' + href + '"'; 814 if (target === "'_blank'" || target === "_blank") { 815 linkStart += ' target="_blank"'; 816 } 817 linkStart += ">Discover</span>"; 818 slide 819 .find(".site-slider-image-block, .site-slider-video-block") 820 .append(linkStart); 821 } 822 }); 823 } 824 825 if (wrapper.hasClass("cms-display-feature")) { 826 let items = wrapper.find(".site-display-wrapper-listitem"); 827 let slider = wrapper.find(".slick-slider"); 828 829 items.each(function (i) { 830 let item = $(this); 831 let inner = item.find(".site-display-list-block"); 832 833 let link = item.find(".site-display-title > a"); 834 let href = link.attr("href"); 835 let img = item.find(".site-display-image img"); 836 inner.wrapInner('<a href="' + href + '"></a>'); 837 link.parent().append(link.text()); 838 link.remove(); 839 img.unwrap(); 840 }); 841 842 if (slider.length) { 843 let slickSettings = slider.slick("getSlick").originalSettings; 844 let arrows = slider.find(".slick-arrow"); 845 let prevArrow; 846 let nextArrow; 847 848 if (arrows.length) { 849 wrapper 850 .find("> .cms-feature-datablock") 851 .prepend( 852 '<div class="custom-card-slider-navigation"><div class="custom-card-slider-arrows"><div class="slick-arrow slick-prev custom-prev" /><div class="slick-arrow slick-next custom-next" /></div><hr /></div>', 853 ); 854 prevArrow = wrapper.find(".custom-card-slider-arrows .custom-prev"); 855 nextArrow = wrapper.find(".custom-card-slider-arrows .custom-next"); 856 slider.find(".slick-arrow").remove(); 857 } 858 859 let tabletBP = {}; 860 861 if (slickSettings.slidesToShow > 2) { 862 tabletBP = { 863 breakpoint: 900, 864 settings: { 865 slidesToShow: 2, 866 }, 867 }; 868 } 869 slider.slick( 870 "slickSetOption", 871 { 872 prevArrow: prevArrow, 873 nextArrow: nextArrow, 874 responsive: [tabletBP], 875 }, 876 true, 877 ); 878 879 // arrows.prependTo(wrapper.find(".custom-card-slider-arrows")); 880 } 881 } 882 }); 883} 884 885function countingNumbers() { 886 if (!body.hasClass(bodyEdit)) { 887 $(".custom-number-counter").each(function () { 888 let counterElement = $(this); 889 pinSpacersOrder(counterElement); 890 if (counterElement.length > 0) { 891 let numericValue = counterElement.text().replace(/[^0-9.]/g, ""); 892 let stringValue = counterElement.text().replace(/[0-9.]/g, ""); 893 894 let isStringFirst = 895 counterElement.text().indexOf(stringValue) < 896 counterElement.text().indexOf(numericValue); 897 let prefix = isStringFirst ? stringValue : ""; 898 let suffix = isStringFirst ? "" : stringValue; 899 900 counterElement.counter({ 901 autoStart: false, 902 countFrom: 0, 903 placeholder: "0", 904 countTo: parseInt(numericValue), 905 duration: 2, 906 easing: "swing",
907 duration: 800, 908 runOnce: true, // only run the counter once, default: false 909 910 // function used to format the displayed numbers. 911 numberFormatter: function (number) { 912 return prefix + Math.round(number) + suffix; 913 }, 914 }); 915 916 let scroller; 917 918 if ( 919 counterElement.closest(".custom-complex-pinned-popup-inner").length 920 ) { 921 scroller = counterElement.closest( 922 ".custom-complex-pinned-popup-inner", 923 ); 924 } else { 925 scroller = window; 926 } 927 928 ScrollTrigger.create({ 929 trigger: counterElement, 930 start: "top 75%", 931 markers: false, 932 refreshPriority: counterElement.attr("data-order"), 933 scroller: scroller, 934 onEnter: (self) => { 935 counterElement.counter("start"); 936 }, 937 }); 938 } 939 }); 940 } 941} 942 943// function complexPinnedContent() { 944// $(".cms-gallery-feature.custom-complex-pinned-content-wrapper").each( 945// function () { 946// // Initialize wrapper and setup variables 947// let wrapper = $($(this)); 948// pinSpacersOrder(wrapper); 949// let slider = wrapper.find(".slick-slider"); 950// slider.slick("unslick"); // Remove slick slider functionality 951 952// // Define CSS classes for slide states 953// let introClass = "custom-slide-intro"; 954// let outroClass = "custom-slide-outro"; 955// let mainContent = wrapper.find(".cms-feature-datablock"); 956 957// let slides = mainContent.find(".site-slide"); 958 959// // Create navigation wrapper for slide navigation 960// wrapper.append('<div class="complex-pinned-nav-wrapper"></div>'); 961// let navWrapper = wrapper.find(".complex-pinned-nav-wrapper"); 962 963// // Process each slide to extract content and create navigation 964// slides.each(function (i) { 965// let slide = $(this); 966// let card = slide.find(".site-slider-more-desc-data"); 967// let media = slide.find( 968// ".site-slider-image-block, .site-slider-video-block", 969// ); 970// let data = slide.find(".site-slider-capton-data"); 971// let href = slide.find(".site-slide-link").attr("href"); 972 973// // Find navigation element and apply theme classes 974// let nav = slide.find("span.site-style-samp:first-child:last-child"); 975 976// let customSlideThemeClass = slide 977// .attr("class") 978// .split(" ") 979// .find((cls) => cls.startsWith("custom-slide-theme-")); 980 981// if (customSlideThemeClass) { 982// nav.addClass(customSlideThemeClass); 983// } 984 985// // Add navigation line and set index 986// nav.append('<span class="nav-line"></span>'); 987// nav.attr("custom-slide-nav", i); 988// nav.unwrap().prependTo(navWrapper); 989 990// // Set slide index and add positional classes 991// slide.attr("custom-slide-index", i); 992 993// if (i === slides.length - 1) { 994// slide.addClass("last-slide"); 995// } 996// if (i === 0) { 997// slide.addClass("first-slide"); 998// } 999 1000// // Add discover button if slide has a link 1001// if ( 1002// href !== undefined && 1003// !slide.hasClass(introClass) && 1004// !slide.hasClass(outroClass) 1005// ) { 1006// card.prepend('<span class="site-button-arrow-theme">Discover</span>'); 1007// } 1008 1009// // Handle outro slides by copying intro functionality 1010// if (slide.hasClass(outroClass)) { 1011// slide.addClass(introClass); 1012// media.addClass("custom-outro-media-block"); 1013// data.addClass("custom-outro-data-block"); 1014// } 1015 1016// // Wrap intro slides and mark following slide 1017// if (slide.hasClass(introClass)) { 1018// let introNextSlide = slide.next(); 1019// introNextSlide.addClass("after-intro-slide"); 1020 1021// slide.wrap('<div class="complex-intro-slide-wrapper"></div>'); 1022 1023// if (href !== undefined) { 1024// videoConvert(href, media, true); 1025// } 1026// } 1027// }); 1028 1029// // Initially hide navigation 1030// navWrapper.addClass("hide-nav"); 1031 1032// // Function to setup pinned navigation with scroll triggers 1033// function pinnedNav(endTrigger) { 1034// navWrapper.removeAttr("data-order"); 1035// pinSpacersOrder(navWrapper); 1036 1037// // Pin navigation during scroll 1038// ScrollTrigger.create({ 1039// trigger: wrapper,
1040// start: "top 15%", 1041// end: "bottom bottom", 1042// pin: navWrapper, 1043// endTrigger: endTrigger, 1044// refreshPriority: navWrapper.attr("data-order"), 1045// markers: false, 1046// pinSpacing: false, 1047// }); 1048 1049// slides.each(function () { 1050// let slide = $(this); 1051// let index = slide.attr("custom-slide-index"); 1052// let navItems = navWrapper.find("[custom-slide-nav]"); 1053// let navItem = navWrapper.find('[custom-slide-nav="' + index + '"]'); 1054 1055// ScrollTrigger.create({ 1056// trigger: slide, 1057// start: "top center", 1058// end: "bottom center", 1059// markers: false, 1060// refreshPriority: navWrapper.attr("data-order"), 1061// onEnter: () => { 1062// if (!slide.hasClass(introClass)) { 1063// navWrapper.removeClass("hide-nav"); 1064// } 1065// navItems.not(navItem).removeClass("active-nav"); 1066// navItem.addClass("active-nav"); 1067// }, 1068// onEnterBack: () => { 1069// if (!slide.hasClass(introClass)) { 1070// navWrapper.removeClass("hide-nav"); 1071// } 1072// navItems.not(navItem).removeClass("active-nav"); 1073// navItem.addClass("active-nav"); 1074// }, 1075// }); 1076 1077// navItem.click(function () { 1078// gsap.to(window, { 1079// scrollTo: { 1080// y: slide, 1081// offsetY: 100, 1082// }, 1083// duration: 1, 1084// }); 1085// }); 1086// }); 1087// } 1088 1089// //Mobile scrolltriggers 1090// mm.add("(max-width: 1023px)", () => { 1091// mainContent.find(".complex-pinned-main-content-wrapper").remove(); 1092 1093// slides.each(function (i) { 1094// let slide = $(this); 1095// let card = slide.find(".site-slider-more-desc"); 1096// let title = slide.find(".site-slider-caption-block"); 1097 1098// let end; 1099// let scrub; 1100// let pin; 1101// let pinSpacing; 1102 1103// if (slide.hasClass(outroClass)) { 1104// end = "bottom 10px"; 1105// scrub = false; 1106// pin = false; 1107// pinSpacing = false; 1108// } else if (slide.hasClass(introClass)) { 1109// end = "bottom 10px"; 1110// scrub = true; 1111// pin = slide; 1112// pinSpacing = true; 1113// } else { 1114// end = "top top"; 1115// scrub = true; 1116// pin; 1117// pinSpacing; 1118// } 1119 1120// let slideTl = gsap.timeline({ 1121// scrollTrigger: { 1122// trigger: slide, 1123// start: "top top", 1124// end: end, 1125// scrub: scrub, 1126// pin: pin, 1127// pinSpacing: pinSpacing, 1128// toggleActions: "play none none reverse", 1129// // refreshPriority: wrapper.attr("data-order"), 1130// markers: false, 1131// }, 1132// }); 1133 1134// if (slide.hasClass(introClass)) { 1135// gsap.set(slide, { 1136// opacity: 1, 1137// pointerEvents: "none", 1138// }); 1139// gsap.set(card, { 1140// top: "100%", 1141// }); 1142// } 1143 1144// slideTl.to(title, { 1145// opacity: 0, 1146// pointerEvents: "none", 1147// }); 1148 1149// if (!slide.hasClass(introClass)) { 1150// slideTl.to( 1151// card, 1152// { 1153// left: 0, 1154// pointerEvents: "all", 1155// }, 1156// "<", 1157// ); 1158// } else { 1159// slideTl.to( 1160// card, 1161// { 1162// top: 0, 1163 1164// pointerEvents: "all", 1165// }, 1166// "<", 1167// ); 1168// } 1169// }); 1170// }); 1171 1172// //Desktop scrolltriggers 1173// mm.add("(min-width: 1024px)", () => {
1174// mainContent.prepend( 1175// '<div class="complex-pinned-main-content-wrapper"><div class="complex-pinned-main-content-bg" /> <div class="complex-pinned-main-content-text" />', 1176// ); 1177 1178// let mainContentBg = mainContent.find(".complex-pinned-main-content-bg"); 1179// let mainContentText = mainContent.find( 1180// ".complex-pinned-main-content-text", 1181// ); 1182// let mainContentDesc = mainContent.find( 1183// ".complex-pinned-main-content-description", 1184// ); 1185 1186// let slides = mainContent.find(".site-slide"); 1187// let innerDesktop = wrapper.find(".complex-pinned-main-content-wrapper"); 1188 1189// let count = -1; 1190 1191// let descriptionsMore = slides.find(".site-slider-more-desc"); 1192 1193// slides.each(function (i) { 1194// let slide = $(this); 1195// let media = slide.find( 1196// ".site-slider-image-block, .site-slider-video-block", 1197// ); 1198 1199// let data = slide.find(".site-slider-capton-data"); 1200 1201// let desc = slide.find(".site-slider-more-desc"); 1202 1203// let customSlideThemeClass = slide 1204// .attr("class") 1205// .split(" ") 1206// .find((cls) => cls.startsWith("custom-slide-theme-")); 1207 1208// if (customSlideThemeClass) { 1209// media.addClass(customSlideThemeClass); 1210// data.addClass(customSlideThemeClass); 1211// desc.addClass(customSlideThemeClass); 1212// } 1213 1214// // Clone content to main content areas 1215// media.clone().appendTo(mainContentBg); 1216// data.clone().appendTo(mainContentText); 1217// if (!slide.hasClass(introClass)) { 1218// count++; 1219// // desc.clone().appendTo(mainContentDesc); 1220// } 1221 1222// let selectedDesc = mainContentDesc 1223// .find(".site-slider-more-desc") 1224// .eq(count); 1225 1226// // Get references to cloned elements 1227// let descriptions = mainContent.find(".site-slider-capton-data"); 1228 1229// let description = descriptions.eq(i); 1230// let descriptionWords = description.find("span"); 1231// let medias = mainContentBg.find( 1232// ".site-slider-image-block, .site-slider-video-block", 1233// ); 1234// let mediaItem = medias.eq(i); 1235 1236// // Set first slide as active 1237// if (i === 0) { 1238// description.addClass("active"); 1239// mediaItem.addClass("active"); 1240// } 1241 1242// // Set scroll trigger parameters based on slide type 1243// let start; 1244// let end; 1245// let pin; 1246// let endTrigger; 1247 1248// if (slide.hasClass(introClass)) { 1249// start = "top 20px"; 1250// end = "+=2000"; 1251// pin = slide; 1252// endTrigger = slide; 1253// } else if (slide.hasClass("after-intro-slide")) { 1254// start = "top 110%"; 1255// end = "bottom center"; 1256// pin = false; 1257// endTrigger = slide; 1258// } else { 1259// start = "top center"; 1260// end = "bottom center"; 1261// pin = false; 1262// endTrigger = slide; 1263// } 1264 1265// pinSpacersOrder(slide); 1266 1267// let slideTl = gsap.timeline({ 1268// scrollTrigger: { 1269// trigger: slide, 1270// start: start, 1271// end: end, 1272// endTrigger: endTrigger, 1273// id: "slide-" + i, 1274// markers: false, 1275 1276// pin: pin, 1277// scrub: true, 1278// anticipatePin: 1, 1279// refreshPriority: slide.attr("data-order"), 1280 1281// onEnter() { 1282// // Update active content when entering slide 1283// descriptions.prev().removeClass("active"); 1284// descriptions.prev().find("span").removeClass("active"); 1285// description.addClass("active"); 1286// // descriptionsMore.removeClass("active-desc"); 1287// desc.addClass("active-desc"); 1288 1289// descriptionWords.each(function (index) { 1290// setTimeout(() => { 1291// $(this).addClass("active"); 1292// }, index * 150);
1293// }); 1294 1295// medias.prev().removeClass("active"); 1296// mediaItem.addClass("active"); 1297// // mainContentDesc 1298// // .find(".site-slider-more-desc") 1299// // .removeClass("active-desc"); 1300 1301// slides.removeClass("slide-active"); 1302 1303// // gsap.to(window, { 1304// // scrollTo: { 1305// // y: slide, 1306// // offsetY: 100, 1307// // }, 1308// // duration: 0, 1309// // }); 1310 1311// // Hide navigation for intro slides 1312// if (slide.hasClass(introClass)) { 1313// navWrapper.addClass("hide-nav"); 1314// } 1315 1316// if (!slide.hasClass(introClass)) { 1317// selectedDesc.addClass("active-desc"); 1318// slide.addClass("slide-active"); 1319// } 1320 1321// if (slide.hasClass("after-intro-slide")) { 1322// gsap.to(slide.prev().find(".custom-slide-intro > *"), { 1323// opacity: 0, 1324// pointerEvents: "none", 1325// }); 1326// } 1327// }, 1328// onLeave() { 1329// if (!slide.hasClass(introClass)) { 1330// descriptionsMore.removeClass("active-desc"); 1331// } 1332// }, 1333 1334// onEnterBack() { 1335// // Update active content when scrolling back 1336// description.next().removeClass("active"); 1337// description.next().find("span").removeClass("active"); 1338// description.addClass("active"); 1339// descriptionWords.each(function (index) { 1340// setTimeout(() => { 1341// $(this).addClass("active"); 1342// }, index * 150); 1343// }); 1344 1345// descriptionsMore.removeClass("active-desc"); 1346// desc.addClass("active-desc"); 1347// mediaItem.next().removeClass("active"); 1348// mediaItem.addClass("active"); 1349 1350// // mainContentDesc 1351// // .find(".site-slider-more-desc") 1352// // .removeClass("active-desc"); 1353// selectedDesc.next().removeClass("active-desc"); 1354// slides.removeClass("slide-active"); 1355 1356// // gsap.to(window, { 1357// // scrollTo: { 1358// // y: slide, 1359// // offsetY: 100, 1360// // }, 1361// // duration: 0, 1362// // }); 1363 1364// if (slide.hasClass(introClass)) { 1365// navWrapper.addClass("hide-nav"); 1366 1367// // mainContentDesc 1368// // .find(".site-slider-more-desc") 1369// // .removeClass("active-desc"); 1370// } 1371// if (!slide.hasClass(introClass)) { 1372// selectedDesc.addClass("active-desc"); 1373// slide.addClass("slide-active"); 1374// } 1375// }, 1376// onLeaveBack() { 1377// if (slide.hasClass("after-intro-slide")) { 1378// gsap.to(slide.prev().find(".custom-slide-intro > *"), { 1379// opacity: 1, 1380// pointerEvents: "all", 1381// }); 1382// } 1383// }, 1384// }, 1385// }); 1386 1387// // Animate intro slide opacity 1388// if (slide.hasClass(introClass)) { 1389// slideTl.to(description, { 1390// opacity: 0, 1391// pointerEvents: "none", 1392// transition: "none", 1393// }); 1394// slideTl.to(slide, { 1395// opacity: 1, 1396// pointerEvents: "all", 1397// }); 1398// } 1399// }); 1400 1401// // Setup main desktop timeline for pinning content 1402// pinSpacersOrder(wrapper.find(".site-slick-wrapper")); 1403// let desktopTl = gsap.timeline({ 1404// scrollTrigger: { 1405// trigger: wrapper,
1406// start: "top top", 1407// pin: innerDesktop, 1408// scrub: true, 1409// refreshPriority: wrapper.find(".site-slick-wrapper"), 1410// end: "bottom bottom", 1411// endTrigger: wrapper.find(".site-slick-wrapper"), 1412// markers: false, 1413// onEnterBack() { 1414// if (body.hasClass("custom-animate-footer")) { 1415// $("#site-footer").removeClass("animate-footer-in"); 1416// } 1417// }, 1418// onLeave() { 1419// if (body.hasClass("custom-animate-footer")) { 1420// $("#site-footer").addClass("animate-footer-in"); 1421// } 1422// }, 1423// }, 1424// }); 1425 1426// pinnedNav(wrapper); 1427// }); 1428 1429// let pinnedPopupRows = $( 1430// '.site-row-container[class*="site-row-block-pinned-popup"]', 1431// ); 1432 1433// // Popups for slides with links 1434// if (pinnedPopupRows.length > 0 && !body.hasClass(bodyEdit)) { 1435// let slidesLink = mainContent.find( 1436// ".site-slick-wrapper .site-slide:not(.custom-slide-intro) .site-slide-link", 1437// ); 1438 1439// slidesLink.click(function (e) { 1440// e.preventDefault(); 1441// let link = $(this); 1442// let slide = link.parent(); 1443// let href = link.attr("href"); 1444// let data = slide.find(".site-slider-more-desc-data"); 1445// let title = data.find("> h1, > h2, > h3, > h4, > h5, > h6"); 1446// let nextSlide = slide.next(); 1447// let nextData = nextSlide.find(".site-slider-more-desc-data"); 1448// let nextTitle = nextData.find("> h1, > h2, > h3, > h4, > h5, > h6"); 1449// let slideThemeClass = slide 1450// .attr("class") 1451// .split(" ") 1452// .find((cls) => cls.startsWith("custom-slide-theme-")); 1453 1454// if (href !== undefined && link.length) { 1455// let hrefFormat = href.replace("#", ""); 1456 1457// let popupContent = $(".site-row-block-" + hrefFormat); 1458 1459// if (hrefFormat.length) { 1460// body.append( 1461// '<div class="custom-complex-pinned-popup-wrapper site-sub-wrapper custom-complex-pinned-popup-' + 1462// hrefFormat + 1463// '"><div class="custom-complex-pinned-popup-inner" /></div>', 1464// ); 1465 1466// let popupWrapper = $( 1467// ".custom-complex-pinned-popup-wrapper.custom-complex-pinned-popup-" + 1468// hrefFormat + 1469// "", 1470// ); 1471 1472// let popupInner = popupWrapper.find( 1473// ".custom-complex-pinned-popup-inner", 1474// ); 1475 1476// let selectedRows = $( 1477// ".site-row-container.site-row-block-" + hrefFormat + "", 1478// ); 1479// selectedRows.clone().appendTo(popupInner); 1480// popupWrapper.addClass(slideThemeClass); 1481// setTimeout(() => { 1482// popupInner.addClass("active"); 1483// }, 500); 1484 1485// popupWrapper.prepend( 1486// '<button class="custom-complex-pinned-popup-close">Go back</button>', 1487// ); 1488 1489// let popupClose = popupWrapper.find( 1490// ".custom-complex-pinned-popup-close", 1491// ); 1492 1493// title 1494// .clone() 1495// .addClass("custom-complex-pinned-popup-title") 1496// .prependTo(popupInner); 1497 1498// let popupTitle = popupInner.find( 1499// ".custom-complex-pinned-popup-title", 1500// ); 1501 1502// // Wrap popup title in proper structure 1503// popupTitle.wrap( 1504// '<div class="site-row-container complex-pinned-popup-row"><div class="cms-feature-wrapper site-col-12-wrapper custom-complex-pinned-popup-title-wrapper"><div class="cms-feature-datablock site-col-12" /></div></div>', 1505// ); 1506 1507// // Process next slide toggle links 1508// popupInner.find("table.custom-callout-link").each(function () { 1509// let table = $(this); 1510// if ( 1511// table.text().includes("[next-slide]") && 1512// !slide.hasClass("last-slide") 1513// ) { 1514// let nextSlideThemeClass = nextSlide
1515// .attr("class") 1516// .split(" ") 1517// .find((cls) => cls.startsWith("custom-slide-theme-")); 1518// if (nextSlideThemeClass != undefined) { 1519// table.addClass("next-slide-toggle"); 1520// table.addClass(nextSlideThemeClass); 1521// table.html( 1522// table 1523// .html() 1524// .replace( 1525// "[next-slide]", 1526// "<h4><a class='custom-callout-link-overlay' href='javascript:void(0)'>" + 1527// nextTitle.html() + 1528// "</a></h4>", 1529// ), 1530// ); 1531// } 1532// } 1533// }); 1534 1535// let nextSlideToggle = popupInner.find( 1536// "table.custom-callout-link.next-slide-toggle", 1537// ); 1538 1539// let bodyPopupActiveClass = "custom-complex-pinned-popup-open"; 1540// let popupActiveClass = "custom-complex-pinned-popup-active"; 1541 1542// body.addClass(bodyPopupActiveClass); 1543// popupWrapper.addClass(popupActiveClass); 1544 1545// // Mobile popup functionality 1546// mm.add("(max-width: 1023px)", (i) => { 1547// // body.removeClass(bodyPopupActiveClass); 1548// // popupWrapper.removeClass(popupActiveClass); 1549// gsap.to(window, { 1550// scrollTo: { 1551// y: wrapper, 1552// offsetY: 0, 1553// }, 1554// duration: 1, 1555// }); 1556// slide 1557// .find(".site-slider-image-block, .site-slider-video-block") 1558// .clone() 1559// .addClass( 1560// "custom-complex-pinned-popup-media site-row-container", 1561// ) 1562// .prependTo(popupInner); 1563// }); 1564 1565// // Desktop popup functionality 1566// mm.add("(min-width: 1024px)", (i) => { 1567// // body.removeClass(bodyPopupActiveClass); 1568// // popupWrapper.removeClass(popupActiveClass); 1569// gsap.to(window, { 1570// scrollTo: { 1571// y: wrapper, 1572// offsetY: 0, 1573// }, 1574// duration: 1, 1575// }); 1576 1577// popupInner.find(".custom-complex-pinned-popup-media").remove(); 1578 1579// addEventListener("orientationchange", (event) => { 1580// body.removeClass(bodyPopupActiveClass); 1581// popupWrapper.removeClass(popupActiveClass); 1582// }); 1583// }); 1584 1585// // Handle link click to open popup 1586// // link.click(function (e) { 1587// if (popupContent.length) { 1588// e.preventDefault(); 1589 1590// body.addClass(bodyPopupActiveClass); 1591// popupWrapper.addClass(popupActiveClass); 1592 1593// // Scroll to slide position 1594// gsap.to(window, { 1595// scrollTo: { 1596// y: slide, 1597// offsetY: 100, 1598// }, 1599// duration: 1, 1600// }); 1601 1602// gsap.to(popupInner, { 1603// scrollTo: { 1604// y: popupInner.find(">
1604 div:first-child"), 1605// offsetY: 0, 1606// }, 1607// duration: 0, 1608// }); 1609// } 1610// // }); 1611 1612// // Handle popup close 1613// popupClose.click(function () { 1614// body.removeClass(bodyPopupActiveClass); 1615// popupWrapper.removeClass(popupActiveClass); 1616// popupInner.removeClass("active"); 1617// setTimeout(() => { 1618// popupWrapper.remove(); 1619// }, 500); 1620// }); 1621 1622// // Handle next slide toggle buttons 1623// nextSlideToggle.each(function () { 1624// let table = $(this); 1625// table.click(function (e) { 1626// body.removeClass(bodyPopupActiveClass); 1627// popupWrapper.removeClass(popupActiveClass); 1628// popupInner.removeClass("active"); 1629// setTimeout(() => { 1630// popupWrapper.remove(); 1631// }, 500); 1632// // Scroll to next slide 1633// gsap.to(window, { 1634// scrollTo: { 1635// y: nextSlide, 1636// offsetY: 100, 1637// }, 1638// }); 1639// }); 1640// }); 1641// } 1642// } 1643// }); 1644// // mainContent 1645// // .find(".site-slick-wrapper .site-slide:not(.custom-slide-intro)") 1646// // .each(function () { 1647// // let slide = $(this); 1648// // let link = slide.find(".site-slide-link"); 1649// // let href = slide.find(".site-slide-link").attr("href"); 1650// // let data = slide.find(".site-slider-more-desc-data"); 1651// // let title = data.find("> h1, > h2, > h3, > h4, > h5, > h6"); 1652// // let nextSlide = slide.next(); 1653// // let nextData = nextSlide.find(".site-slider-more-desc-data"); 1654// // let nextTitle = nextData.find("> h1, > h2, > h3, > h4, > h5, > h6"); 1655 1656// // // Get theme classes for current and next slides 1657// // let slideThemeClass = slide 1658// // .attr("class") 1659// // .split(" ") 1660// // .find((cls) => cls.startsWith("custom-slide-theme-")); 1661 1662// // if (href !== undefined && link.length) { 1663// // let hrefFormat = href.replace("#", ""); 1664 1665// // let popupContent = $(".site-row-block-" + hrefFormat); 1666 1667// // if (hrefFormat.length) { 1668// // // body.append( 1669// // // '<div class="custom-complex-pinned-popup-wrapper site-sub-wrapper custom-complex-pinned-popup-' + 1670// // // hrefFormat + 1671// // // '"><div class="custom-complex-pinned-popup-inner" /></div>', 1672// // // ); 1673 1674// // let popupWrapper = $( 1675// // ".custom-complex-pinned-popup-wrapper.custom-complex-pinned-popup-" + 1676// // hrefFormat + 1677// // "", 1678// // ); 1679// // popupWrapper.addClass(slideThemeClass); 1680// // let popupInner = popupWrapper.find( 1681// // ".custom-complex-pinned-popup-inner", 1682// // ); 1683 1684// // let selectedRows = $( 1685// // ".site-row-container.site-row-block-" + hrefFormat + "", 1686// // ); 1687 1688// // // selectedRows.appendTo(popupInner); 1689 1690// // popupWrapper.prepend( 1691// // '<button class="custom-complex-pinned-popup-close">Go back</button>', 1692// // ); 1693 1694// // let popupClose = popupWrapper.find( 1695// // ".custom-complex-pinned-popup-close", 1696// // ); 1697 1698// // title 1699// // .clone() 1700// // .addClass("custom-complex-pinned-popup-title") 1701// // .prependTo(popupInner); 1702 1703// // let popupTitle = popupInner.find( 1704// // ".custom-complex-pinned-popup-title", 1705// // ); 1706 1707// // // Wrap popup title in proper structure 1708// // popupTitle.wrap( 1709// // '<div class="site-row-container complex-pinned-popup-row"><div class="cms-feature-wrapper site-col-12-wrapper custom-complex-pinned-popup-title-wrapper"><div class="cms-feature-datablock site-col-12" /></div></div>', 1710// // ); 1711 1712// // // Process next slide toggle links 1713// // popupInner.find("table.custom-callout-link").each(function () { 1714// // let table = $(this); 1715// // if ( 1716// // table.text().includes("[next-slide]") && 1717// // !slide.hasClass("last-slide") 1718// // ) { 1719// // let nextSlideThemeClass = nextSlide
1720// // .attr("class") 1721// // .split(" ") 1722// // .find((cls) => cls.startsWith("custom-slide-theme-")); 1723// // if (nextSlideThemeClass != undefined) { 1724// // table.addClass("next-slide-toggle"); 1725// // table.addClass(nextSlideThemeClass); 1726// // table.html( 1727// // table 1728// // .html() 1729// // .replace( 1730// // "[next-slide]", 1731// // "<h4><a class='custom-callout-link-overlay' href='javascript:void(0)'>" + 1732// // nextTitle.html() + 1733// // "</a></h4>", 1734// // ), 1735// // ); 1736// // } 1737// // } 1738// // }); 1739 1740// // let nextSlideToggle = popupInner.find( 1741// // "table.custom-callout-link.next-sl
1741ide-toggle", 1742// // ); 1743 1744// // let bodyPopupActiveClass = "custom-complex-pinned-popup-open"; 1745// // let popupActiveClass = "custom-complex-pinned-popup-active"; 1746 1747// // // Mobile popup functionality 1748// // mm.add("(max-width: 1023px)", (i) => { 1749// // body.removeClass(bodyPopupActiveClass); 1750// // popupWrapper.removeClass(popupActiveClass); 1751// // gsap.to(window, { 1752// // scrollTo: { 1753// // y: wrapper, 1754// // offsetY: 0, 1755// // }, 1756// // duration: 1, 1757// // }); 1758// // slide 1759// // .find(".site-slider-image-block, .site-slider-video-block") 1760// // .clone() 1761// // .addClass( 1762// // "custom-complex-pinned-popup-media site-row-container", 1763// // ) 1764// // .prependTo(popupInner); 1765// // }); 1766 1767// // // Desktop popup functionality 1768// // mm.add("(min-width: 1024px)", (i) => { 1769// // body.removeClass(bodyPopupActiveClass); 1770// // popupWrapper.removeClass(popupActiveClass); 1771// // gsap.to(window, { 1772// // scrollTo: { 1773// // y: wrapper, 1774// // offsetY: 0, 1775// // }, 1776// // duration: 1, 1777// // }); 1778 1779// // popupInner 1780// // .find(".custom-complex-pinned-popup-media") 1781// // .remove(); 1782 1783// // addEventListener("orientationchange", (event) => { 1784// // body.removeClass(bodyPopupActiveClass); 1785// // popupWrapper.removeClass(popupActiveClass); 1786// // }); 1787// // }); 1788 1789// // // Handle link click to open popup 1790// // link.click(function (e) { 1791// // if (popupContent.length) { 1792// // e.preventDefault(); 1793 1794// // body.addClass(bodyPopupActiveClass); 1795// // popupWrapper.addClass(popupActiveClass); 1796 1797// // // Scroll to slide position 1798// // gsap.to(window, { 1799// // scrollTo: { 1800// // y: slide, 1801// // offsetY: 100, 1802// // }, 1803// // duration: 1, 1804// // }); 1805 1806// // gsap.to(popupInner, { 1807// // scrollTo: { 1808// // y: popupInner.find(">
1808 div:first-child"), 1809// // offsetY: 0, 1810// // }, 1811// // duration: 0, 1812// // }); 1813// // } 1814// // }); 1815 1816// // // Handle popup close 1817// // popupClose.click(function () { 1818// // body.removeClass(bodyPopupActiveClass); 1819// // popupWrapper.removeClass(popupActiveClass); 1820// // }); 1821 1822// // // Handle next slide toggle buttons 1823// // nextSlideToggle.each(function () { 1824// // let table = $(this); 1825// // table.click(function (e) { 1826// // body.removeClass(bodyPopupActiveClass); 1827// // popupWrapper.removeClass(popupActiveClass); 1828 1829// // // Scroll to next slide 1830// // gsap.to(window, { 1831// // scrollTo: { 1832// // y: nextSlide, 1833// // offsetY: 100, 1834// // }, 1835// // }); 1836// // }); 1837// // }); 1838// // } 1839// // } 1840// // }); 1841// } 1842// }, 1843// ); 1844// } 1845 1846function complexPinnedContent() { 1847 $(".cms-gallery-feature.custom-complex-pinned-content-wrapper").each( 1848 function () { 1849 // Initialize wrapper and setup variables 1850 let wrapper = $($(this)); 1851 pinSpacersOrder(wrapper); 1852 let slider = wrapper.find(".slick-slider"); 1853 slider.slick("unslick"); // Remove slick slider functionality 1854 1855 // Define CSS classes for slide states 1856 let introClass = "custom-slide-intro"; 1857 let outroClass = "custom-slide-outro"; 1858 let mainContent = wrapper.find(".cms-feature-datablock"); 1859 1860 let slides = mainContent.find(".site-slide"); 1861 1862 // Create navigation wrapper for slide navigation 1863 wrapper.append('<div class="complex-pinned-nav-wrapper"></div>'); 1864 let navWrapper = wrapper.find(".complex-pinned-nav-wrapper"); 1865 1866 // Process each slide to extract content and create navigation 1867 slides.each(function (i) { 1868 let slide = $(this); 1869 let isIntro = slide.hasClass(introClass); 1870 let isOutro = slide.hasClass(outroClass); 1871 let isFirst = i === 0; 1872 let isLast = i === slides.length - 1; 1873 1874 // Cache finds once 1875 let media = slide.find( 1876 ".site-slider-image-block, .site-slider-video-block", 1877 ); 1878 let data = slide.find(".site-slider-capton-data"); 1879 let card = slide.find(".site-slider-more-desc-data"); 1880 let nav = slide.find("span.site-style-samp:first-child:last-child"); 1881 let href = slide.find(".site-slide-link").attr("href"); 1882 1883 // --- NAV SETUP --- 1884 let themeClass = slide 1885 .attr("class") 1886 ?.split(" ") 1887 .find((cls) => cls.startsWith("custom-slide-theme-")); 1888 1889 if (themeClass) nav.addClass(themeClass); 1890 1891 nav 1892 .attr("custom-slide-nav", i) 1893 .append('<span class="nav-line"></span>') 1894 .unwrap() 1895 .prependTo(navWrapper); 1896 1897 // --- SLIDE META --- 1898 slide 1899 .attr("custom-slide-index", i) 1900 .toggleClass("first-slide", isFirst) 1901 .toggleClass("last-slide", isLast); 1902 1903 // --- BUTTON --- 1904 if (href && !isIntro && !isOutro) { 1905 card.prepend('<span class="site-button-arrow-theme">Discover</span>'); 1906 } 1907 1908 // --- OUTRO → INTRO NORMALISATION --- 1909 if (isOutro) { 1910 slide.addClass(introClass); 1911 media.addClass("custom-outro-media-block"); 1912 data.addClass("custom-outro-data-block"); 1913 } 1914 1915 // --- INTRO HANDLING --- 1916 if (isIntro) { 1917 slide.next().addClass("after-intro-slide"); 1918 1919 slide.wrap('<div class="complex-intro-slide-wrapper"></div>'); 1920 1921 if (href) { 1922 videoConvert(href, media, true); 1923 } 1924 } else { 1925 function popupRows() { 1926 let pinnedPopupRows = $( 1927 '.site-row-container[class*="site-row-block-pinned-popup"]', 1928 ); 1929 body.addClass("custom-complex-pinned-popup-initialised"); 1930 //Popups for slides with links 1931 if (pinnedPopupRows.length > 0 && !body.hasClass(bodyEdit)) { 1932 // mainContent 1933 // .find(".site-slick-wrapper .site-slide:not(.custom-slide-intro)") 1934 // .each(function () { 1935 // let slide = $(this); 1936 let link = slide.find(".site-slide-link"); 1937 let href = slide.find(".site-slide-link").attr("href"); 1938 let data = slide.find(".site-slider-more-desc-data"); 1939 let title = data.find("> h1, > h2, > h3, > h4, > h5, > h6"); 1940 let nextSlide = slide.next(); 1941 let nextData = nextSlide.find(".site-slider-more-desc-data"); 1942 let nextTitle = nextData.find( 1943 "> h1, > h2, > h3, > h4, > h5, > h6", 1944 ); 1945 1946 // Get theme classes for current and next slides 1947 let slideThemeClass = themeClass; 1948 1949 if (href !== undefined && link.length) { 1950 let hrefFormat = href.replace("#", ""); 1951 1952 let popupContent = $(".site-row-block-" + hrefFormat); 1953 1954 if (hrefFormat.length) { 1955 body.append( 1956 '<div class="custom-complex-pinned-popup-wrapper site-sub-wrapper custom-complex-pinned-popup-' + 1957 hrefFormat + 1958 '"><div class="custom-complex-pinned-popup-inner" /></div>', 1959 ); 1960 1961 let popupWrapper = $( 1962 ".custom-complex-pinned-popup-wrapper.custom-complex-pinned-popup-" + 1963 hrefFormat + 1964 "", 1965 ); 1966 popupWrapper.addClass(slideThemeClass); 1967 let popupInner = popupWrapper.find( 1968 ".custom-complex-pinned-popup-inner", 1969 ); 1970 1971 let selectedRows = $( 1972 ".site-row-container.site-row-block-" + hrefFormat + "", 1973 ); 1974 1975 selectedRows.appendTo(popupInner); 1976 1977 popupWrapper.prepend( 1978 '<button class="custom-complex-pinned-popup-close">Go back</button>', 1979 ); 1980 1981 popupWrapper 1982 .find(".custom-more-links-wrapper .slick-slider") 1983 .slick("refresh"); 1984 1985 let popupClose = popupWrapper.find( 1986 ".custom-complex-pinned-popup-close", 1987 ); 1988 1989 title 1990 .clone() 1991 .addClass("custom-complex-pinned-popup-title") 1992 .prependTo(popupInner); 1993 1994 let popupTitle = popupInner.find( 1995 ".custom-complex-pinned-popup-title", 1996 ); 1997 1998 // Wrap popup title in proper structure 1999 popupTitle.wrap( 2000 '<div class="site-row-container complex-pinned-popup-row"><div class="cms-feature-wrapper site-col-12-wrapper custom-complex-pinned-popup-title-wrapper"><div class="cms-feature-datablock site-col-12" /></div></div>', 2001 ); 2002 2003 // Process next slide toggle links 2004 popupInner 2005 .find("table.custom-callout-link") 2006 .each(function () { 2007 let table = $(this); 2008 if ( 2009 table.text().includes("[next-slide]") && 2010 !slide.hasClass("last-slide") 2011 ) { 2012 let nextSlideThemeClass = nextSlide 2013 .attr("class") 2014 .split(" ") 2015 .find((cls) => cls.startsWith("custom-slide-theme-")); 2016 if (nextSlideThemeClass != undefined) {
2017 table.addClass("next-slide-toggle"); 2018 table.addClass(nextSlideThemeClass); 2019 table.html( 2020 table 2021 .html() 2022 .replace( 2023 "[next-slide]", 2024 "<h4><a class='custom-callout-link-overlay' href='javascript:void(0)'>" + 2025 nextTitle.html() + 2026 "</a></h4>", 2027 ), 2028 ); 2029 } 2030 } 2031 }); 2032 2033 let nextSlideToggle = popupInner.find( 2034 "table.custom-callout-link.next-slide-toggle", 2035 ); 2036 2037 let bodyPopupActiveClass = "custom-complex-pinned-popup-open"; 2038 let popupActiveClass = "custom-complex-pinned-popup-active"; 2039 2040 // Mobile popup functionality 2041 mm.add("(max-width: 1023px)", (i) => { 2042 body.removeClass(bodyPopupActiveClass); 2043 popupWrapper.removeClass(popupActiveClass); 2044 gsap.to(window, { 2045 scrollTo: { 2046 y: wrapper, 2047 offsetY: 0, 2048 }, 2049 duration: 1, 2050 }); 2051 slide 2052 .find( 2053 ".site-slider-image-block, .site-slider-video-block", 2054 ) 2055 .clone() 2056 .addClass( 2057 "custom-complex-pinned-popup-media site-row-container", 2058 ) 2059 .prependTo(popupInner); 2060 }); 2061 2062 // Desktop popup functionality 2063 mm.add("(min-width: 1024px)", (i) => { 2064 body.removeClass(bodyPopupActiveClass); 2065 popupWrapper.removeClass(popupActiveClass); 2066 gsap.to(window, { 2067 scrollTo: { 2068 y: wrapper, 2069 offsetY: 0, 2070 }, 2071 duration: 1, 2072 }); 2073 2074 popupInner 2075 .find(".custom-complex-pinned-popup-media") 2076 .remove(); 2077 2078 addEventListener("orientationchange", (event) => { 2079 body.removeClass(bodyPopupActiveClass); 2080 popupWrapper.removeClass(popupActiveClass); 2081 }); 2082 }); 2083 2084 // Handle link click to open popup 2085 link.click(function (e) { 2086 if (popupContent.length) { 2087 e.preventDefault(); 2088 2089 body.addClass(bodyPopupActiveClass); 2090 popupWrapper.addClass(popupActiveClass); 2091 2092 // Scroll to slide position 2093 gsap.to(window, { 2094 scrollTo: { 2095 y: slide, 2096 offsetY: 100, 2097 }, 2098 duration: 1, 2099 }); 2100 2101 gsap.to(popupInner, { 2102 scrollTo: { 2103 y: popupInner.find(">
2103 div:first-child"), 2104 offsetY: 0, 2105 }, 2106 duration: 0, 2107 }); 2108 } 2109 }); 2110 2111 // Handle popup close 2112 popupClose.click(function () { 2113 body.removeClass(bodyPopupActiveClass); 2114 popupWrapper.removeClass(popupActiveClass); 2115 }); 2116 2117 // Handle next slide toggle buttons 2118 nextSlideToggle.each(function () { 2119 let table = $(this); 2120 table.click(function (e) { 2121 body.removeClass(bodyPopupActiveClass); 2122 popupWrapper.removeClass(popupActiveClass); 2123 2124 // Scroll to next slide 2125 gsap.to(window, { 2126 scrollTo: { 2127 y: nextSlide, 2128 offsetY: 100, 2129 }, 2130 }); 2131 }); 2132 }); 2133 } 2134 } 2135 // }); 2136 } 2137 } 2138 popupRows(); 2139 } 2140 }); 2141 2142 // Initially hide navigation 2143 navWrapper.addClass("hide-nav"); 2144 hamburger.addClass("hide-hamburger"); 2145 2146 // Function to setup pinned navigation with scroll triggers 2147 function pinnedNav(endTrigger) { 2148 navWrapper.removeAttr("data-order"); 2149 pinSpacersOrder(navWrapper); 2150 2151 // Pin navigation during scroll 2152 ScrollTrigger.create({ 2153 trigger: wrapper, 2154 start: "top 15%", 2155 end: "bottom bottom", 2156 pin: navWrapper, 2157 endTrigger: endTrigger, 2158 refreshPriority: navWrapper.attr("data-order"), 2159 markers: false, 2160 pinSpacing: false, 2161 }); 2162 2163 slides.each(function () { 2164 let slide = $(this); 2165 let index = slide.attr("custom-slide-index"); 2166 let navItems = navWrapper.find("[custom-slide-nav]"); 2167 let navItem = navWrapper.find('[custom-slide-nav="' + index + '"]'); 2168 let start; 2169 if (slide.hasClass(introClass)) { 2170 start = "top 20px"; 2171 } else if (slide.hasClass("after-intro-slide")) { 2172 start = "top 110%"; 2173 } else { 2174 start = "top center"; 2175 } 2176 2177 ScrollTrigger.create({ 2178 trigger: slide, 2179 start: start, 2180 end: "bottom center", 2181 markers: false, 2182 refreshPriority: navWrapper.attr("data-order"), 2183 onEnter: () => { 2184 if (!slide.hasClass(introClass)) { 2185 navWrapper.removeClass("hide-nav"); 2186 hamburger.removeClass("hide-hamburger"); 2187 } 2188 navItems.not(navItem).removeClass("active-nav"); 2189 navItem.addClass("active-nav"); 2190 }, 2191 onEnterBack: () => { 2192 if (!slide.hasClass(introClass)) { 2193 navWrapper.removeClass("hide-nav"); 2194 hamburger.removeClass("hide-hamburger"); 2195 } 2196 navItems.not(navItem).removeClass("active-nav"); 2197 navItem.addClass("active-nav"); 2198 }, 2199 }); 2200 2201 navItem.click(function () { 2202 gsap.to(window, { 2203 scrollTo: { 2204 y: slide, 2205 offsetY: 100, 2206 }, 2207 duration: 1, 2208 }); 2209 }); 2210 }); 2211 } 2212 2213 //Mobile scrolltriggers 2214 mm.add("(max-width: 1023px)", () => { 2215 mainContent.find(".complex-pinned-main-content-wrapper").remove(); 2216 2217 slides.each(function (i) { 2218 let slide = $(this); 2219 let card = slide.find(".site-slider-more-desc"); 2220 let title = slide.find(".site-slider-caption-block"); 2221 2222 let end; 2223 let scrub; 2224 let pin; 2225 let pinSpacing; 2226 2227 if (slide.hasClass(outroClass)) { 2228 end = "bottom 10px"; 2229 scrub = false; 2230 pin = false; 2231 pinSpacing = false; 2232 } else if (slide.hasClass(introClass)) { 2233 end = "bottom 10px"; 2234 scrub = true; 2235 pin = slide; 2236 pinSpacing = true; 2237 } else { 2238 end = "top -100px"; 2239 scrub = false; 2240 pin; 2241 pinSpacing; 2242 } 2243 2244 let slideTl = gsap.timeline({ 2245 scrollTrigger: { 2246 trigger: slide, 2247 start: "top top", 2248 end: end, 2249 scrub: scrub, 2250 pin: pin, 2251 pinSpacing: pinSpacing, 2252 toggleActions: "play none none reverse", 2253 // refreshPriority: wrapper.attr("data-order"), 2254 markers: false, 2255 }, 2256 }); 2257 2258 if (slide.hasClass(introClass)) { 2259 gsap.set(slide, { 2260 opacity: 1, 2261 pointerEvents: "none", 2262 }); 2263 gsap.set(card, { 2264 top: "100%", 2265 }); 2266 } 2267 2268 slideTl.to(title, { 2269 opacity: 0, 2270 pointerEvents: "none", 2271 }); 2272 2273 if (!slide.hasClass(introClass)) { 2274 slideTl.to( 2275 card, 2276 { 2277 left: 0, 2278 pointerEvents: "all", 2279 }, 2280 "<", 2281 ); 2282 } else { 2283 slideTl.to( 2284 card, 2285 { 2286 top: 0, 2287 2288 pointerEvents: "all", 2289 }, 2290 "<", 2291 ); 2292 slideTl.to(card, { 2293 opacity: 1, 2294 }); 2295 } 2296 }); 2297 }); 2298 2299 //Desktop scrolltriggers 2300 mm.add("(min-width: 1024px)", () => {
2301 mainContent.prepend( 2302 '<div class="complex-pinned-main-content-wrapper"><div class="complex-pinned-main-content-bg" /> <div class="complex-pinned-main-content-text" /><div class="complex-pinned-main-content-description" /></div>', 2303 ); 2304 2305 let mainContentBg = mainContent.find(".complex-pinned-main-content-bg"); 2306 let mainContentText = mainContent.find( 2307 ".complex-pinned-main-content-text", 2308 ); 2309 let mainContentDesc = mainContent.find( 2310 ".complex-pinned-main-content-description", 2311 ); 2312 2313 let slides = mainContent.find(".site-slide"); 2314 let innerDesktop = wrapper.find(".complex-pinned-main-content-wrapper"); 2315 2316 let count = -1; 2317 slides.each(function (i) { 2318 let slide = $(this); 2319 let media = slide.find( 2320 ".site-slider-image-block, .site-slider-video-block", 2321 ); 2322 2323 let data = slide.find(".site-slider-capton-data"); 2324 2325 let desc = slide.find(".site-slider-more-desc"); 2326 2327 let customSlideThemeClass = slide 2328 .attr("class") 2329 .split(" ") 2330 .find((cls) => cls.startsWith("custom-slide-theme-")); 2331 2332 if (customSlideThemeClass) { 2333 media.addClass(customSlideThemeClass); 2334 data.addClass(customSlideThemeClass); 2335 desc.addClass(customSlideThemeClass); 2336 } 2337 2338 function htmlStructure() { 2339 // Clone content to main content areas 2340 media.clone().appendTo(mainContentBg); 2341 data.clone().appendTo(mainContentText); 2342 desc.attr("data-desc", i); 2343 2344 if (!slide.hasClass(introClass)) { 2345 count++; 2346 desc.clone().appendTo(mainContentDesc); 2347 } 2348 2349 let selectedDesc = mainContentDesc 2350 .find(".site-slider-more-desc") 2351 .eq(slide.attr("custom-slide-index") - 1); 2352 2353 // Get references to cloned elements 2354 let descriptions = mainContent.find(".site-slider-capton-data"); 2355 2356 let description = descriptions.eq(i); 2357 let descriptionWords = description.find("span"); 2358 let medias = mainContentBg.find( 2359 ".site-slider-image-block, .site-slider-video-block", 2360 ); 2361 let mediaItem = medias.eq(i); 2362 } 2363 2364 // Set first slide as active 2365 2366 if (i === 0) { 2367 htmlStructure(); 2368 // Get references to cloned elements 2369 let descriptions = mainContent.find(".site-slider-capton-data"); 2370 2371 let description = descriptions.eq(i); 2372 let descriptionWords = description.find("span"); 2373 let medias = mainContentBg.find( 2374 ".site-slider-image-block, .site-slider-video-block", 2375 ); 2376 let mediaItem = medias.eq(i); 2377 description.addClass("active"); 2378 mediaItem.addClass("active"); 2379 } 2380 2381 // Set scroll trigger parameters based on slide type 2382 let start; 2383 let end; 2384 let pin; 2385 let endTrigger; 2386 2387 if (slide.hasClass(introClass)) { 2388 start = "top 20px"; 2389 end = "+=1500"; 2390 pin = slide; 2391 endTrigger = slide; 2392 } else if (slide.hasClass("after-intro-slide")) { 2393 start = "top 110%"; 2394 end = "bottom center"; 2395 pin = false; 2396 endTrigger = slide; 2397 } else { 2398 start = "top center"; 2399 end = "bottom center"; 2400 pin = false; 2401 endTrigger = slide; 2402 } 2403 2404 pinSpacersOrder(slide); 2405 let enterTimeout; 2406 let wordTimeouts = []; 2407 2408 let enterCount = 1; 2409 let slideTl = gsap.timeline({ 2410 scrollTrigger: { 2411 trigger: slide, 2412 start: start, 2413 end: end, 2414 endTrigger: endTrigger, 2415 id: "slide-" + i, 2416 pin: pin, 2417 scrub: true, 2418 anticipatePin: 1, 2419 refreshPriority: slide.attr("data-order"), 2420 2421 onEnter() { 2422 if (enterCount === 1 && !slide.hasClass(introClass)) { 2423 htmlStructure(); 2424 } 2425 2426 // if (slide.hasClass("after-intro-slide")) { 2427 // navWrapper.removeClass("hide-nav"); 2428 // } 2429 2430 clearTimeout(enterTimeout); 2431 2432 // Update active content when entering slide 2433 2434 if (enterCount === 1 && !slide.hasClass(introClass)) { 2435 enterTimeout = setTimeout(() => { 2436 // Get references to cloned elements 2437 let descriptions = mainContent.find( 2438 ".site-slider-capton-data", 2439 ); 2440 2441 let description = descriptions.eq(i); 2442 let descriptionWords = description.find("span"); 2443 let medias = mainContentBg.find( 2444 ".site-slider-image-block, .site-slider-video-block", 2445 ); 2446 let mediaItem = medias.eq(i); 2447 2448 let selectedDesc = mainContentDesc 2449 .find(".site-slider-more-desc") 2450 .eq(slide.attr("custom-slide-index") - 1); 2451 2452 description.addClass("active"); 2453 descriptionWords.each(function (index) { 2454 setTimeout(() => { 2455 $(this).addClass("active"); 2456 }, index * 150);
2457 }); 2458 mediaItem.addClass("active"); 2459 2460 descriptions.prev().removeClass("active"); 2461 descriptions.prev().find("span").removeClass("active"); 2462 2463 medias.prev().removeClass("active"); 2464 2465 slides.removeClass("slide-active"); 2466 2467 if (!slide.hasClass(introClass)) { 2468 selectedDesc.addClass("active-desc"); 2469 slide.addClass("slide-active"); 2470 } 2471 2472 // Hide navigation for intro slides 2473 if (slide.hasClass(introClass)) { 2474 navWrapper.addClass("hide-nav"); 2475 hamburger.addClass("hide-hamburger"); 2476 } 2477 2478 if (slide.hasClass("after-intro-slide")) { 2479 gsap.to(slide.prev().find(".custom-slide-intro > *"), { 2480 opacity: 0, 2481 pointerEvents: "none", 2482 }); 2483 } 2484 }, 50); 2485 } else { 2486 // Get references to cloned elements 2487 let descriptions = mainContent.find( 2488 ".site-slider-capton-data", 2489 ); 2490 2491 let description = descriptions.eq(i); 2492 let descriptionWords = description.find("span"); 2493 let medias = mainContentBg.find( 2494 ".site-slider-image-block, .site-slider-video-block", 2495 ); 2496 let mediaItem = medias.eq(i); 2497 let selectedDesc = mainContentDesc 2498 .find(".site-slider-more-desc") 2499 .eq(slide.attr("custom-slide-index") - 1); 2500 2501 descriptions.prev().removeClass("active"); 2502 descriptions.prev().find("span").removeClass("active"); 2503 2504 medias.prev().removeClass("active"); 2505 2506 slides.removeClass("slide-active"); 2507 2508 description.addClass("active"); 2509 descriptionWords.each(function (index) { 2510 setTimeout(() => { 2511 $(this).addClass("active"); 2512 }, index * 150); 2513 }); 2514 mediaItem.addClass("active"); 2515 if (!slide.hasClass(introClass)) { 2516 selectedDesc.addClass("active-desc"); 2517 slide.addClass("slide-active"); 2518 } 2519 2520 // Hide navigation for intro slides 2521 if (slide.hasClass(introClass)) { 2522 navWrapper.addClass("hide-nav"); 2523 hamburger.addClass("hide-hamburger"); 2524 } 2525 2526 if (slide.hasClass("after-intro-slide")) { 2527 gsap.to(slide.prev().find(".custom-slide-intro > *"), { 2528 opacity: 0, 2529 pointerEvents: "none", 2530 }); 2531 } 2532 } 2533 2534 enterCount++; 2535 }, 2536 2537 onEnterBack() { 2538 // Get references to cloned elements 2539 let descriptions = mainContent.find(".site-slider-capton-data"); 2540 2541 let description = descriptions.eq(i); 2542 let descriptionWords = description.find("span"); 2543 let medias = mainContentBg.find( 2544 ".site-slider-image-block, .site-slider-video-block", 2545 ); 2546 let mediaItem = medias.eq(i); 2547 let selectedDesc = mainContentDesc 2548 .find(".site-slider-more-desc") 2549 .eq(slide.attr("custom-slide-index") - 1); 2550 2551 // console.log("counted", selectedDesc.next()); 2552 2553 // Update active content when scrolling back 2554 description.next().removeClass("active"); 2555 description.next().find("span").removeClass("active"); 2556 description.addClass("active"); 2557 descriptionWords.each(function (index) { 2558 setTimeout(() => { 2559 $(this).addClass("active"); 2560 }, index * 150);
2561 }); 2562 mediaItem.next().removeClass("active"); 2563 mediaItem.addClass("active"); 2564 2565 // mainContentDesc 2566 // .find(".site-slider-more-desc") 2567 // .removeClass("active-desc"); 2568 if (selectedDesc.length) { 2569 selectedDesc.next().removeClass("active-desc"); 2570 } 2571 2572 slides.removeClass("slide-active"); 2573 2574 // gsap.to(window, { 2575 // scrollTo: { 2576 // y: slide, 2577 // offsetY: 100, 2578 // }, 2579 // duration: 0, 2580 // }); 2581 2582 if (slide.hasClass(introClass)) { 2583 navWrapper.addClass("hide-nav"); 2584 hamburger.addClass("hide-hamburger"); 2585 2586 mainContentDesc 2587 .find(".site-slider-more-desc") 2588 .removeClass("active-desc"); 2589 } 2590 if (!slide.hasClass(introClass)) { 2591 selectedDesc.addClass("active-desc"); 2592 slide.addClass("slide-active"); 2593 } 2594 }, 2595 onLeaveBack() { 2596 if (slide.hasClass("after-intro-slide")) { 2597 gsap.to(slide.prev().find(".custom-slide-intro > *"), { 2598 opacity: 1, 2599 pointerEvents: "all", 2600 }); 2601 } 2602 }, 2603 }, 2604 }); 2605 2606 // Animate intro slide opacity 2607 if (slide.hasClass(introClass)) { 2608 slideTl.to(slide, { 2609 opacity: 1, 2610 pointerEvents: "all", 2611 }); 2612 slideTl.to( 2613 mainContentText.find(">*").eq(0), 2614 { 2615 opacity: 0, 2616 pointerEvents: "none", 2617 }, 2618 " <", 2619 ); 2620 } 2621 }); 2622 2623 // Setup main desktop timeline for pinning content 2624 pinSpacersOrder(wrapper.find(".site-slick-wrapper")); 2625 let desktopTl = gsap.timeline({ 2626 scrollTrigger: { 2627 trigger: wrapper, 2628 start: "top top", 2629 pin: innerDesktop, 2630 scrub: true, 2631 refreshPriority: wrapper.find(".site-slick-wrapper"), 2632 end: "bottom bottom", 2633 endTrigger: wrapper.find(".site-slick-wrapper"), 2634 markers: false, 2635 onEnterBack() { 2636 if (body.hasClass("custom-animate-footer")) { 2637 $("#site-footer").removeClass("animate-footer-in"); 2638 } 2639 }, 2640 onLeave() { 2641 if (body.hasClass("custom-animate-footer")) { 2642 $("#site-footer").addClass("animate-footer-in"); 2643 } 2644 }, 2645 }, 2646 }); 2647 // Let DOM mutations settle, then fix ScrollTrigger calculations 2648 setTimeout(() => { 2649 pinnedNav(wrapper); 2650 ScrollTrigger.refresh(); 2651 }, 100); 2652 }); 2653 2654 // function popupRows() { 2655 // let pinnedPopupRows = $( 2656 // '.site-row-container[class*="site-row-block-pinned-popup"]', 2657 // ); 2658 // body.addClass("custom-complex-pinned-popup-initialised"); 2659 // //Popups for slides with links 2660 // if (pinnedPopupRows.length > 0 && !body.hasClass(bodyEdit)) { 2661 // mainContent 2662 // .find(".site-slick-wrapper .site-slide:not(.custom-slide-intro)") 2663 // .each(function () { 2664 // let slide = $(this); 2665 // let link = slide.find(".site-slide-link"); 2666 // let href = slide.find(".site-slide-link").attr("href"); 2667 // let data = slide.find(".site-slider-more-desc-data"); 2668 // let title = data.find("> h1, > h2, > h3, > h4, > h5, > h6"); 2669 // let nextSlide = slide.next(); 2670 // let nextData = nextSlide.find(".site-slider-more-desc-data"); 2671 // let nextTitle = nextData.find( 2672 // "> h1, > h2, > h3, > h4, > h5, > h6", 2673 // ); 2674 2675 // // Get theme classes for current and next slides 2676 // let slideThemeClass = slide 2677 // .attr("class") 2678 // .split(" ") 2679 // .find((cls) => cls.startsWith("custom-slide-theme-")); 2680 2681 // if (href !== undefined && link.length) { 2682 // let hrefFormat = href.replace("#", ""); 2683 2684 // let popupContent = $(".site-row-block-" + hrefFormat); 2685 2686 // if (hrefFormat.length) { 2687 // body.append( 2688 // '<div class="custom-complex-pinned-popup-wrapper site-sub-wrapper custom-complex-pinned-popup-' + 2689 // hrefFormat + 2690 // '"><div class="custom-complex-pinned-popup-inner" /></div>', 2691 // ); 2692 2693 // let popupWrapper = $( 2694 // ".custom-complex-pinned-popup-wrapper.custom-complex-pinned-popup-" + 2695 // hrefFormat + 2696 // "", 2697 // ); 2698 // popupWrapper.addClass(slideThemeClass); 2699 // let popupInner = popupWrapper.find( 2700 // ".custom-complex-pinned-popup-inner", 2701 // ); 2702 2703 // let selectedRows = $( 2704 // ".site-row-container.site-row-block-" + hrefFormat + "", 2705 // ); 2706 2707 // selectedRows.appendTo(popupInner); 2708 2709 // popupWrapper.prepend( 2710 // '<button class="custom-complex-pinned-popup-close">Go back</button>', 2711 // ); 2712 2713 // popupWrapper 2714 // .find(".custom-more-links-wrapper .slick-slider") 2715 // .slick("refresh"); 2716 2717 // let popupClose = popupWrapper.find( 2718 // ".custom-complex-pinned-popup-close", 2719 // ); 2720 2721 // title 2722 // .clone() 2723 // .addClass("custom-complex-pinned-popup-title") 2724 // .prependTo(popupInner); 2725 2726 // let popupTitle = popupInner.find( 2727 // ".custom-complex-pinned-popup-title", 2728 // ); 2729 2730 // // Wrap popup title in proper structure 2731 // popupTitle.wrap( 2732 // '<div class="site-row-container complex-pinned-popup-row"><div class="cms-feature-wrapper site-col-12-wrapper custom-complex-pinned-popup-title-wrapper"><div class="cms-feature-datablock site-col-12" /></div></div>', 2733 // ); 2734 2735 // // Process next slide toggle links 2736 // popupInner 2737 // .find("table.custom-callout-link") 2738 // .each(function () { 2739 // let table = $(this); 2740 // if ( 2741 // table.text().includes("[next-slide]") && 2742 // !slide.hasClass("last-slide") 2743 // ) { 2744 // let nextSlideThemeClass = nextSlide 2745 // .attr("class") 2746 // .split(" ") 2747 // .find((cls) => cls.startsWith("custom-slide-theme-")); 2748 // if (nextSlideThemeClass != undefined) {
2749 // table.addClass("next-slide-toggle"); 2750 // table.addClass(nextSlideThemeClass); 2751 // table.html( 2752 // table 2753 // .html() 2754 // .replace( 2755 // "[next-slide]", 2756 // "<h4><a class='custom-callout-link-overlay' href='javascript:void(0)'>" + 2757 // nextTitle.html() + 2758 // "</a></h4>", 2759 // ), 2760 // ); 2761 // } 2762 // } 2763 // }); 2764 2765 // let nextSlideToggle = popupInner.find( 2766 // "table.custom-callout-link.next-slide-toggle", 2767 // ); 2768 2769 // let bodyPopupActiveClass = "custom-complex-pinned-popup-open"; 2770 // let popupActiveClass = "custom-complex-pinned-popup-active"; 2771 2772 // // Mobile popup functionality 2773 // mm.add("(max-width: 1023px)", (i) => { 2774 // body.removeClass(bodyPopupActiveClass); 2775 // popupWrapper.removeClass(popupActiveClass); 2776 // gsap.to(window, { 2777 // scrollTo: { 2778 // y: wrapper, 2779 // offsetY: 0, 2780 // }, 2781 // duration: 1, 2782 // }); 2783 // slide 2784 // .find( 2785 // ".site-slider-image-block, .site-slider-video-block", 2786 // ) 2787 // .clone() 2788 // .addClass( 2789 // "custom-complex-pinned-popup-media site-row-container", 2790 // ) 2791 // .prependTo(popupInner); 2792 // }); 2793 2794 // // Desktop popup functionality 2795 // mm.add("(min-width: 1024px)", (i) => { 2796 // body.removeClass(bodyPopupActiveClass); 2797 // popupWrapper.removeClass(popupActiveClass); 2798 // gsap.to(window, { 2799 // scrollTo: { 2800 // y: wrapper, 2801 // offsetY: 0, 2802 // }, 2803 // duration: 1, 2804 // }); 2805 2806 // popupInner 2807 // .find(".custom-complex-pinned-popup-media") 2808 // .remove(); 2809 2810 // addEventListener("orientationchange", (event) => { 2811 // body.removeClass(bodyPopupActiveClass); 2812 // popupWrapper.removeClass(popupActiveClass); 2813 // }); 2814 // }); 2815 2816 // // Handle link click to open popup 2817 // link.click(function (e) { 2818 // if (popupContent.length) { 2819 // e.preventDefault(); 2820 2821 // body.addClass(bodyPopupActiveClass); 2822 // popupWrapper.addClass(popupActiveClass); 2823 2824 // // Scroll to slide position 2825 // gsap.to(window, { 2826 // scrollTo: { 2827 // y: slide, 2828 // offsetY: 100, 2829 // }, 2830 // duration: 1, 2831 // }); 2832 2833 // gsap.to(popupInner, { 2834 // scrollTo: { 2835 // y: popupInner.find(">
2835 div:first-child"), 2836 // offsetY: 0, 2837 // }, 2838 // duration: 0, 2839 // }); 2840 // } 2841 // }); 2842 2843 // // Handle popup close 2844 // popupClose.click(function () { 2845 // body.removeClass(bodyPopupActiveClass); 2846 // popupWrapper.removeClass(popupActiveClass); 2847 // }); 2848 2849 // // Handle next slide toggle buttons 2850 // nextSlideToggle.each(function () { 2851 // let table = $(this); 2852 // table.click(function (e) { 2853 // body.removeClass(bodyPopupActiveClass); 2854 // popupWrapper.removeClass(popupActiveClass); 2855 2856 // // Scroll to next slide 2857 // gsap.to(window, { 2858 // scrollTo: { 2859 // y: nextSlide, 2860 // offsetY: 100, 2861 // }, 2862 // }); 2863 // }); 2864 // }); 2865 // } 2866 // } 2867 // }); 2868 // } 2869 // } 2870 2871 // ScrollTrigger.create({ 2872 // trigger: wrapper, 2873 // start: "top 200px", 2874 // end: "bottom bottom", 2875 // refreshPriority: wrapper.attr("data-order"), 2876 // onEnter: function () { 2877 // if (!body.hasClass("custom-complex-pinned-popup-initialised")) { 2878 // popupRows(); 2879 // } 2880 // }, 2881 // }); 2882 }, 2883 ); 2884} 2885 2886function complexPinnedContentNew() { 2887 $(".cms-gallery-feature.custom-complex-pinned-content-1-wrapper").each( 2888 function () { 2889 let wrapper = $(this); 2890 2891 pinSpacersOrder(wrapper); 2892 let slider = wrapper.find(".slick-slider"); 2893 let datablock = wrapper.find(".cms-feature-datablock"); 2894 slider.slick("unslick"); 2895 let slides = wrapper.find(".site-slide"); 2896 let firstSlide = slides.eq(0); 2897 let otherSlides = slides.not(firstSlide); 2898 2899 videoConvert( 2900 firstSlide.find(".site-slide-link").attr("href"), 2901 firstSlide.find(".site-slider-image-block"), 2902 true, 2903 ); 2904 2905 otherSlides.find("span.site-style-samp:first-child:last-child").hide(); 2906 2907 let introClass = "custom-slide-intro"; 2908 let afterIntroClass = "after-intro-slide"; 2909 2910 firstSlide.addClass(introClass); 2911 firstSlide.next().addClass(afterIntroClass); 2912 2913 $('<span class="site-button-arrow-theme">Discover</span>').prependTo( 2914 otherSlides.find(".site-slider-more-desc-data"), 2915 ); 2916 firstSlide.wrap('<div class="complex-intro-slide-wrapper"></div>'); 2917 2918 hamburger.addClass("hide-hamburger"); 2919 2920 let popupsInitialized = false; 2921 2922 function popupRows() { 2923 if (!body.hasClass(bodyEdit)) { 2924 if (popupsInitialized) return; 2925 2926 popupsInitialized = true; 2927 let otherSlideLength = otherSlides.length; 2928 2929 let pinnedPopupRows = $( 2930 '.site-main-wrapper .site-row-container[class*="site-row-block-pinned-popup"]', 2931 ); 2932 2933 pinnedPopupRows.hide(); 2934 for (var i = 1; i < otherSlideLength + 1; i++) { 2935 // Append a div to a container (e.g., #container) 2936 let popupContent = $( 2937 ".site-row-container.site-row-block-pinned-popup-" + i, 2938 ); 2939 body.append( 2940 `<div class="custom-complex-pinned-popup-wrapper custom-complex-pinned-popup-pinned-popup-${i} site-sub-wrapper"><button class="custom-complex-pinned-popup-close">Go back</button><div class="custom-complex-pinned-popup-inner"></div></div>`, 2941 ); 2942 2943 popupContent.appendTo( 2944 $( 2945 ".custom-complex-pinned-popup-wrapper.custom-complex-pinned-popup-pinned-popup-" + 2946 i + 2947 " .custom-complex-pinned-popup-inner", 2948 ), 2949 ); 2950 2951 $(".custom-complex-pinned-popup-inner") 2952 .find(".site-row-container") 2953 .show(); 2954 } 2955 2956 let closeButton = $(".custom-complex-pinned-popup-close"); 2957 2958 closeButton.click(function () { 2959 body.removeClass("custom-complex-pinned-popup-open"); 2960 $(".custom-complex-pinned-popup-wrapper").removeClass( 2961 "custom-complex-pinned-popup-active", 2962 ); 2963 }); 2964 2965 wrapper.find("a.site-slide-link").click(function (e) { 2966 let clicked = $(this); 2967 let href = clicked.attr("href"); 2968 2969 let parentSlide = clicked.closest(".active-desc, .site-slide"); 2970 2971 let linkTheme = parentSlide.attr("class"); 2972 let themeClass; 2973 if (linkTheme) {
2974 themeClass = linkTheme 2975 .split(" ") 2976 .find((cls) => cls.startsWith("custom-slide-theme-")); 2977 } 2978 2979 let title = clicked.find( 2980 ".site-slider-more-desc-data h1, .site-slider-more-desc-data h2, .site-slider-more-desc-data h3, .site-slider-more-desc-data h4, .site-slider-more-desc-data h5, .site-slider-more-desc-data h6", 2981 ); 2982 2983 if (href && href.startsWith("#")) { 2984 e.preventDefault(); 2985 let formattedHref = href.replace("#", ""); 2986 body.addClass("custom-complex-pinned-popup-open"); 2987 2988 let activePopup = $( 2989 ".custom-complex-pinned-popup-wrapper.custom-complex-pinned-popup-" + 2990 formattedHref, 2991 ); 2992 2993 activePopup.addClass("custom-complex-pinned-popup-active"); 2994 body.addClass(bodyClass); 2995 2996 activePopup 2997 .find(".custom-more-links-wrapper .slick-slider") 2998 .slick("refresh"); 2999 if (themeClass != undefined) { 3000 activePopup.addClass(themeClass); 3001 } 3002 3003 if ( 3004 activePopup.find(".custom-complex-pinned-popup-title-wrapper") 3005 .length === 0 3006 ) { 3007 $( 3008 `<div class="site-row-container complex-pinned-popup-row"><div class="cms-feature-wrapper site-col-12-wrapper custom-complex-pinned-popup-title-wrapper"><div class="cms-feature-datablock site-col-12"></div></div></div>`, 3009 ).prependTo( 3010 activePopup.find(".custom-complex-pinned-popup-inner"), 3011 ); 3012 3013 title 3014 .clone() 3015 .prependTo( 3016 activePopup.find( 3017 ".custom-complex-pinned-popup-title-wrapper .cms-feature-datablock", 3018 ), 3019 ); 3020 3021 if ($(window).width() < 1024) { 3022 activePopup 3023 .find(".custom-complex-pinned-popup-media") 3024 .remove(); 3025 parentSlide 3026 .find(".site-slider-image-block, .site-slider-video-block") 3027 .clone() 3028 .prependTo(".custom-complex-pinned-popup-inner") 3029 .addClass( 3030 "custom-complex-pinned-popup-media site-row-container", 3031 ); 3032 } else { 3033 $(".custom-complex-pinned-popup-inner") 3034 .find(".custom-complex-pinned-popup-media") 3035 .remove(); 3036 } 3037 } 3038 3039 let nextSlide = parentSlide.next(); 3040 3041 activePopup.find("table.custom-callout-link").each(function () { 3042 let table = $(this); 3043 3044 if ( 3045 table.text().includes("[next-slide]") && 3046 nextSlide.length > 0 3047 ) { 3048 let nextSlideThemeClass = nextSlide 3049 .attr("class") 3050 .split(" ") 3051 .find((cls) => cls.startsWith("custom-slide-theme-")); 3052 3053 if (nextSlideThemeClass != undefined) { 3054 table.addClass("next-slide-toggle"); 3055 table.addClass(nextSlideThemeClass); 3056 table.html( 3057 table 3058 .html() 3059 .replace( 3060 "[next-slide]", 3061 "<h4><a class='custom-callout-link-overlay' href='javascript:void(0)'>" + 3062 nextSlide 3063 .find( 3064 ".site-slider-more-desc-data h1, .site-slider-more-desc-data h2, .site-slider-more-desc-data h3, .site-slider-more-desc-data h4, .site-slider-more-desc-data h5, .site-slider-more-desc-data h6", 3065 ) 3066 .html() + 3067 "</a></h4>", 3068 ), 3069 ); 3070 3071 table.click(function () { 3072 body.removeClass("custom-complex-pinned-popup-open"); 3073 $(".custom-complex-pinned-popup-wrapper").removeClass( 3074 "custom-complex-pinned-popup-active", 3075 ); 3076 3077 gsap.to(window, { 3078 scrollTo: { 3079 y: nextSlide, 3080 offsetY: 100, 3081 }, 3082 duration: 1, 3083 }); 3084 }); 3085 } 3086 } 3087 }); 3088 } 3089 }); 3090 } 3091 } 3092 3093 mm.add("(max-width: 1023px)", (i) => { 3094 datablock.find(".complex-pinned-main-content-wrapper").remove(); 3095 wrapper.find(".complex-pinned-nav-wrapper").remove(); 3096 3097 let firstSlideDesc = firstSlide.find(".site-slider-more-desc"); 3098 3099 let fistSlideTl = gsap.timeline({ 3100 scrollTrigger: { 3101 trigger: firstSlide, 3102 start: "top 20px", 3103 end: "bottom 10px", 3104 scrub: true, 3105 pin: firstSlide, 3106 pinSpacing: true, 3107 markers: false, 3108 refreshPriority: wrapper.attr("data-order"), 3109 }, 3110 }); 3111 3112 fistSlideTl.to(firstSlideDesc, { 3113 top: 0, 3114 pointerEvents: "all", 3115 }); 3116 3117 otherSlides.each(function () { 3118 let slide = $(this); 3119 let desc = slide.find(".site-slider-more-desc"); 3120 let caption = slide.find(".site-slider-caption-block"); 3121 3122 let slideTl = gsap.timeline({ 3123 scrollTrigger: { 3124 trigger: slide, 3125 start: "top 100px", 3126 end: "top -100px", 3127 // scrub: true, 3128 markers: false, 3129 toggleActions: "play none none reverse", 3130 refreshPriority: wrapper.attr("data-order"), 3131 onEnter() { 3132 hamburger.removeClass("hide-hamburger"); 3133 if (slide.hasClass(afterIntroClass)) { 3134 popupRows(); 3135 } 3136 }, 3137 }, 3138 }); 3139 3140 slideTl.to(caption, { 3141 opacity: 0, 3142 pointerEvents: "none", 3143 }); 3144 3145 slideTl.to( 3146 desc, 3147 { 3148 left: 0, 3149 pointerEvents: "all", 3150 }, 3151 "<", 3152 ); 3153 }); 3154 }); 3155 3156 mm.add("(min-width: 1024px)", (i) => { 3157 datablock.prepend( 3158 '<div class="complex-pinned-main-content-wrapper"><div class="complex-pinned-main-content-bg" /><div class="complex-pinned-main-content-text" /><div class="complex-pinned-main-content-description" /></div>', 3159 ); 3160 wrapper.append('<div class="complex-pinned-nav-wrapper"></div>'); 3161 let navWrapper = wrapper.find(".complex-pinned-nav-wrapper"); 3162 navWrapper.addClass("hide-nav"); 3163 pinSpacersOrder(navWrapper); 3164 let innerDesktop = wrapper.find(".complex-pinned-main-content-wrapper"); 3165 let mainContentBg = datablock.find(".complex-pinned-main-content-bg"); 3166 let mainContentText = datablock.find( 3167 ".complex-pinned-main-content-text", 3168 ); 3169 let mainContentDesc = datablock.find( 3170 ".complex-pinned-main-content-description", 3171 ); 3172 3173 let slideMedias = slides.find( 3174 ".site-slider-image-block, .site-slider-video-block", 3175 ); 3176 let slideData = slides.find(".site-slider-capton-data"); 3177 let slideDesc = slides.find(".site-slider-more-desc"); 3178 3179 slideMedias.eq(0).addClass("active"); 3180 slideData.eq(0).addClass("active"); 3181 3182 slideMedias.clone().appendTo(mainContentBg); 3183 slideData.clone().appendTo(mainContentText); 3184 slideDesc.clone().appendTo(mainContentDesc); 3185 3186 pinSpacersOrder(wrapper.find(".site-slick-wrapper")); 3187 3188 slides.each(function (i) { 3189 let slide = $(this); 3190 let themeClass = slide 3191 .attr("class") 3192 ?.split(" ") 3193 .find((cls) => cls.startsWith("custom-slide-theme-")); 3194 3195 let slideLink = slide.find(".site-slide-link"); 3196 let href = slideLink.attr("href"); 3197 let target = slideLink.attr("target"); 3198 if (target === undefined) { 3199 target = "_self"; 3200 } 3201 3202 let slideMedia = mainContentBg 3203 .find(".site-slider-image-block, .site-slider-video-block") 3204 .eq(i); 3205 let slideDataItem = mainContentText 3206 .find(".site-slider-capton-data") 3207 .eq(i); 3208 let slideDescItem = mainContentDesc 3209 .find(".site-slider-more-desc") 3210 .eq(i); 3211 3212 slideDescItem.wrapInner( 3213 '<a class="site-slide-link" href="' + 3214 href + 3215 '" target="' + 3216 target + 3217 '"></a>', 3218 ); 3219 let descriptionWords = slideDataItem.find("span"); 3220 let prevSlideMedia = slideMedia.prev(); 3221 let prevSlideData = slideDataItem.prev(); 3222 let prevSlideDesc = slideDescItem.prev(); 3223 let prevDescriptionWords = prevSlideData.find("span"); 3224 let nav = slide.find("span.site-style-samp:first-child:last-child"); 3225 3226 if (themeClass) { 3227 slideMedia.addClass(themeClass); 3228 slideDataItem.addClass(themeClass); 3229 slideDescItem.addClass(themeClass); 3230 } 3231 3232 nav 3233 .attr("custom-slide-nav", i) 3234 .addClass(themeClass) 3235 .show() 3236 .append('<span class="nav-line"></span>') 3237 .unwrap() 3238 .prependTo(navWrapper); 3239 3240 let isIntroSlide = slide.hasClass(introClass); 3241 let isAfterIntroSlide = slide.hasClass(afterIntroClass); 3242 3243 let navItem = navWrapper.find('[custom-slide-nav="' + i + '"]'); 3244 3245 let start; 3246 let end; 3247 let pin; 3248 let endTrigger; 3249 if (isIntroSlide) { 3250 start = "top 20px"; 3251 end = "+=1500"; 3252 pin = slide.parent(); 3253 endTrigger = slide; 3254 } else if (isAfterIntroSlide) { 3255 start = "top 110%"; 3256 end = "bottom center"; 3257 pin = false; 3258 endTrigger = slide; 3259 } else { 3260 start = "top center"; 3261 end = "bottom center"; 3262 pin = false; 3263 endTrigger = slide; 3264 } 3265 3266 let slideTl = gsap.timeline({ 3267 scrollTrigger: { 3268 trigger: slide, 3269 start: start, 3270 end: end, 3271 endTrigger: endTrigger, 3272 scrub: true, 3273 pin: pin, 3274 pinSpacing: true, 3275 markers: false, 3276 refreshPriority: wrapper 3277 .find(".site-slick-wrapper") 3278 .attr("data-order"), 3279 onEnter() { 3280 if (!isIntroSlide) { 3281 slideMedia.addClass("active"); 3282 slideDataItem.addClass("active"); 3283 slideDescItem.addClass("active-desc"); 3284 hamburger.removeClass("hide-hamburger"); 3285 descriptionWords.each(function (index) { 3286 setTimeout(() => { 3287 $(this).addClass("active"); 3288 }, index * 150);
3289 }); 3290 3291 navItem.addClass("active-nav"); 3292 popupRows(); 3293 } 3294 3295 if (!isAfterIntroSlide) { 3296 prevSlideMedia.removeClass("active"); 3297 prevSlideData.removeClass("active"); 3298 // prevSlideDesc.removeClass("active-desc"); 3299 prevDescriptionWords.each(function (index) { 3300 setTimeout(() => { 3301 $(this).removeClass("active"); 3302 }, index * 150); 3303 }); 3304 } else { 3305 gsap.to($(window), { 3306 scrollTo: { 3307 y: slide, 3308 offsetY: 100, 3309 }, 3310 duration: 0.5, 3311 onStart() { 3312 navWrapper.removeClass("hide-nav"); 3313 }, 3314 }); 3315 gsap.to(firstSlide, { 3316 opacity: 0, 3317 duration: 0.5, 3318 pointerEvents: "none", 3319 }); 3320 gsap.to(firstSlide.closest(".pin-spacer"), { 3321 pointerEvents: "none", 3322 }); 3323 } 3324 }, 3325 3326 onLeaveBack() { 3327 if (!isIntroSlide) { 3328 slideMedia.removeClass("active"); 3329 slideDataItem.removeClass("active"); 3330 slideDescItem.removeClass("active-desc"); 3331 descriptionWords.each(function (index) { 3332 setTimeout(() => { 3333 $(this).removeClass("active"); 3334 }, index * 150); 3335 }); 3336 navItem.removeClass("active-nav"); 3337 } 3338 3339 if (isAfterIntroSlide) { 3340 gsap.to($(window), { 3341 scrollTo: { 3342 y: "-=100", 3343 }, 3344 duration: 0.5, 3345 onStart() { 3346 navWrapper.addClass("hide-nav"); 3347 }, 3348 }); 3349 gsap.to(firstSlide, { 3350 opacity: 1, 3351 duration: 0.5, 3352 pointerEvents: "all", 3353 }); 3354 gsap.to(firstSlide.closest(".pin-spacer"), { 3355 pointerEvents: "all", 3356 }); 3357 } 3358 }, 3359 onEnterBack() { 3360 if (!isIntroSlide) { 3361 slideMedia.addClass("active"); 3362 slideDataItem.addClass("active"); 3363 // slideDescItem.addClass("active-desc"); 3364 descriptionWords.each(function (index) { 3365 setTimeout(() => { 3366 $(this).addClass("active"); 3367 }, index * 150); 3368 }); 3369 navItem.addClass("active-nav"); 3370 } 3371 }, 3372 onLeave() { 3373 if (!isIntroSlide) { 3374 navItem.removeClass("active-nav"); 3375 } 3376 }, 3377 }, 3378 }); 3379 3380 if (slide.hasClass(introClass)) { 3381 slideTl.to(slide, { 3382 opacity: 1, 3383 pointerEvents: "all", 3384 }); 3385 slideTl.to( 3386 mainContentText.find(">*").eq(0), 3387 { 3388 opacity: 0, 3389 pointerEvents: "none", 3390 }, 3391 " <", 3392 ); 3393 } 3394 }); 3395 3396 let desktopTl = gsap.timeline({ 3397 scrollTrigger: { 3398 trigger: wrapper, 3399 start: "top top", 3400 pin: innerDesktop, 3401 scrub: true, 3402 refreshPriority: wrapper.find(".site-slick-wrapper"), 3403 end: "bottom bottom", 3404 endTrigger: wrapper.find(".site-slick-wrapper"), 3405 markers: false, 3406 onEnterBack() { 3407 if (body.hasClass("custom-animate-footer")) { 3408 $("#site-footer").removeClass("animate-footer-in"); 3409 } 3410 }, 3411 onLeave() { 3412 if (body.hasClass("custom-animate-footer")) { 3413 $("#site-footer").addClass("animate-footer-in"); 3414 } 3415 }, 3416 }, 3417 }); 3418 3419 ScrollTrigger.create({ 3420 trigger: wrapper, 3421 start: "top 15%", 3422 end: "bottom bottom", 3423 pin: navWrapper, 3424 // endTrigger: "bottom bottom", 3425 refreshPriority: navWrapper.attr("data-order"), 3426 markers: false, 3427 pinSpacing: false, 3428 }); 3429 3430 navWrapper.find("span[custom-slide-nav]").click(function () { 3431 let index = $(this).attr("custom-slide-nav"); 3432 gsap.to(window, { 3433 scrollTo: { 3434 y: slides.eq(index), 3435 offsetY: 100, 3436 }, 3437 duration: 1, 3438 }); 3439 }); 3440 }); 3441 }, 3442 ); 3443} 3444
3445function complexPinnedContentTextFeature() { 3446 if (!body.hasClass(bodyEdit)) { 3447 $(".cms-text-feature.custom-complex-pinned-content-wrapper").each( 3448 function () { 3449 let wrapper = $(this); 3450 pinSpacersOrder(wrapper); 3451 let datablock = wrapper.find(".cms-feature-datablock"); 3452 let table = datablock.find("> table"); 3453 let tbody = table.find("> tbody"); 3454 3455 let rows = tbody.find("> tr"); 3456 3457 table.addClass("site-slick-wrapper"); 3458 datablock.addClass("site-slider"); 3459 wrapper.addClass("cms-gallery-feature"); 3460 rows.addClass("site-slide"); 3461 let slides = wrapper.find(".site-slide"); 3462 hamburger.addClass("hide-hamburger"); 3463 slides.toArray().forEach((slideEl) => { 3464 let slide = $(slideEl); 3465 let datas = slide.find("> td"); 3466 let media = datas.eq(0); 3467 let caption = datas.eq(1); 3468 let desc = datas.eq(2); 3469 3470 let themeClass = media 3471 .find(".image") 3472 .attr("class") 3473 ?.split(" ") 3474 .find((cls) => cls.startsWith("custom-slide-theme-")); 3475 3476 let slideLink = media.find(".image a"); 3477 let href = slideLink.attr("href"); 3478 let target = slideLink.attr("target") || "_self"; 3479 3480 if (media.find(".image > a").length) { 3481 media.find(".image img").unwrap(); 3482 } 3483 3484 if (slideLink.length) { 3485 slide.wrapInner( 3486 `<a class="site-slide-link" href="${href}" target="${target}"></a>`, 3487 ); 3488 } 3489 3490 slide.addClass(themeClass); 3491 media.addClass("site-slider-image-block"); 3492 caption.addClass("site-slider-caption"); 3493 desc.addClass("site-slider-more-desc"); 3494 3495 caption.wrapInner( 3496 '<div class="site-slider-caption-block"><div class="site-container"><div class="site-slider-capton-data"></div></div></div>', 3497 ); 3498 3499 desc.wrapInner( 3500 '<div class="site-container"><div class="site-slider-more-desc-data"></div></div>', 3501 ); 3502 3503 desc.appendTo(caption); 3504 }); 3505 3506 let firstSlide = slides.eq(0); 3507 let otherSlides = slides.not(firstSlide); 3508 3509 let introClass = "custom-slide-intro"; 3510 let afterIntroClass = "after-intro-slide"; 3511 3512 firstSlide.addClass(introClass); 3513 firstSlide.next().addClass(afterIntroClass); 3514 otherSlides.find("span.site-style-samp:first-child:last-child").hide(); 3515 3516 $('<span class="site-button-arrow-theme">Discover</span>').prependTo( 3517 otherSlides.find(".site-slider-more-desc-data"), 3518 ); 3519 firstSlide.wrap('<div class="complex-intro-slide-wrapper"></div>'); 3520 3521 if (firstSlide.find(".site-slide-link").length) { 3522 firstSlide.find(".site-slide-link").click(function (e) { 3523 e.preventDefault(); 3524 }); 3525 videoConvert( 3526 firstSlide.find(".site-slide-link").attr("href"), 3527 firstSlide.find(".site-slider-image-block"), 3528 true, 3529 ); 3530 } 3531 3532 let popupsInitialized = false; 3533 function popupRows() { 3534 if (!body.hasClass(bodyEdit)) { 3535 if (popupsInitialized) return; 3536 3537 popupsInitialized = true; 3538 let otherSlideLength = otherSlides.length; 3539 3540 let pinnedPopupRows = $( 3541 '.site-main-wrapper .site-row-container[class*="site-row-block-pinned-popup"]', 3542 ); 3543 3544 pinnedPopupRows.hide(); 3545 for (var i = 1; i < otherSlideLength + 1; i++) { 3546 // Append a div to a container (e.g., #container) 3547 let popupContent = $( 3548 ".site-row-container.site-row-block-pinned-popup-" + i, 3549 ); 3550 body.append( 3551 `<div class="custom-complex-pinned-popup-wrapper custom-complex-pinned-popup-pinned-popup-${i} site-sub-wrapper"><button class="custom-complex-pinned-popup-close">Go back</button><div class="custom-complex-pinned-popup-inner"></div></div>`, 3552 ); 3553 } 3554 3555 let closeButton = $(".custom-complex-pinned-popup-close"); 3556 3557 closeButton.click(function () { 3558 body.removeClass("custom-complex-pinned-popup-open"); 3559 $(".custom-complex-pinned-popup-wrapper").removeClass( 3560 "custom-complex-pinned-popup-active", 3561 ); 3562 }); 3563 3564 wrapper.find("a.site-slide-link").click(function (e) { 3565 let clicked = $(this); 3566 let href = clicked.attr("href"); 3567 3568 let parentSlide = clicked.closest(".active-desc, .site-slide"); 3569 3570 let linkTheme = parentSlide.attr("class"); 3571 let themeClass; 3572 if (linkTheme) {
3573 themeClass = linkTheme 3574 .split(" ") 3575 .find((cls) => cls.startsWith("custom-slide-theme-")); 3576 } 3577 3578 let title = clicked.find( 3579 ".site-slider-more-desc-data h1, .site-slider-more-desc-data h2, .site-slider-more-desc-data h3, .site-slider-more-desc-data h4, .site-slider-more-desc-data h5, .site-slider-more-desc-data h6", 3580 ); 3581 3582 if (href && href.startsWith("#")) { 3583 e.preventDefault(); 3584 let formattedHref = href.replace("#", ""); 3585 3586 let popupContent = $( 3587 "#site-main-grid-block .site-row-container.site-row-block-" + 3588 formattedHref, 3589 ); 3590 3591 popupContent.appendTo( 3592 $( 3593 ".custom-complex-pinned-popup-wrapper.custom-complex-pinned-popup-" + 3594 formattedHref + 3595 " .custom-complex-pinned-popup-inner", 3596 ), 3597 ); 3598 3599 $(".custom-complex-pinned-popup-inner") 3600 .find(".site-row-container") 3601 .show(); 3602 3603 body.addClass("custom-complex-pinned-popup-open"); 3604 3605 let activePopup = $( 3606 ".custom-complex-pinned-popup-wrapper.custom-complex-pinned-popup-" + 3607 formattedHref, 3608 ); 3609 3610 activePopup.addClass("custom-complex-pinned-popup-active"); 3611 body.addClass(bodyClass); 3612 3613 activePopup 3614 .find(".custom-more-links-wrapper .slick-slider") 3615 .slick("refresh"); 3616 if (themeClass != undefined) { 3617 activePopup.addClass(themeClass); 3618 } 3619 3620 if ( 3621 activePopup.find(".custom-complex-pinned-popup-title-wrapper") 3622 .length === 0 3623 ) { 3624 $( 3625 `<div class="site-row-container complex-pinned-popup-row"><div class="cms-feature-wrapper site-col-12-wrapper custom-complex-pinned-popup-title-wrapper"><div class="cms-feature-datablock site-col-12"></div></div></div>`, 3626 ).prependTo( 3627 activePopup.find(".custom-complex-pinned-popup-inner"), 3628 ); 3629 3630 title 3631 .clone() 3632 .prependTo( 3633 activePopup.find( 3634 ".custom-complex-pinned-popup-title-wrapper .cms-feature-datablock", 3635 ), 3636 ); 3637 3638 if ($(window).width() < 1024) { 3639 activePopup 3640 .find(".custom-complex-pinned-popup-media") 3641 .remove(); 3642 parentSlide 3643 .find( 3644 ".site-slider-image-block, .site-slider-video-block", 3645 ) 3646 .clone() 3647 .prependTo(".custom-complex-pinned-popup-inner") 3648 .addClass( 3649 "custom-complex-pinned-popup-media site-row-container", 3650 ); 3651 } else { 3652 $(".custom-complex-pinned-popup-inner") 3653 .find(".custom-complex-pinned-popup-media") 3654 .remove(); 3655 } 3656 } 3657 3658 let nextSlide = parentSlide.next(); 3659 3660 activePopup.find("table.custom-callout-link").each(function () { 3661 let table = $(this); 3662 3663 if ( 3664 table.text().includes("[next-slide]") && 3665 nextSlide.length > 0 3666 ) { 3667 let nextSlideThemeClass = nextSlide 3668 .attr("class") 3669 .split(" ") 3670 .find((cls) => cls.startsWith("custom-slide-theme-")); 3671 3672 if (nextSlideThemeClass != undefined) {
3673 table.addClass("next-slide-toggle"); 3674 table.addClass(nextSlideThemeClass); 3675 table.html( 3676 table 3677 .html() 3678 .replace( 3679 "[next-slide]", 3680 "<h4><a class='custom-callout-link-overlay' href='javascript:void(0)'>" + 3681 nextSlide 3682 .find( 3683 ".site-slider-more-desc-data h1, .site-slider-more-desc-data h2, .site-slider-more-desc-data h3, .site-slider-more-desc-data h4, .site-slider-more-desc-data h5, .site-slider-more-desc-data h6", 3684 ) 3685 .html() + 3686 "</a></h4>", 3687 ), 3688 ); 3689 3690 table.click(function () { 3691 body.removeClass("custom-complex-pinned-popup-open"); 3692 $(".custom-complex-pinned-popup-wrapper").removeClass( 3693 "custom-complex-pinned-popup-active", 3694 ); 3695 3696 gsap.to(window, { 3697 scrollTo: { 3698 y: nextSlide, 3699 offsetY: 100, 3700 }, 3701 duration: 1, 3702 }); 3703 }); 3704 } 3705 } 3706 }); 3707 } 3708 }); 3709 } 3710 } 3711 3712 mm.add("(max-width: 1023px)", (i) => { 3713 datablock.find(".complex-pinned-main-content-wrapper").remove(); 3714 wrapper.find(".complex-pinned-nav-wrapper").remove(); 3715 3716 let firstSlideDesc = firstSlide.find(".site-slider-more-desc"); 3717 3718 let fistSlideTl = gsap.timeline({ 3719 scrollTrigger: { 3720 trigger: firstSlide, 3721 start: "top 20px", 3722 end: "bottom 10px", 3723 scrub: true, 3724 pin: firstSlide, 3725 pinSpacing: true, 3726 markers: false, 3727 refreshPriority: wrapper.attr("data-order"), 3728 }, 3729 }); 3730 3731 fistSlideTl.to(firstSlideDesc, { 3732 top: 0, 3733 pointerEvents: "all", 3734 }); 3735 3736 otherSlides.each(function (i) { 3737 let slide = $(this); 3738 let desc = slide.find(".site-slider-more-desc"); 3739 let caption = slide.find(".site-slider-caption-block"); 3740 3741 let slideTl = gsap.timeline({ 3742 scrollTrigger: { 3743 trigger: slide, 3744 start: "top 100px", 3745 end: "top -100px", 3746 // scrub: true, 3747 markers: false, 3748 toggleActions: "play none none reverse", 3749 refreshPriority: wrapper.attr("data-order"), 3750 onEnter() { 3751 hamburger.removeClass("hide-hamburger"); 3752 popupRows(); 3753 }, 3754 onLeaveBack() { 3755 if (i === 0) { 3756 hamburger.addClass("hide-hamburger"); 3757 } 3758 }, 3759 }, 3760 }); 3761 3762 slideTl.to(caption, { 3763 opacity: 0, 3764 pointerEvents: "none", 3765 }); 3766 3767 slideTl.to( 3768 desc, 3769 { 3770 left: 0, 3771 pointerEvents: "all", 3772 }, 3773 "<", 3774 ); 3775 }); 3776 }); 3777 3778 mm.add("(min-width: 1024px)", (i) => { 3779 datablock.prepend( 3780 '<div class="complex-pinned-main-content-wrapper"><div class="complex-pinned-main-content-bg" /><div class="complex-pinned-main-content-text" /><div class="complex-pinned-main-content-description" /></div>', 3781 ); 3782 wrapper.append('<div class="complex-pinned-nav-wrapper"></div>'); 3783 let navWrapper = wrapper.find(".complex-pinned-nav-wrapper"); 3784 navWrapper.addClass("hide-nav"); 3785 pinSpacersOrder(navWrapper); 3786 let innerDesktop = wrapper.find( 3787 ".complex-pinned-main-content-wrapper", 3788 ); 3789 let mainContentBg = datablock.find(".complex-pinned-main-content-bg"); 3790 let mainContentText = datablock.find( 3791 ".complex-pinned-main-content-text", 3792 ); 3793 let mainContentDesc = datablock.find( 3794 ".complex-pinned-main-content-description", 3795 ); 3796 3797 let slideMedias = slides.find( 3798 ".site-slider-image-block, .site-slider-video-block", 3799 ); 3800 let slideData = slides.find(".site-slider-capton-data"); 3801 let slideDesc = slides.find(".site-slider-more-desc"); 3802 3803 slideMedias.eq(0).addClass("active"); 3804 slideData.eq(0).addClass("active"); 3805 3806 slideMedias.clone().appendTo(mainContentBg); 3807 slideData.clone().appendTo(mainContentText); 3808 slideDesc.clone().appendTo(mainContentDesc); 3809 3810 pinSpacersOrder(wrapper.find(".site-slick-wrapper")); 3811 3812 let movedSlideMedias = mainContentBg.find( 3813 ".site-slider-image-block, .site-slider-video-block", 3814 ); 3815 let movedSlideData = mainContentText.find(".site-slider-capton-data"); 3816 let movedSlideDesc = mainContentDesc.find(".site-slider-more-desc"); 3817 3818 slides.each(function (i) { 3819 let slide = $(this); 3820 let themeClass = slide 3821 .attr("class") 3822 ?.split(" ") 3823 .find((cls) => cls.startsWith("custom-slide-theme-")); 3824 3825 let slideLink = slide.find(".site-slide-link"); 3826 let href = slideLink.attr("href"); 3827 let target = slideLink.attr("target"); 3828 if (target === undefined) { 3829 target = "_self"; 3830 } 3831 3832 let slideMedia = movedSlideMedias.eq(i); 3833 let slideDataItem = movedSlideData.eq(i); 3834 let slideDescItem = movedSlideDesc.eq(i); 3835 3836 slideDescItem.wrapInner( 3837 '<a class="site-slide-link" href="' + 3838 href + 3839 '" target="' + 3840 target + 3841 '"></a>', 3842 ); 3843 let descriptionWords = slideDataItem.find("span"); 3844 let prevSlideMedia = slideMedia.prev(); 3845 let prevSlideData = slideDataItem.prev(); 3846 let prevSlideDesc = slideDescItem.prev(); 3847 let prevDescriptionWords = prevSlideData.find("span"); 3848 let nav = slide.find("span.site-style-samp:first-child:last-child"); 3849 3850 if (themeClass) { 3851 slideMedia.addClass(themeClass); 3852 slideDataItem.addClass(themeClass); 3853 slideDescItem.addClass(themeClass); 3854 } 3855 3856 // nav 3857 // .attr("custom-slide-nav", i) 3858 // .addClass(themeClass) 3859 // .show() 3860 // .append('<span class="nav-line"></span>') 3861 // .unwrap() 3862 // .prependTo(navWrapper); 3863 3864 nav 3865 .attr("custom-slide-nav", i) 3866 .addClass(themeClass) 3867 .show() 3868 .append('<span class="nav-line"></span>') 3869 .unwrap() 3870 .prependTo(navWrapper); 3871 3872 let navItem = nav; 3873 3874 let isIntroSlide = slide.hasClass(introClass); 3875 let isAfterIntroSlide = slide.hasClass(afterIntroClass); 3876 3877 // let navItem = navWrapper.find('[custom-slide-nav="' + i + '"]'); 3878 3879 let start; 3880 let end; 3881 let pin; 3882 let endTrigger; 3883 if (isIntroSlide) { 3884 start = "top 20px"; 3885 end = "+=1500"; 3886 pin = slide.parent(); 3887 endTrigger = slide; 3888 } else if (isAfterIntroSlide) { 3889 start = "top 110%"; 3890 end = "bottom center"; 3891 pin = false; 3892 endTrigger = slide; 3893 if (wrapper.hasClass("custom-alt-anim-wrapper")) { 3894 start = "top 90%"; 3895 } 3896 } else { 3897 start = "top center"; 3898 end = "bottom center"; 3899 pin = false; 3900 endTrigger = slide; 3901 } 3902 3903 let slideTl = gsap.timeline({ 3904 scrollTrigger: { 3905 trigger: slide, 3906 start: start, 3907 end: end, 3908 endTrigger: endTrigger, 3909 scrub: true, 3910 pin: pin, 3911 pinSpacing: true, 3912 markers: false, 3913 refreshPriority: wrapper 3914 .find(".site-slick-wrapper") 3915 .attr("data-order"), 3916 onEnter() { 3917 if (!isIntroSlide) { 3918 slideMedia.addClass("active"); 3919 slideDataItem.addClass("active"); 3920 slideDescItem.addClass("active-desc"); 3921 hamburger.removeClass("hide-hamburger"); 3922 descriptionWords.each(function (index) { 3923 setTimeout(() => { 3924 $(this).addClass("active"); 3925 }, index * 150);
3926 }); 3927 3928 navItem.addClass("active-nav"); 3929 popupRows(); 3930 } 3931 prevSlideMedia.removeClass("active"); 3932 if (!isAfterIntroSlide) { 3933 // prevSlideMedia.removeClass("active"); 3934 prevSlideData.removeClass("active"); 3935 // prevSlideDesc.removeClass("active-desc"); 3936 prevDescriptionWords.each(function (index) { 3937 setTimeout(() => { 3938 $(this).removeClass("active"); 3939 }, index * 150); 3940 }); 3941 } else { 3942 gsap.to($(window), { 3943 scrollTo: { 3944 y: slide, 3945 offsetY: 100, 3946 }, 3947 duration: 0.5, 3948 onStart() { 3949 navWrapper.removeClass("hide-nav"); 3950 }, 3951 }); 3952 gsap.to(firstSlide, { 3953 opacity: 0, 3954 duration: 0.5, 3955 pointerEvents: "none", 3956 }); 3957 gsap.to(firstSlide.closest(".pin-spacer"), { 3958 pointerEvents: "none", 3959 }); 3960 } 3961 }, 3962 3963 onLeaveBack() { 3964 if (!isIntroSlide) { 3965 slideMedia.removeClass("active"); 3966 slideDataItem.removeClass("active"); 3967 slideDescItem.removeClass("active-desc"); 3968 descriptionWords.each(function (index) { 3969 setTimeout(() => { 3970 $(this).removeClass("active"); 3971 }, index * 150); 3972 }); 3973 navItem.removeClass("active-nav"); 3974 } 3975 3976 if (isAfterIntroSlide) { 3977 hamburger.addClass("hide-hamburger"); 3978 gsap.to($(window), { 3979 scrollTo: { 3980 y: "-=100", 3981 }, 3982 duration: 0.5, 3983 onStart() { 3984 navWrapper.addClass("hide-nav"); 3985 }, 3986 }); 3987 gsap.to(firstSlide, { 3988 opacity: 1, 3989 duration: 0.5, 3990 pointerEvents: "all", 3991 }); 3992 gsap.to(firstSlide.closest(".pin-spacer"), { 3993 pointerEvents: "all", 3994 }); 3995 } 3996 }, 3997 onEnterBack() { 3998 slideMedia.addClass("active"); 3999 if (!isIntroSlide) { 4000 slideDataItem.addClass("active"); 4001 // slideDescItem.addClass("active-desc"); 4002 descriptionWords.each(function (index) { 4003 setTimeout(() => { 4004 $(this).addClass("active"); 4005 }, index * 150); 4006 }); 4007 navItem.addClass("active-nav"); 4008 } 4009 }, 4010 onLeave() { 4011 if (!isIntroSlide) { 4012 navItem.removeClass("active-nav"); 4013 } 4014 }, 4015 }, 4016 }); 4017 4018 if (isIntroSlide) { 4019 if (wrapper.hasClass("custom-alt-anim-wrapper")) { 4020 // slideTl.fromTo( 4021 // slide, 4022 // { pointerEvents: "none", x: "100%" }, 4023 // { 4024 // pointerEvents: "all", 4025 // x: "0", 4026 // }, 4027 // ); 4028 slideTl.fromTo( 4029 mainContentText.find(">*").eq(0), 4030 { 4031 opacity: 1, 4032 pointerEvents: "all", 4033 }, 4034 { opacity: 0, pointerEvents: "none" }, 4035 ); 4036 slideTl.fromTo( 4037 slide, 4038 { opacity: 0, pointerEvents: "none" }, 4039 { 4040 opacity: 1, 4041 pointerEvents: "all", 4042 }, 4043 ); 4044 } else { 4045 slideTl.fromTo( 4046 slide, 4047 { opacity: 0, pointerEvents: "none" }, 4048 { 4049 opacity: 1, 4050 pointerEvents: "all", 4051 }, 4052 ); 4053 slideTl.to( 4054 mainContentText.find(">*").eq(0), 4055 { 4056 opacity: 0, 4057 pointerEvents: "none", 4058 }, 4059 " <", 4060 ); 4061 } 4062 } 4063 }); 4064 4065 let desktopTl = gsap.timeline({ 4066 scrollTrigger: { 4067 trigger: wrapper, 4068 start: "top top",
4069 pin: innerDesktop, 4070 scrub: true, 4071 refreshPriority: wrapper.find(".site-slick-wrapper"), 4072 end: "bottom bottom", 4073 endTrigger: wrapper.find(".site-slick-wrapper"), 4074 markers: false, 4075 onEnterBack() { 4076 if (body.hasClass("custom-animate-footer")) { 4077 $("#site-footer").removeClass("animate-footer-in"); 4078 } 4079 }, 4080 onLeave() { 4081 if (body.hasClass("custom-animate-footer")) { 4082 $("#site-footer").addClass("animate-footer-in"); 4083 } 4084 }, 4085 }, 4086 }); 4087 4088 ScrollTrigger.create({ 4089 trigger: wrapper, 4090 start: "top 15%", 4091 end: "bottom bottom", 4092 pin: navWrapper, 4093 // endTrigger: "bottom bottom", 4094 refreshPriority: navWrapper.attr("data-order"), 4095 markers: false, 4096 pinSpacing: false, 4097 }); 4098 4099 navWrapper.find("span[custom-slide-nav]").click(function () { 4100 let index = $(this).attr("custom-slide-nav"); 4101 gsap.to(window, { 4102 scrollTo: { 4103 y: slides.eq(index), 4104 offsetY: 100, 4105 }, 4106 duration: 1, 4107 }); 4108 }); 4109 }); 4110 }, 4111 ); 4112 } 4113} 4114 4115function customBlockquotes() { 4116 if (!body.hasClass(bodyEdit)) { 4117 $("blockquote.custom-light-blockquote").each(function () { 4118 let wrapper = $(this); 4119 let innerContent = wrapper.find( 4120 " > *:not(figure.custom-blockquote-image)", 4121 ); 4122 wrapper.prepend('<div class="custom-light-blockquote-inner"></div>'); 4123 let innerWrapper = wrapper.find(".custom-light-blockquote-inner"); 4124 innerContent.appendTo(innerWrapper); 4125 }); 4126 } 4127} 4128 4129function pinnedGallery() { 4130 $(".cms-gallery-feature.custom-pinned-gallery-wrapper").each(function () { 4131 if (!body.hasClass(bodyEdit)) { 4132 let wrapper = $(this); 4133 pinSpacersOrder(wrapper); 4134 let inner = wrapper.find(".site-slick-wrapper"); 4135 let slider = wrapper.find(".slick-slider"); 4136 let slides = wrapper.find(".site-slide"); 4137 4138 let slideActiveClass = "active"; 4139 4140 slider.slick("unslick"); 4141 4142 mm.add("(max-width: 899px)", (i) => { 4143 slides.removeClass(slideActiveClass); 4144 inner.find(".custom-pinned-gallery-nav").remove(); 4145 if (!wrapper.find(".slick-initialized").length) { 4146 inner.slick({ 4147 slidesToShow: 1, 4148 slidesToScroll: 1, 4149 arrows: false, 4150 dots: true, 4151 infinite: false, 4152 adaptiveHeight: true, 4153 speed: 1000, 4154 }); 4155 } 4156 }); 4157 mm.add("(min-width: 900px)", (i) => { 4158 if (wrapper.find(".slick-initialized").length) { 4159 wrapper.find(".slick-slider").slick("unslick"); 4160 } 4161 4162 slides.eq(0).addClass(slideActiveClass); 4163 inner.append('<div class="custom-pinned-gallery-nav"></div>'); 4164 let galleryNav = inner.find(".custom-pinned-gallery-nav"); 4165 slides.each(function (i) { 4166 let navItem = $( 4167 '<span class="custom-pinned-gallery-nav-item"></span>', 4168 ); 4169 4170 navItem.appendTo(galleryNav); 4171 }); 4172 4173 let dots = galleryNav.find(".custom-pinned-gallery-nav-item"); 4174 let dotsActiveClass = "active-dot"; 4175 4176 dots.eq(0).addClass(dotsActiveClass); 4177 4178 let end = "+=" + slides.length * 1000; 4179 4180 ScrollTrigger.create({ 4181 trigger: wrapper, 4182 start: "top top", 4183 end: end, 4184 scrub: true, 4185 pin: true, 4186 markers: false, 4187 4188 refreshPriority: wrapper.attr("data-order"), 4189 4190 onUpdate: function (self) { 4191 let index = Math.floor(self.progress * slides.length); 4192 slides.removeClass(slideActiveClass); 4193 dots.removeClass(dotsActiveClass); 4194 slides.each(function (i) { 4195 let slide = $(this); 4196 slide.toggleClass(slideActiveClass, i === index); 4197 dots.eq(i).toggleClass(dotsActiveClass, i === index); 4198 }); 4199 }, 4200 4201 onLeave: function (self) { 4202 // Keep last element active when leaving 4203 slides.eq(slides.length - 1).addClass(slideActiveClass); 4204 dots.eq(dots.length - 1).addClass(dotsActiveClass); 4205 }, 4206 }); 4207 }); 4208 } 4209 }); 4210} 4211 4212function scaledSlider() {
4213 $(".cms-gallery-feature.custom-scaled-slider-wrapper").each(function () { 4214 let wrapper = $(this); 4215 let slider = wrapper.find(".slick-slider"); 4216 4217 let arrows = slider.slick("slickGetOption", "arrows"); 4218 4219 let arrows_wrapper = wrapper.prev().find(".cms-feature-datablock"); 4220 4221 let has_arrows; 4222 4223 // if (arrows === true && !body.hasClass(bodyEdit)) { 4224 // if (arrows_wrapper.text().includes("[custom-scaled-slider-arrows]")) { 4225 // has_arrows = true; 4226 // arrows_wrapper.html( 4227 // arrows_wrapper 4228 // .html() 4229 // .replace( 4230 // "[custom-scaled-slider-arrows]", 4231 // "<div class='custom-scaled-slider-arrows'></div>", 4232 // ), 4233 // ); 4234 // } 4235 // } 4236 4237 // Build slick options object 4238 let slickOptions = { 4239 slidesToShow: 1, 4240 centerMode: true, 4241 infinite: true, 4242 centerPadding: "25%", 4243 focusOnSelect: true, 4244 responsive: [ 4245 { 4246 breakpoint: 1750, 4247 settings: { 4248 centerPadding: "20%", 4249 }, 4250 }, 4251 { 4252 breakpoint: 1300, 4253 settings: { 4254 centerPadding: "15%", 4255 }, 4256 }, 4257 { 4258 breakpoint: 1000, 4259 settings: { 4260 centerPadding: "10%", 4261 }, 4262 }, 4263 { 4264 breakpoint: 600, 4265 settings: { 4266 centerPadding: "0", 4267 }, 4268 }, 4269 ], 4270 }; 4271 4272 // if (has_arrows === true) { 4273 // slickOptions.appendArrows = arrows_wrapper.find( 4274 // ".custom-scaled-slider-arrows", 4275 // ); 4276 // } 4277 4278 slider.slick("slickSetOption", slickOptions, true); 4279 }); 4280} 4281 4282$(document).ready(function () { 4283 //Link slideshow fix 4284 linkSliderFix($(".site-slider-link-wrapper")); 4285 sliderTablet(); 4286 footerTable(); 4287 backToTop(); 4288 siteHeader(); 4289 search(); 4290 // complexPinnedContent(); 4291 // complexPinnedContentNew(); 4292 customNavigation(); 4293 customSidebar(); 4294 calloutLink(); 4295 splitTextGallery(); 4296 customGrid(); 4297 numberSlider(); 4298 pinnedContent(); 4299 cardSlider(); 4300 countingNumbers(); 4301 customBlockquotes(); 4302 pinnedGallery(); 4303 scaledSlider(); 4304 refreshTriggers(); 4305}); 4306 4307window.addEventListener("load", function () { 4308 complexPinnedContent(); 4309 complexPinnedContentNew(); 4310 complexPinnedContentTextFeature(); 4311 body.addClass("page-loaded"); 4312});
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.