https://club-ihtiolog.ru/o-klube/shema-territorii/assets/map.script.js?162342548520232

1function ready() {
2
3    var mapItemsList = $(".item-map[id *= 'item-']");
4    var activeYellowItem = $(".yellow-item[id *= 'item-yellow-']");
5    var activeMapItem = null;
6    var unactiveMapItem = null;
7    var focusedItem = null;
8    var clickFocusItem = null;
9    var clickFocusLink = null;
10    var oldClick = null;
11
12    var standalone = window.navigator.standalone,
13        userAgent = window.navigator.userAgent.toLowerCase(),
14        safari = /safari/.test( userAgent ),
15        ios = /iphone|ipod|ipad/.test( userAgent );
16
17    //Функция открытия объекта на карте
18    function showMapItemCard(item){
19        leftItemPos = item[0].getBoundingClientRect().left + pageXOffset;
20        topItemPos = item[0].getBoundingClientRect().top + pageYOffset;
21        var SvgPos = $('.map-svg-view')[0].getBoundingClientRect();
22
23        var cardItem = $(".map-item-popup[data-item-id = '"+ item.attr('data-item-id') +"']");
24
25        if(getComputedStyle(document.querySelector('.map-svg-mobile')).display == "none") {
26            cardItem.removeClass('map-item-card-hidden');
27
28            if ((SvgPos.right + pageXOffset) - (item[0].getBoundingClientRect().right + pageXOffset) < 400) {
29                cardItem.css('left', "" + (leftItemPos - 40) + "px") ;
30            } else {
31                cardItem.css('left', "" + (leftItemPos + 350) + "px") ;
32            }
33
34            if((item[0].getBoundingClientRect().top + pageXOffset) - (SvgPos.top + pageXOffset) < 300){
35                cardItem.css('top', "" + (topItemPos - 160) + "px");
36            }
37            else{
38                cardItem.css('top', "" + (topItemPos - 300) + "px");
39            }
40        }
41        else if(getComputedStyle(document.querySelector('.map-svg-mobile')).display == "block"){
42            var hcard = (document.body.scrollWidth)/(2.0)+120;
43
44            cardItem.css('left', "" + hcard + "px");
45            cardItem.css('top', "" + (SvgPos.bottom + pageYOffset + 40) + "px");
46
47
48            cardItem.removeClass('map-item-card-hidden');
49        }
50    }
51
52    //Функция закрытия карточки объекта на карте
53    function disableMapItemCard(card){
54        card.addClass('map-item-card-hidden');
55    }
56
57    //Функция старта зума элемента на карте
58    function zoomMapItem(item) {
59        item.removeClass('map-item-shown');
60        item.addClass('map-item-none');
61
62        $("[id = 'item-yellow-" + item.attr('data-item-id')).removeClass('map-item-none');
63        $("[id = 'item-yellow-" + item.attr('data-item-id')).removeClass('ex-map-item-none');
64        $("[id = 'item-yellow-" + item.attr('data-item-id')).addClass('map-item-shown');
65        $("[data-link-id = '" + item.attr('data-item-id')).addClass('map-link-outer-change-color');
66
67        if(window.panZoom != null){
68      //      window.panZoom.zoom(2);
69        }
70    }
71
72    //Функция завершения зума элемента на карте
73    function endZoomMapItem(item) {
74        item.removeClass('map-item-shown');
75        item.addClass('map-item-none-animate');
76        item.addClass('ex-map-item-none');
77
78        $("[id = 'item-" + item.attr('data-item-id')).removeClass('map-item-none');
79        $("[id = 'item-" + item.attr('data-item-id')).addClass('map-item-shown');
80        $("[data-link-id = '" + item.attr('data-item-id')).removeClass('map-link-outer-change-color');
81    }
82
83    //============================================ События наведения =======================================================
84
85
86
87    //Обработка события наведения на название объекта в списке
88
89    $(".map-link").on('mouseenter', function() {
90        unactiveMapItem = $("[id = 'item-" + $(this).attr('data-link-id') + "']");
91        zoomMapItem(unactiveMapItem);
92        focusedItem = $('.yellow-item.map-item-shown');
93
94    })
95
96    //Обработка события снятия указателя мыши с объекта в списке
97
98    $(".map-link").on('mouseleave', function() {
99        activeMapItem = $("[id = 'item-yellow-" + $(this).attr('data-link-id') + "']");
100
101        if (clickFocusItem == null || activeMapItem[0] != clickFocusItem[0]) {
102            endZoomMapItem(activeMapItem);
103        }
104
105        focusedItem = null;
106    });
107
108    //============================================ События нажатия ==================================================
109    if ($(window).width() <= 768) {
110        // console.log('clickFocusItem');
111
112        $('.yellow-item').on("click", function (e) {

113            clickFocusItem = $(this);
114            console.log(clickFocusItem);
115            disableMapItemCard($(".map-item-popup[data-item-id = '" + clickFocusItem.attr('data-item-id') + "']"));
116            endZoomMapItem(clickFocusItem);
117            zoomMapItem($(this));
118
119            if ($('.card-popup-form-' + clickFocusItem.attr('data-item-id')) != null) {
120                $('.card-popup-form-' + clickFocusItem.attr('data-item-id')).addClass('map-card-tab-form-hidden');
121                $(".map-card-submit-button-2.map-card-button[data-item-id='" + clickFocusItem.attr('data-item-id') + "']").removeClass('map-fake-btn-hidden');
122                $(".map-card-submit-button-2.map-card-button[data-item-id='" + clickFocusItem.attr('data-item-id') + "']").css('dispay','');
123            }
124            clickFocusItem = $(".yellow-item[data-item-id = '" + $(this).attr('data-item-id') + "']");
125            focusedItem = $(".yellow-item[data-item-id = '" + $(this).attr('data-item-id') + "']");
126
127            showMapItemCard($(".yellow-item[data-item-id = '" + $(this).attr('data-item-id') + "']"));
128            clickFocusLink = $("[data-link-id = '" + $(this).attr('data-item-id') + "']");
129        });
130    }
131    
132    if( ios ) {
133        if (!standalone && safari) {
134            $.each(mapItemsList, function () {
135                $(this).on("click", function () {
136                    if (clickFocusItem != null && clickFocusItem != $(".yellow-item[data-item-id = '" + $(this).attr('data-item-id') + "']")) {

137                        disableMapItemCard($(".map-item-popup[data-item-id = '" + clickFocusItem.attr('data-item-id') + "']"));
138                        endZoomMapItem(clickFocusItem);
139                        zoomMapItem($(this));
140
141                        if ($('.card-popup-form-' + clickFocusItem.attr('data-item-id')) != null) {
142                            $('.card-popup-form-' + clickFocusItem.attr('data-item-id')).addClass('map-card-tab-form-hidden');
143                            $(".map-card-submit-button-2.map-card-button[data-item-id='" + clickFocusItem.attr('data-item-id') + "']").removeClass('map-fake-btn-hidden');
144                            $(".map-card-submit-button-2.map-card-button[data-item-id='" + clickFocusItem.attr('data-item-id') + "']").css('dispay','');
145                        }
146                        clickFocusItem = $(".yellow-item[data-item-id = '" + $(this).attr('data-item-id') + "']");
147                        focusedItem = $(".yellow-item[data-item-id = '" + $(this).attr('data-item-id') + "']");
148
149                        showMapItemCard($(".yellow-item[data-item-id = '" + $(this).attr('data-item-id') + "']"));
150                        clickFocusLink = $("[data-link-id = '" + $(this).attr('data-item-id') + "']");
151
152                    } else if (clickFocusItem != $(".yellow-item[data-item-id = '" + $(this).attr('data-item-id') + "']")) {
153                        clickFocusItem = $(".yellow-item[data-item-id = '" + $(this).attr('data-item-id') + "']");
154                        focusedItem = $(".yellow-item[data-item-id = '" + $(this).attr('data-item-id') + "']");
155                        clickFocusLink = $("[data-link-id = '" + $(this).attr('data-item-id') + "']");
156
157                        showMapItemCard($(".yellow-item[data-item-id = '" + $(this).attr('data-item-id') + "']"));
158                        zoomMapItem($(this));
159                    }
160                });
161            });
162
163            //Обработка нажатия на svg изображение, отличное от объектов карты
164            $("image[id = 'image0']").on('click', function () {
165                if (focusedItem != clickFocusItem && clickFocusItem != null) {

166                    disableMapItemCard($(".map-item-popup[data-item-id = '" + clickFocusItem.attr('data-item-id') + "']"));
167                    endZoomMapItem($('.map-item-shown.yellow-item'));
168                    if ($('.card-popup-form-' + clickFocusItem.attr('data-item-id')) != null) {
169                        $('.card-popup-form-' + clickFocusItem.attr('data-item-id')).addClass('map-card-tab-form-hidden');
170                        $(".map-card-submit-button-2.map-card-button[data-item-id='" + clickFocusItem.attr('data-item-id') + "']").removeClass('map-fake-btn-hidden');
171                        $(".map-card-submit-button-2.map-card-button[data-item-id='" + clickFocusItem.attr('data-item-id') + "']").css('display','');
172                    }
173                    focusedItem = null;
174                    clickFocusItem = null;
175                }
176            });
177        }
178    }
179    else{
180        $.each(activeYellowItem,function () {
181            $(this).on("click", function() {
182                
183                if (clickFocusItem != null && clickFocusItem.attr('data-item-id') != $(this).attr('data-item-id')) {

184                    disableMapItemCard($(".map-item-popup[data-item-id = '"+ clickFocusItem.attr('data-item-id') +"']"));
185                    endZoomMapItem(clickFocusItem);
186
187                    if($('.card-popup-form-' + clickFocusItem.attr('data-item-id')) != null) {
188                        $('.card-popup-form-' + clickFocusItem.attr('data-item-id')).addClass('map-card-tab-form-hidden');
189                        $(".map-card-submit-button-2.map-card-button[data-item-id='" + clickFocusItem.attr('data-item-id') + "']").removeClass('map-fake-btn-hidden');
190                        $(".map-card-submit-button-2.map-card-button[data-item-id='" + clickFocusItem.attr('data-item-id') + "']").css('display', '');
191                    }
192                    clickFocusItem  = $(this);
193                    focusedItem     = $(this);
194
195                    showMapItemCard($(this));
196                    clickFocusLink  = $("[data-link-id = '" + $(this).attr('data-item-id') + "']");
197
198                }
199                else if(clickFocusItem == null){
200                    clickFocusItem  = $(this);
201                    focusedItem     = $(this);
202                    clickFocusLink  = $("[data-link-id = '" + $(this).attr('data-item-id') + "']");
203
204                    showMapItemCard($(this));
205                }
206            });
207        });
208
209        //Обработка нажатия на svg изображение, отличное от объектов карты
210        $("image[id = 'image0']").on('click', function() {
211            if (focusedItem != clickFocusItem && clickFocusItem!= null) {

212                disableMapItemCard($(".map-item-popup[data-item-id = '" + clickFocusItem.attr('data-item-id') + "']"));
213                endZoomMapItem($('.map-item-shown.yellow-item'));
214                if ($('.card-popup-form-' + clickFocusItem.attr('data-item-id')) != null) {
215                    $('.card-popup-form-' + clickFocusItem.attr('data-item-id')).addClass('map-card-tab-form-hidden');
216                    $(".map-card-submit-button-2.map-card-button[data-item-id='" + clickFocusItem.attr('data-item-id') + "']").removeClass('map-fake-btn-hidden');
217                    $(".map-card-submit-button-2.map-card-button[data-item-id='" + clickFocusItem.attr('data-item-id') + "']").css('display', '');
218                }
219                focusedItem     = null;
220                clickFocusItem  = null;
221            }
222        });
223
224        //Обработка события наведения мыши на объект на карте
225        mapItemsList.on('mouseenter', function() {
226          var items = $('.item-map[data-item-id='+$(this).attr('data-item-id')+']');
227          items.each(function( index, value ) {
228            zoomMapItem($(value));
229          });
230
231
232            focusedItem = $('.yellow-item.map-item-shown');
233        });
234
235        //Обработка события снятия мыши с объекта на карте
236        activeYellowItem.on('mouseleave', function() {
237            if (clickFocusItem != null && clickFocusItem.attr('data-item-id') != $(this).attr('data-item-id')) {
238                console.log("mouseleave");
239                endZoomMapItem($(this));
240            }
241
242            $.each(activeYellowItem, function() {
243                if(clickFocusItem == null || clickFocusItem.attr('data-item-id') != $(this).attr('data-item-id'))
244                {
245                    endZoomMapItem($(this))
246                };
247            })
248            // $.each(activeYellowItem, function() {
249            //     if(clickFocusItem == null || clickFocusItem[0] != this)
250            //     {
251            //         endZoomMapItem($(this))
252            //     };
253            // })
254            focusedItem = null;
255        });
256    }
257
258    //Обработка события нажатия на объект карты в списке
259    $.each($(".map-link"), function() {
260        $(this).on('click', function (e) {
261            oldClick = clickFocusLink;
262            clickFocusLink = $(this);
263
264            if (oldClick == null) {
265                clickFocusItem = focusedItem = $("[id = 'item-yellow-" + clickFocusLink.attr('data-link-id') + "']");
266                clickFocusLink = $(this);
267                oldClick = $(this);
268				if (window.matchMedia("(min-width: 769px)").matches) {
269            		showMapItemCard(clickFocusItem);
270				} else {
271
272                    var el = document.querySelector("[id = 'item-yellow-" + clickFocusLink.attr('data-link-id') + "']");
273                    var adjust = (document.documentElement.clientWidth/2 - el.getBoundingClientRect().left);
274
275                    const view = document.getElementsByClassName('svg-pan-zoom_viewport')[0];
276                    const viewcont = document.getElementsByClassName('map-svg-view')[0];
277                    const elTop = parseInt(el.getBoundingClientRect().top);
278                    const viewcontTop = parseInt(viewcont.getBoundingClientRect().top);
279                    const viewcontHeight = parseInt(viewcont.clientHeight);
280                    var adjustY = viewcontHeight/2 - (elTop - viewcontTop);
281
282                    const viewStyle = window.getComputedStyle(view);
283                    const viewMatrix = viewStyle.transform || viewStyle.webkitTransform || viewStyle.mozTransform;
284                    const viewMatrixValues = viewMatrix.match(/matrix.*\((.+)\)/)[1].split(', ');
285                    const viewMatrixValuesZ = viewMatrixValues[3];
286                    const viewMatrixValuesX = viewMatrixValues[4];
287                    const viewMatrixValuesY = viewMatrixValues[5];
288
289                    var viewMatrixValuesYchange = parseInt(viewMatrixValuesY) + parseInt(adjustY);
290                    var viewMatrixValuesXchange = parseInt(viewMatrixValuesX) + parseInt(adjust);
291                    view.style.transform = "matrix("+viewMatrixValuesZ+", 0, 0, "+viewMatrixValuesZ+", "+viewMatrixValuesXchange+", "+viewMatrixValuesYchange+")";
292
293					if(window.panZoom != null){
294						window.panZoom.zoom(2);
295					}
296                    $(window).scrollTop( 200 );
297
298				}
299            }
300            else if (clickFocusLink != oldClick && oldClick != null) {
301

302                clickFocusItem  = $("[id = 'item-yellow-" + $(this).attr('data-link-id') + "']");
303                focusedItem     = $("[id = 'item-" + $(this).attr('data-link-id') + "']");
304
305                endZoomMapItem($("[id = 'item-yellow-" + oldClick.attr('data-link-id') + "']"));
306				if (window.matchMedia("(min-width: 769px)").matches) {
307                	zoomMapItem(focusedItem);
308				} else {
309					if(window.panZoom != null){
310						window.panZoom.zoom(2);
311					}
312				}
313
314                clickFocusLink  = $(this);
315
316                disableMapItemCard($(".map-item-popup[data-item-id = '" + oldClick.attr('data-link-id') + "']"));
317                if($('.card-popup-form-' + oldClick.attr('data-link-id')) != null) {
318                    $('.card-popup-form-' + oldClick.attr('data-link-id')).addClass('map-card-tab-form-hidden');
319                    $(".map-card-submit-button-2.map-card-button[data-item-id='" + oldClick.attr('data-link-id') + "']").removeClass('map-fake-btn-hidden');
320                    $(".map-card-submit-button-2.map-card-button[data-item-id='" + oldClick.attr('data-link-id') + "']").css('display', '');
321                }
322
323				if (window.matchMedia("(min-width: 769px)").matches) {
324                	showMapItemCard(clickFocusItem);
325				} else {
326
327                    var el = document.querySelector("[id = 'item-yellow-" + clickFocusLink.attr('data-link-id') + "']");
328                    var adjust = (document.documentElement.clientWidth/2 - el.getBoundingClientRect().left);
329
330                    const view = document.getElementsByClassName('svg-pan-zoom_viewport')[0];
331                    const viewcont = document.getElementsByClassName('map-svg-view')[0];
332                    const elTop = parseInt(el.getBoundingClientRect().top);
333                    const viewcontTop = parseInt(viewcont.getBoundingClientRect().top);
334                    const viewcontHeight = parseInt(viewcont.clientHeight);
335                    var adjustY = viewcontHeight/2 - (elTop - viewcontTop);
336
337                    const viewStyle = window.getComputedStyle(view);
338                    const viewMatrix = viewStyle.transform || viewStyle.webkitTransform || viewStyle.mozTransform;
339                    const viewMatrixValues = viewMatrix.match(/matrix.*\((.+)\)/)[1].split(', ');
340                    const viewMatrixValuesZ = viewMatrixValues[3];
341                    const viewMatrixValuesX = viewMatrixValues[4];
342                    const viewMatrixValuesY = viewMatrixValues[5];
343
344                    var viewMatrixValuesYchange = parseInt(viewMatrixValuesY) + parseInt(adjustY);
345                    var viewMatrixValuesXchange = parseInt(viewMatrixValuesX) + parseInt(adjust);
346                    view.style.transform = "matrix("+viewMatrixValuesZ+", 0, 0, "+viewMatrixValuesZ+", "+viewMatrixValuesXchange+", "+viewMatrixValuesYchange+")";
347
348					if(window.panZoom != null){
349						window.panZoom.zoom(2);
350					}
351                    $(window).scrollTop( 200 );
352				}
353
354            }
355            return false;
356        })
357
358    });
359
360    //Обработка нажатия на кнопку закрытия карточки объекта
361    $.each($('.hide-map-card-simb'), function() {
362        $(this).on('click', function() {
363            endZoomMapItem($("[id = 'item-yellow-" + $(this).attr('data-item-id') + "']"));
364            $(".map-item-popup[data-item-id = '" + $(this).attr('data-item-id') + "']").addClass('map-item-card-hidden');
365            if($('.card-popup-form-' + $(this).attr('data-item-id')) != null) {
366                $('.card-popup-form-' + $(this).attr('data-item-id')).addClass('map-card-tab-form-hidden');
367                $(".map-card-submit-button-2.map-card-button[data-item-id='" + $(this).attr('data-item-id') + "']").removeClass('map-fake-btn-hidden');
368                $(".map-card-submit-button-2.map-card-button[data-item-id='" + $(this).attr('data-item-id') + "']").prev().css('display','');
369            }
370            clickFocusItem  = null;
371            focusedItem     = null;
372            clickFocusLink  = null;
373
374            return false;
375        })
376    });
377
378    //Обработка нажатия на кновку отображения формы подачи заявки
379    $.each($('.map-card-submit-button-2.map-card-button'), function() {
380        $(this).on('click', function(){
381            $('.card-popup-form-' + $(this).attr('data-item-id')).removeClass('map-card-tab-form-hidden');
382            $(this).addClass('map-fake-btn-hidden');
383            $(this).prev().css('display', 'block');
384            return false;

385        })
386    });
387}
388
389document.addEventListener("DOMContentLoaded", ready);