https://shop.mts.by/local/templates/new-design/components/bitrix/s…/script.js?168681849210529

1function JCTitleSearchMTS(arParams)
2{
3	var _this = this;
4
5	this.arParams = {
6		'AJAX_PAGE': arParams.AJAX_PAGE,
7		'CONTAINER_ID': arParams.CONTAINER_ID,
8		'INPUT_ID': arParams.INPUT_ID,
9		'MIN_QUERY_LEN': parseInt(arParams.MIN_QUERY_LEN)
10	};
11	if(arParams.WAIT_IMAGE)
12		this.arParams.WAIT_IMAGE = arParams.WAIT_IMAGE;
13	if(arParams.MIN_QUERY_LEN <= 0)
14		arParams.MIN_QUERY_LEN = 1;
15
16	this.cache = [];
17	this.cache_key = null;
18
19	this.startText = '';
20	this.running = false;
21	this.runningCall = false;
22	this.currentRow = -1;
23	this.RESULT = null;
24	this.CONTAINER = null;
25	this.INPUT = null;
26	this.WAIT = null;
27
28	this.ShowResult = function(result)
29	{
30		if(BX.type.isString(result))
31		{
32			_this.RESULT.innerHTML = result;
33		}
34
35		_this.RESULT.style.display = _this.RESULT.innerHTML !== '' ? 'block' : 'none';
36		var pos = _this.adjustResultNode();
37
38		//adjust left column to be an outline
39		var res_pos;
40		var th;
41		var tbl = BX.findChild(_this.RESULT, {'tag':'table','class':'title-search-result'}, true);
42		if(tbl)
43		{
44			th = BX.findChild(tbl, {'tag':'th'}, true);
45		}
46
47		if(th)
48		{
49			var tbl_pos = BX.pos(tbl);
50			tbl_pos.width = tbl_pos.right - tbl_pos.left;
51
52			var th_pos = BX.pos(th);
53			th_pos.width = th_pos.right - th_pos.left;
54			th.style.width = th_pos.width + 'px';
55
56			_this.RESULT.style.width = (pos.width + th_pos.width) + 'px';
57
58			//Move table to left by width of the first column
59			_this.RESULT.style.left = (pos.left - th_pos.width - 1)+ 'px';
60
61			//Shrink table when it's too wide
62			if((tbl_pos.width - th_pos.width) > pos.width)
63				_this.RESULT.style.width = (pos.width + th_pos.width -1) + 'px';
64
65			//Check if table is too wide and shrink result div to it's width
66			tbl_pos = BX.pos(tbl);
67			res_pos = BX.pos(_this.RESULT);
68			if(res_pos.right > tbl_pos.right)
69			{
70				_this.RESULT.style.width = (tbl_pos.right - tbl_pos.left) + 'px';
71			}
72		}
73
74		var fade;
75		if(tbl) fade = BX.findChild(_this.RESULT, {'class':'title-search-fader'}, true);
76		if(fade && th)
77		{
78			res_pos = BX.pos(_this.RESULT);
79			fade.style.left = (res_pos.right - res_pos.left - 18) + 'px';
80			fade.style.width = 18 + 'px';
81			fade.style.top = 0 + 'px';
82			fade.style.height = (res_pos.bottom - res_pos.top) + 'px';
83			fade.style.display = 'block';
84		}
85	};
86
87	this.onKeyPress = function(keyCode)
88	{
89		var tbl = BX.findChild(_this.RESULT, {'tag':'table','class':'title-search-result'}, true);
90		if(!tbl)
91			return false;
92
93		var i;
94		var cnt = tbl.rows.length;
95
96		switch (keyCode)
97		{
98		case 27: // escape key - close search div
99			_this.RESULT.style.display = 'none';
100			_this.currentRow = -1;
101			_this.UnSelectAll();
102		return true;
103
104		case 40: // down key - navigate down on search results
105			if(_this.RESULT.style.display == 'none')
106				_this.RESULT.style.display = 'block';
107
108			var first = -1;
109			for(i = 0; i < cnt; i++)
110			{
111				if(!BX.findChild(tbl.rows[i], {'class':'title-search-separator'}, true))
112				{
113					if(first == -1)
114						first = i;
115
116					if(_this.currentRow < i)
117					{
118						_this.currentRow = i;
119						break;
120					}
121					else if(tbl.rows[i].className == 'title-search-selected')
122					{
123						tbl.rows[i].className = '';
124					}
125				}
126			}
127
128			if(i == cnt && _this.currentRow != i)
129				_this.currentRow = first;
130
131			tbl.rows[_this.currentRow].className = 'title-search-selected';
132		return true;
133
134		case 38: // up key - navigate up on search results
135			if(_this.RESULT.style.display == 'none')
136				_this.RESULT.style.display = 'block';
137
138			var last = -1;
139			for(i = cnt-1; i >= 0; i--)
140			{
141				if(!BX.findChild(tbl.rows[i], {'class':'title-search-separator'}, true))
142				{
143					if(last == -1)
144						last = i;
145
146					if(_this.currentRow > i)
147					{
148						_this.currentRow = i;
149						break;
150					}
151					else if(tbl.rows[i].className == 'title-search-selected')
152					{
153						tbl.rows[i].className = '';
154					}
155				}
156			}
157
158			if(i < 0 && _this.currentRow != i)
159				_this.currentRow = last;
160
161			tbl.rows[_this.currentRow].className = 'title-search-selected';
162		return true;
163
164		case 13: // enter key - choose current search result
165			if(_this.RESULT.style.display == 'block')
166			{
167				for(i = 0; i < cnt; i++)
168				{
169					if(_this.currentRow == i)
170					{
171						if(!BX.findChild(tbl.rows[i], {'class':'title-search-separator'}, true))
172						{
173							var a = BX.findChild(tbl.rows[i], {'tag':'a'}, true);
174							if(a)
175							{
176								window.location = a.href;
177								return true;
178							}
179						}
180					}
181				}
182			}
183		return false;

184		}
185
186		return false;
187	};
188
189	this.onTimeout = function()
190	{
191		_this.onChange(function(){
192			setTimeout(_this.onTimeout, 500);
193		});
194	};
195
196	this.onChange = function(callback)
197	{
198		if (_this.running)
199		{
200			_this.runningCall = true;
201			return;
202		}
203		_this.running = true;
204
205		if (_this.CONTAINER) {
206			var button = _this.CONTAINER.querySelector('button');
207			if (button) {
208				if (_this.INPUT.value && button) {
209					button.classList.remove('js-empty-input');
210					_this.INPUT.classList.remove('error');
211				} else {
212					button.classList.add('js-empty-input');
213				}
214			}
215		}
216
217		if(_this.INPUT.value != _this.oldValue && _this.INPUT.value != _this.startText)
218		{
219			_this.oldValue = _this.INPUT.value;
220			if(_this.INPUT.value.length >= _this.arParams.MIN_QUERY_LEN)
221			{
222				_this.cache_key = _this.arParams.INPUT_ID + '|' + _this.INPUT.value;
223				if(_this.cache[_this.cache_key] == null)
224				{
225					if(_this.WAIT)
226					{
227						var pos = BX.pos(_this.INPUT);
228						var height = (pos.bottom - pos.top)-2;
229						_this.WAIT.style.top = (pos.top+1) + 'px';
230						_this.WAIT.style.height = height + 'px';
231						_this.WAIT.style.width = height + 'px';
232						_this.WAIT.style.left = (pos.right - height + 2) + 'px';
233						_this.WAIT.style.display = 'block';
234					}
235
236					BX.ajax.post(
237						_this.arParams.AJAX_PAGE,
238						{
239							'ajax_call':'y',
240							'INPUT_ID':_this.arParams.INPUT_ID,
241							'q':_this.INPUT.value,
242							'l':_this.arParams.MIN_QUERY_LEN
243						},
244						function(result)
245						{
246							_this.cache[_this.cache_key] = result;
247							_this.ShowResult(result);
248							_this.currentRow = -1;
249							_this.EnableMouseEvents();
250							if(_this.WAIT)
251								_this.WAIT.style.display = 'none';
252							if (!!callback)
253								callback();
254							_this.running = false;
255							if (_this.runningCall)
256							{
257								_this.runningCall = false;
258								_this.onChange();
259							}
260						}
261					);
262					return;
263				}
264				else
265				{
266					_this.ShowResult(_this.cache[_this.cache_key]);
267					_this.currentRow = -1;
268					_this.EnableMouseEvents();
269				}
270			}
271			else
272			{
273				_this.RESULT.style.display = 'none';
274				_this.currentRow = -1;
275				_this.UnSelectAll();
276			}
277		}
278		if (!!callback)
279			callback();
280		_this.running = false;
281	};
282
283	this.onScroll = function ()
284	{
285		if(BX.type.isElementNode(_this.RESULT)
286			&& _this.RESULT.style.display !== "none"
287			&& _this.RESULT.innerHTML !== ''
288		)
289		{
290			_this.adjustResultNode();
291		}
292	};
293
294	this.UnSelectAll = function()
295	{
296		var tbl = BX.findChild(_this.RESULT, {'tag':'table','class':'title-search-result'}, true);
297		if(tbl)
298		{
299			var cnt = tbl.rows.length;
300			for(var i = 0; i < cnt; i++)
301				tbl.rows[i].className = '';
302		}
303	};
304
305	this.EnableMouseEvents = function()
306	{
307		var tbl = BX.findChild(_this.RESULT, {'tag':'table','class':'title-search-result'}, true);
308		if(tbl)
309		{
310			var cnt = tbl.rows.length;
311			for(var i = 0; i < cnt; i++)
312				if(!BX.findChild(tbl.rows[i], {'class':'title-search-separator'}, true))
313				{
314					tbl.rows[i].id = 'row_' + i;
315					tbl.rows[i].onmouseover = function (e) {
316						if(_this.currentRow != this.id.substr(4))
317						{
318							_this.UnSelectAll();
319							this.className = 'title-search-selected';
320							_this.currentRow = this.id.substr(4);
321						}
322					};
323					tbl.rows[i].onmouseout = function (e) {
324						this.className = '';
325						_this.currentRow = -1;
326					};
327				}
328		}
329	};
330
331	this.onFocusLost = function(hide)
332	{
333		setTimeout(function(){_this.RESULT.style.display = 'none';}, 250);
334	};
335
336	this.onFocusGain = function()
337	{
338		if(_this.RESULT.innerHTML.length)
339			_this.ShowResult();
340	};
341
342	this.onKeyDown = function(e)
343	{
344		if(!e)
345			e = window.event;
346
347		if (_this.RESULT.style.display == 'block')
348		{
349			if(_this.onKeyPress(e.keyCode))
350				return BX.PreventDefault(e);
351		}
352	};
353
354	this.adjustResultNode = function()
355	{
356		if(!(BX.type.isElementNode(_this.RESULT)
357			&& BX.type.isElementNode(_this.CONTAINER))
358		)
359		{
360			return { top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 };
361		}
362
363		var pos = BX.pos(_this.CONTAINER);
364
365		_this.RESULT.style.position = 'absolute';
366		_this.RESULT.style.top = (pos.bottom + 2) + 'px';
367		_this.RESULT.style.left = pos.left + 'px';
368		_this.RESULT.style.width = pos.width + 'px';
369
370		return pos;
371	};
372
373	this._onContainerLayoutChange = function()
374	{
375		if(BX.type.isElementNode(_this.RESULT)
376			&& _this.RESULT.style.display !== "none"
377			&& _this.RESULT.innerHTML !== ''
378		)
379		{
380			_this.adjustResultNode();
381		}
382	};
383	this.Init = function()
384	{
385		this.CONTAINER = document.getElementById(this.arParams.CONTAINER_ID);
386		BX.addCustomEvent(this.CONTAINER, "OnNodeLayoutChange", this._onContainerLayoutChange);
387
388		this.RESULT = document.body.appendChild(document.createElement("DIV"));
389		this.RESULT.className = 'title-search-result';
390		this.INPUT = document.getElementById(this.arParams.INPUT_ID);
391		this.startText = this.oldValue = this.INPUT.value;
392		BX.bind(this.INPUT, 'focus', function() {_this.onFocusGain()});
393		BX.bind(this.INPUT, 'blur', function() {_this.onFocusLost()});
394		this.INPUT.onkeydown = this.onKeyDown;
395
396		if(this.arParams.WAIT_IMAGE)
397		{
398			this.WAIT = document.body.appendChild(document.createElement("DIV"));
399			this.WAIT.style.backgroundImage = "url('" + this.arParams.WAIT_IMAGE + "')";
400			if(!BX.browser.IsIE())
401				this.WAIT.style.backgroundRepeat = 'none';
402			this.WAIT.style.display = 'none';
403			this.WAIT.style.position = 'absolute';
404			this.WAIT.style.zIndex = '1100';
405		}
406
407		BX.bind(this.INPUT, 'bxchange', function() {_this.onChange()});
408
409		var fixedParent = BX.findParent(this.CONTAINER, BX.is_fixed);
410		if(BX.type.isElementNode(fixedParent))
411		{
412			BX.bind(window, 'scroll', BX.throttle(this.onScroll, 100, this));
413		}
414	};
415	BX.ready(function (){_this.Init(arParams)});
416}
417
418window.onload = function() {
419	let buttons = document.querySelectorAll('form .js-empty-input');
420	for (let button of buttons) {
421		button.addEventListener('click', function(e) {
422			let input = button.previousElementSibling;
423			if (button.classList.contains('js-empty-input')) {
424				e.stopPropagation();
425				e.preventDefault();
426				input.classList.add('error');
427			}
428		});
429	}
430};