https://i-mt.net/local/templates/imt/js/header.js?17869466257652

1const typingSpeed = 150;
2const pauseTime = 3000;
3
4const searchWords = [
5    'Мелиса',
6    'Кактус',
7    'Репей',
8    'Гидра',
9    'Алтей',
10    'Лютик',
11    'LAUREL'
12];
13
14let typingLock = false;
15let currentTimeout = null;
16
17const getRandomWord = (currentWord) => {
18    const availableWords = searchWords.filter(word => word !== currentWord);
19    if (availableWords.length === 0) return searchWords[0];
20    return availableWords[Math.floor(Math.random() * availableWords.length)];
21};
22
23const erasePlaceholder = (searchInput, callback) => {
24    let currentPlaceholder = searchInput.getAttribute('placeholder') || '';
25
26    if (currentPlaceholder.endsWith('|')) {
27        currentPlaceholder = currentPlaceholder.slice(0, -1);
28    }
29
30    if (currentPlaceholder.length === 0) {
31        callback();
32        return;
33    }
34
35    const eraseChar = (index) => {
36        if (index < 0) {
37            searchInput.setAttribute('placeholder', '|');
38            callback();
39            return;
40        }
41
42        const newPlaceholder = currentPlaceholder.substring(0, index) + '|';
43        searchInput.setAttribute('placeholder', newPlaceholder);
44
45        currentTimeout = setTimeout(() => {
46            eraseChar(index - 1);
47        }, typingSpeed);
48    };
49
50    eraseChar(currentPlaceholder.length - 1);
51};
52
53const typePlaceholder = (searchInput, word, callback) => {

54    let currentIndex = 0;
55
56    const typeChar = () => {
57        if (currentIndex > word.length) {
58            searchInput.setAttribute('placeholder', word + '|');
59            callback();
60            return;
61        }
62
63        const newPlaceholder = word.substring(0, currentIndex) + '|';
64        searchInput.setAttribute('placeholder', newPlaceholder);
65        currentIndex++;
66
67        currentTimeout = setTimeout(() => {
68            typeChar();
69        }, typingSpeed);
70    };
71
72    typeChar();
73};
74
75const changeSearchPlaceholder = () => {
76    if (typingLock) return;
77
78    const searchInput = document.querySelector('#mainSearch');
79    if (!searchInput) return;
80
81    typingLock = true;
82
83    if (currentTimeout) {
84        clearTimeout(currentTimeout);
85    }
86
87    let currentPlaceholder = searchInput.getAttribute('placeholder') || '';
88    if (currentPlaceholder.endsWith('|')) {
89        currentPlaceholder = currentPlaceholder.slice(0, -1);
90    }
91
92    const newWord = getRandomWord(currentPlaceholder);
93
94    erasePlaceholder(searchInput, () => {
95        currentTimeout = setTimeout(() => {
96            typePlaceholder(searchInput, newWord, () => {
97                typingLock = false;
98            });
99        }, typingSpeed);
100    });
101};
102
103const buttonMenuHandler = () => {
104    const handlerButton = document.getElementById('buttonMenu');
105    const header = document.querySelector('.c-header');
106
107    if (handlerButton && header) {
108        handlerButton.addEventListener('click', () => {
109            const isOpen = header.classList.toggle('c-header--open');
110            document.body.classList.toggle('c-header-menu-open', isOpen);
111        });
112    }
113};
114
115const setMenuTitle = (title, savePrevTitle = true) => {
116    const menuTitle = document.querySelector('.c-menu__title');
117    if (!menuTitle) return;
118
119    menuTitle.classList.add('c-menu__title--loading');
120    setTimeout(() => {
121        if (savePrevTitle) {
122            menuTitle.setAttribute('data-prev', menuTitle.innerText);
123        } else {
124            menuTitle.removeAttribute('data-prev');
125        }
126
127        menuTitle.innerText = title;
128        menuTitle.classList.remove('c-menu__title--loading');
129    }, 400);
130};
131
132const menuItemHandler = () => {
133    const items = document.querySelectorAll('.c-menu__nav .is-parent > a');
134    if (!items.length) return;
135
136    items.forEach(item => {
137        item.addEventListener('click', () => {
138            const newText = item.querySelector('span').innerText;
139            setMenuTitle(newText);
140        });
141    });
142
143    const itemsDepth1Level = document.querySelectorAll('.c-menu__nav > ul > li > a');
144
145    itemsDepth1Level.forEach(item => {
146        item.addEventListener('click', () => {
147            setMenuStep(2);
148            itemsDepth1Level.forEach(itemHide => {
149                itemHide.closest('li').classList.remove('is-open');
150            });
151            item.closest('li').classList.add('is-open');
152        });
153    });
154
155    const itemsDepth2Level = document.querySelectorAll('.c-menu__nav > ul > li > ul > li > a');
156
157    itemsDepth2Level.forEach(item => {
158        item.addEventListener('click', () => {
159            setMenuStep(3);
160            itemsDepth2Level.forEach(itemHide => {
161                itemHide.closest('li').classList.remove('is-open');
162            });
163            item.closest('li').classList.add('is-open');
164        });
165    });
166};
167
168const getMenuStep = () => {

169    const menuUl = document.querySelector('.c-menu__nav > ul');
170    if (!menuUl) return 1;
171
172    const regex = /step-(\d)/gm;
173    const classListValue = menuUl.classList.toString();
174    const match = regex.exec(classListValue);
175    return (match && parseInt(match[1], 10)) ? parseInt(match[1], 10) : 1;
176};
177
178const closeOpenItemsDeeperThan = (step) => {
179    if (step < 3) {
180        document.querySelectorAll('.c-menu__nav > ul > li > ul > li.is-open').forEach((item) => {
181            item.classList.remove('is-open');
182        });
183    }
184
185    if (step < 2) {
186        document.querySelectorAll('.c-menu__nav > ul > li.is-open').forEach((item) => {
187            item.classList.remove('is-open');
188        });
189    }
190};
191
192const setMenuStep = (step = 1) => {
193    const minStep = 1;
194    const maxStep = 3;
195    const setStep = Math.min(maxStep, Math.max(minStep, step));
196    const currentStep = getMenuStep();
197
198    if (currentStep === setStep) return false;
199
200    const menuUl = document.querySelector('.c-menu__nav > ul');
201    const menuBackButton = document.querySelector('.c-menu__back');
202    if (!menuUl || !menuBackButton) return false;
203
204    if (setStep < currentStep) {
205        closeOpenItemsDeeperThan(setStep);
206    }
207
208    menuUl.classList.remove('step-' + currentStep);
209    menuUl.classList.add('step-' + setStep);
210
211    const menuNav = document.querySelector('.c-menu__nav');
212    if (menuNav) {
213        menuNav.scrollTop = 0;
214    }
215
216    if (setStep === 1) {
217        menuBackButton.classList.remove('c-menu__back--arrow');
218        menuBackButton.classList.add('c-menu__back--home');
219    } else {
220        menuBackButton.classList.remove('c-menu__back--home');
221        menuBackButton.classList.add('c-menu__back--arrow');
222    }
223
224    return setStep;
225};
226
227const setPrevMenuStep = () => {
228    const menuTitle = document.querySelector('.c-menu__title');
229    let currentStep = getMenuStep();
230    currentStep--;
231    setMenuStep(currentStep);
232
233    switch (currentStep) {
234        case 1:
235            setMenuTitle('Главное меню', false);
236            break;
237        case 2:
238            setMenuTitle(menuTitle.getAttribute('data-prev'));
239            break;
240    }
241
242    return getMenuStep();
243};
244
245const prevMenuButtonHandler = () => {
246    const prevMenuButton = document.querySelector('.c-menu__back');
247    if (prevMenuButton) {
248        prevMenuButton.addEventListener('click', () => {
249            setPrevMenuStep();
250        });
251    }
252};
253
254const initHeaderSearch = () => {
255    const searchInput = document.querySelector('#mainSearch');
256    if (!searchInput) return;
257
258    changeSearchPlaceholder();
259
260    setInterval(() => {
261        if (!typingLock) {
262            changeSearchPlaceholder();
263        }
264    }, pauseTime);
265};
266
267const initHeader = () => {
268    buttonMenuHandler();
269    menuItemHandler();
270    prevMenuButtonHandler();
271    initHeaderSearch();
272};
273
274document.addEventListener('DOMContentLoaded', initHeader);