https://www.imperial-rac.com/wp-content/themes/autorent/assets/js/scripts.js?ver=4.1

1"use strict";
2
3let media_query_breakpoint = null;
4
5// MEDIA QUERY BREAKPOINT
6function uouMediaQueryBreakpoint() {
7  let mediaQueryBreakpoint = document.getElementById('media-query-breakpoint');
8  
9  if (!mediaQueryBreakpoint) {
10    const varElement = document.createElement('var');
11    varElement.id = 'media-query-breakpoint';
12    varElement.innerHTML = '<span></span>';
13    document.body.appendChild(varElement);
14    mediaQueryBreakpoint = document.getElementById('media-query-breakpoint');
15  }
16
17  let value = window.getComputedStyle(mediaQueryBreakpoint).getPropertyValue('content');
18  
19  if (typeof value !== 'undefined') {
20    value = value.replace(/["']/g, '');
21    if (isNaN(parseInt(value, 10))) {
22      const spans = mediaQueryBreakpoint.querySelectorAll('span');
23      spans.forEach(span => {
24        value = window.getComputedStyle(span, ':before').getPropertyValue('content');
25        value = value.replace(/["']/g, '');
26      });
27    }
28    if (isNaN(parseInt(value, 10))) {
29      value = 1199;
30    }
31  } else {
32    value = 1199;
33  }
34  
35  return value;
36}
37
38// SELECT BOX
39function uouSelectBox(element) {
40  const self = element;
41  const select = self.querySelector('select');
42  if (!select) return;
43
44  const cloneList = document.createElement('ul');
45  cloneList.className = 'select-clone custom-list';
46  self.insertBefore(cloneList, select);
47
48  const placeholder = select.dataset.placeholder || select.querySelector('option')?.textContent || '';
49  const valueHolder = document.createElement('input');
50  valueHolder.className = 'value-holder';
51  valueHolder.type = 'text';
52  valueHolder.disabled = true;
53  valueHolder.placeholder = placeholder;
54  
55  const icon = document.createElement('i');
56  icon.className = 'fa fa-caret-down';
57  
58  self.insertBefore(valueHolder, cloneList);
59  self.insertBefore(icon, cloneList);
60
61  // CREATE CLONE LIST
62  Array.from(select.querySelectorAll('option')).forEach(option => {
63    if (option.value) {
64      const li = document.createElement('li');
65      li.dataset.value = option.value;
66      li.textContent = option.textContent;
67      cloneList.appendChild(li);
68    }
69  });
70
71  // TOGGLE LIST
72  self.addEventListener('click', function() {
73    if (media_query_breakpoint > 991) {
74      cloneList.style.display = cloneList.style.display === 'none' ? 'block' : 'none';
75      self.classList.toggle('active');
76    }
77  });
78
79  // CLICK
80  cloneList.querySelectorAll('li').forEach(li => {
81    li.addEventListener('click', function() {
82      valueHolder.value = this.textContent;
83      select.querySelector(`option[value="${this.dataset.value}"]`).selected = true;
84
85      if (self.classList.contains('links')) {
86        window.location.href = select.value;
87      }
88    });
89  });
90
91  // HIDE LIST WHEN CLICKING OUTSIDE
92  document.addEventListener('click', function(event) {
93    if (!self.contains(event.target)) {
94      cloneList.style.display = 'none';
95    }
96  });
97
98  // LIST OF LINKS
99  if (self.classList.contains('links')) {
100    select.addEventListener('change', function() {
101      window.location.href = this.value;
102    });
103  }
104}
105
106// SELECT BOX LOCATION
107function uouSelectBoxLocation(element) {
108  const self = element;
109  const area = document.querySelector('.car_location_area');
110  const select = self.querySelector('select');
111  if (!select) return;
112
113  const cloneList = document.createElement('ul');
114  cloneList.className = 'select-clone custom-list';
115  self.insertBefore(cloneList, select);
116
117  const placeholder = select.dataset.placeholder || select.querySelector('option')?.textContent || '';
118  const valueHolder = document.createElement('input');
119  valueHolder.className = 'value-holder';
120  valueHolder.type = 'text';
121  valueHolder.disabled = true;
122  valueHolder.placeholder = placeholder;
123  
124  const icon = document.createElement('i');
125  icon.className = 'fa fa-caret-down';
126  
127  self.insertBefore(valueHolder, cloneList);
128  self.insertBefore(icon, cloneList);
129
130  // CREATE CLONE LIST
131  Array.from(select.querySelectorAll('option')).forEach(option => {
132    if (option.value) {
133      const li = document.createElement('li');
134      li.dataset.value = option.value;
135      li.textContent = option.textContent;
136      cloneList.appendChild(li);
137    }
138  });
139
140  // TOGGLE LIST
141  self.addEventListener('click', function() {
142    if (media_query_breakpoint > 991) {
143      cloneList.style.display = cloneList.style.display === 'none' ? 'block' : 'none';
144      self.classList.toggle('active');
145    }
146  });
147
148  // CLICK
149  cloneList.querySelectorAll('li').forEach(li => {
150    li.addEventListener('click', function() {
151      const locations = window.locations_data?.locations;
152      if (locations) {
153        valueHolder.value = this.textContent;
154        select.querySelector(`option[value="${this.dataset.value}"]`).selected = true;
155
156        const city = this.dataset.value;
157        let opt = '<option value=""> Choose Area </option>';
158

159        Object.keys(locations).forEach(key => {
160          if (key === city) {
161            locations[key].forEach(val => {
162              opt += `<option value="${val}">${val}</option>`;
163            });
164          }
165        });
166
167        if (area) {
168          area.innerHTML = opt;
169        }
170      }
171
172      if (self.classList.contains('links')) {
173        window.location.href = select.value;
174      }
175    });
176  });
177
178  // HIDE LIST WHEN CLICKING OUTSIDE
179  document.addEventListener('click', function(event) {
180    if (!self.contains(event.target)) {
181      cloneList.style.display = 'none';
182    }
183  });
184
185  // LIST OF LINKS
186  if (self.classList.contains('links')) {
187    select.addEventListener('change', function() {
188      window.location.href = this.value;
189    });
190  }
191}
192
193// CHECKBOX INPUT
194function uouCheckboxInput(element) {
195  const self = element;
196  const input = self.querySelector('input');
197  if (!input) return;
198
199  if (input.checked) {
200    self.classList.add('active');
201  } else {
202    self.classList.remove('active');
203  }
204
205  input.addEventListener('change', function() {
206    if (this.checked) {
207      self.classList.add('active');
208    } else {
209      self.classList.remove('active');
210    }
211  });
212}
213
214// TOGGLE FUNCTION
215function uouToggle(element) {
216  const self = element;
217  const title = self.querySelector('.toggle-button');
218  const vehicles = self.closest('.fleet-filter')?.nextElementSibling;
219  const content = self.querySelector('.sidebar');
220
221  if (title && vehicles && content) {
222    title.classList.toggle('closed');
223    vehicles.classList.toggle('full-width');
224    content.style.display = content.style.display === 'none' ? 'block' : 'none';
225
226    title.addEventListener('click', function() {
227      title.classList.toggle('closed');
228      vehicles.classList.toggle('full-width');
229      content.style.display = content.style.display === 'none' ? 'block' : 'none';
230    });
231  }
232}
233
234// DOCUMENT READY
235document.addEventListener('DOMContentLoaded', function() {
236  // Инициализация media_query_breakpoint при загрузке
237  media_query_breakpoint = uouMediaQueryBreakpoint();
238
239  // HEADER TOOLBAR LANGUAGE
240  const headerLanguageToggles = document.querySelectorAll('.header-language');
241  
242  headerLanguageToggles.forEach(toggle => {
243    const buttons = toggle.querySelectorAll('.toggleButton, .header-btn');
244    buttons.forEach(button => {
245      button.addEventListener('click', function(event) {
246        event.preventDefault();
247        toggle.classList.toggle('active');
248      });
249    });
250    
251    document.addEventListener('click', function(event) {
252      if (!toggle.contains(event.target)) {
253        toggle.classList.remove('active');
254      }
255    });
256  });
257
258  // BACKGROUND FOR EACH SLIDE
259  document.querySelectorAll('.features-tabs').forEach(tab => {
260    const images = tab.querySelectorAll('.tab-pane');
261    
262    images.forEach(image => {
263      const img = image.querySelector('img');
264      if (img) {
265        image.style.backgroundImage = `url(${img.src})`;
266        img.style.display = 'none';
267      }
268    });
269  });
270
271  // HEADER TOOLBAR LOGIN/REGISTER
272  document.querySelectorAll('#header .header-toolbar-right .header-login, #header .header-toolbar-right .header-register').forEach(element => {
273    const link = element.querySelector('a');
274    
275    if (link) {
276      link.addEventListener('click', function(event) {
277        event.preventDefault();
278        element.classList.toggle('active');
279      });
280      
281      document.addEventListener('click', function(event) {
282        if (!element.contains(event.target)) {
283          element.classList.remove('active');
284        }
285      });
286    }
287  });
288
289  // PHONE NUMBER
290  document.querySelectorAll('.toggle2').forEach(phone => {
291    const phoneElement = phone.nextElementSibling;
292    if (phoneElement && phoneElement.classList.contains('phone')) {
293      if (media_query_breakpoint > 991) {
294        phone.addEventListener('mouseenter', function() {
295          phoneElement.style.display = 'block';
296        });
297        phone.addEventListener('mouseleave', function() {
298          phoneElement.style.display = 'none';
299        });
300        phoneElement.addEventListener('mouseenter', function() {
301          phoneElement.style.display = 'block';
302        });
303        phoneElement.addEventListener('mouseleave', function() {
304          phoneElement.style.display = 'none';
305        });
306      } else {
307        phone.addEventListener('click', function(event) {
308          event.preventDefault();
309          phoneElement.style.display = phoneElement.style.display === 'none' ? 'block' : 'none';
310        });
311      }
312    }
313  });
314
315  // HOVER SUBMENU
316  const hasSubmenus = document.querySelectorAll('.has-submenu');
317  

318  hasSubmenus.forEach(submenu => {
319    const subMenu = submenu.querySelector('.sub-menu');
320    const toggleButton = submenu.querySelector('.submenu-toggle');
321    
322    if (subMenu && media_query_breakpoint > 1200) {
323      submenu.addEventListener('mouseenter', function() {
324        this.classList.add('hover');
325        subMenu.style.display = 'block';
326      });
327      
328      submenu.addEventListener('mouseleave', function() {
329        this.classList.remove('hover');
330        subMenu.style.display = 'none';
331      });
332    }
333    
334    if (toggleButton && subMenu) {
335      toggleButton.addEventListener('click', function() {
336        subMenu.style.display = subMenu.style.display === 'none' ? 'block' : 'none';
337        
338        const icon = this.querySelector('.fa');
339        if (icon) {
340          if (icon.classList.contains('fa-chevron-down')) {
341            icon.classList.remove('fa-chevron-down');
342            icon.classList.add('fa-chevron-up');
343          } else {
344            icon.classList.remove('fa-chevron-up');
345            icon.classList.add('fa-chevron-down');
346          }
347        }
348      });
349    }
350  });
351
352  // FORM ELEMENTS
353  document.querySelectorAll('.checkbox-input').forEach(element => {
354    uouCheckboxInput(element);
355  });
356
357  document.querySelectorAll('.select-box').forEach(element => {
358    uouSelectBox(element);
359  });
360
361  document.querySelectorAll('.select-box-location').forEach(element => {
362    uouSelectBoxLocation(element);
363  });
364
365  // CALENDAR INPUT
366  document.querySelectorAll('.calendar-input').forEach(element => {
367    const input = element.querySelector('input');
368    const icon = element.querySelector('.fa');
369    
370    if (icon && input) {
371      jQuery(input).datepicker({
372        dateFormat: input.dataset.dateformat || 'dd/mm/yy',
373        minDate: 0,
374        showAnim: 'fadeIn',
375        onSelect: function(dateText) {
376          input.value = dateText;
377        }
378      });
379
380      icon.addEventListener('click', function() {
381        jQuery(input).datepicker('show');
382      });
383
384      input.addEventListener('click', function() {
385        jQuery(input).datepicker('show');
386      });
387    }
388  });
389
390  // NAVBAR TOGGLE
391  document.querySelectorAll('.toggle').forEach(toggle => {
392    const navigation = document.querySelector('.navigation');
393    if (navigation) {
394      toggle.addEventListener('click', function() {
395        navigation.style.display = navigation.style.display === 'none' ? 'block' : 'none';
396        
397        if (media_query_breakpoint < 991) {
398          const headerLanguage = document.querySelector('.header-language');
399          const headerCtaButtons = document.querySelector('.header-cta-buttons');
400          
401          if (headerLanguage) {
402            headerLanguage.style.display = headerLanguage.style.display === 'none' ? 'block' : 'none';
403          }
404          if (headerCtaButtons) {
405            headerCtaButtons.style.display = headerCtaButtons.style.display === 'none' ? 'block' : 'none';
406          }
407        }
408      });
409    }
410  });
411
412  // ISOTOPE FILTERS
413  window.addEventListener('load', function () {
414    const filterButtons = document.querySelectorAll('.essentials-filters a');
415    const items = document.querySelectorAll('.essentials-filters-content .vechicle');
416
417    filterButtons.forEach(button => {
418      button.addEventListener('click', function (e) {
419        e.preventDefault();
420
421        filterButtons.forEach(btn => btn.classList.remove('active'));
422        this.classList.add('active');
423
424        const filter = this.getAttribute('data-filter');
425        const className = filter === '*' ? '*' : filter.slice(1);
426
427        items.forEach(item => {
428          if (filter === '*') {
429            item.classList.remove('hidden');
430          } else {
431            if (item.classList.contains(className)) {
432              item.classList.remove('hidden');
433            } else {
434              item.classList.add('hidden');
435            }
436          }
437        });
438      });
439    });
440  });
441
442  // MEDIA QUERY BREAKPOINT REMOVE STYLE
443  window.addEventListener('resize', function() {
444    const currentBreakpoint = uouMediaQueryBreakpoint();
445    if (currentBreakpoint !== media_query_breakpoint) {
446      media_query_breakpoint = currentBreakpoint;
447      
448      document.querySelectorAll('.navigation, .header-language, .header-cta-buttons, .sub-menu, .phone').forEach(el => {
449        el.style.display = '';
450      });
451      
452      document.querySelectorAll('.header-login, .header-register').forEach(el => {
453        el.classList.remove('active');
454      });
455    }
456  });
457
458  // TOGGLES
459  document.querySelectorAll('.fleet-filter').forEach(element => {
460    uouToggle(element);
461  });
462
463  // FIXED CALL BUTTON
464  document.querySelectorAll('.fixed__call_button').forEach(button => {
465    button.addEventListener('click', function() {
466      const mainEl = document.querySelector('.fixed__call');
467      if (mainEl) {
468        mainEl.classList.toggle('active');
469      }
470    });
471  });
472});
473
474// Touch events
475if (typeof dragging === 'undefined') {
476  let dragging = false;

477  document.body.addEventListener('touchmove', function() {
478    dragging = true;
479  });
480
481  document.body.addEventListener('touchstart', function() {
482    dragging = false;
483  });
484}