https://brainium.com/wp-content/themes/brainium/js/site.js?ver=1.0.19

1const IS_MOBILE = window.innerWidth < 767.98;
2
3function eventFire(el, etype){
4  if (el.fireEvent) {
5    el.fireEvent('on' + etype);
6  } else {
7    var evObj = document.createEvent('Events');
8    evObj.initEvent(etype, true, false);
9    el.dispatchEvent(evObj);
10  }
11}
12
13function preloadImage(url) {
14    const img = new Image();
15    img.src = url;
16    return img;
17  }
18
19
20function setActiveHeader() {
21  const header = document.querySelector('header.site-header');
22  const target = document.querySelector('.hero');
23  if (!target) {
24    header.classList.add('active');
25    return true;
26  }
27
28  let rootMargin = 0 - (target.clientHeight * 0.25);
29
30  let options = {
31    rootMargin: `${rootMargin}px`,
32    threshold: 0,
33  }
34
35  if (IS_MOBILE) {
36    options = {
37      rootMargin: `0px`,
38      threshold: 1,
39    }
40  }
41
42  let callback = (entries, observer) => {
43    entries.forEach(entry => {
44      if (entry.isIntersecting) {
45        header.classList.remove('active');
46      } else {
47        header.classList.add('active');
48      }
49    })
50  };
51
52  let observer = new IntersectionObserver(callback, options);
53  observer.observe(target);
54}
55
56function setupMeetTheLeaders() {
57  // Fetch all the details element.
58  const details = document.querySelectorAll(".page-team-leaders details");
59  const imageContainer = document.querySelector(".page-team-leaders .image-column");
60
61  // Add the onclick listeners.
62  details.forEach((targetDetail) => {
63    preloadImage(targetDetail.dataset.leaderImage);
64
65    targetDetail.addEventListener("click", () => {
66      // Close all the details that are not targetDetail.
67      details.forEach((detail) => {
68        if (detail !== targetDetail) {
69          detail.removeAttribute("open");
70        }
71      });
72
73      const openStatus = targetDetail.hasAttribute("open");
74      if (!openStatus) {
75        imageContainer.style.backgroundImage = `url(${targetDetail.dataset.leaderImage})`;
76      } else {
77        imageContainer.style.backgroundImage = ``;
78      }
79    });
80
81    if (targetDetail.hasAttribute("data-auto-open")) {
82      targetDetail.querySelector('summary').click();
83    }
84  });
85}
86
87function setupMobileNav() {
88	const button = document.querySelector('#site-navigation-toggle');
89  const menu = document.querySelector('.site-header-mobile .main-navigation');
90
91  button.addEventListener("click", (e) => {
92    button.classList.toggle("open");
93    menu.classList.toggle("open");
94  });
95}
96
97function setupSwiper() {
98  const target = document.querySelector('.swiper');
99  const swiper = new Swiper(target, {
100    // Optional parameters
101    loop: true,
102    centeredSlides: true,
103
104    // If we need pagination
105    pagination: {
106      el: '.swiper-pagination',
107      type: "progressbar",
108    },
109
110    // Navigation arrows
111    navigation: {
112      nextEl: '.swiper-button-next',
113      prevEl: '.swiper-button-prev',
114    },
115
116    // And if we need scrollbar
117    // scrollbar: {
118    //   el: '.swiper-scrollbar',
119    // },
120  });
121}
122
123function setupHomepageGameSwitcher() {
124  const targets = document.querySelectorAll('.home-games-list-game a');
125  const leftImage = document.querySelector('.home-games .left-column');
126  if (!targets.length || !leftImage) {
127    return true;
128  }
129
130  targets.forEach((target) => {
131    const image = target.dataset.sliderImage;
132    if (image) {
133      preloadImage(image);
134      target.addEventListener("mouseover", (e) => {
135        leftImage.style.backgroundImage = `url(${image})`;
136      });
137    }
138  });
139}
140
141function setupHomeHero() {
142  const target = document.querySelector('.home-hero');
143  if (!target) {
144    return true;
145  }
146
147  const TOTAL_LAYERS = IS_MOBILE ? 7 : 10;
148  let basePath = `/wp-content/themes/brainium/img/home-hero`;
149  if (IS_MOBILE) {
150    basePath = `${basePath}/mobile`;
151  }
152
153  function bindEvents(layers) {
154    document.addEventListener('scroll', (e) => {
155      layers.forEach((layer, i) => {
156        const index = layer.dataset.index;
157        const scrollMultiplier = window.scrollY / 250;
158        layer.style.top = `${index * scrollMultiplier * 5}px`;
159      });
160    });
161
162    function handleMove(e) {
163      const clientX = IS_MOBILE ? e.touches[0].clientX : e.clientX;
164

165      layers.forEach((layer, i) => {
166        const index = layer.dataset.index;
167        const xMultiplier = clientX / 1000;
168        layer.style.left = `${index * xMultiplier * 2}px`;
169      });
170    }
171
172    // target.addEventListener('touchmove', handleMove);
173    target.addEventListener('mousemove', handleMove);
174  }
175
176  const layerElements = [];
177  [...Array(TOTAL_LAYERS)].forEach((_, i) => {
178    const newLayer = document.createElement('div');
179    newLayer.classList.add('home-hero-layer');
180    newLayer.dataset.index = i;
181    newLayer.style.backgroundImage = `url(${basePath}/layer-${i}.webp)`;
182    layerElements.push(newLayer);
183    target.append(newLayer);
184
185    if (i === TOTAL_LAYERS - 1) {
186      bindEvents(layerElements);
187    }
188  });
189}
190
191function setGameHighlightPositions() {
192  const target = document.querySelector('.page-game-hero-highlights');
193  if (!target) {
194    return true;
195  }
196
197  
198  const backgroundImage = document.querySelector('.page-game-hero-background img');
199  const heroContainer = document.querySelector('.page-game-hero');
200  heroContainer.style.height = `${backgroundImage.clientHeight}px`;
201
202  const top = backgroundImage.clientHeight - (backgroundImage.clientHeight * 0.1) - target.clientHeight;
203  target.style.top = `${top}px`;
204}
205
206function disableTargetBlankLinks() {
207  const targets = document.querySelectorAll('a[target="_blank"]');
208  if (!targets || !targets.length) {
209    return true;
210  }
211
212  targets.forEach(target => {
213    try {
214      target.removeAttribute('target');
215    } catch {}
216  });
217}
218
219setActiveHeader();
220setupMeetTheLeaders();
221setupMobileNav();
222setupSwiper();
223setupHomepageGameSwitcher();
224setupHomeHero();
225
226if (IS_MOBILE) {
227  disableTargetBlankLinks();
228}
229
230if (document.querySelector('.page-game-hero-highlights') && window.innerWidth > 1260) {
231  window.addEventListener('load', setGameHighlightPositions);
232  window.addEventListener('resize', setGameHighlightPositions);
233}
234
235// sal();
236
237// const setVh = () => {
238//   const vh = window.innerHeight * 0.01;
239//   document.documentElement.style.setProperty('--vh', `${vh}px`);
240// };
241
242// window.addEventListener('load', setVh);
243// window.addEventListener('resize', setVh);
244
245// helpshift 1.0 iframe height fix
246
247// var _HS = {
248
249//     url: "brainium.helpshift.com",
250//     // TODO: change this to your helpshift domain,
251//     //       e.g. "happyapps.helpshift.com"
252
253//     heightPadding: 150,
254//     // TODO: you will need to change this depending on your
255//     //       support-wrapper's width
256
257//     scrollTop: 0,
258//     // TODO: Change this to adjust the extent to which you want to
259//     //       scroll up on change of content. 0 is for topmost.
260// };
261
262// (function (w) {
263//   w.addEventListener ("message", function (event) {
264//     if (event.origin.indexOf (_HS.url) !== -1) {
265//       var msg = event.data.match (/^(?:HS:)(.*)/);
266//       if (msg) {
267//         var data = JSON.parse (msg [1]);
268//         if (data.type === "height-change") {
269//           document.getElementById( "support-wrapper" ).style.height =
270//               (data.data.ht + _HS.heightPadding).toString() + "px";
271//           w.document.body.scrollTop = _HS.scrollTop;
272//         }
273//       }
274//     }
275//   });
276// } (window));