https://atlas.cern/modules/custom/cern-components/patterns/molecules/row/js/row.component.js?tkmwzz

1(function ($, Drupal) {
2  "use strict";
3
4  // add offset when using anchor
5  function offsetAnchor() {
6    if (location.hash.length !== 0) {
7      window.scrollTo(window.scrollX, window.scrollY - 130);
8    }
9  }
10  $(window).on("hashchange", () => {
11    offsetAnchor();
12  });
13  window.setTimeout(offsetAnchor, 2000);
14
15  // Get IE or Edge browser version
16  var version = detectIE();
17  var rowEffectsBrowser = true;
18  if (version === false) {
19    rowEffectsBrowser = true;
20  } else if (version >= 12) {
21    rowEffectsBrowser = true;
22  } else {
23    rowEffectsBrowser = false;
24  }
25  /**
26   * detect IE
27   * returns version of IE or false, if browser is not Internet Explorer
28   */
29  function detectIE() {
30    var ua = window.navigator.userAgent;
31    var msie = ua.indexOf("MSIE ");
32    if (msie > 0) {
33      // IE 10 or older => return version number
34      return parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)), 10);
35    }
36    var trident = ua.indexOf("Trident/");
37    if (trident > 0) {
38      // IE 11 => return version number
39      var rv = ua.indexOf("rv:");
40      return parseInt(ua.substring(rv + 3, ua.indexOf(".", rv)), 10);
41    }
42    var edge = ua.indexOf("Edge/");
43    if (edge > 0) {
44      // Edge (IE 12+) => return version number
45      return parseInt(ua.substring(edge + 5, ua.indexOf(".", edge)), 10);
46    }
47    // other browser
48    return false;
49  }
50
51  // FIX BACKGROUND FIXED FOR IEXPLORER
52  // -- REWRITE IEXPLORER SCROLLING
53  $(function () {
54    if (navigator.userAgent.match(/Trident\/7\./)) {
55      document.body.addEventListener("mousewheel", function () {
56        event.preventDefault();
57        var wd = event.wheelDelta / 2;
58        var csp = window.pageYOffset;
59        window.scrollTo(0, csp - wd);
60      });
61    }
62  });
63
64  // change cds image to background on background parallax
65  if (
66    jQuery(
67      ".effect_background_parallax .background-component.background__cds_media"
68    ).length > 0
69  ) {
70    jQuery(
71      ".effect_background_parallax .background-component.background__cds_media"
72    ).each(function () {
73      var CDSurl = jQuery(this).find("img").attr("src");
74      jQuery(this).css("background-image", "url(" + CDSurl + ")");
75      jQuery(this).css("background-size", "cover");
76      jQuery(this).find("figure").css("display", "none");
77      jQuery(this).removeClass("background__cds_media");
78      jQuery(this).addClass("background__image");
79    });
80  }
81
82  if (rowEffectsBrowser) {
83    jQuery.fn.isInViewport = function () {
84      var elementTop = jQuery(this).offset().top;
85      var elementBottom = elementTop + jQuery(this).outerHeight();
86      var viewportTop = jQuery(window).scrollTop();
87      var viewportBottom = viewportTop + jQuery(window).height();
88      return elementBottom > viewportTop && elementTop < viewportBottom;
89    };
90
91    jQuery.fn.isTopOnTop = function (offset) {
92      if (jQuery("#toolbar-administration").length > 0) {
93        offset = offset + 76;
94      }
95      offset = 0;
96      var distance = $(this).offset().top;
97      var elementBottom = distance + jQuery(this).outerHeight();
98      var finalDistance = elementBottom;
99      if ($(this).next(".field--item").length > 0) {
100        finalDistance = $(this).next(".field--item").offset().top;
101      }
102      if (
103        distance <= $(window).scrollTop() + offset &&
104        $(window).scrollTop() + offset <= finalDistance
105      ) {
106        return true;
107      }
108      return false;
109    };
110
111    /*
112     * - Is Top of screen on bottom of row?
113     */
114    jQuery.fn.isTopOnBottom = function () {
115      var scrollTop = $(window).scrollTop();
116      var viewHeight = jQuery(window).height();
117      var distance = $(this).offset().top;
118      var elementBottom = distance + jQuery(this).outerHeight();
119      var screenBottom = viewHeight + scrollTop;
120      if (screenBottom >= distance && elementBottom >= screenBottom) {
121        return true;
122      }
123      return false;
124    };
125
126    jQuery.fn.isTopOnTopDownScroll = function () {
127      var distance = $(this).offset().top;
128      var elementBottom = distance + jQuery(this).outerHeight();
129      var finalDistance = elementBottom;
130      if ($(this).next(".field--item").length > 0) {
131        finalDistance = $(this).next(".field--item").offset().top;
132      }
133      if (distance >= $(window).scrollTop() + jQuery(window).height()) {
134        return true;
135      }
136      return false;

137    };
138
139    jQuery.fn.topPercent = function () {
140      var scrollTop = $(window).scrollTop();
141      var distance = $(this).offset().top;
142      var diffA = scrollTop - distance;
143      var elementBottom = distance + jQuery(this).outerHeight();
144      var height = $(this).height();
145      var diffB = elementBottom - distance;
146      return (diffA * 100) / diffB;
147    };
148
149    jQuery.fn.bottomPercent = function () {
150      var scrollTop = $(window).scrollTop();
151      var viewHeight = jQuery(window).height();
152      var distance = $(this).offset().top;
153      var elementBottom = distance + jQuery(this).outerHeight();
154      var height = $(this).height();
155      var scrollToBottom = viewHeight + scrollTop;
156      var diff = scrollToBottom - distance;
157
158      var percent = 80 - ((distance - scrollTop) * 100) / viewHeight;
159
160      if (percent < -50) {
161        return -50;
162      } else if (percent > 150) {
163        return 150;
164      } else {
165        return percent;
166      }
167    };
168
169    // SIMPLE PARALLAX
170    function amountscrolled() {
171      var winheight = $(window).height();
172      var docheight = $(document).height();
173      var scrollTop = $(window).scrollTop();
174      var trackLength = docheight - winheight;
175      var pctScrolled = Math.floor((scrollTop / trackLength) * 100); // gets percentage scrolled (ie: 80 NaN if tracklength == 0)
176      return (scrollTop / trackLength) * 100;
177    }
178
179    jQuery.fn.rotate = function (degrees) {
180      $(this).css({
181        "-webkit-transform": "rotate(" + degrees + "deg)",
182        "-moz-transform": "rotate(" + degrees + "deg)",
183        "-ms-transform": "rotate(" + degrees + "deg)",
184        transform: "rotate(" + degrees + "deg)",
185      });
186      return $(this);
187    };
188
189    $(function () {
190      // COVER PARALLAX INIT
191      jQuery(
192        ".layout__region > .field--items > .field--item > .effect_cover_parallax"
193      ).each(function () {
194        $(this).closest(".field--item").addClass("cover-parallax");
195      });
196      jQuery(".layout__region > .field--items > .field--item:first").each(
197        function () {
198          if (jQuery(this).hasClass("cover-parallax")) {
199            jQuery(this).find(".background__image").addClass("attach-bg-force");
200          }
201        }
202      );
203
204      // COVER PARALLAX FULL INIT
205      jQuery(
206        ".layout__region > .field--items > .field--item > .effect_cover_parallax_full"
207      ).each(function () {
208        $(this).closest(".field--item").addClass("cover-parallax-full");
209      });
210
211      // LAZY EFFECT INIT
212      jQuery(".layout__region > .field--items > .field--item:not(:first)").each(
213        function () {
214          if (jQuery(this).find(".component-row").hasClass("is-cern-lazy")) {
215            jQuery(this).addClass("cern-lazy-out");
216          }
217        }
218      );
219      jQuery(
220        "body.has-header .layout__region > .field--items > .field--item:first"
221      ).removeClass("cern-lazy-out");
222
223      if ($(window).scrollTop() != 0) {
224        jQuery("html, body")
225          .stop()
226          .animate(
227            {
228              scrollTop: $(window).scrollTop() + 1,
229            },
230            0
231          );
232      }
233
234      // BACKGROUND ROTATION EFFECT INIT
235      jQuery(
236        ".layout__region > .field--items > .field--item > .effect_background_rotation"
237      ).each(function () {
238        var rowHeight = jQuery(this).height();
239        jQuery(this)
240          .find(".background__image")
241          .css("width", rowHeight * 2 + "px");
242        jQuery(this)
243          .find(".background__image")
244          .css("height", rowHeight * 2 + "px");
245        jQuery(this).find(".background__image").css("position", "absolute");
246        jQuery(this).find(".background__image").css("bottom", 0);
247        jQuery(this).find(".background__image").css("left", "auto");
248        jQuery(this).find(".background__image").css("right", -rowHeight);
249      });
250    });
251
252    // BACKGROUND ROTATION EFFECT INIT
253    jQuery(window).on("resize", function (event) {
254      jQuery(
255        ".layout__region > .field--items > .field--item > .effect_background_rotation"
256      ).each(function () {
257        var rowHeight = jQuery(this).height();
258        jQuery(this)
259          .find(".background__image")
260          .css("width", rowHeight * 2 + "px");
261        jQuery(this)
262          .find(".background__image")
263          .css("height", rowHeight * 2 + "px");
264        jQuery(this).find(".background__image").css("position", "absolute");
265        jQuery(this).find(".background__image").css("bottom", 0);
266        jQuery(this).find(".background__image").css("left", "auto");
267        jQuery(this).find(".background__image").css("right", -rowHeight);
268      });
269    });
270
271    jQuery(window).on("resize scroll", function (event) {
272      event.stopPropagation();
273      $(".component-row.effect_background_parallax .background__image").css(
274        "background-position-y",
275        amountscrolled() + "%"
276      );
277      coverParallax();
278      if ($(window).width() > 767) {
279        bgRotation();
280      }
281    });
282
283    /**
284     * BR ROTATION
285     */
286    function bgRotation() {
287      jQuery(
288        ".layout__region > .field--items > .field--item > .effect_background_rotation"
289      ).each(function () {
290        var rowHeight = jQuery(this).height();
291        var rowHeightHalf = rowHeight / 2;
292        var percent = jQuery(this).bottomPercent();
293        if (percent !== false) {
294          jQuery(this)
295            .find(".background__image")
296            .rotate(-(percent * 3.6) / 2);
297          jQuery(this)
298            .find(".background__image")
299            .css("right", "calc(" + percent + "% - " + rowHeight + "px)");
300          var opacity = 1 - percent / 100;
301          jQuery(this)
302            .find(".background__image")
303            .css("opacity", opacity + 0.05);
304        }
305      });
306    }
307
308    /**
309     * COVER PARALLAX FULL
310     */
311    var lastScrollTop = 0;
312    window.addEventListener(
313      "scroll",
314      function () {
315        var st = window.pageYOffset || document.documentElement.scrollTop;
316        if (st > lastScrollTop) {
317          coverParallaxFullDown();
318        } else {
319          coverParallaxFullUp();
320        }
321        lastScrollTop = st;
322      },
323      false
324    );
325
326    /**
327     * COVER PARALLAX FULL UP
328     */
329    function coverParallaxFullUp() {
330      jQuery(
331        ".layout__region > .field--items > .field--item.cover-parallax-full"
332      ).each(function () {
333        if (
334          $(this).next(".field--item").isTopOnTop(0) &&
335          !$(this).hasClass("cover-parallax-full-up-in")
336        ) {
337          $(this).addClass("cover-parallax-full-up-in");
338          var height = $(this).height();

339          var viewportHeight = $(window).height();
340          $(this)
341            .next(".field--item")
342            .css("margin-top", height + "px");
343          $(this).css("width", "100%");
344          $(this).css("top", -(height - viewportHeight) + "px");
345          $(this).css("position", "fixed");
346        }
347      });
348      jQuery(
349        ".layout__region > .field--items > .field--item.cover-parallax-full-up-in"
350      ).each(function () {
351        if (
352          $(this).next(".field--item").isTopOnTopDownScroll() &&
353          $(this).hasClass("cover-parallax-full-up-in")
354        ) {
355          $(this).removeClass("cover-parallax-full-up-in");
356          $(this).removeClass("cover-parallax-full-down-in");
357          $(this).css("top", "0");
358          $(this).css("position", "relative");
359          $(this).next(".field--item").css("margin-top", "0");
360        }
361      });
362      jQuery(
363        ".layout__region > .field--items > .field--item.cover-parallax-full-down-in"
364      ).each(function () {
365        if (
366          $(this).next(".field--item").isTopOnTopDownScroll() &&
367          $(this).hasClass("cover-parallax-full-down-in")
368        ) {
369          $(this).removeClass("cover-parallax-full-up-in");
370          $(this).removeClass("cover-parallax-full-down-in");
371          $(this).css("top", "0");
372          $(this).css("position", "relative");
373          $(this).next(".field--item").css("margin-top", "0");
374        }
375      });
376    }
377
378    /**
379     * COVER PARALLAX FULL DOWN
380     */
381    function coverParallaxFullDown() {
382      jQuery(
383        ".layout__region > .field--items > .field--item.cover-parallax-full"
384      ).each(function () {
385        if ($(this).next(".field--item").isTopOnBottom()) {
386          $(this).addClass("cover-parallax-full-down-in");
387          var height = $(this).height();
388          var viewportHeight = $(window).height();
389          $(this)
390            .next(".field--item")
391            .css("margin-top", height + "px");
392          $(this).css("width", "100%");
393          $(this).css("top", -(height - viewportHeight) + "px");
394          $(this).css("position", "fixed");
395        }
396      });
397      jQuery(
398        ".layout__region > .field--items > .field--item.cover-parallax-full-down-in"
399      ).each(function () {
400        if ($(this).next(".field--item").isTopOnTop(0)) {
401          $(this).removeClass("cover-parallax-full-down-in");
402          $(this).css("top", "0");
403          $(this).css("position", "relative");
404          $(this).next(".field--item").css("margin-top", "0");
405        }
406      });
407      jQuery(
408        ".layout__region > .field--items > .field--item.cover-parallax-full-up-in"
409      ).each(function () {
410        $(this).addClass("cover-parallax-full-down-in");
411        if (
412          $(this).hasClass("cover-parallax-full-up-in") &&
413          $(this).hasClass("cover-parallax-full-down-in")
414        ) {
415          $(this).removeClass("cover-parallax-full-up-in");
416          $(this).removeClass("cover-parallax-full-down-in");
417          $(this).css("top", "0");
418          $(this).css("position", "relative");
419          $(this).next(".field--item").css("margin-top", "0");
420        } else {
421          var height = $(this).height();
422          var viewportHeight = $(window).height();
423          $(this)
424            .next(".field--item")
425            .css("margin-top", height + "px");
426          $(this).css("width", "100%");
427          $(this).css("top", -(height - viewportHeight) + "px");
428          $(this).css("position", "fixed");
429        }
430      });
431    }
432
433    /**
434     * COVER PARALLAX
435     */
436    function coverParallax() {
437      jQuery(
438        ".layout__region > .field--items > .field--item.cover-parallax"
439      ).each(function () {
440        if ($(this).isTopOnTop(76)) {
441          $(this).addClass("on-cover-parallax-in");
442          var distance = $(this).offset().top;
443          var windowTop = $(window).scrollTop();
444          var diff = windowTop - distance;
445          var height = $(this).height();
446          var percent = (diff * 100) / height;
447          $(this)
448            .find(".component-row .component-row__row")
449            .css("opacity", 1 - diff / height - 0.2);
450          $(this).find(".background__image").addClass("attach-bg");
451        } else {
452          $(this).removeClass("on-cover-parallax-in");
453          $(this).find(".component-row .component-row__row").css("opacity", 1);
454          $(this).find(".background__image").removeClass("attach-bg");
455        }
456        if (jQuery(window).scrollTop() == 0) {
457          $(this).find(".component-row .component-row__row").css("opacity", 1);
458        }
459      });
460    }
461
462    // padding top same height that title
463    jQuery(function () {
464      rowTitle();
465    });
466    $(window).on("resize", function () {
467      rowTitle();
468    });
469
470    function rowTitle() {
471      $(".component-row").each(function () {
472        if (
473          $(this).hasClass("has_title") &&
474          $(this).find(".row-component-title").length > 0
475        ) {
476          var titleHeight = $(this).find(".row-component-title").height();
477          var rowPaddingTop = titleHeight + 35;
478          $(this).find(".component-row__row").css("padding-top", rowPaddingTop);
479        }
480      });
481    }
482  }
483})(jQuery, Drupal);