https://www.hologic.es/themes/custom/hologic/global/js/hero-banner.js?tm4wcr

1(function ($) {
2  'use strict';
3
4  $(window).on('load', function () {
5    heroBannerSlideImg();
6
7    setTimeout(function() {
8      adjustMobileHeightBanner();
9    }, 100);
10
11    if ($(".js-hero-banner").length) {
12      imgsSliderSameText();
13      textsSliderSamebgImg();
14      playVideo();
15      autoplayVideo();
16      addOverlay();
17      moveSlideMobileContent();
18    }
19  });
20
21  $(window).on('resize', function () {
22    heroBannerSlideImg();
23    adjustMobileHeightBanner();
24  }).trigger("resize");
25
26  // Add img as background img
27  function heroBannerSlideImg() {
28    if ($(".js-hero-banner").length) {
29      $(".js-hero-banner").find(".views_slideshow_cycle_slide").each(function () {
30
31        var imgBig = $(this).find('picture source').first().attr('srcset');
32        var imgTablet = $(this).find('picture source:nth-child(2)').attr('srcset');
33        var imgMobile = $(this).find('picture source').last().attr('srcset');
34
35        imgBig = getTextBeforeCarac(imgBig, '?');
36        imgTablet = getTextBeforeCarac(imgTablet, '?');
37        imgMobile = getTextBeforeCarac(imgMobile, '?');
38
39        if (imgBig != undefined) {
40          if ($(window).width() > 991) {
41            $(this).find(".views-row").attr('style', 'background-image: url(' + imgBig + ')');
42          } else if ($(window).width() > 420 && $(window).width() < 992) {
43            $(this).find(".views-row").attr('style', 'background-image: url(' + imgTablet + ')');
44          } else {
45            $(this).find(".views-row").attr('style', 'background-image: url(' + imgMobile + ')');
46          }
47        }
48      })
49    }
50  }
51
52  // Get text before specific caracter
53  function getTextBeforeCarac(string, carac) {
54    if (string == undefined) {
55      return string;
56    } else {
57      return string.substr(0, string.indexOf(carac));
58    }
59  }
60
61  // - - - Adjust slide height on mobile to keep the fade effect - - -
62  function adjustMobileHeightBanner() {
63    var slider = $(".highlighted").find(".views_slideshow_cycle_teaser_section");
64    if (slider.length) {
65
66      if ($(window).width() < 992) {
67        var maxHeight = 0;
68        slider.find(".views_slideshow_cycle_slide").each(function() {
69          var slideHeight = jQuery(this).height();
70          maxHeight = Math.max(maxHeight, slideHeight);
71        })
72        slider.css("height", maxHeight)
73      }
74    }
75  }
76
77  // - - - Move the mobile content below the image/video on mobile - - -
78  function moveSlideMobileContent() {
79    console.log("iasi")
80    $(".js-hero-banner").find(".views_slideshow_cycle_slide").each(function() {
81      var mobileContent = $(this).find(".js-hero-slides__mobile");
82      $(this).append(mobileContent);
83    })
84  }
85
86  // - - - Slider only for background images with same text - - -
87  function imgsSliderSameText() {
88    if ($(".js-imgs-slider").length) {
89      var $heroBanner = $(".js-hero-banner");
90      var $firstSlide = $heroBanner.find(".views_slideshow_slide.views-row-1");
91      $heroBanner.find(".views_slideshow_cycle_teaser_section").addClass("-imgs-slider");
92      $heroBanner.find(".views_slideshow_cycle_main").append("<div class='hero-banner__slider-imgs-content'><div class='slider-content__wrapper'></div></div>");
93      $heroBanner.find(".hero-banner__slider-imgs-content .slider-content__wrapper").append($firstSlide.find(".js-imgs-slider").html())
94
95      // Move slider label on mobile
96      $heroBanner.find(".views_slideshow_cycle_slide").each(function() {
97        $(this).append($(this).find(".js-mobile__slider-label"));
98      })
99    }
100  }
101
102  // - - - Slider only for texts with same background image - - -
103  function textsSliderSamebgImg() {
104    if ($(".js-texts-slider").length) {
105      var $firstSlideBgImg = $(".js-hero-banner").find(".views_slideshow_slide.views-row-1 .js-hero-slides-img picture source").first();
106
107      if ($firstSlideBgImg.attr('srcset') != undefined) {
108        var bgImgUrl = $firstSlideBgImg.attr('srcset');
109        var cleanBgImgUrl = bgImgUrl.substr(0, bgImgUrl.indexOf("?"));
110        $(".js-hero-banner").find(".views_slideshow_cycle_teaser_section").addClass("-texts-slider").css("background-image", "url(" + cleanBgImgUrl + ")")
111        $(".js-hero-banner").find(".views_slideshow_cycle_main").prepend("<div class='texts-slider__mobile-bg' style='background-image:url(" + cleanBgImgUrl + ")'></div>")
112      }
113    }
114  }
115
116  // - - - Add an overlay over the slide - - -
117  function addOverlay() {
118    $(".js-hero-slides__slide").each(function() {
119      if ($(this).data("overlay") == 1) {
120        $(this).closest(".views-row").addClass("-has-overlay");
121      }
122    })
123  }
124
125  // - - - Play video when clicking on the slide - - -
126  function playVideo() {
127    $(".js-slide-video").on("click", function() {
128      createVideoIframe($(this), "autoplay=1")
129    })
130  }
131
132  // - - - Autoplay the video for each autoplay slide video - - -
133  function autoplayVideo() {
134    if ($(".js-autoplay-video").length) {
135      $(".js-autoplay-video").each(function() {
136        var videoUrl = $(this).find(".js-video-url").data("video");
137        if (videoUrl.indexOf("youtube") > -1) {
138          var videoId = videoUrl.split("/")[videoUrl.split("/").length - 1]
139          var params = "autoplay=1&mute=1&loop=1&playlist="+videoId;
140          createVideoIframe($(this), params);
141        } else {
142          createVideoIframe($(this), "autoplay=1&muted=1&loop=1");
143        }
144      })
145    }
146  }
147
148  // - - - Create the iframe for the Youtube/Vimeo video - - -
149  function createVideoIframe(elem, params) {
150    var videoUrl = elem.find(".js-video-url").data("video");
151    var $parent = elem.closest(".views-row");
152    $parent.addClass("has-playing-video").prepend("<iframe src='" + videoUrl + "?" + params + "' allow='autoplay;'></iframe>")
153  }
154
155})(jQuery);