https://okoptica.ru/local/templates/okoptica/components/bitrix/search.title/main/script.js

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

164        }
165
166        return false;
167    };
168
169    this.onTimeout = function() {
170        _this.onChange(function() {
171            setTimeout(_this.onTimeout, 500);
172        });
173    };
174
175    this.onChange = function(callback) {
176        if (_this.running) {
177            _this.runningCall = true;
178            return;
179        }
180        _this.running = true;
181
182        if (_this.INPUT.value != _this.oldValue && _this.INPUT.value != _this.startText) {
183            _this.oldValue = _this.INPUT.value;
184            if (_this.INPUT.value.length >= _this.arParams.MIN_QUERY_LEN) {
185                _this.cache_key = _this.arParams.INPUT_ID + '|' + _this.INPUT.value;
186                if (_this.cache[_this.cache_key] == null) {
187                    if (_this.WAIT) {
188                        var pos                  = BX.pos(_this.INPUT);
189                        var height               = (pos.bottom - pos.top) - 2;
190                        _this.WAIT.style.top     = (pos.top + 1) + 'px';
191                        _this.WAIT.style.height  = height + 'px';
192                        _this.WAIT.style.width   = height + 'px';
193                        _this.WAIT.style.left    = (pos.right - height + 2) + 'px';
194                        _this.WAIT.style.display = 'block';
195                    }
196
197                    BX.ajax.post(
198                        _this.arParams.AJAX_PAGE,
199                        {
200                            'ajax_call': 'y',
201                            'INPUT_ID':  _this.arParams.INPUT_ID,
202                            'q':         _this.INPUT.value,
203                            'l':         _this.arParams.MIN_QUERY_LEN
204                        },
205                        function(result) {
206                            _this.cache[_this.cache_key] = result;
207                            _this.ShowResult(result);
208                            _this.currentRow = -1;
209                            _this.EnableMouseEvents();
210                            if (_this.WAIT)
211                                _this.WAIT.style.display = 'none';
212                            if (!!callback)
213                                callback();
214                            _this.running = false;
215                            if (_this.runningCall) {
216                                _this.runningCall = false;
217                                _this.onChange();
218                            }
219                        }
220                    );
221                    return;
222                } else {
223                    _this.ShowResult(_this.cache[_this.cache_key]);
224                    _this.currentRow = -1;
225                    _this.EnableMouseEvents();
226                }
227            } else {
228                _this.RESULT.style.display = 'none';
229                _this.currentRow           = -1;
230                _this.UnSelectAll();
231            }
232        }
233        if (!!callback)
234            callback();
235        _this.running = false;
236    };
237
238    this.onScroll = function() {
239        if (BX.type.isElementNode(_this.RESULT)
240            && _this.RESULT.style.display !== 'none'
241            && _this.RESULT.innerHTML !== ''
242        ) {
243            _this.adjustResultNode();
244        }
245    };
246
247    this.UnSelectAll = function() {
248        var tbl = BX.findChild(_this.RESULT, {'tag': 'table', 'class': 'title-search-result'}, true);
249        if (tbl) {
250            var cnt = tbl.rows.length;
251            for (var i = 0; i < cnt; i++)
252                tbl.rows[i].className = '';
253        }
254    };
255
256    this.EnableMouseEvents = function() {
257        var tbl = BX.findChild(_this.RESULT, {'tag': 'table', 'class': 'title-search-result'}, true);
258        if (tbl) {
259            var cnt = tbl.rows.length;
260            for (var i = 0; i < cnt; i++)
261                if (!BX.findChild(tbl.rows[i], {'class': 'title-search-separator'}, true)) {
262                    tbl.rows[i].id          = 'row_' + i;
263                    tbl.rows[i].onmouseover = function(e) {
264                        if (_this.currentRow != this.id.substr(4)) {
265                            _this.UnSelectAll();
266                            this.className   = 'title-search-selected';
267                            _this.currentRow = this.id.substr(4);
268                        }
269                    };
270                    tbl.rows[i].onmouseout  = function(e) {
271                        this.className   = '';
272                        _this.currentRow = -1;
273                    };
274                }
275        }
276    };
277
278    this.onFocusLost = function(hide) {
279        setTimeout(function() {
280            _this.RESULT.style.display = 'none';
281        }, 250);
282    };
283
284    /**
285     * скрывает результаты поиска при клике вне области
286     */
287    this.onClickOut = () => {
288        setTimeout(function() {
289            $('.js-search-result').removeClass('active');
290        }, 250);
291    }
292
293    this.onFocusGain = function() {
294        if (_this.RESULT.innerHTML.length) {
295            _this.ShowResult();
296            $('.js-search-result').html('');
297        } else {
298            $('.js-search-result').addClass('active');
299        }
300
301    };
302
303    this.onKeyDown = function(e) {
304        if (!e)
305            e = window.event;
306
307        if (_this.RESULT.style.display == 'block') {
308            if (_this.onKeyPress(e.keyCode))
309                return BX.PreventDefault(e);
310        }
311    };
312
313    this.adjustResultNode = function() {
314        if (!(BX.type.isElementNode(_this.RESULT)
315            && BX.type.isElementNode(_this.CONTAINER))
316        ) {
317            return {top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0};
318        }
319
320        var pos = BX.pos(_this.CONTAINER);
321
322        _this.RESULT.style.position = 'absolute';
323        _this.RESULT.style.top      = (pos.bottom + 2) + 'px';
324        _this.RESULT.style.left     = pos.left + 'px';
325        _this.RESULT.style.width    = pos.width + 'px';
326
327        return pos;
328    };
329
330    this._onContainerLayoutChange = function() {
331        if (BX.type.isElementNode(_this.RESULT)
332            && _this.RESULT.style.display !== 'none'
333            && _this.RESULT.innerHTML !== ''
334        ) {
335            _this.adjustResultNode();
336        }
337    };
338    this.Init                     = function() {
339        this.CONTAINER = document.getElementById(this.arParams.CONTAINER_ID);
340        BX.addCustomEvent(this.CONTAINER, 'OnNodeLayoutChange', this._onContainerLayoutChange);
341
342        this.RESULT           = document.body.appendChild(document.createElement('DIV'));
343        this.RESULT.className = 'title-search-result';
344        this.INPUT            = document.getElementById(this.arParams.INPUT_ID);
345        this.startText        = this.oldValue = this.INPUT.value;
346        BX.bind(this.INPUT, 'focus', function() {
347            _this.onFocusGain()
348        });
349        BX.bind(this.INPUT, 'blur', function() {
350            _this.onFocusLost()
351        });
352        BX.bind(document.body, 'click', (e) => {
353            if (!e.target.closest('.header__search')) {
354                _this.onClickOut()
355            }
356        })
357        BX.bind(document.querySelector('.header-menu'), 'mousemove', () => {
358            if (this.CONTAINER.querySelector('.js-search-result')?.classList.contains('active')) {
359                document.body.click();
360                this.INPUT.blur();
361            }
362        })
363
364        this.INPUT.onkeydown = this.onKeyDown;
365
366        if (this.arParams.WAIT_IMAGE) {
367            this.WAIT                       = document.body.appendChild(document.createElement('DIV'));
368            this.WAIT.style.backgroundImage = 'url(\'' + this.arParams.WAIT_IMAGE + '\')';
369            if (!BX.browser.IsIE())
370                this.WAIT.style.backgroundRepeat = 'none';
371            this.WAIT.style.display  = 'none';
372            this.WAIT.style.position = 'absolute';
373            this.WAIT.style.zIndex   = '1100';
374        }
375
376        BX.bind(this.INPUT, 'bxchange', function() {
377            _this.onChange()
378        });
379
380        var fixedParent = BX.findParent(this.CONTAINER, BX.is_fixed);
381        if (BX.type.isElementNode(fixedParent)) {
382            BX.bind(window, 'scroll', BX.throttle(this.onScroll, 100, this));
383        }
384    };
385    BX.ready(function() {
386        /* if($('.js-search-result').html() !=''){
387            $('.js-search-header').click(function () {
388                $('.js-search-result').addClass('active');
389            });
390        } */
391    });
392    BX.ready(function() {
393        _this.Init(arParams)
394    });
395}
396
397window.JCTitleSearch = JCTitleSearch;
398
399function search_slider() {
400    $('.search-slider').slick({
401        lazyLoad: 'ondemand',      
402        dots:           false,
403        infinite:       false,
404        speed:          600,
405        slidesToShow:   3.5,
406        slidesToScroll: 3,
407        arrows:         true,
408        draggable:      false,
409        appendArrows:   $('.search__slide_nav2'),
410        prevArrow:      '<div class="slick-prev slick-arrow icons"><div class="nav_prev"><svg class="icon"><use xlink:href="#chevron-left"></use></svg</div></div>',
411        nextArrow:      '<div class="slick-next slick-arrow icons"><div class="nav_next"><svg class="icon"><use xlink:href="#chevron-right"></use></svg</div></div>',
412        responsive:     [
413            {
414                breakpoint: 1280,
415                settings:   {
416                    arrows:         true,
417                    fade:           false,
418                    infinite:       false,
419                    draggable:      true,
420                    slidesToShow:   3.1,
421                    slidesToScroll: 1
422                }
423            },
424            {
425                breakpoint: 960,
426                settings:   {
427                    arrows:         true,
428                    fade:           false,
429                    infinite:       false,
430                    draggable:      true,
431                    slidesToShow:   2.1,
432                    slidesToScroll: 1
433                }
434            },
435            {
436                breakpoint: 480,
437                settings:   {
438                    arrows:         false,
439                    fade:           false,
440                    infinite:       false,
441                    draggable:      true,
442                    slidesToShow:   2.1,
443                    slidesToScroll: 1
444                }
445            }
446        ]
447    });
448}