https://www.baccarathotels.com/themes/custom/baccarat/components/s…/split-content-static.js?tm50by

1/**
2 * @file
3 * Grayscale scroll reveal/hide toggle for split-content-static components.
4 */
5(function (Drupal, once) {
6  Drupal.behaviors.splitContentStaticColorize = {
7    attach: function (context) {
8      // 1. Target the media element directly instead of the parent container
9      const mediaItems = once('split-content-static-colorize', '.split-content-static__media', context);
10      if (!mediaItems.length) return;
11
12      if (!('IntersectionObserver' in window)) {
13        // Fallback for browsers without IntersectionObserver support
14        mediaItems.forEach((el) => {
15          const parent = el.closest('.split-content-static');
16          if (parent) {
17            parent.classList.add('is-in-view');
18          }
19        });
20        return;
21      }
22
23      // Re-evaluated on every resize instead of once at attach time, so
24      // rotating a tablet or resizing a window past the 768px breakpoint
25      // takes effect immediately without needing a page refresh.
26      const shouldAnimate = () => {
27        const isDesktopPointer = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
28        const isMobileWidth = window.innerWidth <= 768;
29        return !isDesktopPointer || isMobileWidth;
30      };
31
32      const intersecting = new WeakMap();
33
34      const applyState = () => {
35        const active = shouldAnimate();
36        mediaItems.forEach((el) => {
37          const parent = el.closest('.split-content-static');
38          if (!parent) return;
39          parent.classList.toggle('is-in-view', active && !!intersecting.get(el));
40        });
41      };
42
43      const observer = new IntersectionObserver((entries) => {
44        entries.forEach((entry) => intersecting.set(entry.target, entry.isIntersecting));
45        applyState();
46      }, {
47        root: null,
48        rootMargin: '-10% 0px -10% 0px',
49        threshold: 0.8
50      });
51
52      mediaItems.forEach((el) => {
53        observer.observe(el);
54      });
55
56      let resizeTimeout;
57      window.addEventListener('resize', () => {
58        clearTimeout(resizeTimeout);
59        resizeTimeout = setTimeout(applyState, 150);
60      });
61    }
62  };
63})(Drupal, once);