1/** 2 * @file 3 * Global utilities. 4 * 5 */ 6 7Drupal.diab = Drupal.tailwindcss || {}; 8 9(function ($, Drupal) { 10 "use strict"; 11 12 var browserDetect = (function (agent) { 13 switch (true) { 14 case agent.indexOf("edge") > -1: 15 return "ms-edge-html"; 16 case agent.indexOf("edg") > -1: 17 return "ms-edge-chromium"; 18 case agent.indexOf("opr") > -1 && !!window.opr: 19 return "opera"; 20 case agent.indexOf("chrome") > -1 && !!window.chrome: 21 return "chrome"; 22 case agent.indexOf("trident") > -1: 23 return "internet-explorer"; 24 case agent.indexOf("firefox") > -1: 25 return "firefox"; 26 case agent.indexOf("safari") > -1: 27 return "safari"; 28 default: 29 return "other-browser"; 30 } 31 })(window.navigator.userAgent.toLowerCase()); 32 33 // HIDE STICKY 34 $('.sticky-close').on('click', function() { 35 $('.returnable-banner__sticky').fadeOut(); 36 }) 37 38 //controladores para el slider de meals 39 40 /* $(document).on('click', '.tabbed-content img', function(){ 41 var index=$(this).attr("data-index"); 42 console.log('this index cliked: '+index); 43 if($(".slider")[index - 1].slick.$slides.length==1){ 44 $(".slider-"+index).find(".slick-track").css("width", "100%"); 45 $(".slider-"+index).find(".slick-track").find("figure").css("width", "100%"); 46 } 47 }); 48 49 document.querySelectorAll(".tabbed input[type='radio']").forEach((item) => { 50 item.addEventListener("change", (event) => { 51 if (event.currentTarget.checked) { 52 var elems = document.querySelectorAll(".tabbed .box-tab"); 53 54 [].forEach.call(elems, function (el) { 55 el.classList.remove("active"); 56 }); 57 document.querySelector("#" + event.currentTarget.id + "-tabs").classList.add("active"); 58 } 59 }); 60 }); */ 61//fin controlador slider de meals 62 63//play video youtube meals 64/* jQuery(".button-play-video").on("click", function () { 65 addIframeVideoMds( 66 jQuery(this).data("video"), 67 ".s-recipie__video" 68 ); 69}); */ 70//fin video play youtube 71 72$(".x-video").click(function (e) { 73 var video_element = $(this).siblings(".slgeneracion__video__iframe"); 74 let video_url = video_element.attr("src"); 75 let newDomain = "https://www.youtube-nocookie.com"; 76 video_url = video_url.replace("https://www.youtube.com", newDomain); 77 video_element.attr("src", video_url); 78}); 79 80 Drupal.behaviors.tailwindcss = { 81 attach: function (context, settings) { 82 $("body").addClass(browserDetect); 83 }, 84 }; 85 //Slick slider 86 function slickSliderInit(slider) { 87 slider.on("init", function (event, slick, direction) { 88 AOS.init(); 89 $(".slick-dots button").click(function () { 90 $(`#${$(this).attr("aria-controls")}`) 91 .fadeOut(100) 92 .fadeIn(2000); 93 }); 94 }); 95 96 slider.slick({ 97 dots: true, 98 infinite: true, 99 speed: 1500, 100 slidesToShow: 1, 101 centerMode: true, 102 variableWidth: true, 103 variableHeight: false, 104 }); 105 } 106 107 //Slick slider Masters of hamburgers 108 function slickSlidermh (slider) { 109 slider.slick({ 110 dots: true, 111 arrows : true, 112 infinite: true, 113 speed: 500, 114 fade: true, 115 autoplay: true, 116 autoplaySpeed: 4000, 117 cssEase: 'linear' 118 }).on('afterChange', function(event, slick, currentSlide){ 119 $('.video').each(function(){ 120 $(this)[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); 121 }); 122 }); 123 } 124 125 //Slick Slider full 126 function slickSliderFullInit(slider) { 127 slider.slick({ 128 dots: true, 129 arrows: true, 130 infinite: true, 131 speed: 1500, 132 autoplay: true, 133 slidesToShow: 1, 134 centerMode: false, 135 variableWidth: false, 136 variableHeight: false, 137 }); 138 } 139 140 //Slick slider Rotativo Responsive 141 function slickSliderRotativoInit(slider) { 142 slider.slick({ 143 arrows: false, 144 dots: false, 145 infinite: false, 146 speed: 300, 147 slidesToShow: 3, 148 slidesToScroll: 1, 149 centerMode: true, 150 responsive: [ 151 { 152 breakpoint: 1024, 153 settings: { 154 slidesToShow: 1, 155 }, 156 }, 157 { 158 breakpoint: 480, 159 settings: { 160 slidesToShow: 1, 161 }, 162 }, 163 ], 164 }); 165 } 166 167 function slickSliderInstagramInit(slider) { 168 slider.slick({ 169 dots: false, 170 infinite: true, 171 speed: 300, 172 slidesToShow: 4, 173 slidesToScroll: 1, 174 responsive: [ 175 { 176 breakpoint: 1024, 177 settings: { 178 slidesToShow: 3, 179 slidesToScroll: 3, 180 infinite: true, 181 dots: false, 182 }, 183 }, 184 { 185 breakpoint: 480, 186 settings: { 187 slidesToShow: 1, 188 slidesToScroll: 1, 189 }, 190 }, 191 ], 192 }); 193 } 194 195 // Slick slider Meals Footer 196 function slickSliderMealsFooterInit($slick) { 197 $slick.slick({ 198 dots: true, 199 infinite: true, 200 speed: 300, 201 slidesToShow: 1, 202 slidesToScroll: 1, 203 arrows: true, 204 }); 205 } 206 207 function slickAwards($slick) { 208 var initialText = $( 209 ".section-awards__content-slider .c-description" 210 ).text(); 211 if ($(window).width() > 1024) { 212 if ( 213 $(".section-awards__content-special") && 214 $( 215 ".section-awards__content-special .section-awards__content-special-item" 216 ).length === 0 217 ) { 218 $(".section-awards__content-special").append( 219 $(".section-awards__content-special-item:first") 220 ); 221 $(".section-awards__content-slider .c-description").text( 222 initialText 223 ); 224 } 225 226 if ($(".list-awards.slick-initialized").length != 0) { 227 $(".list-awards").slick("unslick"); 228 } 229 } else { 230 $slick.slick({ 231 slidesToShow: 1, 232 slidesToScroll: 1, 233 dots: false, 234 }); 235 236 if ($(".section-awards__content-special")) { 237 if ( 238 $( 239 ".special-slide-arrow .section-awards__content-special-item" 240 ).length === 0 241 ) { 242 $slick.slick( 243 "slickAdd", 244 $(".section-awards__content-special-item") 245 ); 246 } 247 //$(".section-awards__content-slider .c-description").text($(".section-awards__content-special .c-description").text()); 248 } 249 } 250 } 251 252 function slickEpisodes(slick) { 253 var slidesCount; 254 255 slick.on("init", function (event, slick, direction) { 256 slidesCount = slick.slideCount; 257 var rootElemets = document.querySelector(":root"); 258 rootElemets.style.setProperty( 259 "--sliderEpisodesTotal", 260 slidesCount 261 ); 262 }); 263 264 slick.slick({ 265 slidesToShow: 3, 266 slidesToScroll: 1, 267 dots: true, 268 arrows: true, 269 responsive: [ 270 { 271 breakpoint: 1024, 272 settings: { 273 slidesToShow: 1, 274 slidesToScroll: 1, 275 }, 276 }, 277 ], 278 }); 279 } 280 281 function slickOnlyMobile($slick, slickProps) { 282 if ($slick != undefined) { 283 if ($(window).width() > 1024) { 284 console.log("fdsdf"); 285 if ($slick[0].classList.contains("slick-initialized")) { 286 $slick.slick("unslick"); 287 } 288 } else { 289 $slick.slick(slickProps); 290 } 291 } 292 } 293 294 /*Resize Window*/ 295 $(window).on("resize", function () { 296 slickAwards($(".list-awards")); 297 if ($(".slider-nav-thumbnails").length > 0) { 298 var slidestbnails = $(".slider-nav-thumbnails"); 299 jQuery.each(slidestbnails, function (key, value) { 300 slickOnlyMobile($("#" + value.getAttribute("id") + ""), { 301 dots: true,
302 arrows: false, 303 slidesToShow: 1, 304 infinite: false, 305 }); 306 }); 307 } 308 }); 309 310 $("document").ready(function () { 311 312 // Slick slider home init 313 if ($(".slick-gallerie").length > 0) { 314 slickSlidermh($(".slick-gallerie")); 315 } 316 317 // Slick slider home init 318 if ($(".slick-gallerie-component").length > 0) { 319 slickSliderInit($(".slick-gallerie-component")); 320 } 321 // Slick slider Full page init 322 if ($(".slick-gallerie-component-full").length > 0) { 323 slickSliderFullInit($(".slick-gallerie-component-full")); 324 } 325 326 // Slick slider Instagram 327 if ($(".slick-gallerie-instagram").length > 0) { 328 slickSliderInstagramInit($(".slick-gallerie-instagram")); 329 } 330 331 // Slick slider Meals Footer 332 if ($(".slick-meals-footer-component").length > 0) { 333 slickSliderMealsFooterInit($(".slick-meals-footer-component")); 334 } 335 336 if ($(".slick-gallerie-rotativo-component").length > 0) { 337 slickSliderRotativoInit( 338 $(".slick-gallerie-rotativo-component") 339 ); 340 } 341 342 if ($(".list-awards").length > 0) { 343 slickAwards($(".list-awards")); 344 } 345 346 if ($(".c-slide__episodes-all").length > 0) { 347 slickEpisodes($(".c-slide__episodes-all")); 348 } 349 if ($(".slider-nav-thumbnails").length > 0) { 350 var slidestbnails = $(".slider-nav-thumbnails"); 351 jQuery.each(slidestbnails, function (key, value) { 352 slickOnlyMobile($("#" + value.getAttribute("id") + ""), { 353 dots: true, 354 arrows: false, 355 slidesToShow: 1, 356 infinite: false, 357 }); 358 }); 359 } 360 361 if ($(".slide-mds-default").length > 0) { 362 var slidesCount; 363 364 $(".slide-mds-default").on( 365 "init", 366 function (event, slick, direction) { 367 slidesCount = slick.slideCount; 368 var rootElemets = document.querySelector(":root"); 369 rootElemets.style.setProperty( 370 "--slideDefault", 371 slidesCount 372 ); 373 } 374 ); 375 376 $(".slide-mds-default").slick({ 377 slidesToShow: 4, 378 slidesToScroll: 1, 379 dots: true, 380 arrows: true, 381 responsive: [ 382 { 383 breakpoint: 1024, 384 settings: { 385 slidesToShow: 1, 386 slidesToScroll: 1, 387 }, 388 }, 389 ], 390 }); 391 } 392 393 $(".slider").slick({ 394 slidesToShow: 1, 395 slidesToScroll: 1, 396 arrows: false, 397 fade: false, 398 }); 399 }); 400 401 // El titulo del pager del slider 402 $("document").ready(function () { 403 if (typeof drupalSettings.pe_cusquena_core !== "undefined") { 404 const sliders = drupalSettings.pe_cusquena_core.sliders_title; 405 jQuery.each(sliders, function (key, value) { 406 let button = jQuery("#slick-slide-control0" + key); 407 button.addClass("change").attr("data-content", value); 408 let button_maridaje = jQuery("#slick-slide-control1" + key); 409 button_maridaje 410 .addClass("change") 411 .attr("data-content", value); 412 }); 413 } 414 }); 415 416 function modalParticipantsMap(idModal, userData) { 417 console.log("userData", userData); 418 jQuery(".c-modal#" + idModal).addClass("c-modal-open"); 419 420 //Data chefs or participants Modal Master Flavor 421 if (userData) { 422 jQuery(".c-modal#" + idModal) 423 .find(".c-chef-detail-name") 424 .text(userData.name); 425 jQuery(".c-modal#" + idModal) 426 .find(".c-chef-detail-surname") 427 .text(userData.surname); 428 jQuery(".c-modal#" + idModal) 429 .find(".c-chef-detail-ocupation") 430 .text(userData.ocupation); 431 jQuery(".c-modal#" + idModal) 432 .find(".c-chef-detail-description") 433 .html(userData.description); 434 jQuery(".c-modal#" + idModal) 435 .find(".c-chef-detail-place") 436 .text(userData.place); 437 438 if (userData.hasButton === true) { 439 jQuery(".c-modal#" + idModal) 440 .find(".c-chef-detail-button") 441 .text(userData.buttonText); 442 jQuery(".c-modal#" + idModal) 443 .find(".c-chef-detail-button") 444 .attr("href", userData.link); 445 } else { 446 jQuery(".c-modal#" + idModal) 447 .find(".c-chef-detail-button") 448 .hide(); 449 } 450 451 jQuery(".c-modal#" + idModal) 452 .find(".c-chef-detail-user") 453 .attr("src", userData.image); 454 455 jQuery(".c-modal#" + idModal) 456 .find(".c-chef-detail-user") 457 .attr("alt", userData.image_alt); 458 459 jQuery(".c-modal#" + idModal) 460 .find(".c-chef-detail-user") 461 .attr("title", userData.image_title); 462 } 463 } 464 465 // Aca esta el script para ajustar la imagen del banner resposive que conserve la relacion de aspecto 466 jQuery("document").ready(function () { 467 jQuery(window).resize(function () { 468 jQuery(".full-height").width(jQuery(window).width()); 469 470 if ($(".slider-nav-thumbnails") != null) { 471 if (window.innerWidth >= 1024) { 472 $(".slider-nav-thumbnails").mCustomScrollbar({}); 473 } else { 474 $(".slider-nav-thumbnails").mCustomScrollbar("destroy"); 475 } 476 } 477 if ($(".s-recipie__bottom-steps-list") != null) { 478 if (window.innerWidth >= 1024) { 479 $(".s-recipie__bottom-steps-list").mCustomScrollbar({}); 480 } else { 481 $(".s-recipie__bottom-steps-list").mCustomScrollbar( 482 "destroy" 483 ); 484 } 485 } 486 }); 487 488 if ( 489 jQuery( 490 "#slick-slide12 > div > div > div > div:nth-child(4) > h3" 491 ).text().length > 17 492 ) { 493 jQuery( 494 "#slick-slide12 > div > div > div > div:nth-child(4) > h3" 495 ).addClass("Caterine"); 496 } 497 498 jQuery(".c-modal-open-button").on("click", function () { 499 modalParticipantsMap( 500 jQuery(this).data("modal"), 501 jQuery(this).data("user") 502 ); 503 }); 504 505 jQuery(".c-fixed-close").on("click", function () {
506 jQuery(".c-fixed").addClass("c-fixed-closed"); 507 }); 508 509 jQuery(".slider-nav-thumbnails .slick-slide-item").on( 510 "click", 511 function () { 512 var numberSlide = jQuery(this).data("item"); 513 $(".slider").slick("slickGoTo", numberSlide - 1); 514 } 515 ); 516 517 if ($(".slider-nav-thumbnails") != null) { 518 if (window.innerWidth >= 1024) { 519 $(".slider-nav-thumbnails").mCustomScrollbar({}); 520 } else { 521 $(".slider-nav-thumbnails").mCustomScrollbar("destroy"); 522 } 523 } 524 525 if ($(".s-recipie__bottom-steps-list") != null) { 526 if (window.innerWidth >= 1024) { 527 $(".s-recipie__bottom-steps-list").mCustomScrollbar({}); 528 } else { 529 $(".s-recipie__bottom-steps-list").mCustomScrollbar( 530 "destroy" 531 ); 532 } 533 } 534 535 if (jQuery(".c-participants-map .containerMap").length != 0) { 536 var dataPlots = jQuery(".c-participants-map").data( 537 "participants" 538 ); 539 540 var newPlostDara = {}; 541 jQuery.each(dataPlots, function (index, value) { 542 var urlImages = 543 "/themes/custom/pe_cusquena/src/img/img-icon-pin-mao-2021.svg"; 544 var classDeteled = ""; 545 if (value.state != 1) { 546 urlImages = 547 "/themes/custom/pe_cusquena/src/img/img-icon-pin-map-deleted-2021.svg"; 548 classDeteled = "deleted"; 549 } 550 551 newPlostDara["plot" + index] = { 552 type: "image", 553 url: urlImages, 554 width: 30, 555 height: 30, 556 latitude: parseInt(value.location.latitud), 557 longitude: parseInt(value.location.longitud), 558 userData: { 559 name: value.name, 560 surname: value.surname, 561 ocupation: value.ocupation, 562 description: value.description, 563 place: value.place, 564 image: value.image, 565 hasButton: true, 566 link: value.link, 567 nid: value.nid, 568 image_alt: value.image_alt, 569 image_title: value.image_title, 570 }, 571 tooltipValue: { 572 content: 573 "<article class='map-participant " + 574 classDeteled + 575 "' style='--bg:url(" + 576 value.imagePin + 577 ")'><div class='map-participant-form'></div><img alt='" + 578 value.image_alt + 579 "' title='" + 580 value.image_title + 581 "' src='" + 582 value.imagePin + 583 "'/></article>", 584 }, 585 }; 586 }); 587 588 jQuery(".containerMap").mapael({ 589 map: { 590 name: "peru", 591 defaultArea: { 592 attrs: { 593 fill: "transparent", 594 stroke: "#A3A3A3", 595 }, 596 }, 597 defaultPlot: { 598 fill: "#B8172D", 599 attrName: "sdfsdf", 600 attrsHover: { 601 stroke: "#A88220", 602 "stroke-width": "2", 603 "stroke-linejoin": "miter", 604 }, 605 eventHandlers: { 606 mouseover: function ( 607 e, 608 id, 609 mapElem, 610 textElem, 611 elemOptions 612 ) { 613 var xCoorde = 614 e.currentTarget.getBoundingClientRect().x + 22; 615 var yCoorde = 616 e.currentTarget.getBoundingClientRect().y + 11; 617 var windowWidth = window.innerWidth; 618 if ( 619 elemOptions.tooltipValue !== undefined && 620 windowWidth > 1024 621 ) { 622 jQuery(".mapTooltip") 623 .html(elemOptions.tooltipValue.content) 624 .css({ 625 display: "block", 626 left: xCoorde, 627 top: yCoorde, 628 }); 629 } 630 }, 631 mouseout: function ( 632 e, 633 id, 634 mapElem, 635 textElem, 636 elemOptions 637 ) { 638 if (elemOptions.tooltipValue !== undefined) { 639 jQuery(".mapTooltip") 640 .html("") 641 .css({ display: "none" }); 642 } 643 }, 644 click: function ( 645 e, 646 id, 647 mapElem, 648 textElem, 649 elemOptions 650 ) { 651 modalParticipantsMap( 652 "modal-participants", 653 elemOptions.userData 654 ); 655 }, 656 }, 657 }, 658 }, 659 plots: newPlostDara, 660 }); 661 } 662 }); 663 664 document.querySelector('button').addEventListener('click', 665 getModal) 666 667 //document.querySelector('.closebtn').addEventListener('click',closeModal) 668 let closebtn = document.querySelector('.closebtn'); 669 if(closebtn){ 670 closebtn.addEventListener('click',closeModal); 671 } 672 673 function getModal(){ 674 let modal= document.querySelector('.modal') 675 modal.classList.remove('ModalClose') 676 modal.classList.add('ModalOpen') 677 } 678 679 function closeModal(){ 680 let modal= document.querySelector('.modal') 681 modal.classList.remove('ModalOpen') 682 modal.classList.add('ModalClose') 683 } 684 685})(jQuery, Drupal); 686 687// scrip menu hamburguesa 688 689var nav = document.getElementById("site-menu"); 690var header = document.getElementById("top"); 691 692function navToggle() { 693 var btn = document.getElementById("menuBtn"); 694 var nav = document.getElementById("menu"); 695 696 btn.classList.toggle("open"); 697 nav.classList.toggle("openm"); 698 nav.classList.toggle("flex"); 699 nav.classList.toggle("hidden"); 700} 701 702// scroll suave 703 704const menuItems = document.querySelectorAll('.menu a[href^="#"]'); 705 706function getScrollTopByHref(element) { 707 const id = element.getAttribute("href"); 708 return document.querySelector(id).offsetTop; 709} 710 711function scrollToPosition(to) { 712 // window.scroll({ 713 // top: to, 714 // behavior: "smooth", 715 // }) 716 smoothScrollTo(0, to); 717} 718 719function scrollToIdOnClick(event) { 720 event.preventDefault(); 721 const to = getScrollTopByHref(event.currentTarget) - 80; 722 scrollToPosition(to); 723} 724
725menuItems.forEach((item) => { 726 item.addEventListener("click", scrollToIdOnClick); 727}); 728 729/** 730 * Smooth scroll animation 731 * @param {int} endX: destination x coordinate 732 * @param {int} endY: destination y coordinate 733 * @param {int} duration: animation duration in ms 734 */ 735function smoothScrollTo(endX, endY, duration) { 736 const startX = window.scrollX || window.pageXOffset; 737 const startY = window.scrollY || window.pageYOffset; 738 const distanceX = endX - startX; 739 const distanceY = endY - startY; 740 const startTime = new Date().getTime(); 741 742 duration = typeof duration !== "undefined" ? duration : 400; 743 744 // Easing function 745 const easeInOutQuart = (time, from, distance, duration) => { 746 if ((time /= duration / 2) < 1) 747 return (distance / 2) * time * time * time * time + from; 748 return ( 749 (-distance / 2) * ((time -= 2) * time * time * time - 2) + from 750 ); 751 }; 752 753 const timer = setInterval(() => { 754 const time = new Date().getTime() - startTime; 755 const newX = easeInOutQuart(time, startX, distanceX, duration); 756 const newY = easeInOutQuart(time, startY, distanceY, duration); 757 if (time >= duration) { 758 clearInterval(timer); 759 } 760 window.scroll(newX, newY); 761 }, 1000 / 60); // 60 fps 762} 763 764// time line 765 766jQuery(document).ready(function ($) { 767 var timelines = $(".cd-horizontal-timeline"), 768 eventsMinDistance = 40; 769 770 timelines.length > 0 && initTimeline(timelines); 771 772 function initTimeline(timelines) { 773 timelines.each(function () { 774 var timeline = $(this), 775 timelineComponents = {}; 776 //cache timeline components 777 timelineComponents["timelineWrapper"] = 778 timeline.find(".events-wrapper"); 779 timelineComponents["eventsWrapper"] = 780 timelineComponents["timelineWrapper"].children(".events"); 781 timelineComponents["fillingLine"] = 782 timelineComponents["eventsWrapper"].children(".filling-line"); 783 timelineComponents["timelineEvents"] = 784 timelineComponents["eventsWrapper"].find("a"); 785 timelineComponents["timelineDates"] = parseDate( 786 timelineComponents["timelineEvents"] 787 ); 788 timelineComponents["eventsMinLapse"] = minLapse( 789 timelineComponents["timelineDates"] 790 ); 791 timelineComponents["timelineNavigation"] = timeline.find( 792 ".cd-timeline-navigation" 793 ); 794 timelineComponents["eventsContent"] = 795 timeline.children(".events-content"); 796 797 //assign a left postion to the single events along the timeline 798 setDatePosition(timelineComponents, eventsMinDistance); 799 //assign a width to the timeline 800 var timelineTotWidth = setTimelineWidth( 801 timelineComponents, 802 eventsMinDistance 803 ); 804 //the timeline has been initialize - show it 805 timeline.addClass("loaded"); 806 807 //detect click on the next arrow 808 timelineComponents["timelineNavigation"].on( 809 "click", 810 ".next", 811 function (event) { 812 event.preventDefault(); 813 updateSlide(timelineComponents, timelineTotWidth, "next"); 814 } 815 ); 816 //detect click on the prev arrow 817 timelineComponents["timelineNavigation"].on( 818 "click", 819 ".prev", 820 function (event) { 821 event.preventDefault(); 822 updateSlide(timelineComponents, timelineTotWidth, "prev"); 823 } 824 ); 825 //detect click on the a single event - show new event content 826 timelineComponents["eventsWrapper"].on( 827 "click", 828 "a", 829 function (event) { 830 event.preventDefault(); 831 timelineComponents["timelineEvents"].removeClass( 832 "selected" 833 ); 834 $(this).addClass("selected"); 835 updateOlderEvents($(this)); 836 updateFilling( 837 $(this), 838 timelineComponents["fillingLine"], 839 timelineTotWidth 840 ); 841 updateVisibleContent( 842 $(this), 843 timelineComponents["eventsContent"] 844 ); 845 } 846 ); 847 848 //on swipe, show next/prev event content 849 timelineComponents["eventsContent"].on( 850 "swipeleft", 851 function () { 852 var mq = checkMQ(); 853 mq == "mobile" && 854 showNewContent( 855 timelineComponents, 856 timelineTotWidth, 857 "next" 858 ); 859 } 860 ); 861 timelineComponents["eventsContent"].on( 862 "swiperight", 863 function () { 864 var mq = checkMQ(); 865 mq == "mobile" && 866 showNewContent( 867 timelineComponents, 868 timelineTotWidth, 869 "prev" 870 ); 871 } 872 ); 873 874 //keyboard navigation 875 $(document).keyup(function (event) { 876 if ( 877 event.which == "37" && 878 elementInViewport(timeline.get(0)) 879 ) { 880 showNewContent( 881 timelineComponents, 882 timelineTotWidth, 883 "prev" 884 ); 885 } else if ( 886 event.which == "39" && 887 elementInViewport(timeline.get(0)) 888 ) { 889 showNewContent( 890 timelineComponents, 891 timelineTotWidth, 892 "next" 893 ); 894 } 895 }); 896 }); 897 } 898 899 function updateSlide(timelineComponents, timelineTotWidth, string) { 900 //retrieve translateX value of timelineComponents['eventsWrapper'] 901 var translateValue = getTranslateValue( 902 timelineComponents["eventsWrapper"] 903 ),
904 wrapperWidth = Number( 905 timelineComponents["timelineWrapper"] 906 .css("width") 907 .replace("px", "") 908 ); 909 //translate the timeline to the left('next')/right('prev') 910 string == "next" 911 ? translateTimeline( 912 timelineComponents, 913 translateValue - wrapperWidth + eventsMinDistance, 914 wrapperWidth - timelineTotWidth 915 ) 916 : translateTimeline( 917 timelineComponents, 918 translateValue + wrapperWidth - eventsMinDistance 919 ); 920 } 921 922 function showNewContent( 923 timelineComponents, 924 timelineTotWidth, 925 string 926 ) { 927 //go from one event to the next/previous one 928 var visibleContent = 929 timelineComponents["eventsContent"].find(".selected"), 930 newContent = 931 string == "next" 932 ? visibleContent.next() 933 : visibleContent.prev(); 934 935 if (newContent.length > 0) { 936 //if there's a next/prev event - show it 937 var selectedDate = 938 timelineComponents["eventsWrapper"].find(".selected"), 939 newEvent = 940 string == "next" 941 ? selectedDate.parent("li").next("li").children("a") 942 : selectedDate.parent("li").prev("li").children("a"); 943 944 updateFilling( 945 newEvent, 946 timelineComponents["fillingLine"], 947 timelineTotWidth 948 ); 949 updateVisibleContent( 950 newEvent, 951 timelineComponents["eventsContent"] 952 ); 953 newEvent.addClass("selected"); 954 selectedDate.removeClass("selected"); 955 updateOlderEvents(newEvent); 956 updateTimelinePosition( 957 string, 958 newEvent, 959 timelineComponents, 960 timelineTotWidth 961 ); 962 } 963 } 964 965 function updateTimelinePosition( 966 string, 967 event, 968 timelineComponents, 969 timelineTotWidth 970 ) { 971 //translate timeline to the left/right according to the position of the selected event 972 var eventStyle = window.getComputedStyle(event.get(0), null), 973 eventLeft = Number( 974 eventStyle.getPropertyValue("left").replace("px", "") 975 ), 976 timelineWidth = Number( 977 timelineComponents["timelineWrapper"] 978 .css("width") 979 .replace("px", "") 980 ), 981 timelineTotWidth = Number( 982 timelineComponents["eventsWrapper"] 983 .css("width") 984 .replace("px", "") 985 ); 986 var timelineTranslate = getTranslateValue( 987 timelineComponents["eventsWrapper"] 988 ); 989 990 if ( 991 (string == "next" && 992 eventLeft > timelineWidth - timelineTranslate) || 993 (string == "prev" && eventLeft < -timelineTranslate) 994 ) { 995 translateTimeline( 996 timelineComponents, 997 -eventLeft + timelineWidth / 2, 998 timelineWidth - timelineTotWidth 999 ); 1000 } 1001 } 1002 1003 function translateTimeline(timelineComponents, value, totWidth) { 1004 var eventsWrapper = timelineComponents["eventsWrapper"].get(0); 1005 value = value > 0 ? 0 : value; //only negative translate value 1006 value = 1007 !(typeof totWidth === "undefined") && value < totWidth 1008 ? totWidth 1009 : value; //do not translate more than timeline width 1010 setTransformValue(eventsWrapper, "translateX", value + "px"); 1011 //update navigation arrows visibility 1012 value == 0 1013 ? timelineComponents["timelineNavigation"] 1014 .find(".prev") 1015 .addClass("inactive") 1016 : timelineComponents["timelineNavigation"] 1017 .find(".prev") 1018 .removeClass("inactive"); 1019 value == totWidth 1020 ? timelineComponents["timelineNavigation"] 1021 .find(".next") 1022 .addClass("inactive") 1023 : timelineComponents["timelineNavigation"] 1024 .find(".next") 1025 .removeClass("inactive"); 1026 } 1027 1028 function updateFilling(selectedEvent, filling, totWidth) { 1029 //change .filling-line length according to the selected event 1030 var eventStyle = window.getComputedStyle( 1031 selectedEvent.get(0), 1032 null 1033 ), 1034 eventLeft = eventStyle.getPropertyValue("left"), 1035 eventWidth = eventStyle.getPropertyValue("width"); 1036 eventLeft = 1037 Number(eventLeft.replace("px", "")) + 1038 Number(eventWidth.replace("px", "")) / 2; 1039 var scaleValue = eventLeft / totWidth; 1040 setTransformValue(filling.get(0), "scaleX", scaleValue); 1041 } 1042 1043 function setDatePosition(timelineComponents, min) { 1044 for (i = 0; i < timelineComponents["timelineDates"].length; i++) { 1045 var distance = daydiff( 1046 timelineComponents["timelineDates"][0], 1047 timelineComponents["timelineDates"][i] 1048 ), 1049 distanceNorm = 1050 Math.round( 1051 distance / timelineComponents["eventsMinLapse"] 1052 ) + 2; 1053 timelineComponents["timelineEvents"] 1054 .eq(i) 1055 .css("left", distanceNorm * min + "px"); 1056 } 1057 } 1058 1059 function setTimelineWidth(timelineComponents, width) { 1060 var timeSpan = daydiff( 1061 timelineComponents["timelineDates"][0], 1062 timelineComponents["timelineDates"][ 1063 timelineComponents["timelineDates"].length - 1 1064 ] 1065 ), 1066 timeSpanNorm = timeSpan / timelineComponents["eventsMinLapse"], 1067 timeSpanNorm = Math.round(timeSpanNorm) + 4, 1068 totalWidth = timeSpanNorm * width; 1069 timelineComponents["eventsWrapper"].css( 1070 "width", 1071 totalWidth + "px" 1072 ); 1073 updateFilling( 1074 timelineComponents["timelineEvents"].eq(0), 1075 timelineComponents["fillingLine"], 1076 totalWidth 1077 ); 1078 1079 return totalWidth; 1080 } 1081 1082 function updateVisibleContent(event, eventsContent) { 1083 var eventDate = event.data("date"), 1084 visibleContent = eventsContent.find(".selected"), 1085 selectedContent = eventsContent.find( 1086 '[data-date="' + eventDate + '"]' 1087 ), 1088 selectedContentHeight = selectedContent.height(); 1089 1090 if (selectedContent.index() > visibleContent.index()) { 1091 var classEnetering = "selected enter-right", 1092 classLeaving = "leave-left"; 1093 } else { 1094 var classEnetering = "selected enter-left", 1095 classLeaving = "leave-right"; 1096 } 1097 1098 selectedContent.attr("class", classEnetering); 1099 visibleContent 1100 .attr("class", classLeaving) 1101 .one( 1102 "webkitAnimationEnd oanimationend msAnimationEnd animationend", 1103 function () { 1104 visibleContent.removeClass("leave-right leave-left"); 1105 selectedContent.removeClass("enter-left enter-right"); 1106 } 1107 ); 1108 eventsContent.css("height", selectedContentHeight + "px"); 1109 } 1110 1111 function updateOlderEvents(event) { 1112 event 1113 .parent("li") 1114 .prevAll("li") 1115 .children("a") 1116 .addClass("older-event") 1117 .end() 1118 .end() 1119 .nextAll("li") 1120 .children("a") 1121 .removeClass("older-event"); 1122 } 1123 1124 function getTranslateValue(timeline) { 1125 var timelineStyle = window.getComputedStyle( 1126 timeline.get(0), 1127 null 1128 ), 1129 timelineTranslate = 1130 timelineStyle.getPropertyValue("-webkit-transform") || 1131 timelineStyle.getPropertyValue("-moz-transform") || 1132 timelineStyle.getPropertyValue("-ms-transform") || 1133 timelineStyle.getPropertyValue("-o-transform") || 1134 timelineStyle.getPropertyValue("transform"); 1135 1136 if (timelineTranslate.indexOf("(") >= 0) { 1137 var timelineTranslate = timelineTranslate.split("(")[1]; 1138 timelineTranslate = timelineTranslate.split(")")[0]; 1139 timelineTranslate = timelineTranslate.split(","); 1140 var translateValue = timelineTranslate[4]; 1141 } else { 1142 var translateValue = 0; 1143 } 1144 1145 return Number(translateValue); 1146 } 1147 1148 function setTransformValue(element, property, value) { 1149 element.style["-webkit-transform"] = property + "(" + value + ")"; 1150 element.style["-moz-transform"] = property + "(" + value + ")"; 1151 element.style["-ms-transform"] = property + "(" + value + ")"; 1152 element.style["-o-transform"] = property + "(" + value + ")"; 1153 element.style["transform"] = property + "(" + value + ")"; 1154 } 1155 1156 //based on http://stackoverflow.com/questions/542938/how-do-i-get-the-number-of-days-between-two-dates-in-javascript 1157 function parseDate(events) { 1158 var dateArrays = []; 1159 events.each(function () { 1160 var dateComp = $(this).data("date").split("/"), 1161 newDate = new Date(dateComp[2], dateComp[1] - 1, dateComp[0]); 1162 dateArrays.push(newDate); 1163 }); 1164 return dateArrays; 1165 } 1166 1167 function parseDate2(events) { 1168 var dateArrays = []; 1169 events.each(function () { 1170 var singleDate = $(this), 1171 dateComp = singleDate.data("date").split("T"); 1172 if (dateComp.length > 1) { 1173 //both DD/MM/YEAR and time are provided 1174 var dayComp = dateComp[0].split("/"), 1175 timeComp = dateComp[1].split(":"); 1176 } else if (dateComp[0].indexOf(":") >= 0) { 1177 //only time is provide 1178 var dayComp = ["2000", "0", "0"], 1179 timeComp = dateComp[0].split(":"); 1180 } else { 1181 //only DD/MM/YEAR 1182 var dayComp = dateComp[0].split("/"), 1183 timeComp = ["0", "0"]; 1184 } 1185 var newDate = new Date( 1186 dayComp[2], 1187 dayComp[1] - 1, 1188 dayComp[0], 1189 timeComp[0], 1190 timeComp[1] 1191 ); 1192 dateArrays.push(newDate); 1193 }); 1194 return dateArrays; 1195 } 1196 1197 function daydiff(first, second) { 1198 return Math.round(second - first); 1199 } 1200 1201 function minLapse(dates) { 1202 //determine the minimum distance among events 1203 var dateDistances = []; 1204 for (i = 1; i < dates.length; i++) { 1205 var distance = daydiff(dates[i - 1], dates[i]); 1206 dateDistances.push(distance); 1207 } 1208 return Math.min.apply(null, dateDistances); 1209 } 1210 1211 /* 1212 How to tell if a DOM element is visible in the current viewport? 1213 http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport 1214 */ 1215 function elementInViewport(el) { 1216 var top = el.offsetTop; 1217 var left = el.offsetLeft; 1218 var width = el.offsetWidth; 1219 var height = el.offsetHeight; 1220 1221 while (el.offsetParent) { 1222 el = el.offsetParent; 1223 top += el.offsetTop; 1224 left += el.offsetLeft; 1225 } 1226 1227 return ( 1228 top < window.pageYOffset + window.innerHeight && 1229 left < window.pageXOffset + window.innerWidth && 1230 top + height > window.pageYOffset && 1231 left + width > window.pageXOffset 1232 ); 1233 } 1234 1235 function checkMQ() { 1236 //check if mobile or desktop device 1237 return window 1238 .getComputedStyle( 1239 document.querySelector(".cd-horizontal-timeline"), 1240 "::before" 1241 ) 1242 .getPropertyValue("content") 1243 .replace(/'/g, "") 1244 .replace(/"/g, ""); 1245 } 1246}); 1247 1248var openmodal = document.querySelectorAll('.modal-open') 1249for (var i = 0; i < openmodal.length; i++) { 1250 openmodal[i].addEventListener('click', function(event){ 1251 event.preventDefault() 1252 toggleModal() 1253 }) 1254} 1255
1256const overlay = document.querySelector('.modal-overlay') 1257if(overlay){ 1258 overlay.addEventListener('click', toggleModal) 1259} 1260 1261 1262var closemodal = document.querySelectorAll('.modal-close') 1263for (var i = 0; i < closemodal.length; i++) { 1264 closemodal[i].addEventListener('click', toggleModal) 1265} 1266 1267document.onkeydown = function(evt) { 1268 evt = evt || window.event 1269 var isEscape = false 1270 if ("key" in evt) { 1271 isEscape = (evt.key === "Escape" || evt.key === "Esc") 1272 } else { 1273 isEscape = (evt.keyCode === 27) 1274 } 1275 if (isEscape && document.body.classList.contains('modal-active')) { 1276 toggleModal() 1277 } 1278}; 1279 1280function toggleModal () { 1281 const body = document.querySelector('body') 1282 const modal = document.querySelector('.modal') 1283 modal.classList.toggle('opacity-0') 1284 modal.classList.toggle('pointer-events-none') 1285 body.classList.toggle('modal-active') 1286} 1287 1288/*probar funcion togle AQ*/ 1289
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.