https://www.creatio.com/themes/custom/creatio/components/menu-banner/menu-banner.js?tltpnb

1(function ($, Drupal) {
2  'use strict';
3
4  let timer;
5  const timers = [];
6  const arrays = [];
7
8  Drupal.behaviors.creatio_component_menu_banner = {
9    attach: (context, settings) => {}
10  };
11
12  const shuffle = (array) => {
13    let currentIndex = array.length;
14
15    while(currentIndex !== 0) {
16      let randomIndex = Math.floor(Math.random() * currentIndex);
17      currentIndex--;
18
19      [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
20    }
21  };
22
23  const subMenuWidth = () => {
24    const logo = $('.creatio-header-logo');
25    const wd = $('.creatio-header .field--name-field-header-menu').width() - logo.width() - parseInt(logo.parent().css('margin-right')) + 15;
26    $('.main-menu').attr('style', `--ts-submenu-wd: ${wd}px`);
27  };
28
29  const photosUpdate = (menuItemIndex) => {
30    const array = arrays[menuItemIndex];
31    const photos = $('.main-menu-item').eq(menuItemIndex).find('.ts-photos');
32    const time = 1500;
33    let currentTime = 0;
34    for(let i = 0; i < array.length; i++) {
35      if(typeof array[i] !== 'undefined') {
36        if(array[i].length > 1) {
37          currentTime += time;
38        }
39        if(typeof timers[menuItemIndex] === 'undefined') {
40          timers[menuItemIndex] = [];
41        }
42
43        timers[menuItemIndex][timers[menuItemIndex].length] = setTimeout(() => {
44          let index, newIndex;
45          array[i].forEach((item, key) => {
46            if(item.active) {
47              index = key;
48              newIndex = typeof array[i][index+1] === 'undefined' ? 0 : index+1;
49            }
50          });
51
52          array[i][index].active = false;
53          array[i][newIndex].active = true;
54
55          photos.find('.ts-photos__img').eq(array[i][index].index).removeClass('active');
56          photos.find('.ts-photos__img ').eq(array[i][newIndex].index).addClass('active');
57        }, currentTime);
58      }
59    }
60    timer = setTimeout(() => {
61      photosUpdate(menuItemIndex);
62    }, currentTime);
63  };
64
65  $(document).on('mouseenter', '.main-menu-item:has(.ts-photos)', (e) => {
66    const menuItem = $(e.target).closest('.main-menu-item');
67    const menuItemIndex = menuItem.index();
68
69    if(typeof arrays[menuItemIndex] === 'undefined') {
70      const photos = menuItem.closest('.main-menu-item').find('.ts-photos');
71      const photosImg = photos.find('.ts-photos__img');
72      const cols = 4;
73
74      arrays[menuItemIndex] = [];
75
76      photosImg.each((i, el) => {
77        const img = $(el);
78        const item = img.closest('.ts-photos__item');
79        if(!img.hasClass('no-chnage')) {
80          const row = (item.css('grid-row-start')-1)*cols;
81          const col = item.css('grid-column-start')-1;
82          const index = (row + col);
83          if(typeof arrays[menuItemIndex][index] === 'undefined') {
84            arrays[menuItemIndex][index] = [];
85          }
86          arrays[menuItemIndex][index].push({index: i, active: img.hasClass('active')});
87        }
88      });
89      shuffle(arrays[menuItemIndex]);
90      photosUpdate(menuItemIndex);
91    }
92  });
93
94  $(document).ready(() => {
95    subMenuWidth();
96  });
97
98  $(window).on('resize', () => {
99    setTimeout(subMenuWidth, 10);
100  });
101
102}(jQuery, Drupal));