https://liquimoly.ru/bitrix/templates/liquimoly_vbf_copy/component…/liquimoly_search/script.js?160312141810314

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

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

405				_this.onFocusLost();
406			}
407		});
408		this.INPUT.onkeydown = this.onKeyDown;
409
410		if(this.arParams.WAIT_IMAGE)
411		{
412			this.WAIT = document.body.appendChild(document.createElement("DIV"));
413			this.WAIT.style.backgroundImage = "url('" + this.arParams.WAIT_IMAGE + "')";
414			if(!BX.browser.IsIE())
415				this.WAIT.style.backgroundRepeat = 'none';
416			this.WAIT.style.display = 'none';
417			this.WAIT.style.position = 'absolute';
418			this.WAIT.style.zIndex = '1100';
419		}
420
421		BX.bind(this.INPUT, 'bxchange', function() {_this.onChange()});
422
423		var fixedParent = BX.findParent(this.CONTAINER, BX.is_fixed);
424		if(BX.type.isElementNode(fixedParent))
425		{
426			BX.bind(window, 'scroll', BX.throttle(this.onScroll, 100, this));
427		}
428	};
429	BX.ready(function (){_this.Init(arParams)});
430}