https://www.bitrix24.fr/bitrix/templates/bitrix24_2017/components/bitrix/menu/category.menu/script.js

1;(function() {
2	function BXSimpleHeaderMenuSlider()
3	{
4		this.timeoutId = null;
5
6		this.nodes = {
7			section: null,
8			list: null,
9		};
10
11		this.attributes = {
12			initialized: 'data-bx-slide-menu-initialized',
13			section: 'data-bx-data-stick-outer',
14			list: 'data-bx-slide-menu-section-list',
15			item: 'data-bx-slide-menu-section-item',
16			active: 'data-bx-slide-menu-section-item-active',
17
18			slider: 'data-bx-slide-menu-slider',
19			track: 'data-bx-slide-menu-slider-track',
20			slides: 'data-bx-slide-menu-slider-slides',
21			slide: 'data-bx-slide-menu-slider-slide',
22		};
23
24		this.classes = {
25			slider: 'glide',
26			track: 'glide__track',
27			slides: 'glide__slides',
28			slide: 'glide__slide',
29		};
30
31		this.slider = {
32			object: null
33		};
34
35		this.nodes.section = document.querySelector('.js-header-menu-section');
36
37		if (BX.type.isElementNode(this.nodes.section))
38		{
39			if (this.nodes.section.hasAttribute(this.attributes.initialized))
40			{
41				return;
42			}
43
44			this.nodes.section.setAttribute(this.attributes.initialized, true);
45
46			this.nodes.list = this.nodes.section.querySelector('[' + this.attributes.list + ']');
47
48			if (BX.type.isElementNode(this.nodes.list))
49			{
50				this.nodes.slider = this.nodes.list.querySelector('[' + this.attributes.slider + ']');
51				this.nodes.track = this.nodes.list.querySelector('[' + this.attributes.track + ']');
52				this.nodes.slides = this.nodes.list.querySelector('[' + this.attributes.slides + ']');
53
54				BX.bind(window, 'resize', BX.proxy(this.sliderHandler, this));
55
56				this.sliderHandler();
57			}
58		}
59	}
60
61	BXSimpleHeaderMenuSlider.prototype.getActiveItemNumber = function() {
62		let number = 0;
63		let items = this.getListItems();
64
65		for (let i = 0; i < items.length; i++)
66		{
67			if (items[i].hasAttribute(this.attributes.active))
68			{
69				number = i;
70			}
71		}
72
73		return number;
74	};
75
76	BXSimpleHeaderMenuSlider.prototype.getListItems = function() {
77		return this.nodes.list.querySelectorAll('[' + this.attributes.item + ']');
78	};
79
80	BXSimpleHeaderMenuSlider.prototype.checkMenuSize = function() {
81		let width = 0;
82
83		Array.prototype.slice.call(this.nodes.list.querySelectorAll('[' + this.attributes.slide + ']')).forEach(
84			(element) => {
85				const rect = element.getBoundingClientRect();
86				width = width + rect.width;
87			}
88		);
89
90		return this.nodes.list.offsetWidth < width && window.outerWidth >= 992;
91	};
92
93	BXSimpleHeaderMenuSlider.prototype.makeSlider = function() {
94		if (!this.slider.object)
95		{
96			let items = this.getListItems();
97			let length = items.length;
98
99			BX.addClass(this.nodes.slider, this.classes.slider);
100			BX.addClass(this.nodes.track, this.classes.track);
101			BX.addClass(this.nodes.slides, this.classes.slides);
102
103			this.slider.object = new Glide('[' + this.attributes.slider + ']', {
104				type: 'slider',
105				startAt: 0,
106				gap: 0,
107				perView: length <= 4 ? length : 4,
108				bound: true,
109				rewind: false,
110			}).mount();
111		}
112	};
113
114	BXSimpleHeaderMenuSlider.prototype.destroySlider = function() {
115		if (this.slider.object)
116		{
117			BX.removeClass(this.nodes.slider, this.classes.slider);
118			BX.removeClass(this.nodes.track, this.classes.track);
119			BX.removeClass(this.nodes.slides, this.classes.slides);
120
121			this.slider.object.destroy();
122			this.slider.object = null;
123		}
124	};
125
126	BXSimpleHeaderMenuSlider.prototype.sliderHandler = function() {
127		let _this = this;
128
129		clearTimeout(_this.timeoutId);
130		_this.timeoutId = setTimeout(function() {
131			if (_this.checkMenuSize())
132			{
133				_this.makeSlider();
134			}
135			else
136			{
137				_this.destroySlider();
138			}
139		}, 400);
140	};
141
142	if (window.frameCacheVars !== undefined)
143	{
144		BX.addCustomEvent('onFrameDataReceived', function() {
145			new BXSimpleHeaderMenuSlider();
146		});
147	}
148	else
149	{
150		BX.ready(function() {
151			new BXSimpleHeaderMenuSlider();
152		});
153	}
154})();