https://mi.by/local/templates/mi/js/shop.js?17381248079952

1document.addEventListener('DOMContentLoaded', function () {
2   const mapShopRow = document.querySelector('.shop-list');
3   const tabsMapShop = mapShopRow?.querySelectorAll('.tabs__shop-list');
4   var blockForMaps = document.querySelector(".shop-ymaps");
5   const allMapsID = blockForMaps?.id;
6   const allMapsData = blockForMaps?.dataset.points;
7
8   var shopListFilter = document.querySelector('.shop-list__filter');
9   let cityVariants = document.querySelector('.shop-variants');
10   var filterSearch = cityVariants?.querySelector('.search');
11   var currentCityVariant = document.querySelector('.shop-variants__title div');
12   var shopFilterLocations = shopListFilter?.querySelector('.locations');
13   var searchItems = shopListFilter?.querySelectorAll('.location');
14
15   var locationsAll = shopFilterLocations?.querySelectorAll('.location__radio');
16   var shopListItem = document.querySelectorAll('.shop-list__table-item');
17
18
19   function getOrderLocation(list, items) {
20      if (list) {
21         list.addEventListener('click', function (event) {
22            let target = event.target;
23
24            if (target.tagName !== 'SPAN') return false;
25
26            let filterClass = target.dataset['city'];
27            let labelLocation = target.closest('.location');
28            let valueLocation = labelLocation.querySelector('input').value;
29
30
31            items.forEach(item => {
32               item.classList.remove('hide');
33               if (item.dataset['table'] != filterClass && filterClass !== 'all') {
34                  item.classList.add('hide');
35               }
36            })
37
38            if (blockForMaps && !blockForMaps.closest('.hidden')) {
39               ymaps.ready(() => {
40                  initMap(blockForMaps);
41               });
42               if (filterClass == 'all') {
43                  blockForMaps.id = allMapsID;
44                  blockForMaps.dataset.points = allMapsData;
45                  initMap(blockForMaps);
46               } else if (filterClass != 'all') {
47
48                  let dropLocationSity = document.querySelector(`[data-table=${filterClass}]`);
49                  let allPointSity = dropLocationSity.querySelectorAll('.j-btn-shop');
50
51                  let arrayPointsSity = new Array();
52
53                  if (allPointSity.length > 0) {
54                     if (allPointSity.length == 1) {
55
56                        blockForMaps.id = filterClass;
57                        blockForMaps.dataset.points = allPointSity[0].dataset.points;
58                        initMap(blockForMaps);
59                     } else {
60                        for (let key of allPointSity) {
61                           let objPoints = key.dataset.points;
62                           arrayPointsSity.push(objPoints.slice(1, -1))
63                        }
64
65                        blockForMaps.id = filterClass;
66                        blockForMaps.dataset.points = `[${arrayPointsSity}]`;
67                        initMap(blockForMaps);
68
69                     }
70                  }
71               }
72            }
73
74            cityVariants.classList.remove('open');
75
76            currentCityVariant.textContent = valueLocation;
77         })
78      }
79
80   }
81
82   tabsMapShop?.forEach(shop => {
83      let btnChange = shop.querySelector('.tabs__map');
84      let panelShop = shop.querySelector('.panel-point-shop');
85      let panelMap = shop.querySelector('.panel-point-maps');
86
87      btnChange?.addEventListener('click', (e) => {
88         e.preventDefault();
89         btnChange.classList.toggle('show-map');
90
91         if (btnChange.classList.contains('show-map')) {
92            btnChange.innerHTML = `
93                   <svg class="icon-list" width="21" height="16">
94                     <use xlink:href="/local/templates/mi/img/icons/sprite.svg#list-location"></use>
95                   </svg>
96                     Посмотреть списком
97                   `;
98
99
100            ymaps.ready(() => {
101               initMap(blockForMaps);
102            });
103
104         } else {
105            btnChange.innerHTML = `
106                   <svg class="icon-map" width="17" height="22">
107                     <use xlink:href="/local/templates/mi/img/icons/sprite.svg#point"></use>
108                   </svg>
109                   Посмотреть на карте
110                   `;
111         }
112
113         panelShop.classList.toggle('hidden');
114         panelMap.classList.toggle('hidden');
115
116      })
117   })
118
119   let shopListLocation = document.querySelectorAll('.shop-list__table-location');
120
121   shopListLocation?.forEach(item => {
122
123      let btnOpenItem = item.querySelector('.shop-address__button');
124      let itemTime = item.querySelector('.shop-time');
125      let itemPoints = item.querySelector('.shop-points');
126
127      let adressShopItem = btnOpenItem.parentElement;
128      adressShopItem.addEventListener('click', event => {
129
130         item.classList.contains('open')
131            ? item.classList.remove('open')
132            : item.classList.add('open');
133
134         if (!item.classList.contains('open')) {
135            itemTime?.classList.add('no-visible');
136            itemPoints?.classList.add('no-visible');
137         } else {
138            itemTime?.classList.remove('no-visible');
139            itemPoints?.classList.remove('no-visible');
140         }
141      });
142
143   });
144
145
146
147
148   // function getLocationFilter() {
149   //    shopFilterLocations?.addEventListener('click', function (event) {
150   //       let target = event.target;
151
152   //       if (target.tagName !== 'SPAN') return false;
153
154   //       let filterClass = target.dataset['city'];
155   //       let labelLocation = target.closest('.location');
156   //       let valueLocation = labelLocation.querySelector('input').value;
157
158
159   //       shopListItem.forEach(item => {
160   //          item.classList.remove('hide');
161   //          if (item.dataset['table'] != filterClass && filterClass !== 'all') {
162   //             item.classList.add('hide');
163   //          }
164   //       })
165
166
167
168   //       cityVariants.classList.remove('open');
169
170   //       currentCityVariant.textContent = valueLocation;
171   //    })
172   // }
173
174   // getLocationFilter();
175
176   radioCityVariants(cityVariants);
177
178   getOrderLocation(shopFilterLocations, shopListItem);
179
180   filterSearch?.addEventListener("input", function () {
181      searchTrigger(this, searchItems)
182   })
183
184   document.addEventListener("click", (e) => {
185      let target = e.target;
186      let its_menuFilter = target == cityVariants || cityVariants?.contains(target);
187
188      let cityVariants_is_active = cityVariants?.classList.contains("open");
189
190      if (!its_menuFilter && cityVariants_is_active) {
191         cityVariants.classList.remove('open')
192      }
193   });
194
195   if (blockForMaps && !blockForMaps.closest('.hidden')) {
196      ymaps.ready(() => {
197         initMap(blockForMaps);
198      });
199
200      if (document.querySelector("#delivery-pickup-check")) {
201         document.querySelector("#delivery-pickup-check").addEventListener('click', () => {
202            ymaps.ready(() => {
203               initMap(blockForMaps);
204            });
205         })
206      }
207
208      let maps = document.querySelectorAll(".j-btn-shop");
209
210      if (maps.length > 0) {
211         ymaps.ready(() => {
212            maps.forEach((map) => {
213               map.addEventListener('click', (event) => {
214                  let target = event.target;
215                  blockForMaps.id = map.id;
216                  blockForMaps.dataset.points = map.dataset.points;
217
218                  initMap(blockForMaps);
219               });
220            })
221         });
222      }
223   }
224
225
226});
227
228
229function initMap(map) {
230   const points = map.dataset.points ? JSON.parse(map.dataset.points) : [];
231   const center = points.length > 0 ? calcMapCenter(points) : { lat: 53.908340, lng: 27.549256 };
232
233   if (typeof myMap !== "undefined") {
234      myMap.destroy()
235   }
236   myMap = new ymaps.Map(map.id, {
237      center: [center.lat, center.lng],
238      zoom: 15,
239      controls: []
240   });
241
242   if (points.length > 0) {

243      points.forEach(point => {
244         const placemark = new ymaps.Placemark([point.lat, point.lng], {
245            balloonContent: `
246            <div class="map-balloon">
247               <div class="map-balloon__title">${point.name}</div>
248               <div class="map-balloon__content">
249                  <div class="map-balloon__item">
250                     ${point.description}
251                  </div>
252               </div>
253            </div>
254             `,
255
256         }, {
257            iconLayout: 'default#image',
258            iconImageHref: `${map.dataset.image}`,
259            iconImageSize: [32, 42],
260            iconImageOffset: [-16, -42]
261         });
262
263         myMap.geoObjects.add(placemark);
264
265      })
266   }
267
268   // если точек больше 1, пересчитать zoom
269   if (points.length > 1) {
270      myMap.setBounds(myMap.geoObjects.getBounds(), {
271         checkZoomRange: true,
272         zoomMargin: 50
273      });
274   }
275
276   myMap.controls.add(new ymaps.control.ZoomControl({ options: { position: { right: 10, top: 50 } } }));
277}
278
279function calcMapCenter(points) {
280   let maxLat = Math.max.apply(Math, points.map(function (p) {
281      return p.lat;
282   })),
283      minLat = Math.min.apply(Math, points.map(function (p) {
284         return p.lat;
285      })),
286      maxLng = Math.max.apply(Math, points.map(function (p) {
287         return p.lng;
288      })),
289      minLng = Math.min.apply(Math, points.map(function (p) {
290         return p.lng;
291      }));
292
293   return { lat: (maxLat + minLat) / 2, lng: (maxLng + minLng) / 2 };
294}
295
296
297$(document).ready(function(){
298	$('#bx-soa-total .open_description').on('click', function(){
299	  $(this).toggleClass('active')
300	  $('#bx-soa-total .hidden_description').toggleClass('active');
301	})
302});