Андрей Ларионов / Renttorg_laravel

Download as
Browse Code »

Commit 357df98e451691610e9a6b3ebbe628f7a35aa5aa

Authored by Андрей Ларионов
1 parent b18fdfbaf2
Exists in master

Баг с каталогами

Showing 6 changed files with 107 additions and 162 deletions Inline Diff

database/migrations/2023_03_01_072712_create_areas_table.php
Diff comments   View file @ 357df98
1 <?php 1 <?php
2 2
3 use Illuminate\Database\Migrations\Migration; 3 use Illuminate\Database\Migrations\Migration;
4 use Illuminate\Database\Schema\Blueprint; 4 use Illuminate\Database\Schema\Blueprint;
5 use Illuminate\Support\Facades\Schema; 5 use Illuminate\Support\Facades\Schema;
6 6
7 return new class extends Migration 7 return new class extends Migration
8 { 8 {
9 /** 9 /**
10 * Run the migrations. 10 * Run the migrations.
11 * 11 *
12 * @return void 12 * @return void
13 */ 13 */
14 public function up() 14 public function up()
15 { 15 {
16 Schema::create('areas', function (Blueprint $table) { 16 Schema::create('areas', function (Blueprint $table) {
17 $table->id(); 17 $table->id();
18 $table->string('name_area', 255)->nullable(); 18 $table->string('name_area', 255)->nullable();
19 //$table->string('slug', 255)->unique()->nullable(); 19 //$table->string('slug', 255)->unique()->nullable();
20 $table->text('description')->nullable(); 20 $table->text('description')->nullable();
21 $table->string('map_coord')->default(''); 21 $table->string('map_coord')->default('');
22 $table->integer('coord_x')->default(0); 22 $table->float('coord_x')->default(0);
23 $table->integer('coord_y')->default(0); 23 $table->float('coord_y')->default(0);
24 $table->string('foto_main', 255)->nullable(); 24 $table->string('foto_main', 255)->nullable();
25 $table->timestamps(); 25 $table->timestamps();
26 }); 26 });
27 } 27 }
28 28
29 /** 29 /**
30 * Reverse the migrations. 30 * Reverse the migrations.
31 * 31 *
32 * @return void 32 * @return void
33 */ 33 */
34 public function down() 34 public function down()
35 { 35 {
36 Schema::dropIfExists('areas'); 36 Schema::dropIfExists('areas');
37 } 37 }
38 }; 38 };
39 39
1 // управляющий класс App с методом init(), в котором собраны все используемые методы с комментариями о том, что конкретно делает каждый метод 1 // управляющий класс App с методом init(), в котором собраны все используемые методы с комментариями о том, что конкретно делает каждый метод
2 2
3 class App { 3 class App {
4 4
5 constructor() { 5 constructor() {
6 this.patternPhone = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/; // рег. выражение для поля 'телефон'; 6 this.patternPhone = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/; // рег. выражение для поля 'телефон';
7 this.patternEmail = /^[a-zA-Z0-9._%+-\.]+@[a-z0-9.-]+\.[a-z]{2,}$/i; // рег. выражение для поля 'электронная почта'; 7 this.patternEmail = /^[a-zA-Z0-9._%+-\.]+@[a-z0-9.-]+\.[a-z]{2,}$/i; // рег. выражение для поля 'электронная почта';
8 } 8 }
9 9
10 init() { 10 init() {
11 11
12 console.log('init'); 12 console.log('init');
13 13
14 this.stickyHeader(); // липкий хедер; 14 this.stickyHeader(); // липкий хедер;
15 this.controlBurgerMenu(); // бургер-меню; 15 this.controlBurgerMenu(); // бургер-меню;
16 this.smoothScroll(); // плавный скролл к якорю (smooth scroll); 16 this.smoothScroll(); // плавный скролл к якорю (smooth scroll);
17 this.scrollUp(); // кнопка наверх; 17 this.scrollUp(); // кнопка наверх;
18 this.addToFavorites(); // добавить в избранное (звёздочка); 18 this.addToFavorites(); // добавить в избранное (звёздочка);
19 this.initTypicalSlider(); // типовые слайдеры; 19 this.initTypicalSlider(); // типовые слайдеры;
20 this.initPartnerslSlider(); // слайдер с партнёрами; 20 this.initPartnerslSlider(); // слайдер с партнёрами;
21 this.controlFilters(); // фильтры на главном экране; 21 this.controlFilters(); // фильтры на главном экране;
22 this.controlPopups(); // открытие/закрытие поп-апов; 22 this.controlPopups(); // открытие/закрытие поп-апов;
23 this.controlContactUsPopup(); // открытие/закрытие поп-апа 'обратный звонок'; 23 this.controlContactUsPopup(); // открытие/закрытие поп-апа 'обратный звонок';
24 24
25 this.sendForm('.js_popup_feedback_form', '[data-popup="success"]'); // отправка формы в поп-апе обратной связи; 25 this.sendForm('.js_popup_feedback_form', '[data-popup="success"]'); // отправка формы в поп-апе обратной связи;
26 this.sendForm('.js_popup_viewing_form', '[data-popup="success"]'); // отправка формы в поп-апе 'записаться на просмотр'; 26 this.sendForm('.js_popup_viewing_form', '[data-popup="success"]'); // отправка формы в поп-апе 'записаться на просмотр';
27 this.sendForm('.js_footer_feedback_form', '[data-popup="success"]'); // отправка формы в футере; 27 this.sendForm('.js_footer_feedback_form', '[data-popup="success"]'); // отправка формы в футере;
28 this.sendForm('.js_contacts_form', '.js_contacts_success'); // отправка формы на странице контакты; 28 this.sendForm('.js_contacts_form', '.js_contacts_success'); // отправка формы на странице контакты;
29 this.sendForm('.js_popup_sending_form_', '[data-popup="success"]'); 29 this.sendForm('.js_popup_sending_form_', '[data-popup="success"]');
30 //this.sendOffer(); //отправка предложения по e-mail; 30 //this.sendOffer(); //отправка предложения по e-mail;
31 31
32 //this.setGeneralMap(); // карта на странице карт; 32 this.setGeneralMap(); // карта на странице карт;
33 this.setComplexMap('complex-map', [55.726591050908745, 37.57244549999999], 'ЖК Садовые кварталы'); // карта на странице 'ЖК'; 33 this.setComplexMap('complex-map', [55.726591050908745, 37.57244549999999], 'ЖК Садовые кварталы'); // карта на странице 'ЖК';
34 this.setComplexMap('offer-map', [55.70851106903402, 37.65864349999999], 'Аренда торгового помещения 321,6 м2'); // карта на странице 'Предложение'; 34 this.setComplexMap('offer-map', [55.70851106903402, 37.65864349999999], 'Аренда торгового помещения 321,6 м2'); // карта на странице 'Предложение';
35 this.setCatalogSorts(); // сортировка на странице 'каталог'; 35 this.setCatalogSorts(); // сортировка на странице 'каталог';
36 this.initIntroSlider(); // слайдер на странице жк и на странице предложения; 36 this.initIntroSlider(); // слайдер на странице жк и на странице предложения;
37 this.setTabs('.js_offer_side_tab', '.js_offer_side_item'); // табы с планами объекат и этажа на странице предложения; 37 this.setTabs('.js_offer_side_tab', '.js_offer_side_item'); // табы с планами объекат и этажа на странице предложения;
38 this.setTabs('.js_offer_side_popup_tab', '.js_offer_side_popup_item'); // табы с планами объекат и этажа в поп-апе на странице предложения; 38 this.setTabs('.js_offer_side_popup_tab', '.js_offer_side_popup_item'); // табы с планами объекат и этажа в поп-апе на странице предложения;
39 this.sontrolOfferSidePopup(); // логика открытия нужного таба при открытии поп-апа с планами объекат и этажа на странице предложения; 39 this.sontrolOfferSidePopup(); // логика открытия нужного таба при открытии поп-апа с планами объекат и этажа на странице предложения;
40 this.setCustomGallery(); // галлерея; 40 this.setCustomGallery(); // галлерея;
41 this.setCookies() // куки; 41 this.setCookies() // куки;
42 this.setFooterSpoilers() // аккордеон в футере; 42 this.setFooterSpoilers() // аккордеон в футере;
43 43
44 } 44 }
45 45
46 // фиксация <body> 46 // фиксация <body>
47 fixBodyPosition() { 47 fixBodyPosition() {
48 48
49 setTimeout(function () { 49 setTimeout(function () {
50 // ставим необходимую задержку, чтобы не было «конфликта» в случае, если функция фиксации вызывается сразу после расфиксации (расфиксация отменяет действия расфиксации из-за одновременного действия) 50 // ставим необходимую задержку, чтобы не было «конфликта» в случае, если функция фиксации вызывается сразу после расфиксации (расфиксация отменяет действия расфиксации из-за одновременного действия)
51 51
52 if (!document.body.hasAttribute('data-body-scroll-fix')) { 52 if (!document.body.hasAttribute('data-body-scroll-fix')) {
53 53
54 // получаем позицию прокрутки 54 // получаем позицию прокрутки
55 let scrollPosition = window.pageYOffset || document.documentElement.scrollTop; 55 let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
56 56
57 // ставим нужные стили 57 // ставим нужные стили
58 document.body.setAttribute('data-body-scroll-fix', scrollPosition); // Cтавим атрибут со значением прокрутки 58 document.body.setAttribute('data-body-scroll-fix', scrollPosition); // Cтавим атрибут со значением прокрутки
59 document.body.style.overflow = 'hidden'; 59 document.body.style.overflow = 'hidden';
60 document.body.style.position = 'fixed'; 60 document.body.style.position = 'fixed';
61 document.body.style.top = '-' + scrollPosition + 'px'; 61 document.body.style.top = '-' + scrollPosition + 'px';
62 document.body.style.left = '0'; 62 document.body.style.left = '0';
63 document.body.style.width = '100%'; 63 document.body.style.width = '100%';
64 64
65 if (window.innerWidth >= 1200) { 65 if (window.innerWidth >= 1200) {
66 document.body.style.paddingRight = '8px'; 66 document.body.style.paddingRight = '8px';
67 } 67 }
68 } 68 }
69 69
70 }, 15); // можно задержку ещё меньше, но работает хорошо именно с этим значением на всех устройствах и браузерах 70 }, 15); // можно задержку ещё меньше, но работает хорошо именно с этим значением на всех устройствах и браузерах
71 71
72 } 72 }
73 73
74 74
75 // расфиксация <body> 75 // расфиксация <body>
76 unfixBodyPosition() { 76 unfixBodyPosition() {
77 77
78 if (document.body.hasAttribute('data-body-scroll-fix')) { 78 if (document.body.hasAttribute('data-body-scroll-fix')) {
79 79
80 // получаем позицию прокрутки из атрибута 80 // получаем позицию прокрутки из атрибута
81 let scrollPosition = document.body.getAttribute('data-body-scroll-fix'); 81 let scrollPosition = document.body.getAttribute('data-body-scroll-fix');
82 82
83 // удаляем атрибут 83 // удаляем атрибут
84 document.body.removeAttribute('data-body-scroll-fix'); 84 document.body.removeAttribute('data-body-scroll-fix');
85 85
86 // удаляем ненужные стили 86 // удаляем ненужные стили
87 document.body.style.overflow = ''; 87 document.body.style.overflow = '';
88 document.body.style.position = ''; 88 document.body.style.position = '';
89 document.body.style.top = ''; 89 document.body.style.top = '';
90 document.body.style.left = ''; 90 document.body.style.left = '';
91 document.body.style.width = ''; 91 document.body.style.width = '';
92 document.body.style.paddingRight = ''; 92 document.body.style.paddingRight = '';
93 93
94 // прокручиваем страницу на полученное из атрибута значение 94 // прокручиваем страницу на полученное из атрибута значение
95 window.scroll(0, scrollPosition); 95 window.scroll(0, scrollPosition);
96 96
97 } 97 }
98 98
99 } 99 }
100 100
101 101
102 // бургер-меню 102 // бургер-меню
103 controlBurgerMenu() { 103 controlBurgerMenu() {
104 104
105 const headerBurger = document.querySelector('.js_header_burger'); 105 const headerBurger = document.querySelector('.js_header_burger');
106 106
107 if (headerBurger) { 107 if (headerBurger) {
108 108
109 const menu = document.querySelector('.js_menu'); 109 const menu = document.querySelector('.js_menu');
110 const menuClose = menu.querySelector('.js_menu_close'); 110 const menuClose = menu.querySelector('.js_menu_close');
111 111
112 headerBurger.addEventListener('click', () => { 112 headerBurger.addEventListener('click', () => {
113 menu.classList.add('active'); 113 menu.classList.add('active');
114 this.fixBodyPosition(); 114 this.fixBodyPosition();
115 }); 115 });
116 116
117 menu.addEventListener('click', (e) => { 117 menu.addEventListener('click', (e) => {
118 118
119 if (e.target == menu) { 119 if (e.target == menu) {
120 menu.classList.remove('active'); 120 menu.classList.remove('active');
121 this.unfixBodyPosition(); 121 this.unfixBodyPosition();
122 } 122 }
123 123
124 }); 124 });
125 125
126 menuClose.addEventListener('click', () => { 126 menuClose.addEventListener('click', () => {
127 menu.classList.remove('active'); 127 menu.classList.remove('active');
128 this.unfixBodyPosition(); 128 this.unfixBodyPosition();
129 }); 129 });
130 130
131 } 131 }
132 132
133 } 133 }
134 134
135 135
136 // липкий хедер 136 // липкий хедер
137 stickyHeader() { 137 stickyHeader() {
138 138
139 const header = document.querySelector('.js_header'); 139 const header = document.querySelector('.js_header');
140 140
141 if (header) { 141 if (header) {
142 142
143 window.addEventListener('scroll', () => { 143 window.addEventListener('scroll', () => {
144 144
145 if (window.scrollY > 200) { 145 if (window.scrollY > 200) {
146 header.classList.add('fixed'); 146 header.classList.add('fixed');
147 } else { 147 } else {
148 header.classList.remove('fixed'); 148 header.classList.remove('fixed');
149 } 149 }
150 150
151 }); 151 });
152 152
153 }; 153 };
154 154
155 } 155 }
156 156
157 157
158 // плавный скролл к якорю (smooth scroll) 158 // плавный скролл к якорю (smooth scroll)
159 smoothScroll() { 159 smoothScroll() {
160 160
161 const smoothLinks = document.querySelectorAll('.js_smooth_link'); 161 const smoothLinks = document.querySelectorAll('.js_smooth_link');
162 162
163 if (smoothLinks.length) { 163 if (smoothLinks.length) {
164 164
165 smoothLinks.forEach(link => { 165 smoothLinks.forEach(link => {
166 166
167 link.addEventListener('click', function (e) { 167 link.addEventListener('click', function (e) {
168 168
169 e.preventDefault(); 169 e.preventDefault();
170 170
171 let href = this.getAttribute('href').substring(1); 171 let href = this.getAttribute('href').substring(1);
172 172
173 const scrollTarget = document.getElementById(href); 173 const scrollTarget = document.getElementById(href);
174 174
175 // const topOffset = document.querySelector('.header').offsetHeight; 175 // const topOffset = document.querySelector('.header').offsetHeight;
176 const topOffset = 0; // если не нужен отступ сверху 176 const topOffset = 0; // если не нужен отступ сверху
177 const elementPosition = scrollTarget.getBoundingClientRect().top; 177 const elementPosition = scrollTarget.getBoundingClientRect().top;
178 const offsetPosition = elementPosition - topOffset; 178 const offsetPosition = elementPosition - topOffset;
179 179
180 window.scrollBy({ 180 window.scrollBy({
181 top: offsetPosition, 181 top: offsetPosition,
182 behavior: 'smooth' 182 behavior: 'smooth'
183 }); 183 });
184 184
185 }); 185 });
186 186
187 }); 187 });
188 188
189 } 189 }
190 190
191 } 191 }
192 192
193 193
194 // кнопка наверх 194 // кнопка наверх
195 scrollUp() { 195 scrollUp() {
196 196
197 const toTopBtn = document.querySelector('.js_btn_up'); 197 const toTopBtn = document.querySelector('.js_btn_up');
198 198
199 if (toTopBtn) { 199 if (toTopBtn) {
200 200
201 toTopBtn.addEventListener('click', function () { 201 toTopBtn.addEventListener('click', function () {
202 202
203 window.scrollTo({ 203 window.scrollTo({
204 top: 0, 204 top: 0,
205 behavior: 'smooth' 205 behavior: 'smooth'
206 }); 206 });
207 207
208 }); 208 });
209 209
210 } 210 }
211 211
212 } 212 }
213 213
214 214
215 // добавить в избранное (звёздочка) 215 // добавить в избранное (звёздочка)
216 addToFavorites() { 216 addToFavorites() {
217 217
218 const cardFavorites = document.querySelectorAll('.js_card_favorites'); 218 const cardFavorites = document.querySelectorAll('.js_card_favorites');
219 219
220 if (cardFavorites.length) { 220 if (cardFavorites.length) {
221 221
222 cardFavorites.forEach(item => { 222 cardFavorites.forEach(item => {
223 223
224 item.addEventListener('click', (e) => { 224 item.addEventListener('click', (e) => {
225 e.preventDefault(); 225 e.preventDefault();
226 item.classList.toggle('active'); 226 item.classList.toggle('active');
227 }); 227 });
228 228
229 }); 229 });
230 230
231 } 231 }
232 232
233 } 233 }
234 234
235 235
236 // типовые слайдеры 236 // типовые слайдеры
237 initTypicalSlider() { 237 initTypicalSlider() {
238 238
239 const slidersWraps = document.querySelectorAll('.slider__wrap'); 239 const slidersWraps = document.querySelectorAll('.slider__wrap');
240 240
241 if (slidersWraps.length) { 241 if (slidersWraps.length) {
242 242
243 slidersWraps.forEach(wrap => { 243 slidersWraps.forEach(wrap => {
244 244
245 const slider = wrap.querySelector('.swiper'); 245 const slider = wrap.querySelector('.swiper');
246 const prev = wrap.querySelector('.swiper-button-prev'); 246 const prev = wrap.querySelector('.swiper-button-prev');
247 const next = wrap.querySelector('.swiper-button-next'); 247 const next = wrap.querySelector('.swiper-button-next');
248 const pagination = wrap.querySelector('.swiper-pagination'); 248 const pagination = wrap.querySelector('.swiper-pagination');
249 249
250 let swiper1 = new Swiper(slider, { 250 let swiper1 = new Swiper(slider, {
251 navigation: { 251 navigation: {
252 nextEl: next, 252 nextEl: next,
253 prevEl: prev, 253 prevEl: prev,
254 }, 254 },
255 pagination: { 255 pagination: {
256 el: pagination, 256 el: pagination,
257 clickable: true, 257 clickable: true,
258 }, 258 },
259 slidesPerView: 1, 259 slidesPerView: 1,
260 spaceBetween: 20, 260 spaceBetween: 20,
261 observer: true, 261 observer: true,
262 observeParents: true, 262 observeParents: true,
263 observeSlideChildren: true, 263 observeSlideChildren: true,
264 breakpoints: { 264 breakpoints: {
265 480: { 265 480: {
266 slidesPerView: 1.5, 266 slidesPerView: 1.5,
267 }, 267 },
268 640: { 268 640: {
269 slidesPerView: 2, 269 slidesPerView: 2,
270 }, 270 },
271 780: { 271 780: {
272 slidesPerView: 2.5, 272 slidesPerView: 2.5,
273 }, 273 },
274 920: { 274 920: {
275 slidesPerView: 3, 275 slidesPerView: 3,
276 }, 276 },
277 1024: { 277 1024: {
278 slidesPerView: 3.4 278 slidesPerView: 3.4
279 }, 279 },
280 1200: { 280 1200: {
281 slidesPerView: 4, 281 slidesPerView: 4,
282 } 282 }
283 } 283 }
284 }); 284 });
285 285
286 }); 286 });
287 287
288 } 288 }
289 289
290 } 290 }
291 291
292 292
293 // метод, делающий число удобночитаемым (добавляет пробел справа через каждые 3 цифры) 293 // метод, делающий число удобночитаемым (добавляет пробел справа через каждые 3 цифры)
294 prettify(num) { 294 prettify(num) {
295 const withoutSpace = num.replace(/[^\d]/g, ''); //убирает все символы; 295 const withoutSpace = num.replace(/[^\d]/g, ''); //убирает все символы;
296 return withoutSpace.replace(/(?!^)(?=(?:\d{3})+(?:\.|$))/gm, ' '); //ставит пробелы; 296 return withoutSpace.replace(/(?!^)(?=(?:\d{3})+(?:\.|$))/gm, ' '); //ставит пробелы;
297 } 297 }
298 298
299 299
300 // фильтры на главном экране 300 // фильтры на главном экране
301 controlFilters() { 301 controlFilters() {
302 302
303 const heroFilters = document.querySelectorAll('.js_hero_filter'); 303 const heroFilters = document.querySelectorAll('.js_hero_filter');
304 const heroSearchBtns = document.querySelectorAll('.js_hero_search_btn'); 304 const heroSearchBtns = document.querySelectorAll('.js_hero_search_btn');
305 305
306 if (heroFilters.length) { 306 if (heroFilters.length) {
307 307
308 heroFilters.forEach(filter => { 308 heroFilters.forEach(filter => {
309 309
310 const heroFilterInput = filter.querySelector('.js_hero_filter_input'); 310 const heroFilterInput = filter.querySelector('.js_hero_filter_input');
311 const heroFilterCurrent = filter.querySelector('.js_hero_filter_current'); 311 const heroFilterCurrent = filter.querySelector('.js_hero_filter_current');
312 const heroFilterItems = filter.querySelectorAll('.hero-filter__item'); 312 const heroFilterItems = filter.querySelectorAll('.hero-filter__item');
313 const heroFilterFields = filter.querySelectorAll('.js_hero_filter_field'); 313 const heroFilterFields = filter.querySelectorAll('.js_hero_filter_field');
314 const heroFilterFrom = filter.querySelector('.js_hero_filter_from'); 314 const heroFilterFrom = filter.querySelector('.js_hero_filter_from');
315 const heroFilterTo = filter.querySelector('.js_hero_filter_to'); 315 const heroFilterTo = filter.querySelector('.js_hero_filter_to');
316 const heroFilterReset = filter.querySelector('.js_hero_filter_reset'); 316 const heroFilterReset = filter.querySelector('.js_hero_filter_reset');
317 317
318 heroFilterCurrent.addEventListener('click', () => { 318 heroFilterCurrent.addEventListener('click', () => {
319 319
320 if (filter.classList.contains('active')) { 320 if (filter.classList.contains('active')) {
321 321
322 filter.classList.remove('active'); 322 filter.classList.remove('active');
323 323
324 heroSearchBtns.forEach(btn => { 324 heroSearchBtns.forEach(btn => {
325 btn.disabled = false; 325 btn.disabled = false;
326 }); 326 });
327 327
328 } else { 328 } else {
329 329
330 heroFilters.forEach(filter => { 330 heroFilters.forEach(filter => {
331 filter.classList.remove('active'); 331 filter.classList.remove('active');
332 }); 332 });
333 333
334 filter.classList.add('active'); 334 filter.classList.add('active');
335 335
336 heroSearchBtns.forEach(btn => { 336 heroSearchBtns.forEach(btn => {
337 btn.disabled = true; 337 btn.disabled = true;
338 }); 338 });
339 339
340 } 340 }
341 341
342 }); 342 });
343 343
344 if (heroFilterItems.length) { 344 if (heroFilterItems.length) {
345 345
346 heroFilterItems.forEach(item => { 346 heroFilterItems.forEach(item => {
347 347
348 item.addEventListener('click', () => { 348 item.addEventListener('click', () => {
349 349
350 heroFilterCurrent.textContent = item.textContent; 350 heroFilterCurrent.textContent = item.textContent;
351 heroFilterInput.value = item.dataset.val; 351 heroFilterInput.value = item.dataset.val;
352 filter.classList.remove('active'); 352 filter.classList.remove('active');
353 353
354 heroSearchBtns.forEach(btn => { 354 heroSearchBtns.forEach(btn => {
355 btn.disabled = false; 355 btn.disabled = false;
356 }); 356 });
357 357
358 }); 358 });
359 359
360 }); 360 });
361 361
362 } 362 }
363 363
364 if (heroFilterFields.length) { 364 if (heroFilterFields.length) {
365 365
366 const heroFilterMin = heroFilterFrom.dataset.min; 366 const heroFilterMin = heroFilterFrom.dataset.min;
367 const heroFilterMax = heroFilterTo.dataset.max; 367 const heroFilterMax = heroFilterTo.dataset.max;
368 368
369 let heroFilterFromVal; 369 let heroFilterFromVal;
370 let heroFilterToVal; 370 let heroFilterToVal;
371 371
372 heroFilterFields.forEach(field => { 372 heroFilterFields.forEach(field => {
373 373
374 field.addEventListener('input', () => { 374 field.addEventListener('input', () => {
375 375
376 field.value = this.prettify(field.value); 376 field.value = this.prettify(field.value);
377 377
378 heroFilterReset.classList.remove('active'); 378 heroFilterReset.classList.remove('active');
379 379
380 heroFilterFields.forEach(field => { 380 heroFilterFields.forEach(field => {
381 381
382 if (field.value != "") { 382 if (field.value != "") {
383 heroFilterReset.classList.add('active'); 383 heroFilterReset.classList.add('active');
384 } 384 }
385 385
386 }); 386 });
387 387
388 }); 388 });
389 389
390 }); 390 });
391 391
392 heroFilterFrom.addEventListener('change', () => { 392 heroFilterFrom.addEventListener('change', () => {
393 393
394 heroFilterFromVal = +heroFilterFrom.value.replace(/\s/g, ''); 394 heroFilterFromVal = +heroFilterFrom.value.replace(/\s/g, '');
395 heroFilterToVal = +heroFilterTo.value.replace(/\s/g, ''); 395 heroFilterToVal = +heroFilterTo.value.replace(/\s/g, '');
396 396
397 if (heroFilterToVal != '' && heroFilterFromVal > heroFilterToVal) { 397 if (heroFilterToVal != '' && heroFilterFromVal > heroFilterToVal) {
398 398
399 heroFilterFrom.value = heroFilterTo.value; 399 heroFilterFrom.value = heroFilterTo.value;
400 400
401 } else if (heroFilterFromVal < +heroFilterMin) { 401 } else if (heroFilterFromVal < +heroFilterMin) {
402 402
403 heroFilterFrom.value = this.prettify(heroFilterMin); 403 heroFilterFrom.value = this.prettify(heroFilterMin);
404 404
405 } else if (heroFilterFromVal > +heroFilterMax) { 405 } else if (heroFilterFromVal > +heroFilterMax) {
406 406
407 heroFilterFrom.value = this.prettify(heroFilterMax); 407 heroFilterFrom.value = this.prettify(heroFilterMax);
408 408
409 } 409 }
410 410
411 }); 411 });
412 412
413 heroFilterTo.addEventListener('change', () => { 413 heroFilterTo.addEventListener('change', () => {
414 414
415 heroFilterFromVal = +heroFilterFrom.value.replace(/\s/g, ''); 415 heroFilterFromVal = +heroFilterFrom.value.replace(/\s/g, '');
416 heroFilterToVal = +heroFilterTo.value.replace(/\s/g, ''); 416 heroFilterToVal = +heroFilterTo.value.replace(/\s/g, '');
417 417
418 if (heroFilterFromVal != '' && heroFilterToVal < heroFilterFromVal) { 418 if (heroFilterFromVal != '' && heroFilterToVal < heroFilterFromVal) {
419 419
420 heroFilterTo.value = heroFilterFrom.value; 420 heroFilterTo.value = heroFilterFrom.value;
421 421
422 } else if (heroFilterToVal < +heroFilterMin) { 422 } else if (heroFilterToVal < +heroFilterMin) {
423 423
424 heroFilterTo.value = this.prettify(heroFilterMax); 424 heroFilterTo.value = this.prettify(heroFilterMax);
425 425
426 } else if (heroFilterToVal > +heroFilterMax) { 426 } else if (heroFilterToVal > +heroFilterMax) {
427 427
428 heroFilterTo.value = this.prettify(heroFilterMax); 428 heroFilterTo.value = this.prettify(heroFilterMax);
429 429
430 } 430 }
431 431
432 }); 432 });
433 433
434 heroFilterReset.addEventListener('click', () => { 434 heroFilterReset.addEventListener('click', () => {
435 435
436 heroFilterFields.forEach(field => { 436 heroFilterFields.forEach(field => {
437 field.value = ''; 437 field.value = '';
438 }); 438 });
439 439
440 heroFilterReset.classList.remove('active'); 440 heroFilterReset.classList.remove('active');
441 441
442 }); 442 });
443 } 443 }
444 444
445 }); 445 });
446 446
447 document.addEventListener('click', (e) => { 447 document.addEventListener('click', (e) => {
448 448
449 if (!e.target.closest('.js_hero_filter_dropdown') && !e.target.closest('.js_hero_filter_current')) { 449 if (!e.target.closest('.js_hero_filter_dropdown') && !e.target.closest('.js_hero_filter_current')) {
450 450
451 heroFilters.forEach(filter => { 451 heroFilters.forEach(filter => {
452 filter.classList.remove('active'); 452 filter.classList.remove('active');
453 }); 453 });
454 454
455 heroSearchBtns.forEach(btn => { 455 heroSearchBtns.forEach(btn => {
456 btn.disabled = false; 456 btn.disabled = false;
457 }); 457 });
458 458
459 } 459 }
460 460
461 }); 461 });
462 462
463 } 463 }
464 464
465 } 465 }
466 466
467 467
468 // открытие/закрытие типовых поп-апов 468 // открытие/закрытие типовых поп-апов
469 controlPopups() { 469 controlPopups() {
470 470
471 const popupShowBtns = document.querySelectorAll('[data-btn]'); 471 const popupShowBtns = document.querySelectorAll('[data-btn]');
472 const popups = document.querySelectorAll('[data-popup]'); 472 const popups = document.querySelectorAll('[data-popup]');
473 473
474 if (popupShowBtns.length) { 474 if (popupShowBtns.length) {
475 475
476 popupShowBtns.forEach(btn => { 476 popupShowBtns.forEach(btn => {
477 477
478 btn.addEventListener('click', (e) => { 478 btn.addEventListener('click', (e) => {
479 479
480 e.preventDefault(); 480 e.preventDefault();
481 481
482 popups.forEach(popup => { 482 popups.forEach(popup => {
483 483
484 popup.classList.remove('active'); // если какойто поп-ап открыт, то закрываем его; 484 popup.classList.remove('active'); // если какойто поп-ап открыт, то закрываем его;
485 this.unfixBodyPosition(); 485 this.unfixBodyPosition();
486 486
487 if (btn.dataset.btn == popup.dataset.popup) { 487 if (btn.dataset.btn == popup.dataset.popup) {
488 popup.classList.add('active'); 488 popup.classList.add('active');
489 this.fixBodyPosition(); 489 this.fixBodyPosition();
490 } 490 }
491 491
492 }); 492 });
493 493
494 494
495 }); 495 });
496 496
497 }); 497 });
498 498
499 popups.forEach(popup => { 499 popups.forEach(popup => {
500 500
501 const popupCloseBtns = popup.querySelectorAll('.js_popup_close'); 501 const popupCloseBtns = popup.querySelectorAll('.js_popup_close');
502 502
503 popupCloseBtns.forEach(btn => { 503 popupCloseBtns.forEach(btn => {
504 504
505 btn.addEventListener('click', (e) => { 505 btn.addEventListener('click', (e) => {
506 e.preventDefault(); 506 e.preventDefault();
507 popup.classList.remove('active'); 507 popup.classList.remove('active');
508 this.unfixBodyPosition(); 508 this.unfixBodyPosition();
509 }); 509 });
510 510
511 }); 511 });
512 512
513 popup.addEventListener('click', (e) => { 513 popup.addEventListener('click', (e) => {
514 514
515 if (e.target == popup) { 515 if (e.target == popup) {
516 516
517 popup.classList.remove('active'); 517 popup.classList.remove('active');
518 this.unfixBodyPosition(); 518 this.unfixBodyPosition();
519 } 519 }
520 520
521 }); 521 });
522 522
523 }); 523 });
524 524
525 } 525 }
526 } 526 }
527 527
528 528
529 // открытие/закрытие поп-апа 'обратный звонок' 529 // открытие/закрытие поп-апа 'обратный звонок'
530 controlContactUsPopup() { 530 controlContactUsPopup() {
531 531
532 const contactUsBtn = document.querySelector('.js_btn_contact_us'); 532 const contactUsBtn = document.querySelector('.js_btn_contact_us');
533 const contactUsPopup = document.querySelector('.js_contact_us'); 533 const contactUsPopup = document.querySelector('.js_contact_us');
534 534
535 if (contactUsPopup) { 535 if (contactUsPopup) {
536 536
537 const contactUsPopupCloseBtns = contactUsPopup.querySelectorAll('.js_contact_us_close'); 537 const contactUsPopupCloseBtns = contactUsPopup.querySelectorAll('.js_contact_us_close');
538 538
539 contactUsBtn.addEventListener('click', (e) => { 539 contactUsBtn.addEventListener('click', (e) => {
540 540
541 e.preventDefault(); 541 e.preventDefault();
542 542
543 if (contactUsPopup.classList.contains('active')) { 543 if (contactUsPopup.classList.contains('active')) {
544 contactUsPopup.classList.remove('active'); 544 contactUsPopup.classList.remove('active');
545 } else { 545 } else {
546 contactUsPopup.classList.add('active'); 546 contactUsPopup.classList.add('active');
547 } 547 }
548 548
549 }); 549 });
550 550
551 contactUsPopupCloseBtns.forEach(btn => { 551 contactUsPopupCloseBtns.forEach(btn => {
552 btn.addEventListener('click', () => { 552 btn.addEventListener('click', () => {
553 contactUsPopup.classList.remove('active'); 553 contactUsPopup.classList.remove('active');
554 }); 554 });
555 }); 555 });
556 556
557 557
558 document.addEventListener('click', (e) => { 558 document.addEventListener('click', (e) => {
559 559
560 if (!e.target.closest('.js_contact_us') && !e.target.closest('.js_btn_contact_us')) { 560 if (!e.target.closest('.js_contact_us') && !e.target.closest('.js_btn_contact_us')) {
561 contactUsPopup.classList.remove('active'); 561 contactUsPopup.classList.remove('active');
562 } 562 }
563 563
564 }); 564 });
565 565
566 } 566 }
567 567
568 } 568 }
569 569
570 570
571 // валидатор форм 571 // валидатор форм
572 validateForm(input) { 572 validateForm(input) {
573 573
574 // функция добавления ошибки 574 // функция добавления ошибки
575 const createError = (text) => { 575 const createError = (text) => {
576 576
577 input.classList.add('error'); 577 input.classList.add('error');
578 input.classList.remove('no-error'); 578 input.classList.remove('no-error');
579 579
580 if (input.closest('label').querySelector('span.error')) { 580 if (input.closest('label').querySelector('span.error')) {
581 input.closest('label').querySelector('span.error').remove(); 581 input.closest('label').querySelector('span.error').remove();
582 input.closest('label').insertAdjacentHTML('beforeend', `<span class="error">${text}</span>`); 582 input.closest('label').insertAdjacentHTML('beforeend', `<span class="error">${text}</span>`);
583 } else { 583 } else {
584 input.closest('label').insertAdjacentHTML('beforeend', `<span class="error">${text}</span>`); 584 input.closest('label').insertAdjacentHTML('beforeend', `<span class="error">${text}</span>`);
585 } 585 }
586 586
587 } 587 }
588 588
589 // функция удаления ошибки 589 // функция удаления ошибки
590 const removeError = () => { 590 const removeError = () => {
591 591
592 input.classList.remove('error'); 592 input.classList.remove('error');
593 input.classList.add('no-error'); 593 input.classList.add('no-error');
594 594
595 if (input.closest('label').querySelector('span.error')) { 595 if (input.closest('label').querySelector('span.error')) {
596 input.closest('label').querySelector('span.error').remove(); 596 input.closest('label').querySelector('span.error').remove();
597 } 597 }
598 598
599 } 599 }
600 600
601 // проверяем на правильность заполнения поля 'Телефон' 601 // проверяем на правильность заполнения поля 'Телефон'
602 if (input.classList.contains('js_input_phone') && input.value == "") { 602 if (input.classList.contains('js_input_phone') && input.value == "") {
603 createError('Заполните, пожалуйста, поле'); 603 createError('Заполните, пожалуйста, поле');
604 } else if (input.classList.contains('js_input_phone') && input.value.search(this.patternPhone) == 0) { 604 } else if (input.classList.contains('js_input_phone') && input.value.search(this.patternPhone) == 0) {
605 removeError(); 605 removeError();
606 } else if (input.classList.contains('js_input_phone')) { 606 } else if (input.classList.contains('js_input_phone')) {
607 createError('Укажите, пожалуйста, корректный телефон'); 607 createError('Укажите, пожалуйста, корректный телефон');
608 } 608 }
609 609
610 // проверяем правильность заполнения поля 'Электронная почта' 610 // проверяем правильность заполнения поля 'Электронная почта'
611 if (input.classList.contains('js_input_email') && input.value == "") { 611 if (input.classList.contains('js_input_email') && input.value == "") {
612 createError('Заполните, пожалуйста, поле'); 612 createError('Заполните, пожалуйста, поле');
613 } else if (input.classList.contains('js_input_email') && input.value.search(this.patternEmail) == 0) { 613 } else if (input.classList.contains('js_input_email') && input.value.search(this.patternEmail) == 0) {
614 removeError(); 614 removeError();
615 } else if (input.classList.contains('js_input_email')) { 615 } else if (input.classList.contains('js_input_email')) {
616 createError('Укажите, пожалуйста, корректный e-mail'); 616 createError('Укажите, пожалуйста, корректный e-mail');
617 } 617 }
618 618
619 } 619 }
620 620
621 621
622 // отправка форм 622 // отправка форм
623 sendForm(formEl, success) { 623 sendForm(formEl, success) {
624 624
625 const form = document.querySelector(formEl); 625 const form = document.querySelector(formEl);
626 626
627 if (form) { 627 if (form) {
628 628
629 form.addEventListener('submit', async (e) => { 629 form.addEventListener('submit', async (e) => {
630 630
631 e.preventDefault(); 631 e.preventDefault();
632 632
633 const formInputs = form.querySelectorAll('input'); 633 const formInputs = form.querySelectorAll('input');
634 const formBtn = form.querySelector('.js_form_btn'); 634 const formBtn = form.querySelector('.js_form_btn');
635 635
636 formInputs.forEach(input => { // перебираем все инпуты в форме; 636 formInputs.forEach(input => { // перебираем все инпуты в форме;
637 637
638 this.validateForm(input); 638 this.validateForm(input);
639 639
640 input.addEventListener('input', () => { 640 input.addEventListener('input', () => {
641 this.validateForm(input); 641 this.validateForm(input);
642 }); 642 });
643 643
644 }); 644 });
645 645
646 if (!form.querySelector('.error')) { //проверяем, чтоб все инпуты прошли валидацию (чтоб не было в форме ни одного элемента с класссом error); 646 if (!form.querySelector('.error')) { //проверяем, чтоб все инпуты прошли валидацию (чтоб не было в форме ни одного элемента с класссом error);
647 647
648 // сюда пишем команды, которые должны сработать после успешной валидации; 648 // сюда пишем команды, которые должны сработать после успешной валидации;
649 649
650 console.log('validate'); 650 console.log('validate');
651 formBtn.classList.add('btn-animate'); 651 formBtn.classList.add('btn-animate');
652 formBtn.disabled = true; 652 formBtn.disabled = true;
653 653
654 const formData = new FormData(form); 654 const formData = new FormData(form);
655 655
656 console.log(...formData); 656 console.log(...formData);
657 657
658 const response = await fetch(e.target.action, { 658 const response = await fetch(e.target.action, {
659 method: e.target.method, 659 method: e.target.method,
660 body: formData 660 body: formData
661 }); 661 });
662 662
663 if (response.ok) { 663 if (response.ok) {
664 664
665 setTimeout(() => { // имитация отправки, когда отправка будет настроена, нужно достать всё из setTimeout() и удалить его; 665 setTimeout(() => { // имитация отправки, когда отправка будет настроена, нужно достать всё из setTimeout() и удалить его;
666 666
667 console.log('Отправлено'); 667 console.log('Отправлено');
668 formBtn.classList.remove('btn-animate'); 668 formBtn.classList.remove('btn-animate');
669 formBtn.disabled = false; 669 formBtn.disabled = false;
670 if (document.querySelector('[data-popup="feedback"]')) { 670 if (document.querySelector('[data-popup="feedback"]')) {
671 document.querySelector('[data-popup="feedback"]').classList.remove('active'); 671 document.querySelector('[data-popup="feedback"]').classList.remove('active');
672 } 672 }
673 if (document.querySelector('[data-popup="viewing"]')) { 673 if (document.querySelector('[data-popup="viewing"]')) {
674 document.querySelector('[data-popup="viewing"]').classList.remove('active'); 674 document.querySelector('[data-popup="viewing"]').classList.remove('active');
675 } 675 }
676 document.querySelector(success).classList.add('active'); 676 document.querySelector(success).classList.add('active');
677 this.fixBodyPosition(); 677 this.fixBodyPosition();
678 form.reset(); 678 form.reset();
679 679
680 formInputs.forEach(input => { 680 formInputs.forEach(input => {
681 input.classList.remove('no-error'); 681 input.classList.remove('no-error');
682 }); 682 });
683 683
684 }, 2000) 684 }, 2000)
685 685
686 } else { 686 } else {
687 formBtn.classList.remove('btn-animate'); 687 formBtn.classList.remove('btn-animate');
688 formBtn.disabled = false; 688 formBtn.disabled = false;
689 alert('Ошибка'); 689 alert('Ошибка');
690 } 690 }
691 691
692 } else { 692 } else {
693 console.log('no-validate'); 693 console.log('no-validate');
694 form.querySelector('.error').focus(); //фокус к полю с ошибкой; 694 form.querySelector('.error').focus(); //фокус к полю с ошибкой;
695 } 695 }
696 696
697 }); 697 });
698 698
699 } 699 }
700 700
701 } 701 }
702 702
703 //отправка предложения по e-mail 703 //отправка предложения по e-mail
704 sendOffer() { 704 sendOffer() {
705 705
706 const form = document.querySelector('.js_popup_sending_form'); 706 const form = document.querySelector('.js_popup_sending_form');
707 707
708 if (form) { 708 if (form) {
709 709
710 form.addEventListener('submit', async (e) => { 710 form.addEventListener('submit', async (e) => {
711 711
712 e.preventDefault(); 712 e.preventDefault();
713 713
714 const formInputs = form.querySelectorAll('input'); 714 const formInputs = form.querySelectorAll('input');
715 const formBtn = form.querySelector('.js_form_btn'); 715 const formBtn = form.querySelector('.js_form_btn');
716 716
717 formInputs.forEach(input => { // перебираем все инпуты в форме; 717 formInputs.forEach(input => { // перебираем все инпуты в форме;
718 718
719 this.validateForm(input); 719 this.validateForm(input);
720 720
721 input.addEventListener('input', () => { 721 input.addEventListener('input', () => {
722 this.validateForm(input); 722 this.validateForm(input);
723 }); 723 });
724 724
725 }); 725 });
726 726
727 if (!form.querySelector('.error')) { //проверяем, чтоб все инпуты прошли валидацию (чтоб не было в форме ни одного элемента с класссом error); 727 if (!form.querySelector('.error')) { //проверяем, чтоб все инпуты прошли валидацию (чтоб не было в форме ни одного элемента с класссом error);
728 728
729 // сюда пишем команды, которые должны сработать после успешной валидации; 729 // сюда пишем команды, которые должны сработать после успешной валидации;
730 730
731 console.log('validate'); 731 console.log('validate');
732 formBtn.classList.add('btn-animate'); 732 formBtn.classList.add('btn-animate');
733 formBtn.disabled = true; 733 formBtn.disabled = true;
734 734
735 const formData = new FormData(form); 735 const formData = new FormData(form);
736 736
737 console.log(...formData); 737 console.log(...formData);
738 738
739 const response = await fetch(e.target.action, { 739 const response = await fetch(e.target.action, {
740 method: e.target.method, 740 method: e.target.method,
741 body: formData 741 body: formData
742 }); 742 });
743 743
744 if (response.ok) { 744 if (response.ok) {
745 745
746 setTimeout(() => { // имитация отправки, когда отправка будет настроена, нужно достать всё из setTimeout() и удалить его; 746 setTimeout(() => { // имитация отправки, когда отправка будет настроена, нужно достать всё из setTimeout() и удалить его;
747 747
748 console.log('Отправлено'); 748 console.log('Отправлено');
749 formBtn.classList.remove('btn-animate'); 749 formBtn.classList.remove('btn-animate');
750 formBtn.disabled = false; 750 formBtn.disabled = false;
751 if (document.querySelector('[data-popup="sending"]')) { 751 if (document.querySelector('[data-popup="sending"]')) {
752 document.querySelector('[data-popup="sending"]').classList.remove('active'); 752 document.querySelector('[data-popup="sending"]').classList.remove('active');
753 } 753 }
754 this.fixBodyPosition(); 754 this.fixBodyPosition();
755 form.reset(); 755 form.reset();
756 756
757 formInputs.forEach(input => { 757 formInputs.forEach(input => {
758 input.classList.remove('no-error'); 758 input.classList.remove('no-error');
759 }); 759 });
760 760
761 }, 2000) 761 }, 2000)
762 762
763 } else { 763 } else {
764 formBtn.classList.remove('btn-animate'); 764 formBtn.classList.remove('btn-animate');
765 formBtn.disabled = false; 765 formBtn.disabled = false;
766 alert('Ошибка'); 766 alert('Ошибка');
767 } 767 }
768 768
769 } else { 769 } else {
770 console.log('no-validate'); 770 console.log('no-validate');
771 form.querySelector('.error').focus(); //фокус к полю с ошибкой; 771 form.querySelector('.error').focus(); //фокус к полю с ошибкой;
772 } 772 }
773 773
774 }); 774 });
775 775
776 } 776 }
777 777
778 } 778 }
779 779
780 780
781 // карта на странице 'ЖК' 781 // карта на странице 'ЖК'
782 setComplexMap(id, coords, caption) { 782 setComplexMap(id, coords, caption) {
783 783
784 if (document.querySelector('#' + id)) { 784 if (document.querySelector('#' + id)) {
785 785
786 // Дождёмся загрузки API и готовности DOM. 786 // Дождёмся загрузки API и готовности DOM.
787 ymaps.ready(init); 787 ymaps.ready(init);
788 788
789 function init() { 789 function init() {
790 const map = new ymaps.Map(id, { 790 const map = new ymaps.Map(id, {
791 // При инициализации карты обязательно нужно указать её центр и коэффициент масштабирования. 791 // При инициализации карты обязательно нужно указать её центр и коэффициент масштабирования.
792 center: coords, 792 center: coords,
793 zoom: 16, 793 zoom: 16,
794 controls: [] 794 controls: []
795 }); 795 });
796 796
797 // Создаём макет содержимого. 797 // Создаём макет содержимого.
798 const MyIconContentLayout = ymaps.templateLayoutFactory.createClass( 798 const MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
799 '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>' 799 '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
800 ); 800 );
801 801
802 // Создание макета содержимого хинта. 802 // Создание макета содержимого хинта.
803 // Макет создается через фабрику макетов с помощью текстового шаблона. 803 // Макет создается через фабрику макетов с помощью текстового шаблона.
804 const HintLayout = ymaps.templateLayoutFactory.createClass("<div class='my-hint'>" + 804 const HintLayout = ymaps.templateLayoutFactory.createClass("<div class='my-hint'>" +
805 "{{ properties.object }}" + "</div>", { 805 "{{ properties.object }}" + "</div>", {
806 // Определяем метод getShape, который 806 // Определяем метод getShape, который
807 // будет возвращать размеры макета хинта. 807 // будет возвращать размеры макета хинта.
808 // Это необходимо для того, чтобы хинт автоматически 808 // Это необходимо для того, чтобы хинт автоматически
809 // сдвигал позицию при выходе за пределы карты. 809 // сдвигал позицию при выходе за пределы карты.
810 getShape: function () { 810 getShape: function () {
811 let el = this.getElement(), 811 let el = this.getElement(),
812 result = null; 812 result = null;
813 if (el) { 813 if (el) {
814 var firstChild = el.firstChild; 814 var firstChild = el.firstChild;
815 result = new ymaps.shape.Rectangle( 815 result = new ymaps.shape.Rectangle(
816 new ymaps.geometry.pixel.Rectangle([ 816 new ymaps.geometry.pixel.Rectangle([
817 [0, 0], 817 [0, 0],
818 [firstChild.offsetWidth, firstChild.offsetHeight] 818 [firstChild.offsetWidth, firstChild.offsetHeight]
819 ]) 819 ])
820 ); 820 );
821 } 821 }
822 return result; 822 return result;
823 } 823 }
824 } 824 }
825 ); 825 );
826 826
827 // метка 827 // метка
828 const placemark = new ymaps.Placemark(coords, { 828 const placemark = new ymaps.Placemark(coords, {
829 // hintContent: caption, 829 // hintContent: caption,
830 // balloonContent: caption, 830 // balloonContent: caption,
831 iconContent: '1', 831 iconContent: '1',
832 // address: caption, 832 // address: caption,
833 object: caption 833 object: caption
834 }, { 834 }, {
835 iconLayout: 'default#imageWithContent', 835 iconLayout: 'default#imageWithContent',
836 iconImageHref: 'images/mark-complex.svg', 836 iconImageHref: 'images/mark-complex.svg',
837 iconImageSize: [52, 67], 837 iconImageSize: [52, 67],
838 iconImageOffset: [-26, -67], 838 iconImageOffset: [-26, -67],
839 iconContentOffset: [0, 17], 839 iconContentOffset: [0, 17],
840 iconContentLayout: MyIconContentLayout, 840 iconContentLayout: MyIconContentLayout,
841 hintLayout: HintLayout 841 hintLayout: HintLayout
842 }); 842 });
843 843
844 map.geoObjects.add(placemark); 844 map.geoObjects.add(placemark);
845 845
846 } 846 }
847 847
848 } 848 }
849 849
850 } 850 }
851 851
852 852
853 // фильтры и сортировка на странице 'каталог' 853 // фильтры и сортировка на странице 'каталог'
854 setCatalogSorts() { 854 setCatalogSorts() {
855 855
856 const sortGroups = document.querySelectorAll('.js_sort_group'); 856 const sortGroups = document.querySelectorAll('.js_sort_group');
857 857
858 if (sortGroups.length) { 858 if (sortGroups.length) {
859 859
860 sortGroups.forEach(group => { 860 sortGroups.forEach(group => {
861 861
862 const sortGroupInput = group.querySelector('.js_sort_group_input'); 862 const sortGroupInput = group.querySelector('.js_sort_group_input');
863 const sortGroupCurrent = group.querySelector('.js_sort_group_current'); 863 const sortGroupCurrent = group.querySelector('.js_sort_group_current');
864 const sortGroupList = group.querySelector('.js_sort_group_list'); 864 const sortGroupList = group.querySelector('.js_sort_group_list');
865 const sortGroupItems = group.querySelectorAll('.js_sort_group_item'); 865 const sortGroupItems = group.querySelectorAll('.js_sort_group_item');
866 866
867 const sendRequest = () => { 867 const sendRequest = () => {
868 868
869 const spinner = document.querySelector('.spinner'); // спиннер; 869 const spinner = document.querySelector('.spinner'); // спиннер;
870 870
871 spinner.classList.add('active'); 871 spinner.classList.add('active');
872 document.body.classList.add('overlay'); 872 document.body.classList.add('overlay');
873 /*this.fixBodyPosition(); 873 /*this.fixBodyPosition();
874 874
875 fetch('test.json') 875 fetch('test.json')
876 .then(response => response.json()) 876 .then(response => response.json())
877 .then(data => { 877 .then(data => {
878 878
879 console.log() 879 console.log()
880 880
881 setTimeout(() => { //имитация ответа сервера 881 setTimeout(() => { //имитация ответа сервера
882 882
883 spinner.classList.remove('active'); 883 spinner.classList.remove('active');
884 document.body.classList.remove('overlay'); 884 document.body.classList.remove('overlay');
885 this.unfixBodyPosition(); 885 this.unfixBodyPosition();
886 886
887 }, 3000); 887 }, 3000);
888 888
889 }) 889 })
890 .catch(err => { 890 .catch(err => {
891 console.log(err); 891 console.log(err);
892 }); 892 });
893 893
894 */ 894 */
895 spinner.classList.remove('active'); 895 spinner.classList.remove('active');
896 document.body.classList.remove('overlay'); 896 document.body.classList.remove('overlay');
897 897
898 898
899 }; 899 };
900 900
901 sortGroupCurrent.addEventListener('click', () => { 901 sortGroupCurrent.addEventListener('click', () => {
902 902
903 if (group.classList.contains('active')) { 903 if (group.classList.contains('active')) {
904 904
905 group.classList.remove('active'); 905 group.classList.remove('active');
906 906
907 } else { 907 } else {
908 908
909 sortGroups.forEach(group => { 909 sortGroups.forEach(group => {
910 group.classList.remove('active'); 910 group.classList.remove('active');
911 }); 911 });
912 912
913 group.classList.add('active'); 913 group.classList.add('active');
914 914
915 } 915 }
916 916
917 }); 917 });
918 918
919 sortGroupItems.forEach(item => { 919 sortGroupItems.forEach(item => {
920 920
921 item.addEventListener('click', () => { 921 item.addEventListener('click', () => {
922 922
923 sortGroupItems.forEach(item => { 923 sortGroupItems.forEach(item => {
924 item.classList.remove('active'); 924 item.classList.remove('active');
925 }); 925 });
926 926
927 item.classList.add('active'); 927 item.classList.add('active');
928 sortGroupCurrent.textContent = item.textContent; 928 sortGroupCurrent.textContent = item.textContent;
929 sortGroupInput.value = item.dataset.val; 929 sortGroupInput.value = item.dataset.val;
930 group.classList.remove('active'); 930 group.classList.remove('active');
931 931
932 sendRequest(); 932 sendRequest();
933 933
934 }); 934 });
935 935
936 }); 936 });
937 937
938 }); 938 });
939 939
940 document.addEventListener('click', (e) => { 940 document.addEventListener('click', (e) => {
941 941
942 if (!e.target.closest('.js_sort_group_list') && !e.target.closest('.js_sort_group_current')) { 942 if (!e.target.closest('.js_sort_group_list') && !e.target.closest('.js_sort_group_current')) {
943 943
944 sortGroups.forEach(group => { 944 sortGroups.forEach(group => {
945 group.classList.remove('active'); 945 group.classList.remove('active');
946 }); 946 });
947 947
948 } 948 }
949 949
950 }); 950 });
951 951
952 } 952 }
953 953
954 } 954 }
955 955
956 956
957 // слайдер на странице жк и на странице предложения 957 // слайдер на странице жк и на странице предложения
958 initIntroSlider() { 958 initIntroSlider() {
959 959
960 let swiper3 = new Swiper('.intro__swiper', { 960 let swiper3 = new Swiper('.intro__swiper', {
961 navigation: { 961 navigation: {
962 nextEl: '.swiper-button-next', 962 nextEl: '.swiper-button-next',
963 prevEl: '.swiper-button-prev', 963 prevEl: '.swiper-button-prev',
964 }, 964 },
965 pagination: { 965 pagination: {
966 el: '.swiper-pagination', 966 el: '.swiper-pagination',
967 clickable: true, 967 clickable: true,
968 }, 968 },
969 slidesPerView: 1.1, 969 slidesPerView: 1.1,
970 spaceBetween: 20, 970 spaceBetween: 20,
971 breakpoints: { 971 breakpoints: {
972 480: { 972 480: {
973 slidesPerView: 1.5, 973 slidesPerView: 1.5,
974 }, 974 },
975 640: { 975 640: {
976 slidesPerView: 1.75, 976 slidesPerView: 1.75,
977 }, 977 },
978 780: { 978 780: {
979 slidesPerView: 2.15, 979 slidesPerView: 2.15,
980 }, 980 },
981 1024: { 981 1024: {
982 slidesPerView: 3.5, 982 slidesPerView: 3.5,
983 }, 983 },
984 1200: { 984 1200: {
985 slidesPerView: 1, 985 slidesPerView: 1,
986 } 986 }
987 } 987 }
988 }); 988 });
989 989
990 } 990 }
991 991
992 992
993 // табы на странице предложения 993 // табы на странице предложения
994 setTabs(tabs, items) { 994 setTabs(tabs, items) {
995 995
996 const offerSideTabs = document.querySelectorAll(tabs); 996 const offerSideTabs = document.querySelectorAll(tabs);
997 const offerSideItems = document.querySelectorAll(items); 997 const offerSideItems = document.querySelectorAll(items);
998 998
999 if (offerSideTabs) { 999 if (offerSideTabs) {
1000 1000
1001 offerSideTabs.forEach(tab => { 1001 offerSideTabs.forEach(tab => {
1002 1002
1003 tab.addEventListener('click', () => { 1003 tab.addEventListener('click', () => {
1004 1004
1005 offerSideTabs.forEach(tab => { 1005 offerSideTabs.forEach(tab => {
1006 tab.classList.remove('active'); 1006 tab.classList.remove('active');
1007 }); 1007 });
1008 1008
1009 tab.classList.add('active'); 1009 tab.classList.add('active');
1010 1010
1011 offerSideItems.forEach(item => { 1011 offerSideItems.forEach(item => {
1012 1012
1013 item.classList.remove('active', 'fade'); 1013 item.classList.remove('active', 'fade');
1014 1014
1015 if (tab.dataset.tab == item.dataset.item) { 1015 if (tab.dataset.tab == item.dataset.item) {
1016 item.classList.add('active', 'fade'); 1016 item.classList.add('active', 'fade');
1017 } 1017 }
1018 1018
1019 }); 1019 });
1020 1020
1021 }); 1021 });
1022 1022
1023 }); 1023 });
1024 1024
1025 } 1025 }
1026 1026
1027 } 1027 }
1028 1028
1029 1029
1030 // логика открытия нужного таба при открытии поп-апа с планами объекат и этажа на странице предложения 1030 // логика открытия нужного таба при открытии поп-апа с планами объекат и этажа на странице предложения
1031 sontrolOfferSidePopup() { 1031 sontrolOfferSidePopup() {
1032 1032
1033 const offerSideItems = document.querySelectorAll('.js_offer_side_item'); 1033 const offerSideItems = document.querySelectorAll('.js_offer_side_item');
1034 const offerSidePopupTabs = document.querySelectorAll('.js_offer_side_popup_tab'); 1034 const offerSidePopupTabs = document.querySelectorAll('.js_offer_side_popup_tab');
1035 const offerSidePopupItems = document.querySelectorAll('.js_offer_side_popup_item'); 1035 const offerSidePopupItems = document.querySelectorAll('.js_offer_side_popup_item');
1036 1036
1037 if (offerSideItems) { 1037 if (offerSideItems) {
1038 1038
1039 offerSideItems.forEach(item => { 1039 offerSideItems.forEach(item => {
1040 1040
1041 const offerSideItemBtn = item.querySelector('.js_offer_side_item_btn'); 1041 const offerSideItemBtn = item.querySelector('.js_offer_side_item_btn');
1042 1042
1043 offerSideItemBtn.addEventListener('click', (e) => { 1043 offerSideItemBtn.addEventListener('click', (e) => {
1044 1044
1045 e.preventDefault(); 1045 e.preventDefault();
1046 1046
1047 offerSidePopupTabs.forEach(tab => { 1047 offerSidePopupTabs.forEach(tab => {
1048 1048
1049 tab.classList.remove('active'); 1049 tab.classList.remove('active');
1050 1050
1051 if (item.dataset.item == tab.dataset.tab) { 1051 if (item.dataset.item == tab.dataset.tab) {
1052 tab.classList.add('active'); 1052 tab.classList.add('active');
1053 } 1053 }
1054 1054
1055 }); 1055 });
1056 1056
1057 offerSidePopupItems.forEach(el => { 1057 offerSidePopupItems.forEach(el => {
1058 1058
1059 el.classList.remove('active', 'fade'); 1059 el.classList.remove('active', 'fade');
1060 1060
1061 if (item.dataset.item == el.dataset.item) { 1061 if (item.dataset.item == el.dataset.item) {
1062 el.classList.add('active', 'fade'); 1062 el.classList.add('active', 'fade');
1063 } 1063 }
1064 1064
1065 }); 1065 });
1066 1066
1067 }); 1067 });
1068 1068
1069 }); 1069 });
1070 1070
1071 } 1071 }
1072 1072
1073 } 1073 }
1074 1074
1075 1075
1076 // галлерея 1076 // галлерея
1077 setCustomGallery() { 1077 setCustomGallery() {
1078 1078
1079 let swiper4 = new Swiper(".img-viewer__thumbs-swiper", { 1079 let swiper4 = new Swiper(".img-viewer__thumbs-swiper", {
1080 slidesPerView: 3, 1080 slidesPerView: 3,
1081 spaceBetween: 8, 1081 spaceBetween: 8,
1082 // freeMode: true, 1082 // freeMode: true,
1083 observer: true, 1083 observer: true,
1084 observeParents: true, 1084 observeParents: true,
1085 observeSlideChildren: true, 1085 observeSlideChildren: true,
1086 breakpoints: { 1086 breakpoints: {
1087 640: { 1087 640: {
1088 spaceBetween: 10, 1088 spaceBetween: 10,
1089 }, 1089 },
1090 }, 1090 },
1091 }); 1091 });
1092 1092
1093 let swiper5 = new Swiper(".img-viewer__slider .swiper", { 1093 let swiper5 = new Swiper(".img-viewer__slider .swiper", {
1094 navigation: { 1094 navigation: {
1095 nextEl: ".img-viewer__slider .swiper-button-next", 1095 nextEl: ".img-viewer__slider .swiper-button-next",
1096 prevEl: ".img-viewer__slider .swiper-button-prev", 1096 prevEl: ".img-viewer__slider .swiper-button-prev",
1097 }, 1097 },
1098 slidesPerView: 1, 1098 slidesPerView: 1,
1099 spaceBetween: 20, 1099 spaceBetween: 20,
1100 thumbs: { 1100 thumbs: {
1101 swiper: swiper4 1101 swiper: swiper4
1102 }, 1102 },
1103 observer: true, 1103 observer: true,
1104 observeParents: true, 1104 observeParents: true,
1105 observeSlideChildren: true, 1105 observeSlideChildren: true,
1106 }); 1106 });
1107 1107
1108 if (document.querySelector('.js_intro_item_btn')) { 1108 if (document.querySelector('.js_intro_item_btn')) {
1109 1109
1110 const imgViewer = document.querySelector('.js_img_viewer'); 1110 const imgViewer = document.querySelector('.js_img_viewer');
1111 const imgViewerCloses = imgViewer.querySelectorAll('.js_img_viewer_close'); 1111 const imgViewerCloses = imgViewer.querySelectorAll('.js_img_viewer_close');
1112 const imgViewerCaption = imgViewer.querySelector('.js_img_viewer_caption'); 1112 const imgViewerCaption = imgViewer.querySelector('.js_img_viewer_caption');
1113 1113
1114 const imgViewerSliderSwiper = imgViewer.querySelector('.js_img_viewer_slider_swiper'); 1114 const imgViewerSliderSwiper = imgViewer.querySelector('.js_img_viewer_slider_swiper');
1115 const imgViewerSliderSwiperWrap = imgViewerSliderSwiper.querySelector('.js_img_viewer_slider_swiper .swiper-wrapper'); 1115 const imgViewerSliderSwiperWrap = imgViewerSliderSwiper.querySelector('.js_img_viewer_slider_swiper .swiper-wrapper');
1116 1116
1117 const imgViewerThumbsSwiper = imgViewer.querySelector('.js_img_viewer_thumbs_swiper'); 1117 const imgViewerThumbsSwiper = imgViewer.querySelector('.js_img_viewer_thumbs_swiper');
1118 const imgViewerThumbsSwiperWrap = imgViewerThumbsSwiper.querySelector('.js_img_viewer_thumbs_swiper .swiper-wrapper'); 1118 const imgViewerThumbsSwiperWrap = imgViewerThumbsSwiper.querySelector('.js_img_viewer_thumbs_swiper .swiper-wrapper');
1119 1119
1120 const introItemBtns = document.querySelectorAll('.js_intro_item_btn'); 1120 const introItemBtns = document.querySelectorAll('.js_intro_item_btn');
1121 1121
1122 introItemBtns.forEach((btn, i) => { 1122 introItemBtns.forEach((btn, i) => {
1123 1123
1124 btn.addEventListener('click', (e) => { 1124 btn.addEventListener('click', (e) => {
1125 1125
1126 e.preventDefault(); 1126 e.preventDefault();
1127 1127
1128 imgViewer.classList.add('active'); 1128 imgViewer.classList.add('active');
1129 this.fixBodyPosition(); 1129 this.fixBodyPosition();
1130 1130
1131 imgViewerSliderSwiperWrap.innerHTML = ''; 1131 imgViewerSliderSwiperWrap.innerHTML = '';
1132 imgViewerThumbsSwiperWrap.innerHTML = ''; 1132 imgViewerThumbsSwiperWrap.innerHTML = '';
1133 imgViewerCaption.textContent = ''; 1133 imgViewerCaption.textContent = '';
1134 1134
1135 1135
1136 introItemBtns.forEach(btn => { 1136 introItemBtns.forEach(btn => {
1137 1137
1138 imgViewerSliderSwiperWrap.insertAdjacentHTML('beforeend', ` 1138 imgViewerSliderSwiperWrap.insertAdjacentHTML('beforeend', `
1139 <div class="swiper-slide"> 1139 <div class="swiper-slide">
1140 <img src="${btn.getAttribute('href')}" alt=""> 1140 <img src="${btn.getAttribute('href')}" alt="">
1141 </div>` 1141 </div>`
1142 ); 1142 );
1143 1143
1144 imgViewerThumbsSwiperWrap.insertAdjacentHTML('beforeend', ` 1144 imgViewerThumbsSwiperWrap.insertAdjacentHTML('beforeend', `
1145 <div class="swiper-slide"> 1145 <div class="swiper-slide">
1146 <img src="${btn.getAttribute('href')}" alt=""> 1146 <img src="${btn.getAttribute('href')}" alt="">
1147 </div>` 1147 </div>`
1148 ); 1148 );
1149 1149
1150 }); 1150 });
1151 1151
1152 swiper4.update(); 1152 swiper4.update();
1153 swiper5.update(); 1153 swiper5.update();
1154 swiper5.slideTo(i); 1154 swiper5.slideTo(i);
1155 imgViewerCaption.textContent = btn.dataset.caption; 1155 imgViewerCaption.textContent = btn.dataset.caption;
1156 1156
1157 }); 1157 });
1158 1158
1159 }); 1159 });
1160 1160
1161 swiper5.on('slideChange', function () { 1161 swiper5.on('slideChange', function () {
1162 imgViewerCaption.textContent = introItemBtns[swiper5.realIndex].dataset.caption; 1162 imgViewerCaption.textContent = introItemBtns[swiper5.realIndex].dataset.caption;
1163 }); 1163 });
1164 1164
1165 imgViewerCloses.forEach(close => { 1165 imgViewerCloses.forEach(close => {
1166 1166
1167 close.addEventListener('click', () => { 1167 close.addEventListener('click', () => {
1168 1168
1169 imgViewer.classList.remove('active'); 1169 imgViewer.classList.remove('active');
1170 this.unfixBodyPosition(); 1170 this.unfixBodyPosition();
1171 1171
1172 }); 1172 });
1173 1173
1174 }); 1174 });
1175 1175
1176 } 1176 }
1177 1177
1178 } 1178 }
1179 1179
1180 1180
1181 // куки 1181 // куки
1182 setCookies() { 1182 setCookies() {
1183 1183
1184 const cookies = document.querySelector('.js_cookies'); 1184 const cookies = document.querySelector('.js_cookies');
1185 const cookiesBtn = document.querySelector('.js_cookies_confirm'); 1185 const cookiesBtn = document.querySelector('.js_cookies_confirm');
1186 const cookiesTrigger = document.querySelector('.js_btn_cookies'); 1186 const cookiesTrigger = document.querySelector('.js_btn_cookies');
1187 1187
1188 if (cookiesTrigger) { 1188 if (cookiesTrigger) {
1189 1189
1190 cookiesTrigger.addEventListener('click', () => { 1190 cookiesTrigger.addEventListener('click', () => {
1191 cookies.classList.add('active'); 1191 cookies.classList.add('active');
1192 }); 1192 });
1193 1193
1194 }; 1194 };
1195 1195
1196 if (cookies) { 1196 if (cookies) {
1197 1197
1198 cookiesBtn.addEventListener('click', () => { 1198 cookiesBtn.addEventListener('click', () => {
1199 cookies.classList.remove('active'); 1199 cookies.classList.remove('active');
1200 }); 1200 });
1201 1201
1202 }; 1202 };
1203 1203
1204 } 1204 }
1205 1205
1206 1206
1207 // карта на странице карт; 1207 // карта на странице карт;
1208 setGeneralMap() { 1208 setGeneralMap() {
1209 /* 1209
1210 if (document.querySelector('#general-map')) { 1210 if (document.querySelector('#general-map')) {
1211 1211
1212 ymaps.ready(init); // Дождёмся загрузки API и готовности DOM; 1212 ymaps.ready(init); // Дождёмся загрузки API и готовности DOM;
1213 1213
1214 function init() { 1214 function init() {
1215 1215
1216 const myMap = new ymaps.Map('general-map', { // Создание экземпляра карты и его привязка к контейнеру с заданным id; 1216 const myMap = new ymaps.Map('general-map', { // Создание экземпляра карты и его привязка к контейнеру с заданным id;
1217 center: [55.752933963675126, 37.52233749962665], // При инициализации карты обязательно нужно указать её центр и коэффициент масштабирования; 1217 center: [55.752933963675126, 37.52233749962665], // При инициализации карты обязательно нужно указать её центр и коэффициент масштабирования;
1218 zoom: 10, 1218 zoom: 10,
1219 controls: [] // Скрываем элементы управления на карте; 1219 controls: [] // Скрываем элементы управления на карте;
1220 }); 1220 });
1221 1221
1222 // Создаём макет содержимого. 1222 // Создаём макет содержимого.
1223 const MyIconContentLayout = ymaps.templateLayoutFactory.createClass( 1223 const MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
1224 '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>' 1224 '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
1225 ); 1225 );
1226 1226
1227 let collection = new ymaps.GeoObjectCollection(null, { // Создаём коллекцию, в которую будемпомещать метки (что-то типа массива); 1227 let collection = new ymaps.GeoObjectCollection(null, { // Создаём коллекцию, в которую будемпомещать метки (что-то типа массива);
1228 // preset: 'islands#yellowIcon' 1228 // preset: 'islands#yellowIcon'
1229 }); 1229 });
1230 1230
1231 let collectionCoords = [ // Создаём массив с координатами (координаты должны располагаться в том же порядке, что и адреса в списке на сайте); 1231 let collectionCoords = [ // Создаём массив с координатами (координаты должны располагаться в том же порядке, что и адреса в списке на сайте);
1232 [55.867783219108354, 37.392867499999916], 1232 [55.867783219108354, 37.392867499999916],
1233 [55.728043075486504, 37.73937949999994], 1233 [55.728043075486504, 37.73937949999994],
1234 [55.72624100423305, 37.476078499999964], 1234 [55.72624100423305, 37.476078499999964],
1235 [55.80751105044832, 37.449622999999974], 1235 [55.80751105044832, 37.449622999999974],
1236 [55.601783098948836, 37.36700499999998], 1236 [55.601783098948836, 37.36700499999998],
1237 [55.86086502152225, 37.540348999999964], 1237 [55.86086502152225, 37.540348999999964],
1238 [55.784961528728715, 37.56188599999996], 1238 [55.784961528728715, 37.56188599999996],
1239 [55.63910010399773, 37.319407999999996], 1239 [55.63910010399773, 37.319407999999996],
1240 [55.55819256767507, 37.55711549999994], 1240 [55.55819256767507, 37.55711549999994],
1241 [55.79829252928473, 37.52063549999999], 1241 [55.79829252928473, 37.52063549999999],
1242 ]; 1242 ];
1243 1243
1244 for (let i = 0, l = collectionCoords.length; i < l; i++) { // C помощью цикла добавляем все метки в коллекцию; 1244 for (let i = 0, l = collectionCoords.length; i < l; i++) { // C помощью цикла добавляем все метки в коллекцию;
1245 collection.add(new ymaps.Placemark(collectionCoords[i])); 1245 collection.add(new ymaps.Placemark(collectionCoords[i]));
1246 collection.get(i).properties.set('iconContent', `${i + 1}`); // Добавляем каждой метке порядковый номер, записываем его в свойство 'iconContent'; 1246 collection.get(i).properties.set('iconContent', `${i + 1}`); // Добавляем каждой метке порядковый номер, записываем его в свойство 'iconContent';
1247 } 1247 }
1248 1248
1249 myMap.geoObjects.add(collection); // Добавляем коллекцию с метками на карту; 1249 myMap.geoObjects.add(collection); // Добавляем коллекцию с метками на карту;
1250 1250
1251 collection.options.set('iconLayout', 'default#imageWithContent'); // Необходимо указать данный тип макета; 1251 collection.options.set('iconLayout', 'default#imageWithContent'); // Необходимо указать данный тип макета;
1252 collection.options.set('iconImageHref', 'images/mark-complex.svg'); // Своё изображение иконки метки; 1252 collection.options.set('iconImageHref', 'images/mark-complex.svg'); // Своё изображение иконки метки;
1253 collection.options.set('iconImageSize', [52, 67]); // Размеры метки; 1253 collection.options.set('iconImageSize', [52, 67]); // Размеры метки;
1254 collection.options.set('iconImageOffset', [-26, -67]); // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки); 1254 collection.options.set('iconImageOffset', [-26, -67]); // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки);
1255 collection.options.set('iconContentOffset', [0, 17]); 1255 collection.options.set('iconContentOffset', [0, 17]);
1256 collection.options.set('iconContentLayout', MyIconContentLayout); // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки); 1256 collection.options.set('iconContentLayout', MyIconContentLayout); // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки);
1257 1257
1258 const pageMapBar = document.querySelector('.js_page_map_bar'); 1258 const pageMapBar = document.querySelector('.js_page_map_bar');
1259 const pageMapBarBtn = pageMapBar.querySelector('.js_page_map_bar_btn'); 1259 const pageMapBarBtn = pageMapBar.querySelector('.js_page_map_bar_btn');
1260 const pageMapBarList = pageMapBar.querySelector('.js_page_map_bar_list'); 1260 const pageMapBarList = pageMapBar.querySelector('.js_page_map_bar_list');
1261 const pageMapBarCards = pageMapBar.querySelectorAll('.card-news'); 1261 const pageMapBarCards = pageMapBar.querySelectorAll('.card-news');
1262 1262
1263 const showCard = (i) => { 1263 const showCard = (i) => {
1264 1264
1265 pageMapBarCards.forEach((card, k) => { 1265 pageMapBarCards.forEach((card, k) => {
1266 1266
1267 card.classList.remove('active'); 1267 card.classList.remove('active');
1268 1268
1269 if (i == k) { 1269 if (i == k) {
1270 card.classList.add('active'); 1270 card.classList.add('active');
1271 } 1271 }
1272 1272
1273 }); 1273 });
1274 1274
1275 }; 1275 };
1276 1276
1277 const hidecard = () => { 1277 const hidecard = () => {
1278 1278
1279 pageMapBarCards.forEach(card => { 1279 pageMapBarCards.forEach(card => {
1280 card.classList.remove('active'); 1280 card.classList.remove('active');
1281 }); 1281 });
1282 1282
1283 } 1283 }
1284 1284
1285 let pageMapBarItems; 1285 let pageMapBarItems;
1286 1286
1287 pageMapBarBtn.addEventListener('click', () => { 1287 pageMapBarBtn.addEventListener('click', () => {
1288 pageMapBar.classList.toggle('active'); 1288 pageMapBar.classList.toggle('active');
1289 }); 1289 });
1290 1290
1291 pageMapBarList.addEventListener('click', (e) => { 1291 pageMapBarList.addEventListener('click', (e) => {
1292 1292
1293 if (e.target.closest('.page-map-bar__item')) { 1293 if (e.target.closest('.page-map-bar__item')) {
1294 1294
1295 pageMapBarItems = pageMapBarList.querySelectorAll('.page-map-bar__item'); 1295 pageMapBarItems = pageMapBarList.querySelectorAll('.page-map-bar__item');
1296 1296
1297 pageMapBarItems.forEach((item, i) => { 1297 pageMapBarItems.forEach((item, i) => {
1298 1298
1299 if (e.target == item && e.target.classList.contains('active')) { 1299 if (e.target == item && e.target.classList.contains('active')) {
1300 1300
1301 item.classList.remove('active'); 1301 item.classList.remove('active');
1302 1302
1303 hidecard(); 1303 hidecard();
1304 1304
1305 } else if (e.target == item) { 1305 } else if (e.target == item) {
1306 1306
1307 pageMapBarItems.forEach(item => { 1307 pageMapBarItems.forEach(item => {
1308 item.classList.remove('active'); 1308 item.classList.remove('active');
1309 }); 1309 });
1310 1310
1311 item.classList.add('active'); 1311 item.classList.add('active');
1312 1312
1313 let offsetCoords = collection.get(i).geometry.getCoordinates(); 1313 let offsetCoords = collection.get(i).geometry.getCoordinates();
1314 1314
1315 offsetCoords = [ 1315 offsetCoords = [
1316 offsetCoords[0] - 0.0025, 1316 offsetCoords[0] - 0.0025,
1317 offsetCoords[1] 1317 offsetCoords[1]
1318 ]; 1318 ];
1319 1319
1320 myMap.setZoom(16); 1320 myMap.setZoom(16);
1321 // myMap.setCenter(collection.get(i).geometry.getCoordinates()); 1321 // myMap.setCenter(collection.get(i).geometry.getCoordinates());
1322 myMap.setCenter(offsetCoords); 1322 myMap.setCenter(offsetCoords);
1323 1323
1324 showCard(i); 1324 showCard(i);
1325 1325
1326 } 1326 }
1327 1327
1328 }); 1328 });
1329 } 1329 }
1330 1330
1331 }); 1331 });
1332 1332
1333 collection.events.add('click', function (e) { 1333 collection.events.add('click', function (e) {
1334 1334
1335 for (let i = 0, l = collection.getLength(); i < l; i++) { 1335 for (let i = 0, l = collection.getLength(); i < l; i++) {
1336 1336
1337 if (e.get('target') == collection.get(i)) { 1337 if (e.get('target') == collection.get(i)) {
1338 1338
1339 pageMapBarItems = pageMapBarList.querySelectorAll('.page-map-bar__item'); 1339 pageMapBarItems = pageMapBarList.querySelectorAll('.page-map-bar__item');
1340 1340
1341 pageMapBarItems.forEach((item) => { 1341 pageMapBarItems.forEach((item) => {
1342 pageMapBar.classList.add('active'); 1342 pageMapBar.classList.add('active');
1343 item.classList.remove('active'); 1343 item.classList.remove('active');
1344 }); 1344 });
1345 1345
1346 pageMapBarItems[i].classList.add('active'); 1346 pageMapBarItems[i].classList.add('active');
1347 1347
1348 showCard(i); 1348 showCard(i);
1349 1349
1350 } 1350 }
1351 1351
1352 } 1352 }
1353 1353
1354 }); 1354 });
1355 1355
1356 } 1356 }
1357 1357
1358 } 1358 }
1359 1359
1360 }; 1360 };
1361 */ 1361
1362 1362
1363 // аккордеон в футере 1363 // аккордеон в футере
1364 setFooterSpoilers() { 1364 setFooterSpoilers() {
1365 1365
1366 const items = document.querySelectorAll('.js_footer_col'); 1366 const items = document.querySelectorAll('.js_footer_col');
1367 1367
1368 items.forEach(item => { 1368 items.forEach(item => {
1369 1369
1370 const itemTitle = item.querySelector('.js_footer_caption'); 1370 const itemTitle = item.querySelector('.js_footer_caption');
1371 const itemContent = item.querySelector('.js_footer_block'); 1371 const itemContent = item.querySelector('.js_footer_block');
1372 1372
1373 const blockToggle = (block, duration) => { 1373 const blockToggle = (block, duration) => {
1374 1374
1375 if (window.getComputedStyle(block).display == "none" && !block.classList.contains('smooth')) { 1375 if (window.getComputedStyle(block).display == "none" && !block.classList.contains('smooth')) {
1376 1376
1377 block.style.display = "block"; 1377 block.style.display = "block";
1378 1378
1379 const blockHeight = block.offsetHeight; 1379 const blockHeight = block.offsetHeight;
1380 1380
1381 block.style.height = 0; 1381 block.style.height = 0;
1382 block.style.overflow = "hidden"; 1382 block.style.overflow = "hidden";
1383 block.style.transition = `height ${duration}ms ease`; 1383 block.style.transition = `height ${duration}ms ease`;
1384 block.classList.add('smooth'); 1384 block.classList.add('smooth');
1385 block.offsetHeight; 1385 block.offsetHeight;
1386 block.style.height = `${blockHeight}px`; 1386 block.style.height = `${blockHeight}px`;
1387 1387
1388 setTimeout(() => { 1388 setTimeout(() => {
1389 1389
1390 block.classList.remove('smooth'); 1390 block.classList.remove('smooth');
1391 block.style.height = ''; 1391 block.style.height = '';
1392 block.style.transition = ''; 1392 block.style.transition = '';
1393 block.style.overflow = ''; 1393 block.style.overflow = '';
1394 1394
1395 }, duration); 1395 }, duration);
1396 1396
1397 } else if (!block.classList.contains('smooth')) { 1397 } else if (!block.classList.contains('smooth')) {
1398 1398
1399 block.style.height = `${block.offsetHeight}px`; 1399 block.style.height = `${block.offsetHeight}px`;
1400 block.offsetHeight; 1400 block.offsetHeight;
1401 block.style.height = 0; 1401 block.style.height = 0;
1402 block.style.overflow = "hidden"; 1402 block.style.overflow = "hidden";
1403 block.style.transition = `height ${duration}ms ease`; 1403 block.style.transition = `height ${duration}ms ease`;
1404 block.classList.add('smooth'); 1404 block.classList.add('smooth');
1405 1405
1406 setTimeout(() => { 1406 setTimeout(() => {
1407 1407
1408 block.classList.remove('smooth'); 1408 block.classList.remove('smooth');
1409 block.style.display = "none"; 1409 block.style.display = "none";
1410 block.style.height = ''; 1410 block.style.height = '';
1411 block.style.transition = ''; 1411 block.style.transition = '';
1412 block.style.overflow = ''; 1412 block.style.overflow = '';
1413 1413
1414 }, duration); 1414 }, duration);
1415 1415
1416 } 1416 }
1417 1417
1418 }; 1418 };
1419 1419
1420 itemTitle.addEventListener('click', (e) => { 1420 itemTitle.addEventListener('click', (e) => {
1421 itemTitle.classList.toggle('active'); 1421 itemTitle.classList.toggle('active');
1422 blockToggle(itemContent, 300); 1422 blockToggle(itemContent, 300);
1423 }); 1423 });
1424 1424
1425 }); 1425 });
1426 1426
1427 } 1427 }
1428 1428
1429 1429
1430 // слайдер с партнёрами; 1430 // слайдер с партнёрами;
1431 initPartnerslSlider() { 1431 initPartnerslSlider() {
1432 1432
1433 const slider = document.querySelector('.partners__swiper'); 1433 const slider = document.querySelector('.partners__swiper');
1434 1434
1435 if (slider) { 1435 if (slider) {
1436 1436
1437 let swiper6; 1437 let swiper6;
1438 1438
1439 const initSlider = () => { 1439 const initSlider = () => {
1440 1440
1441 swiper6 = new Swiper(slider, { 1441 swiper6 = new Swiper(slider, {
1442 // scrollbar: { 1442 // scrollbar: {
1443 // el: '.swiper-scrollbar', 1443 // el: '.swiper-scrollbar',
1444 // draggable: true, 1444 // draggable: true,
1445 // }, 1445 // },
1446 slidesPerView: 0.275, 1446 slidesPerView: 0.275,
1447 loop: true, 1447 loop: true,
1448 spaceBetween: 20, 1448 spaceBetween: 20,
1449 freeMode: true, 1449 freeMode: true,
1450 allowTouchMove: true, 1450 allowTouchMove: true,
1451 breakpoints: { 1451 breakpoints: {
1452 480: { 1452 480: {
1453 slidesPerView: 0.4, 1453 slidesPerView: 0.4,
1454 }, 1454 },
1455 640: { 1455 640: {
1456 slidesPerView: 0.65, 1456 slidesPerView: 0.65,
1457 }, 1457 },
1458 780: { 1458 780: {
1459 slidesPerView: 0.65, 1459 slidesPerView: 0.65,
1460 }, 1460 },
1461 1024: { 1461 1024: {
1462 slidesPerView: 0.8, 1462 slidesPerView: 0.8,
1463 }, 1463 },
1464 1200: { 1464 1200: {
1465 slidesPerView: 1, 1465 slidesPerView: 1,
1466 loop: false, 1466 loop: false,
1467 allowTouchMove: false, 1467 allowTouchMove: false,
1468 } 1468 }
1469 } 1469 }
1470 }); 1470 });
1471 1471
1472 }; 1472 };
1473 1473
1474 initSlider(); 1474 initSlider();
1475 1475
1476 const updateSlider = () => { 1476 const updateSlider = () => {
1477 swiper6.destroy(); 1477 swiper6.destroy();
1478 initSlider(); 1478 initSlider();
1479 } 1479 }
1480 1480
1481 window.addEventListener('resize', () => { 1481 window.addEventListener('resize', () => {
1482 1482
1483 if (window.innerWidth <= 1200 && slider.dataset.mobile == 'false') { 1483 if (window.innerWidth <= 1200 && slider.dataset.mobile == 'false') {
1484 slider.dataset.mobile = 'true'; 1484 slider.dataset.mobile = 'true';
1485 updateSlider(); 1485 updateSlider();
1486 } 1486 }
1487 1487
1488 if (window.innerWidth > 1200 && slider.dataset.mobile == 'true') { 1488 if (window.innerWidth > 1200 && slider.dataset.mobile == 'true') {
1489 slider.dataset.mobile = 'false'; 1489 slider.dataset.mobile = 'false';
1490 updateSlider(); 1490 updateSlider();
1491 } 1491 }
1492 1492
1493 }); 1493 });
1494 1494
1495 } 1495 }
1496 1496
1497 } 1497 }
1498 1498
1499 } 1499 }
1500 1500
1501 1501
1502 document.addEventListener('DOMContentLoaded', () => { 1502 document.addEventListener('DOMContentLoaded', () => {
1503 1503
1504 const app = new App(); 1504 const app = new App();
1505 app.init(); 1505 app.init();
1506 1506
1507 }); 1507 });
1508 1508
resources/views/catalogs/elemhouse.blade -copy.php
Diff comments   View file @ 357df98
File was created 1 <div class="swiper-slide">
2 <div class="card">
3 <div class="card__top">
4 @if (empty($house->foto_main))
5
6 @else
7 <img src="{{ asset(Storage::url($house->foto_main)) }}" alt="{{ $house->title }}" loading="lazy"/>
8 @endif;
9
10 <h3 class="card__title">{{$house->typearea->name_type }}</h3>
11 <div class="card__labels">
12 <span class="card__label card__label-favorites js_card_favorites <?=\App\Classes\RusDate::selected_item($house->id);?>" data-val="{{$house->id}}" id="card_favorite{{$house->id}}" name="card_favorite{{$house->id}}">
13 <svg width="18" height="18">
14 <use xlink:href="{{ asset('images/sprite.svg#card-favorites-empty') }}"></use>
15 </svg>
16 <svg width="18" height="18">
17 <use xlink:href="{{ asset('images/sprite.svg#card-favorites') }}"></use>
18 </svg>
19 </span>
20 <a class="card__label card__label-messenger" href="#">
21 <svg width="25" height="25">
22 <use xlink:href="{{ asset('images/sprite.svg#card-messenger') }}"></use>
23 </svg></a></div>
24 </div>
25 <div class="card__cnt">
26 <div class="card__info">
27 <address class="card__line card__line-complex">{{ $house->areas->name_area }}</address>
28 <address class="card__line">{{$house->metro}} ({{$house->description_metro }})<span style="background-color: #FFC955;"></span></address>
29 <address class="card__line">{{$house->address }}</address>
30 <div class="card__line">Площадь: <b>{{$house->area}} м2</b></div>
31 <div class="card__line">Цена за м<sup>2</sup>: <b>{{ $house->price_m2 }}₽</b></div>
32 </div>
33 <? switch ($house->format_house) {
34 case 'Аренда':
35 $comment = "<span>в месяц</span>";
36 break;
37 case 'Продажа':
38 $comment = "";
39 break;
40 case 'Бизнес':
41 $comment= "<span>в месяц</span>";
42 break;
43 case 'Арендованные':
44 $comment = "<span>в месяц</span>";
45 break;
46 }
47 ?>
48 <div class="card__price"><span>{{ $house->price }} ₽ </span><? echo $comment; ?>
49 </div><a class="card__btn btn btn--bordered" href="{{ route('offer', ['house' => $house->id]) }}">Подробнее</a>
50 </div>
51 </div>
52 </div>
53
resources/views/catalogs/house_mini.blade - copy.php
Diff comments   View file @ 357df98
File was created 1 <div class="card">
2 <div class="card__top">
3 @if (empty($house->foto_main))
4
5 @else
6 <img src="{{ asset(Storage::url($house->foto_main)) }}" alt="{{ $house->title }}" loading="lazy"/>
7 @endif;
8
9 <h3 class="card__title">{{$house->typearea->name_type }}</h3>
10 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites <?=\App\Classes\RusDate::selected_item($house->id);?>" data-val="{{$house->id}}" id="card_favorite{{$house->id}}" name="card_favorite{{$house->id}}">
11 <svg width="18" height="18">
12 <use xlink:href="{{ asset('images/sprite.svg#card-favorites-empty') }}"></use>
13 </svg>
14 <svg width="18" height="18">
15 <use xlink:href="{{ asset('images/sprite.svg#card-favorites') }}"></use>
16 </svg></span><a class="card__label card__label-messenger" href="#">
17 <svg width="25" height="25">
18 <use xlink:href="{{ asset('images/sprite.svg#card-messenger') }}"></use>
19 </svg></a></div>
20 </div>
21 <div class="card__cnt">
22 <div class="card__info">
23 <address class="card__line card__line-complex">{{ $house->areas->name_area }}</address>
24 <address class="card__line">{{$house->metro}} ({{$house->description_metro }})<span style="background-color: #FFC955;"></span></address>
25 <address class="card__line">{{$house->address }}</address>
26 <div class="card__line">Площадь: <b>{{$house->area}} м2</b></div>
27 <div class="card__line">Цена за м<sup>2</sup>: <b>{{ $house->price_m2 }}₽</b></div>
28 </div>
29 <? switch ($house->format_house) {
30 case 'Аренда':
31 $comment = "<span>в месяц</span>";
32 break;
33 case 'Продажа':
34 $comment = "";
35 break;
36 case 'Бизнес':
37 $comment= "<span>в месяц</span>";
38 break;
39 case 'Арендованные':
40 $comment = "<span>в месяц</span>";
41 break;
42 }
43 ?>
44 <div class="card__price"><span>{{ $house->price }} ₽ </span><? echo $comment; ?>
45 </div><a class="card__btn btn btn--bordered" href="{{ route('offer', ['house' => $house->id]) }}">Подробнее</a>
46 </div>
47 </div>
48
49
resources/views/house/post.blade.php
Diff comments   View file @ 357df98
1 @extends('layout.site', ['title' => 'Избранное RentTorg']) 1 @extends('layout.site', ['title' => 'Избранное RentTorg'])
2 2
3 @section('content') 3 @section('content')
4 <section class="intro" style="background-image:url({{ asset('images/intro-bg-2.jpg') }}"> 4 <section class="intro" style="background-image:url({{ asset('images/intro-bg-2.jpg') }}">
5 <div class="container"> 5 <div class="container">
6 <div class="intro__wrap"> 6 <div class="intro__wrap">
7 <div class="breadcrumbs"> 7 <div class="breadcrumbs">
8 <ul class="breadcrumbs__list"> 8 <ul class="breadcrumbs__list">
9 <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ route('index') }}">Главная</a></li> 9 <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ route('index') }}">Главная</a></li>
10 <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ route('catalog') }}">Каталог</a></li> 10 <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ route('catalog') }}">Каталог</a></li>
11 <!--<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="#">Каталок недвижимости</a></li>--> 11 <!--<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="#">Каталок недвижимости</a></li>-->
12 <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ route('complex', ['area' => $house->areas->id]) }}">{{ $house->areas->name_area }}</a></li> 12 <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ route('complex', ['area' => $house->areas->id]) }}">{{ $house->areas->name_area }}</a></li>
13 <li class="breadcrumbs__item"><span class="breadcrumbs__link">{{ $house->title }}</span></li> 13 <li class="breadcrumbs__item"><span class="breadcrumbs__link">{{ $house->title }}</span></li>
14 </ul> 14 </ul>
15 </div> 15 </div>
16 <div class="intro__inner"> 16 <div class="intro__inner">
17 <div class="intro__cnt"> 17 <div class="intro__cnt">
18 <h1 class="intro__title title-main">{{ $house->title }}</h1><a class="intro__link-complex" href="{{ route('complex', ['area' => $house->areas->id]) }}">Перейти на страницу: <span>{{ $house->areas->name_area }}</span></a> 18 <h1 class="intro__title title-main">{{ $house->title }}</h1><a class="intro__link-complex" href="{{ route('complex', ['area' => $house->areas->id]) }}">Перейти на страницу: <span>{{ $house->areas->name_area }}</span></a>
19 <div class="intro__row"> 19 <div class="intro__row">
20 <div class="intro__col"> 20 <div class="intro__col">
21 <ul class="intro__list"> 21 <ul class="intro__list">
22 <li class="intro__item" style="color:{{ $house->color_metro }};"><span>{{ $house->metro }}</span></li> 22 <li class="intro__item" style="color:{{ $house->color_metro }};"><span>{{ $house->metro }}</span></li>
23 <li class="intro__item"><span>{{ $house->description_metro }}</span></li> 23 <li class="intro__item"><span>{{ $house->description_metro }}</span></li>
24 <li class="intro__item"><span>{{ $house->okrug }}</span></li> 24 <li class="intro__item"><span>{{ $house->okrug }}</span></li>
25 </ul><a class="intro__link-map js_smooth_link" href="#offer-map">Посмотреть на карте</a> 25 </ul><a class="intro__link-map js_smooth_link" href="#offer-map">Посмотреть на карте</a>
26 </div> 26 </div>
27 <div class="intro__col"> 27 <div class="intro__col">
28 <div class="intro__group"><span>Адрес</span><span>{{ $house->address }}</span></div> 28 <div class="intro__group"><span>Адрес</span><span>{{ $house->address }}</span></div>
29 <div class="intro__group"><span>Артикул помещения</span><span>{{ $house->articul_area }}</span></div><a class="intro__link-map js_smooth_link" href="#offer-map">Посмотреть на карте</a> 29 <div class="intro__group"><span>Артикул помещения</span><span>{{ $house->articul_area }}</span></div><a class="intro__link-map js_smooth_link" href="#offer-map">Посмотреть на карте</a>
30 </div> 30 </div>
31 </div> 31 </div>
32 <div class="intro__bottom"> 32 <div class="intro__bottom">
33 <div class="intro__views">16 человек интересовались этим объектом за последние 24&nbsp;ч</div> 33 <div class="intro__views">16 человек интересовались этим объектом за последние 24&nbsp;ч</div>
34 <a class="intro__link-phone btn btn--main" href="tel:+70001234567"><span>Позвонить 34 <a class="intro__link-phone btn btn--main" href="tel:+70001234567"><span>Позвонить
35 <svg width="22" height="22"> 35 <svg width="22" height="22">
36 <use xlink:href="{{ asset('images/sprite.svg#intro-link-phone') }}"></use> 36 <use xlink:href="{{ asset('images/sprite.svg#intro-link-phone') }}"></use>
37 </svg></span></a> 37 </svg></span></a>
38 </div> 38 </div>
39 </div> 39 </div>
40 <div class="intro__swiper swiper"> 40 <div class="intro__swiper swiper">
41 <div class="swiper-wrapper"> 41 <div class="swiper-wrapper">
42 <?if (!empty($house->foto_main)) {?> 42 <?if (!empty($house->foto_main)) {?>
43 <div class="swiper-slide"> 43 <div class="swiper-slide">
44 <div class="intro-item"> 44 <div class="intro-item">
45 <div class="intro-item__img"><img src="{{ asset(Storage::url($house->foto_main)) }}" alt=""></div> 45 <div class="intro-item__img"><img src="{{ asset(Storage::url($house->foto_main)) }}" alt=""></div>
46 <a class="intro-item__btn js_intro_item_btn" href="{{asset(Storage::url($house->foto_main))}}" data-caption="{{ $house->title }}"> 46 <a class="intro-item__btn js_intro_item_btn" href="{{asset(Storage::url($house->foto_main))}}" data-caption="{{ $house->title }}">
47 <svg width="16" height="16"> 47 <svg width="16" height="16">
48 <use xlink:href="{{ asset('images/sprite.svg#intro-item-btn') }}"></use> 48 <use xlink:href="{{ asset('images/sprite.svg#intro-item-btn') }}"></use>
49 </svg></a> 49 </svg></a>
50 </div> 50 </div>
51 </div> 51 </div>
52 <?}?> 52 <?}?>
53 @foreach($house->fotohouse as $foto) 53 @foreach($house->fotohouse as $foto)
54 <div class="swiper-slide"> 54 <div class="swiper-slide">
55 <div class="intro-item"> 55 <div class="intro-item">
56 <div class="intro-item__img"><img src="{{ asset(Storage::url($foto->foto)) }}" alt=""></div> 56 <div class="intro-item__img"><img src="{{ asset(Storage::url($foto->foto)) }}" alt=""></div>
57 <a class="intro-item__btn js_intro_item_btn" href="{{ asset(Storage::url($foto->foto)) }}" data-caption="Фото {{ $foto->id }}"> 57 <a class="intro-item__btn js_intro_item_btn" href="{{ asset(Storage::url($foto->foto)) }}" data-caption="Фото {{ $foto->id }}">
58 <svg width="16" height="16"> 58 <svg width="16" height="16">
59 <use xlink:href="{{ asset('images/sprite.svg#intro-item-btn') }}"></use> 59 <use xlink:href="{{ asset('images/sprite.svg#intro-item-btn') }}"></use>
60 </svg></a> 60 </svg></a>
61 </div> 61 </div>
62 </div> 62 </div>
63 @endforeach 63 @endforeach
64 64
65 </div> 65 </div>
66 <div class="swiper-pagination"></div> 66 <div class="swiper-pagination"></div>
67 <div class="swiper-button-prev"> 67 <div class="swiper-button-prev">
68 <svg width="10" height="17"> 68 <svg width="10" height="17">
69 <use xlink:href="{{ asset('images/sprite.svg#slider-arrow') }}"></use> 69 <use xlink:href="{{ asset('images/sprite.svg#slider-arrow') }}"></use>
70 </svg> 70 </svg>
71 </div> 71 </div>
72 <div class="swiper-button-next"> 72 <div class="swiper-button-next">
73 <svg width="10" height="17"> 73 <svg width="10" height="17">
74 <use xlink:href="{{ asset('images/sprite.svg#slider-arrow') }}"></use> 74 <use xlink:href="{{ asset('images/sprite.svg#slider-arrow') }}"></use>
75 </svg> 75 </svg>
76 </div> 76 </div>
77 </div> 77 </div>
78 </div> 78 </div>
79 </div> 79 </div>
80 </div> 80 </div>
81 </section> 81 </section>
82 <section class="offer"> 82 <section class="offer">
83 <div class="offer__wrap"> 83 <div class="offer__wrap">
84 <div class="container"> 84 <div class="container">
85 <div class="offer__inner"> 85 <div class="offer__inner">
86 <div class="offer-side"> 86 <div class="offer-side">
87 <div class="offer-side__tabs"> 87 <div class="offer-side__tabs">
88 <button class="offer-side__tab js_offer_side_tab active" type="button" data-tab="1">План объекта</button> 88 <button class="offer-side__tab js_offer_side_tab active" type="button" data-tab="1">План объекта</button>
89 <button class="offer-side__tab js_offer_side_tab" type="button" data-tab="2">План этажа</button> 89 <button class="offer-side__tab js_offer_side_tab" type="button" data-tab="2">План этажа</button>
90 </div> 90 </div>
91 <div class="offer-side__cnt"> 91 <div class="offer-side__cnt">
92 <div class="offer-side-item js_offer_side_item active" data-item="1"> 92 <div class="offer-side-item js_offer_side_item active" data-item="1">
93 <div class="offer-side-item__img"> 93 <div class="offer-side-item__img">
94 <? if (!empty($house->object_plan)) {?> 94 <? if (!empty($house->object_plan)) {?>
95 <img src="{{ asset(Storage::url($house->object_plan)) }}" alt="План объекта"> 95 <img src="{{ asset(Storage::url($house->object_plan)) }}" alt="План объекта">
96 <? } ?> 96 <? } ?>
97 </div> 97 </div>
98 <a class="offer-side-item__btn js_offer_side_item_btn" href="#" data-btn="offer-side-popup"> 98 <a class="offer-side-item__btn js_offer_side_item_btn" href="#" data-btn="offer-side-popup">
99 <svg width="16" height="16"> 99 <svg width="16" height="16">
100 <use xlink:href="{{ asset('images/sprite.svg#intro-item-btn') }}"></use> 100 <use xlink:href="{{ asset('images/sprite.svg#intro-item-btn') }}"></use>
101 </svg></a> 101 </svg></a>
102 </div> 102 </div>
103 <div class="offer-side-item js_offer_side_item" data-item="2"> 103 <div class="offer-side-item js_offer_side_item" data-item="2">
104 <div class="offer-side-item__img"> 104 <div class="offer-side-item__img">
105 <? if (!empty($house->floor_plan)) { ?> 105 <? if (!empty($house->floor_plan)) { ?>
106 <img src="{{ asset(Storage::url($house->floor_plan)) }}" alt="План этажа"> 106 <img src="{{ asset(Storage::url($house->floor_plan)) }}" alt="План этажа">
107 <? }?> 107 <? }?>
108 </div> 108 </div>
109 <a class="offer-side-item__btn js_offer_side_item_btn" href="#" data-btn="offer-side-popup"> 109 <a class="offer-side-item__btn js_offer_side_item_btn" href="#" data-btn="offer-side-popup">
110 <svg width="16" height="16"> 110 <svg width="16" height="16">
111 <use xlink:href="{{ asset('images/sprite.svg#intro-item-btn') }}"></use> 111 <use xlink:href="{{ asset('images/sprite.svg#intro-item-btn') }}"></use>
112 </svg></a> 112 </svg></a>
113 </div> 113 </div>
114 </div> 114 </div>
115 115
116 <!---------------------------!> 116 <!--------------------------->
117 <div class="offer-side-popup" data-popup="offer-side-popup"> 117 <div class="offer-side-popup" data-popup="offer-side-popup">
118 <div class="offer-side-popup__wrap"> 118 <div class="offer-side-popup__wrap">
119 <button class="offer-side-popup__close js_popup_close" type="button"> 119 <button class="offer-side-popup__close js_popup_close" type="button">
120 <svg width="20" height="20"> 120 <svg width="20" height="20">
121 <use xlink:href="{{ asset('images/sprite.svg#popup-close')}}"></use> 121 <use xlink:href="{{ asset('images/sprite.svg#popup-close')}}"></use>
122 </svg> 122 </svg>
123 </button> 123 </button>
124 <div class="offer-side-popup__cnt"> 124 <div class="offer-side-popup__cnt">
125 <div class="offer-side-popup__item js_offer_side_popup_item active" data-item="1"> 125 <div class="offer-side-popup__item js_offer_side_popup_item active" data-item="1">
126 <? if (!empty($house->object_plan)) {?> 126 <? if (!empty($house->object_plan)) {?>
127 <img src="{{ asset(Storage::url($house->object_plan)) }}" alt="План объекта"> 127 <img src="{{ asset(Storage::url($house->object_plan)) }}" alt="План объекта">
128 <? } ?> 128 <? } ?>
129 </div> 129 </div>
130 <div class="offer-side-popup__item js_offer_side_popup_item" data-item="2"> 130 <div class="offer-side-popup__item js_offer_side_popup_item" data-item="2">
131 <? if (!empty($house->floor_plan)) { ?> 131 <? if (!empty($house->floor_plan)) { ?>
132 <img src="{{ asset(Storage::url($house->floor_plan)) }}" alt="План этажа"> 132 <img src="{{ asset(Storage::url($house->floor_plan)) }}" alt="План этажа">
133 <? }?> 133 <? }?>
134 </div> 134 </div>
135 </div> 135 </div>
136 <div class="offer-side-popup__tabs"> 136 <div class="offer-side-popup__tabs">
137 <button class="offer-side-popup__tab js_offer_side_popup_tab active" type="button" data-tab="1">План объекта</button> 137 <button class="offer-side-popup__tab js_offer_side_popup_tab active" type="button" data-tab="1">План объекта</button>
138 <button class="offer-side-popup__tab js_offer_side_popup_tab" type="button" data-tab="2">План этажа</button> 138 <button class="offer-side-popup__tab js_offer_side_popup_tab" type="button" data-tab="2">План этажа</button>
139 </div> 139 </div>
140 <button class="offer-side-popup__sizeoff js_popup_close" type="button"> 140 <button class="offer-side-popup__sizeoff js_popup_close" type="button">
141 <svg width="18" height="18"> 141 <svg width="18" height="18">
142 <use xlink:href="{{ asset('images/sprite.svg#popup-sizeoff')}}"></use> 142 <use xlink:href="{{ asset('images/sprite.svg#popup-sizeoff')}}"></use>
143 </svg> 143 </svg>
144 </button> 144 </button>
145 </div> 145 </div>
146 </div> 146 </div>
147 <!---------------------------!> 147 <!--------------------------->
148 <div class="offer__lines"> 148 <div class="offer__lines">
149 <div class="offer__line"><span>Аренда в год за м2</span><span>{{ $house->rent_in_year }} ₽</span></div> 149 <div class="offer__line"><span>Аренда в год за м2</span><span>{{ $house->rent_in_year }} ₽</span></div>
150 <div class="offer__line"><span>Аренда в месяц</span><span>{{ $house->rent_in_month }} ₽</span></div> 150 <div class="offer__line"><span>Аренда в месяц</span><span>{{ $house->rent_in_month }} ₽</span></div>
151 <div class="offer__line"><span>Схема сделки</span><span>{{ $house->scheme_deal }}</span></div> 151 <div class="offer__line"><span>Схема сделки</span><span>{{ $house->scheme_deal }}</span></div>
152 </div> 152 </div>
153 <div class="offer-side__buttons"><a class="offer-side__btn btn btn--main" href="#" data-btn="viewing"><span>Записаться на просмотр 153 <div class="offer-side__buttons"><a class="offer-side__btn btn btn--main" href="#" data-btn="viewing"><span>Записаться на просмотр
154 <svg width="20" height="20"> 154 <svg width="20" height="20">
155 <use xlink:href="{{ asset('images/sprite.svg#offer-side-btn-viewing') }}"></use> 155 <use xlink:href="{{ asset('images/sprite.svg#offer-side-btn-viewing') }}"></use>
156 </svg></span></a><a class="offer-side__btn btn btn--main" href="#" data-btn="sending"><span>Отправить по Email 156 </svg></span></a><a class="offer-side__btn btn btn--main" href="#" data-btn="sending"><span>Отправить по Email
157 <svg width="22" height="22"> 157 <svg width="22" height="22">
158 <use xlink:href="{{ asset('images/sprite.svg#offer-side-btn-email') }}"></use> 158 <use xlink:href="{{ asset('images/sprite.svg#offer-side-btn-email') }}"></use>
159 </svg></span></a><a class="offer-side__btn btn btn--main" href="tel:+70001234567"><span>Позвонить 159 </svg></span></a><a class="offer-side__btn btn btn--main" href="tel:+70001234567"><span>Позвонить
160 <svg width="22" height="22"> 160 <svg width="22" height="22">
161 <use xlink:href="{{ asset('images/sprite.svg#intro-link-phone') }}"></use> 161 <use xlink:href="{{ asset('images/sprite.svg#intro-link-phone') }}"></use>
162 </svg></span></a></div><a class="offer-side__download" href="#" download><span>Скачать презентацию 162 </svg></span></a></div><a class="offer-side__download" href="#" download><span>Скачать презентацию
163 <svg width="60" height="60"> 163 <svg width="60" height="60">
164 <use xlink:href="{{ asset('images/sprite.svg#offer-side-download') }}"></use> 164 <use xlink:href="{{ asset('images/sprite.svg#offer-side-download') }}"></use>
165 </svg></span></a> 165 </svg></span></a>
166 </div> 166 </div>
167 <div class="offer__cnt"> 167 <div class="offer__cnt">
168 <h2 class="offer__title">{{ $house->title }} {{ $house->address }}</h2> 168 <h2 class="offer__title">{{ $house->title }} {{ $house->address }}</h2>
169 <div class="offer__lines"> 169 <div class="offer__lines">
170 <div class="offer__line"><span>Площадь, м2</span><span>{{ $house->area }}</span></div> 170 <div class="offer__line"><span>Площадь, м2</span><span>{{ $house->area }}</span></div>
171 <div class="offer__line"><span>Адрес</span><span>{{ $house->address }}</span></div> 171 <div class="offer__line"><span>Адрес</span><span>{{ $house->address }}</span></div>
172 <div class="offer__line"><span>Тип объекта</span><span>{{ $house->typearea->name_type }}</span></div> 172 <div class="offer__line"><span>Тип объекта</span><span>{{ $house->typearea->name_type }}</span></div>
173 <div class="offer__line"><span>Формат</span><span>{{ $house->format_house }}</span></div> 173 <div class="offer__line"><span>Формат</span><span>{{ $house->format_house }}</span></div>
174 <div class="offer__line"><span>Этаж</span><span>{{ $house->floor }} эт.</span></div> 174 <div class="offer__line"><span>Этаж</span><span>{{ $house->floor }} эт.</span></div>
175 <div class="offer__line"><span>Этажность здания</span><span>{{ $house->floor_bild }} эт.</span></div> 175 <div class="offer__line"><span>Этажность здания</span><span>{{ $house->floor_bild }} эт.</span></div>
176 <div class="offer__line"><span>Арендаторы</span><span>{{ $house->renter }}</span></div> 176 <div class="offer__line"><span>Арендаторы</span><span>{{ $house->renter }}</span></div>
177 <div class="offer__line"><span>Состояние объекта</span><span>{{ $house->sos_obj }}</span></div> 177 <div class="offer__line"><span>Состояние объекта</span><span>{{ $house->sos_obj }}</span></div>
178 <div class="offer__line"><span>Тип планировки</span><span>{{ $house->type_plan }}</span></div> 178 <div class="offer__line"><span>Тип планировки</span><span>{{ $house->type_plan }}</span></div>
179 <div class="offer__line"><span>Наличие зоны разгрузки</span><span><? if($house->uploading_area == 1) {?>Есть<?} else {?>Нет<?}?></span></div> 179 <div class="offer__line"><span>Наличие зоны разгрузки</span><span><? if($house->uploading_area == 1) {?>Есть<?} else {?>Нет<?}?></span></div>
180 <div class="offer__line"><span>Электрическая мощность</span><span>{{ $house->electric_power }} кВт</span></div> 180 <div class="offer__line"><span>Электрическая мощность</span><span>{{ $house->electric_power }} кВт</span></div>
181 <div class="offer__line"><span>Проездное</span><span><? if($house->travel_card == 1) {?>Есть<?} else {?>Нет<?}?></span></div> 181 <div class="offer__line"><span>Проездное</span><span><? if($house->travel_card == 1) {?>Есть<?} else {?>Нет<?}?></span></div>
182 <div class="offer__line"><span>Проходное место</span><span><? if($house->passing_place == 1) {?>Есть<?} else {?>Нет<?}?></span></div> 182 <div class="offer__line"><span>Проходное место</span><span><? if($house->passing_place == 1) {?>Есть<?} else {?>Нет<?}?></span></div>
183 <div class="offer__line"><span>Отдельный вход</span><span><? if($house->separate_input == 1) {?>Есть<?} else {?>Нет<?}?></span></div> 183 <div class="offer__line"><span>Отдельный вход</span><span><? if($house->separate_input == 1) {?>Есть<?} else {?>Нет<?}?></span></div>
184 <div class="offer__line"><span>Витрины</span><span><? if($house->shop_windows == 1) {?>Есть<?} else {?>Нет<?}?></span></div> 184 <div class="offer__line"><span>Витрины</span><span><? if($house->shop_windows == 1) {?>Есть<?} else {?>Нет<?}?></span></div>
185 <div class="offer__line"><span>Место для рекламы</span><span><? if($house->place_advertising == 1) {?>Есть<?} else {?>Нет<?}?></span></div> 185 <div class="offer__line"><span>Место для рекламы</span><span><? if($house->place_advertising == 1) {?>Есть<?} else {?>Нет<?}?></span></div>
186 <div class="offer__line"><span>Окна</span><span>{{ $house->windows }}</span></div> 186 <div class="offer__line"><span>Окна</span><span>{{ $house->windows }}</span></div>
187 <div class="offer__line"><span>Вытяжка</span><span><? if($house->hood == 1) {?>Есть<?} else {?>Нет<?}?></span></div> 187 <div class="offer__line"><span>Вытяжка</span><span><? if($house->hood == 1) {?>Есть<?} else {?>Нет<?}?></span></div>
188 <div class="offer__line"><span>Центральное отопление</span><span><? if($house->central_hearing == 1) {?>Есть<?} else {?>Нет<?}?></span></div> 188 <div class="offer__line"><span>Центральное отопление</span><span><? if($house->central_hearing == 1) {?>Есть<?} else {?>Нет<?}?></span></div>
189 <div class="offer__line"><span>Возможные часы работы</span><span>{{ $house->opening_hours }}</span></div> 189 <div class="offer__line"><span>Возможные часы работы</span><span>{{ $house->opening_hours }}</span></div>
190 <div class="offer__line"><span>Отделка</span><span><? if($house->finishing == 1) {?>Есть<?} else {?>Нет<?}?></span></div> 190 <div class="offer__line"><span>Отделка</span><span><? if($house->finishing == 1) {?>Есть<?} else {?>Нет<?}?></span></div>
191 <div class="offer__line"><span>Парковка</span><span>{{ $house->parking }} мест</span></div> 191 <div class="offer__line"><span>Парковка</span><span>{{ $house->parking }} мест</span></div>
192 </div> 192 </div>
193 <p class="offer__additional">{{ $house->description_2 }}</p> 193 <p class="offer__additional">{{ $house->description_2 }}</p>
194 </div> 194 </div>
195 </div> 195 </div>
196 <div class="offer-descr"> 196 <div class="offer-descr">
197 <h3 class="offer-descr__caption">Описание объекта</h3> 197 <h3 class="offer-descr__caption">Описание объекта</h3>
198 <p class="offer-descr__text">{{ $house->description_house }}</p> 198 <p class="offer-descr__text">{{ $house->description_house }}</p>
199 </div> 199 </div>
200 </div> 200 </div>
201 </div> 201 </div>
202 <div class="offer__map map" id="offer-map"></div> 202 <div class="offer__map map" id="offer-map"></div>
203 </section> 203 </section>
204 <section class="slider"> 204 <section class="slider">
205 <div class="container"> 205 <div class="container">
206 <div class="slider__wrap"> 206 <div class="slider__wrap">
207 <div class="slider__top"> 207 <div class="slider__top">
208 <h2 class="slider__title title">Похожие помещения</h2> 208 <h2 class="slider__title title">Похожие помещения</h2>
209 <div class="slider__control"> 209 <div class="slider__control">
210 <div class="swiper-button-prev"> 210 <div class="swiper-button-prev">
211 <svg width="10" height="17"> 211 <svg width="10" height="17">
212 <use xlink:href="images/sprite.svg#slider-arrow"></use> 212 <use xlink:href="images/sprite.svg#slider-arrow"></use>
213 </svg> 213 </svg>
214 </div> 214 </div>
215 <div class="swiper-button-next"> 215 <div class="swiper-button-next">
216 <svg width="10" height="17"> 216 <svg width="10" height="17">
217 <use xlink:href="images/sprite.svg#slider-arrow"></use> 217 <use xlink:href="images/sprite.svg#slider-arrow"></use>
218 </svg> 218 </svg>
219 </div> 219 </div>
220 </div> 220 </div>
221 </div> 221 </div>
222 <div class="slider__swiper swiper"> 222 <div class="slider__swiper swiper">
223 <div class="swiper-wrapper"> 223 <div class="swiper-wrapper">
224 @if ($houses->count()) 224 @if ($houses->count())
225 @foreach ($houses as $house) 225 @foreach ($houses as $house)
226 @include('catalogs.elemhouse', ['house' => $house]) 226 @include('catalogs.elemhouse', ['house' => $house])
227 @endforeach 227 @endforeach
228 @endif 228 @endif
229 229
230 <!--<div class="swiper-slide"> 230 <!--<div class="swiper-slide">
231 <div class="card"> 231 <div class="card">
232 <div class="card__top"><img src="images/card/card-img-1.jpg" alt="Фото недвижимости" loading="lazy"> 232 <div class="card__top"><img src="images/card/card-img-1.jpg" alt="Фото недвижимости" loading="lazy">
233 <h3 class="card__title">Салон красоты</h3> 233 <h3 class="card__title">Салон красоты</h3>
234 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites"> 234 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites">
235 <svg width="18" height="18"> 235 <svg width="18" height="18">
236 <use xlink:href="images/sprite.svg#card-favorites-empty"></use> 236 <use xlink:href="images/sprite.svg#card-favorites-empty"></use>
237 </svg> 237 </svg>
238 <svg width="18" height="18"> 238 <svg width="18" height="18">
239 <use xlink:href="images/sprite.svg#card-favorites"></use> 239 <use xlink:href="images/sprite.svg#card-favorites"></use>
240 </svg></span><a class="card__label card__label-messenger" href="#"> 240 </svg></span><a class="card__label card__label-messenger" href="#">
241 <svg width="25" height="25"> 241 <svg width="25" height="25">
242 <use xlink:href="images/sprite.svg#card-messenger"></use> 242 <use xlink:href="images/sprite.svg#card-messenger"></use>
243 </svg></a></div> 243 </svg></a></div>
244 </div> 244 </div>
245 <div class="card__cnt"> 245 <div class="card__cnt">
246 <div class="card__info"> 246 <div class="card__info">
247 <address class="card__line card__line-complex">ЖК “Новинки 1”</address> 247 <address class="card__line card__line-complex">ЖК “Новинки 1”</address>
248 <address class="card__line">Фрунзенская (10 мин., пешком)<span style="background-color: #FFC955;"></span></address> 248 <address class="card__line">Фрунзенская (10 мин., пешком)<span style="background-color: #FFC955;"></span></address>
249 <address class="card__line">ул. Ак. Королева, д. 13, стр. 1, этаж 7, пом. 1, к. 69</address> 249 <address class="card__line">ул. Ак. Королева, д. 13, стр. 1, этаж 7, пом. 1, к. 69</address>
250 <div class="card__line">Площадь: <b>556 м2</b></div> 250 <div class="card__line">Площадь: <b>556 м2</b></div>
251 <div class="card__line">Цена за м<sup>2</sup>: <b>550 256 ₽</b></div> 251 <div class="card__line">Цена за м<sup>2</sup>: <b>550 256 ₽</b></div>
252 </div> 252 </div>
253 <div class="card__price"><span>1 000 000 ₽</span> 253 <div class="card__price"><span>1 000 000 ₽</span>
254 </div><a class="card__btn btn btn--bordered" href="#">Подробнее</a> 254 </div><a class="card__btn btn btn--bordered" href="#">Подробнее</a>
255 </div> 255 </div>
256 </div> 256 </div>
257 </div> 257 </div>
258 <div class="swiper-slide"> 258 <div class="swiper-slide">
259 <div class="card"> 259 <div class="card">
260 <div class="card__top"><img src="images/card/card-img-2.jpg" alt="Фото недвижимости" loading="lazy"> 260 <div class="card__top"><img src="images/card/card-img-2.jpg" alt="Фото недвижимости" loading="lazy">
261 <h3 class="card__title">Барбер-шоп</h3> 261 <h3 class="card__title">Барбер-шоп</h3>
262 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites"> 262 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites">
263 <svg width="18" height="18"> 263 <svg width="18" height="18">
264 <use xlink:href="images/sprite.svg#card-favorites-empty"></use> 264 <use xlink:href="images/sprite.svg#card-favorites-empty"></use>
265 </svg> 265 </svg>
266 <svg width="18" height="18"> 266 <svg width="18" height="18">
267 <use xlink:href="images/sprite.svg#card-favorites"></use> 267 <use xlink:href="images/sprite.svg#card-favorites"></use>
268 </svg></span><a class="card__label card__label-messenger" href="#"> 268 </svg></span><a class="card__label card__label-messenger" href="#">
269 <svg width="25" height="25"> 269 <svg width="25" height="25">
270 <use xlink:href="images/sprite.svg#card-messenger"></use> 270 <use xlink:href="images/sprite.svg#card-messenger"></use>
271 </svg></a></div> 271 </svg></a></div>
272 </div> 272 </div>
273 <div class="card__cnt"> 273 <div class="card__cnt">
274 <div class="card__info"> 274 <div class="card__info">
275 <address class="card__line card__line-complex">ЖК “Новоарбатский”</address> 275 <address class="card__line card__line-complex">ЖК “Новоарбатский”</address>
276 <address class="card__line">Арбатская (8 мин., пешком)<span style="background-color: #0000A0;"></span></address> 276 <address class="card__line">Арбатская (8 мин., пешком)<span style="background-color: #0000A0;"></span></address>
277 <address class="card__line">г. Москва, ул. Дербеневская, д. 1, стр. 6, п. 4, эт. 2, к. 3.1.</address> 277 <address class="card__line">г. Москва, ул. Дербеневская, д. 1, стр. 6, п. 4, эт. 2, к. 3.1.</address>
278 <div class="card__line">Площадь: <b>6 556 м2</b></div> 278 <div class="card__line">Площадь: <b>6 556 м2</b></div>
279 <div class="card__line">Цена за м<sup>2</sup>: <b>5 225 256 ₽</b></div> 279 <div class="card__line">Цена за м<sup>2</sup>: <b>5 225 256 ₽</b></div>
280 </div> 280 </div>
281 <div class="card__price"><span>15 520 900 ₽</span><span>в месяц</span> 281 <div class="card__price"><span>15 520 900 ₽</span><span>в месяц</span>
282 </div><a class="card__btn btn btn--bordered" href="#">Подробнее об аренде</a> 282 </div><a class="card__btn btn btn--bordered" href="#">Подробнее об аренде</a>
283 </div> 283 </div>
284 </div> 284 </div>
285 </div> 285 </div>
286 <div class="swiper-slide"> 286 <div class="swiper-slide">
287 <div class="card"> 287 <div class="card">
288 <div class="card__top"><img src="images/card/card-img-3.jpg" alt="Фото недвижимости" loading="lazy"> 288 <div class="card__top"><img src="images/card/card-img-3.jpg" alt="Фото недвижимости" loading="lazy">
289 <h3 class="card__title">Аптека</h3> 289 <h3 class="card__title">Аптека</h3>
290 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites"> 290 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites">
291 <svg width="18" height="18"> 291 <svg width="18" height="18">
292 <use xlink:href="images/sprite.svg#card-favorites-empty"></use> 292 <use xlink:href="images/sprite.svg#card-favorites-empty"></use>
293 </svg> 293 </svg>
294 <svg width="18" height="18"> 294 <svg width="18" height="18">
295 <use xlink:href="images/sprite.svg#card-favorites"></use> 295 <use xlink:href="images/sprite.svg#card-favorites"></use>
296 </svg></span><a class="card__label card__label-messenger" href="#"> 296 </svg></span><a class="card__label card__label-messenger" href="#">
297 <svg width="25" height="25"> 297 <svg width="25" height="25">
298 <use xlink:href="images/sprite.svg#card-messenger"></use> 298 <use xlink:href="images/sprite.svg#card-messenger"></use>
299 </svg></a></div> 299 </svg></a></div>
300 </div> 300 </div>
301 <div class="card__cnt"> 301 <div class="card__cnt">
302 <div class="card__info"> 302 <div class="card__info">
303 <address class="card__line card__line-complex">ЖК “Садовые кварталы”</address> 303 <address class="card__line card__line-complex">ЖК “Садовые кварталы”</address>
304 <address class="card__line">Коломенская (2 мин., пешком)<span style="background-color: #029B55;"></span></address> 304 <address class="card__line">Коломенская (2 мин., пешком)<span style="background-color: #029B55;"></span></address>
305 <address class="card__line">ул. Ак. Королева, д. 13, стр. 1, этаж 7, пом. 1, к. 69</address> 305 <address class="card__line">ул. Ак. Королева, д. 13, стр. 1, этаж 7, пом. 1, к. 69</address>
306 <div class="card__line">Площадь: <b>8 626 м2</b></div> 306 <div class="card__line">Площадь: <b>8 626 м2</b></div>
307 <div class="card__line">Цена за м<sup>2</sup>: <b>550 256 ₽</b></div> 307 <div class="card__line">Цена за м<sup>2</sup>: <b>550 256 ₽</b></div>
308 </div> 308 </div>
309 <div class="card__price"><span>5 280 000 ₽</span> 309 <div class="card__price"><span>5 280 000 ₽</span>
310 </div><a class="card__btn btn btn--bordered" href="#">Подробнее о продаже</a> 310 </div><a class="card__btn btn btn--bordered" href="#">Подробнее о продаже</a>
311 </div> 311 </div>
312 </div> 312 </div>
313 </div> 313 </div>
314 <div class="swiper-slide"> 314 <div class="swiper-slide">
315 <div class="card"> 315 <div class="card">
316 <div class="card__top"><img src="images/card/card-img-4.jpg" alt="Фото недвижимости" loading="lazy"> 316 <div class="card__top"><img src="images/card/card-img-4.jpg" alt="Фото недвижимости" loading="lazy">
317 <h3 class="card__title">Витрина</h3> 317 <h3 class="card__title">Витрина</h3>
318 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites"> 318 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites">
319 <svg width="18" height="18"> 319 <svg width="18" height="18">
320 <use xlink:href="images/sprite.svg#card-favorites-empty"></use> 320 <use xlink:href="images/sprite.svg#card-favorites-empty"></use>
321 </svg> 321 </svg>
322 <svg width="18" height="18"> 322 <svg width="18" height="18">
323 <use xlink:href="images/sprite.svg#card-favorites"></use> 323 <use xlink:href="images/sprite.svg#card-favorites"></use>
324 </svg></span><a class="card__label card__label-messenger" href="#"> 324 </svg></span><a class="card__label card__label-messenger" href="#">
325 <svg width="25" height="25"> 325 <svg width="25" height="25">
326 <use xlink:href="images/sprite.svg#card-messenger"></use> 326 <use xlink:href="images/sprite.svg#card-messenger"></use>
327 </svg></a></div> 327 </svg></a></div>
328 </div> 328 </div>
329 <div class="card__cnt"> 329 <div class="card__cnt">
330 <div class="card__info"> 330 <div class="card__info">
331 <address class="card__line card__line-complex">ЖК “Нахимовский проспект, 46”</address> 331 <address class="card__line card__line-complex">ЖК “Нахимовский проспект, 46”</address>
332 <address class="card__line">Парк Победы (5 мин., пешком)<span style="background-color: #222964;"></span></address> 332 <address class="card__line">Парк Победы (5 мин., пешком)<span style="background-color: #222964;"></span></address>
333 <address class="card__line">г. Москва, ул. Дербеневская, д. 1, стр. 6, п. 4, эт. 2, к. 3.1.</address> 333 <address class="card__line">г. Москва, ул. Дербеневская, д. 1, стр. 6, п. 4, эт. 2, к. 3.1.</address>
334 <div class="card__line">Площадь: <b>6 856 м2</b></div> 334 <div class="card__line">Площадь: <b>6 856 м2</b></div>
335 <div class="card__line">Цена за м<sup>2</sup>: <b>25 256 ₽</b></div> 335 <div class="card__line">Цена за м<sup>2</sup>: <b>25 256 ₽</b></div>
336 </div> 336 </div>
337 <div class="card__price"><span>2 625 520 ₽</span><span>в месяц</span> 337 <div class="card__price"><span>2 625 520 ₽</span><span>в месяц</span>
338 </div><a class="card__btn btn btn--bordered" href="#">Подробнее об аренде</a> 338 </div><a class="card__btn btn btn--bordered" href="#">Подробнее об аренде</a>
339 </div> 339 </div>
340 </div> 340 </div>
341 </div> 341 </div>
342 <div class="swiper-slide"> 342 <div class="swiper-slide">
343 <div class="card"> 343 <div class="card">
344 <div class="card__top"><img src="images/card/card-img-1.jpg" alt="Фото недвижимости" loading="lazy"> 344 <div class="card__top"><img src="images/card/card-img-1.jpg" alt="Фото недвижимости" loading="lazy">
345 <h3 class="card__title">Салон красоты</h3> 345 <h3 class="card__title">Салон красоты</h3>
346 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites"> 346 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites">
347 <svg width="18" height="18"> 347 <svg width="18" height="18">
348 <use xlink:href="images/sprite.svg#card-favorites-empty"></use> 348 <use xlink:href="images/sprite.svg#card-favorites-empty"></use>
349 </svg> 349 </svg>
350 <svg width="18" height="18"> 350 <svg width="18" height="18">
351 <use xlink:href="images/sprite.svg#card-favorites"></use> 351 <use xlink:href="images/sprite.svg#card-favorites"></use>
352 </svg></span><a class="card__label card__label-messenger" href="#"> 352 </svg></span><a class="card__label card__label-messenger" href="#">
353 <svg width="25" height="25"> 353 <svg width="25" height="25">
354 <use xlink:href="images/sprite.svg#card-messenger"></use> 354 <use xlink:href="images/sprite.svg#card-messenger"></use>
355 </svg></a></div> 355 </svg></a></div>
356 </div> 356 </div>
357 <div class="card__cnt"> 357 <div class="card__cnt">
358 <div class="card__info"> 358 <div class="card__info">
359 <address class="card__line card__line-complex">ЖК “Новинки 1”</address> 359 <address class="card__line card__line-complex">ЖК “Новинки 1”</address>
360 <address class="card__line">Фрунзенская (10 мин., пешком)<span style="background-color: #FFC955;"></span></address> 360 <address class="card__line">Фрунзенская (10 мин., пешком)<span style="background-color: #FFC955;"></span></address>
361 <address class="card__line">ул. Ак. Королева, д. 13, стр. 1, этаж 7, пом. 1, к. 69</address> 361 <address class="card__line">ул. Ак. Королева, д. 13, стр. 1, этаж 7, пом. 1, к. 69</address>
362 <div class="card__line">Площадь: <b>556 м2</b></div> 362 <div class="card__line">Площадь: <b>556 м2</b></div>
363 <div class="card__line">Цена за м<sup>2</sup>: <b>550 256 ₽</b></div> 363 <div class="card__line">Цена за м<sup>2</sup>: <b>550 256 ₽</b></div>
364 </div> 364 </div>
365 <div class="card__price"><span>1 000 000 ₽</span> 365 <div class="card__price"><span>1 000 000 ₽</span>
366 </div><a class="card__btn btn btn--bordered" href="#">Подробнее</a> 366 </div><a class="card__btn btn btn--bordered" href="#">Подробнее</a>
367 </div> 367 </div>
368 </div> 368 </div>
369 </div> 369 </div>
370 <div class="swiper-slide"> 370 <div class="swiper-slide">
371 <div class="card"> 371 <div class="card">
372 <div class="card__top"><img src="images/card/card-img-2.jpg" alt="Фото недвижимости" loading="lazy"> 372 <div class="card__top"><img src="images/card/card-img-2.jpg" alt="Фото недвижимости" loading="lazy">
373 <h3 class="card__title">Барбер-шоп</h3> 373 <h3 class="card__title">Барбер-шоп</h3>
374 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites"> 374 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites">
375 <svg width="18" height="18"> 375 <svg width="18" height="18">
376 <use xlink:href="images/sprite.svg#card-favorites-empty"></use> 376 <use xlink:href="images/sprite.svg#card-favorites-empty"></use>
377 </svg> 377 </svg>
378 <svg width="18" height="18"> 378 <svg width="18" height="18">
379 <use xlink:href="images/sprite.svg#card-favorites"></use> 379 <use xlink:href="images/sprite.svg#card-favorites"></use>
380 </svg></span><a class="card__label card__label-messenger" href="#"> 380 </svg></span><a class="card__label card__label-messenger" href="#">
381 <svg width="25" height="25"> 381 <svg width="25" height="25">
382 <use xlink:href="images/sprite.svg#card-messenger"></use> 382 <use xlink:href="images/sprite.svg#card-messenger"></use>
383 </svg></a></div> 383 </svg></a></div>
384 </div> 384 </div>
385 <div class="card__cnt"> 385 <div class="card__cnt">
386 <div class="card__info"> 386 <div class="card__info">
387 <address class="card__line card__line-complex">ЖК “Новоарбатский”</address> 387 <address class="card__line card__line-complex">ЖК “Новоарбатский”</address>
388 <address class="card__line">Арбатская (8 мин., пешком)<span style="background-color: #0000A0;"></span></address> 388 <address class="card__line">Арбатская (8 мин., пешком)<span style="background-color: #0000A0;"></span></address>
389 <address class="card__line">г. Москва, ул. Дербеневская, д. 1, стр. 6, п. 4, эт. 2, к. 3.1.</address> 389 <address class="card__line">г. Москва, ул. Дербеневская, д. 1, стр. 6, п. 4, эт. 2, к. 3.1.</address>
390 <div class="card__line">Площадь: <b>6 556 м2</b></div> 390 <div class="card__line">Площадь: <b>6 556 м2</b></div>
391 <div class="card__line">Цена за м<sup>2</sup>: <b>5 225 256 ₽</b></div> 391 <div class="card__line">Цена за м<sup>2</sup>: <b>5 225 256 ₽</b></div>
392 </div> 392 </div>
393 <div class="card__price"><span>15 520 900 ₽</span><span>в месяц</span> 393 <div class="card__price"><span>15 520 900 ₽</span><span>в месяц</span>
394 </div><a class="card__btn btn btn--bordered" href="#">Подробнее об аренде</a> 394 </div><a class="card__btn btn btn--bordered" href="#">Подробнее об аренде</a>
395 </div> 395 </div>
396 </div> 396 </div>
397 </div> 397 </div>
398 <div class="swiper-slide"> 398 <div class="swiper-slide">
399 <div class="card"> 399 <div class="card">
400 <div class="card__top"><img src="images/card/card-img-3.jpg" alt="Фото недвижимости" loading="lazy"> 400 <div class="card__top"><img src="images/card/card-img-3.jpg" alt="Фото недвижимости" loading="lazy">
401 <h3 class="card__title">Аптека</h3> 401 <h3 class="card__title">Аптека</h3>
402 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites"> 402 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites">
403 <svg width="18" height="18"> 403 <svg width="18" height="18">
404 <use xlink:href="images/sprite.svg#card-favorites-empty"></use> 404 <use xlink:href="images/sprite.svg#card-favorites-empty"></use>
405 </svg> 405 </svg>
406 <svg width="18" height="18"> 406 <svg width="18" height="18">
407 <use xlink:href="images/sprite.svg#card-favorites"></use> 407 <use xlink:href="images/sprite.svg#card-favorites"></use>
408 </svg></span><a class="card__label card__label-messenger" href="#"> 408 </svg></span><a class="card__label card__label-messenger" href="#">
409 <svg width="25" height="25"> 409 <svg width="25" height="25">
410 <use xlink:href="images/sprite.svg#card-messenger"></use> 410 <use xlink:href="images/sprite.svg#card-messenger"></use>
411 </svg></a></div> 411 </svg></a></div>
412 </div> 412 </div>
413 <div class="card__cnt"> 413 <div class="card__cnt">
414 <div class="card__info"> 414 <div class="card__info">
415 <address class="card__line card__line-complex">ЖК “Садовые кварталы”</address> 415 <address class="card__line card__line-complex">ЖК “Садовые кварталы”</address>
416 <address class="card__line">Коломенская (2 мин., пешком)<span style="background-color: #029B55;"></span></address> 416 <address class="card__line">Коломенская (2 мин., пешком)<span style="background-color: #029B55;"></span></address>
417 <address class="card__line">ул. Ак. Королева, д. 13, стр. 1, этаж 7, пом. 1, к. 69</address> 417 <address class="card__line">ул. Ак. Королева, д. 13, стр. 1, этаж 7, пом. 1, к. 69</address>
418 <div class="card__line">Площадь: <b>8 626 м2</b></div> 418 <div class="card__line">Площадь: <b>8 626 м2</b></div>
419 <div class="card__line">Цена за м<sup>2</sup>: <b>550 256 ₽</b></div> 419 <div class="card__line">Цена за м<sup>2</sup>: <b>550 256 ₽</b></div>
420 </div> 420 </div>
421 <div class="card__price"><span>5 280 000 ₽</span> 421 <div class="card__price"><span>5 280 000 ₽</span>
422 </div><a class="card__btn btn btn--bordered" href="#">Подробнее о продаже</a> 422 </div><a class="card__btn btn btn--bordered" href="#">Подробнее о продаже</a>
423 </div> 423 </div>
424 </div> 424 </div>
425 </div> 425 </div>
426 <div class="swiper-slide"> 426 <div class="swiper-slide">
427 <div class="card"> 427 <div class="card">
428 <div class="card__top"><img src="images/card/card-img-4.jpg" alt="Фото недвижимости" loading="lazy"> 428 <div class="card__top"><img src="images/card/card-img-4.jpg" alt="Фото недвижимости" loading="lazy">
429 <h3 class="card__title">Витрина</h3> 429 <h3 class="card__title">Витрина</h3>
430 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites"> 430 <div class="card__labels"><span class="card__label card__label-favorites js_card_favorites">
431 <svg width="18" height="18"> 431 <svg width="18" height="18">
432 <use xlink:href="images/sprite.svg#card-favorites-empty"></use> 432 <use xlink:href="images/sprite.svg#card-favorites-empty"></use>
433 </svg> 433 </svg>
434 <svg width="18" height="18"> 434 <svg width="18" height="18">
435 <use xlink:href="images/sprite.svg#card-favorites"></use> 435 <use xlink:href="images/sprite.svg#card-favorites"></use>
436 </svg></span><a class="card__label card__label-messenger" href="#"> 436 </svg></span><a class="card__label card__label-messenger" href="#">
437 <svg width="25" height="25"> 437 <svg width="25" height="25">
438 <use xlink:href="images/sprite.svg#card-messenger"></use> 438 <use xlink:href="images/sprite.svg#card-messenger"></use>
439 </svg></a></div> 439 </svg></a></div>
440 </div> 440 </div>
441 <div class="card__cnt"> 441 <div class="card__cnt">
442 <div class="card__info"> 442 <div class="card__info">
443 <address class="card__line card__line-complex">ЖК “Нахимовский проспект, 46”</address> 443 <address class="card__line card__line-complex">ЖК “Нахимовский проспект, 46”</address>
444 <address class="card__line">Парк Победы (5 мин., пешком)<span style="background-color: #222964;"></span></address> 444 <address class="card__line">Парк Победы (5 мин., пешком)<span style="background-color: #222964;"></span></address>
445 <address class="card__line">г. Москва, ул. Дербеневская, д. 1, стр. 6, п. 4, эт. 2, к. 3.1.</address> 445 <address class="card__line">г. Москва, ул. Дербеневская, д. 1, стр. 6, п. 4, эт. 2, к. 3.1.</address>
446 <div class="card__line">Площадь: <b>6 856 м2</b></div> 446 <div class="card__line">Площадь: <b>6 856 м2</b></div>
447 <div class="card__line">Цена за м<sup>2</sup>: <b>25 256 ₽</b></div> 447 <div class="card__line">Цена за м<sup>2</sup>: <b>25 256 ₽</b></div>
448 </div> 448 </div>
449 <div class="card__price"><span>2 625 520 ₽</span><span>в месяц</span> 449 <div class="card__price"><span>2 625 520 ₽</span><span>в месяц</span>
450 </div><a class="card__btn btn btn--bordered" href="#">Подробнее об аренде</a> 450 </div><a class="card__btn btn btn--bordered" href="#">Подробнее об аренде</a>
451 </div> 451 </div>
452 </div> 452 </div>
453 </div>--> 453 </div>-->
454 </div> 454 </div>
455 </div> 455 </div>
456 <div class="swiper-pagination"></div> 456 <div class="swiper-pagination"></div>
457 </div> 457 </div>
458 </div> 458 </div>
459 </section> 459 </section>
460 @endsection 460 @endsection
461 461
462 @section('form_feedback') 462 @section('form_feedback')
463 <!-- Форма обратной связи --> 463 <!-- Форма обратной связи -->
464 @include('form.form_feedback') 464 @include('form.form_feedback')
465 @endsection 465 @endsection
466 466
467 467
resources/views/mapsobj.blade.php
Diff comments   View file @ 357df98
1 @extends('layout.site', ['title' => 'Объекты на карте RentTorg']) 1 @extends('layout.site', ['title' => 'Объекты на карте RentTorg'])
2 2
3 @section('filter') 3 @section('filter')
4 @include('part.filter.mapsobj') 4 @include('part.filter.mapsobj')
5 @endsection 5 @endsection
6 6
7 @section('custom_js') 7 @section('custom_js')
8 @include('js.filter_value') 8 @include('js.filter_value')
9 <script>
10 setGeneralMap() {
11
12 if (document.querySelector('#general-map')) {
13
14 ymaps.ready(init); // Дождёмся загрузки API и готовности DOM;
15
16 function init() {
17
18 const myMap = new ymaps.Map('general-map', { // Создание экземпляра карты и его привязка к контейнеру с заданным id;
19 center: [55.752933963675126, 37.52233749962665], // При инициализации карты обязательно нужно указать её центр и коэффициент масштабирования;
20 zoom: 10,
21 controls: [] // Скрываем элементы управления на карте;
22 });
23
24 // Создаём макет содержимого.
25 const MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
26 '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
27 );
28
29 let collection = new ymaps.GeoObjectCollection(null, { // Создаём коллекцию, в которую будемпомещать метки (что-то типа массива);
30 // preset: 'islands#yellowIcon'
31 });
32
33 let collectionCoords = [ // Создаём массив с координатами (координаты должны располагаться в том же порядке, что и адреса в списке на сайте);
34 [55.867783219108354, 37.392867499999916],
35 [55.728043075486504, 37.73937949999994],
36 [55.72624100423305, 37.476078499999964],
37 [55.80751105044832, 37.449622999999974],
38 [55.601783098948836, 37.36700499999998],
39 [55.86086502152225, 37.540348999999964],
40 [55.784961528728715, 37.56188599999996],
41 [55.63910010399773, 37.319407999999996],
42 [55.55819256767507, 37.55711549999994],
43 [55.79829252928473, 37.52063549999999],
44 ];
45
46 for (let i = 0, l = collectionCoords.length; i < l; i++) { // C помощью цикла добавляем все метки в коллекцию;
47 collection.add(new ymaps.Placemark(collectionCoords[i]));
48 collection.get(i).properties.set('iconContent', `${i + 1}`); // Добавляем каждой метке порядковый номер, записываем его в свойство 'iconContent';
49 }
50
51 myMap.geoObjects.add(collection); // Добавляем коллекцию с метками на карту;
52
53 collection.options.set('iconLayout', 'default#imageWithContent'); // Необходимо указать данный тип макета;
54 collection.options.set('iconImageHref', 'images/mark-complex.svg'); // Своё изображение иконки метки;
55 collection.options.set('iconImageSize', [52, 67]); // Размеры метки;
56 collection.options.set('iconImageOffset', [-26, -67]); // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки);
57 collection.options.set('iconContentOffset', [0, 17]);
58 collection.options.set('iconContentLayout', MyIconContentLayout); // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки);
59
60 const pageMapBar = document.querySelector('.js_page_map_bar');
61 const pageMapBarBtn = pageMapBar.querySelector('.js_page_map_bar_btn');
62 const pageMapBarList = pageMapBar.querySelector('.js_page_map_bar_list');
63 const pageMapBarCards = pageMapBar.querySelectorAll('.card-news');
64
65 const showCard = (i) => {
66
67 pageMapBarCards.forEach((card, k) => {
68
69 card.classList.remove('active');
70
71 if (i == k) {
72 card.classList.add('active');
73 }
74
75 });
76
77 };
78
79 const hidecard = () => {
80
81 pageMapBarCards.forEach(card => {
82 card.classList.remove('active');
83 });
84
85 }
86
87 let pageMapBarItems;
88
89 pageMapBarBtn.addEventListener('click', () => {
90 pageMapBar.classList.toggle('active');
91 });
92
93 pageMapBarList.addEventListener('click', (e) => {
94
95 if (e.target.closest('.page-map-bar__item')) {
96
97 pageMapBarItems = pageMapBarList.querySelectorAll('.page-map-bar__item');
98
99 pageMapBarItems.forEach((item, i) => {
100
101 if (e.target == item && e.target.classList.contains('active')) {
102
103 item.classList.remove('active');
104
105 hidecard();
106
107 } else if (e.target == item) {
108
109 pageMapBarItems.forEach(item => {
110 item.classList.remove('active');
111 });
112
113 item.classList.add('active');
114
115 let offsetCoords = collection.get(i).geometry.getCoordinates();
116
117 offsetCoords = [
118 offsetCoords[0] - 0.0025,
119 offsetCoords[1]
120 ];
121
122 myMap.setZoom(16);
123 // myMap.setCenter(collection.get(i).geometry.getCoordinates());
124 myMap.setCenter(offsetCoords);
125
126 showCard(i);
127
128 }
129
130 });
131 }
132
133 });
134
135 collection.events.add('click', function (e) {
136
137 for (let i = 0, l = collection.getLength(); i < l; i++) {
138
139 if (e.get('target') == collection.get(i)) {
140
141 pageMapBarItems = pageMapBarList.querySelectorAll('.page-map-bar__item');
142
143 pageMapBarItems.forEach((item) => {
144 pageMapBar.classList.add('active');
145 item.classList.remove('active');
146 });
147
148 pageMapBarItems[i].classList.add('active');
149
150 showCard(i);
151
152 }
153
154 }
155
156 });
157
158 }
159
160 }
161
162 };
163 </script>
164 @endsection 9 @endsection
165 10
166 @section('content') 11 @section('content')
167 <section class="page-map"> 12 <section class="page-map">
168 <div class="page-map__wrap"> 13 <div class="page-map__wrap">
169 <h2 class="visually-hidden">Карта</h2> 14 <h2 class="visually-hidden">Карта</h2>
170 <div class="page-map__map" id="general-map"></div> 15 <div class="page-map__map" id="general-map"></div>
171 <div class="container"> 16 <div class="container">
172 <div class="page-map__inner"> 17 <div class="page-map__inner">
173 <div class="page-map-bar js_page_map_bar active"> 18 <div class="page-map-bar js_page_map_bar active">
174 <div class="page-map-bar__top">Все объекты 19 <div class="page-map-bar__top">Все объекты
175 <button class="page-map-bar__close js_page_map_bar_btn" type="button"> 20 <button class="page-map-bar__close js_page_map_bar_btn" type="button">
176 <svg width="20" height="20"> 21 <svg width="20" height="20">
177 <use xlink:href="images/sprite.svg#popup-close"></use> 22 <use xlink:href="images/sprite.svg#popup-close"></use>
178 </svg> 23 </svg>
179 </button> 24 </button>
180 </div> 25 </div>
181 <ul class="page-map-bar__list js_page_map_bar_list"> 26 <ul class="page-map-bar__list js_page_map_bar_list">
182 <li class="page-map-bar__item">ЖК Большое Путилково</li> 27 <li class="page-map-bar__item">ЖК Большое Путилково</li>
183 <li class="page-map-bar__item">ЖК Среда</li> 28 <li class="page-map-bar__item">ЖК Среда</li>
184 <li class="page-map-bar__item">ЖК Квартал Триумфальный</li> 29 <li class="page-map-bar__item">ЖК Квартал Триумфальный</li>
185 <li class="page-map-bar__item">ЖК Алые Паруса</li> 30 <li class="page-map-bar__item">ЖК Алые Паруса</li>
186 <li class="page-map-bar__item">ЖК Первый Московский</li> 31 <li class="page-map-bar__item">ЖК Первый Московский</li>
187 <li class="page-map-bar__item">ЖК Ильменский 17</li> 32 <li class="page-map-bar__item">ЖК Ильменский 17</li>
188 <li class="page-map-bar__item">ЖК Царская Площадь</li> 33 <li class="page-map-bar__item">ЖК Царская Площадь</li>
189 <li class="page-map-bar__item">ЖК Переделкино Ближнее</li> 34 <li class="page-map-bar__item">ЖК Переделкино Ближнее</li>
190 <li class="page-map-bar__item">ЖК Этолон Cити</li> 35 <li class="page-map-bar__item">ЖК Этолон Cити</li>
191 <li class="page-map-bar__item">ЖК Триумф Палас</li> 36 <li class="page-map-bar__item">ЖК Триумф Палас</li>
192 </ul> 37 </ul>
193 <div class="card-news"> 38 <div class="card-news">
194 <div class="card-news__top"><img src="images/card/card-img-5.jpg" alt="Превью к новости" loading="lazy"> 39 <div class="card-news__top"><img src="images/card/card-img-5.jpg" alt="Превью к новости" loading="lazy">
195 <div class="card-news__date"><span>ЖК Большое Путилково</span><span></span></div> 40 <div class="card-news__date"><span>ЖК Большое Путилково</span><span></span></div>
196 </div> 41 </div>
197 <div class="card-news__cnt"> 42 <div class="card-news__cnt">
198 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее 43 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
199 <svg width="17" height="12"> 44 <svg width="17" height="12">
200 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use> 45 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
201 </svg></a> 46 </svg></a>
202 </div> 47 </div>
203 </div> 48 </div>
204 <div class="card-news"> 49 <div class="card-news">
205 <div class="card-news__top"><img src="images/card/card-img-6.jpg" alt="Превью к новости" loading="lazy"> 50 <div class="card-news__top"><img src="images/card/card-img-6.jpg" alt="Превью к новости" loading="lazy">
206 <div class="card-news__date"><span>ЖК Среда</span><span></span></div> 51 <div class="card-news__date"><span>ЖК Среда</span><span></span></div>
207 </div> 52 </div>
208 <div class="card-news__cnt"> 53 <div class="card-news__cnt">
209 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее 54 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
210 <svg width="17" height="12"> 55 <svg width="17" height="12">
211 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use> 56 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
212 </svg></a> 57 </svg></a>
213 </div> 58 </div>
214 </div> 59 </div>
215 <div class="card-news"> 60 <div class="card-news">
216 <div class="card-news__top"><img src="images/card/card-img-7.jpg" alt="Превью к новости" loading="lazy"> 61 <div class="card-news__top"><img src="images/card/card-img-7.jpg" alt="Превью к новости" loading="lazy">
217 <div class="card-news__date"><span>ЖК Квартал Триумфальный</span><span></span></div> 62 <div class="card-news__date"><span>ЖК Квартал Триумфальный</span><span></span></div>
218 </div> 63 </div>
219 <div class="card-news__cnt"> 64 <div class="card-news__cnt">
220 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее 65 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
221 <svg width="17" height="12"> 66 <svg width="17" height="12">
222 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use> 67 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
223 </svg></a> 68 </svg></a>
224 </div> 69 </div>
225 </div> 70 </div>
226 <div class="card-news"> 71 <div class="card-news">
227 <div class="card-news__top"><img src="images/card/card-img-8.jpg" alt="Превью к новости" loading="lazy"> 72 <div class="card-news__top"><img src="images/card/card-img-8.jpg" alt="Превью к новости" loading="lazy">
228 <div class="card-news__date"><span>ЖК Алые Паруса</span><span></span></div> 73 <div class="card-news__date"><span>ЖК Алые Паруса</span><span></span></div>
229 </div> 74 </div>
230 <div class="card-news__cnt"> 75 <div class="card-news__cnt">
231 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее 76 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
232 <svg width="17" height="12"> 77 <svg width="17" height="12">
233 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use> 78 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
234 </svg></a> 79 </svg></a>
235 </div> 80 </div>
236 </div> 81 </div>
237 <div class="card-news"> 82 <div class="card-news">
238 <div class="card-news__top"><img src="images/card/card-img-5.jpg" alt="Превью к новости" loading="lazy"> 83 <div class="card-news__top"><img src="images/card/card-img-5.jpg" alt="Превью к новости" loading="lazy">
239 <div class="card-news__date"><span>ЖК Первый Московский</span><span></span></div> 84 <div class="card-news__date"><span>ЖК Первый Московский</span><span></span></div>
240 </div> 85 </div>
241 <div class="card-news__cnt"> 86 <div class="card-news__cnt">
242 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее 87 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
243 <svg width="17" height="12"> 88 <svg width="17" height="12">
244 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use> 89 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
245 </svg></a> 90 </svg></a>
246 </div> 91 </div>
247 </div> 92 </div>
248 <div class="card-news"> 93 <div class="card-news">
249 <div class="card-news__top"><img src="images/card/card-img-6.jpg" alt="Превью к новости" loading="lazy"> 94 <div class="card-news__top"><img src="images/card/card-img-6.jpg" alt="Превью к новости" loading="lazy">
250 <div class="card-news__date"><span>ЖК Ильменский 17</span><span></span></div> 95 <div class="card-news__date"><span>ЖК Ильменский 17</span><span></span></div>
251 </div> 96 </div>
252 <div class="card-news__cnt"> 97 <div class="card-news__cnt">
253 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее 98 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
254 <svg width="17" height="12"> 99 <svg width="17" height="12">
255 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use> 100 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
256 </svg></a> 101 </svg></a>
257 </div> 102 </div>
258 </div> 103 </div>
259 <div class="card-news"> 104 <div class="card-news">
260 <div class="card-news__top"><img src="images/card/card-img-7.jpg" alt="Превью к новости" loading="lazy"> 105 <div class="card-news__top"><img src="images/card/card-img-7.jpg" alt="Превью к новости" loading="lazy">
261 <div class="card-news__date"><span>ЖК Царская Площадь</span><span></span></div> 106 <div class="card-news__date"><span>ЖК Царская Площадь</span><span></span></div>
262 </div> 107 </div>
263 <div class="card-news__cnt"> 108 <div class="card-news__cnt">
264 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее 109 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
265 <svg width="17" height="12"> 110 <svg width="17" height="12">
266 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use> 111 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
267 </svg></a> 112 </svg></a>
268 </div> 113 </div>
269 </div> 114 </div>
270 <div class="card-news"> 115 <div class="card-news">
271 <div class="card-news__top"><img src="images/card/card-img-8.jpg" alt="Превью к новости" loading="lazy"> 116 <div class="card-news__top"><img src="images/card/card-img-8.jpg" alt="Превью к новости" loading="lazy">
272 <div class="card-news__date"><span>ЖК Переделкино Ближнее</span><span></span></div> 117 <div class="card-news__date"><span>ЖК Переделкино Ближнее</span><span></span></div>
273 </div> 118 </div>
274 <div class="card-news__cnt"> 119 <div class="card-news__cnt">
275 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее 120 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
276 <svg width="17" height="12"> 121 <svg width="17" height="12">
277 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use> 122 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
278 </svg></a> 123 </svg></a>
279 </div> 124 </div>
280 </div> 125 </div>
281 <div class="card-news"> 126 <div class="card-news">
282 <div class="card-news__top"><img src="images/card/card-img-5.jpg" alt="Превью к новости" loading="lazy"> 127 <div class="card-news__top"><img src="images/card/card-img-5.jpg" alt="Превью к новости" loading="lazy">
283 <div class="card-news__date"><span>ЖК Этолон Cити</span><span></span></div> 128 <div class="card-news__date"><span>ЖК Этолон Cити</span><span></span></div>
284 </div> 129 </div>
285 <div class="card-news__cnt"> 130 <div class="card-news__cnt">
286 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее 131 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
287 <svg width="17" height="12"> 132 <svg width="17" height="12">
288 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use> 133 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
289 </svg></a> 134 </svg></a>
290 </div> 135 </div>
291 </div> 136 </div>
292 <div class="card-news"> 137 <div class="card-news">
293 <div class="card-news__top"><img src="images/card/card-img-6.jpg" alt="Превью к новости" loading="lazy"> 138 <div class="card-news__top"><img src="images/card/card-img-6.jpg" alt="Превью к новости" loading="lazy">
294 <div class="card-news__date"><span>ЖК Триумф Палас</span><span></span></div> 139 <div class="card-news__date"><span>ЖК Триумф Палас</span><span></span></div>
295 </div> 140 </div>
296 <div class="card-news__cnt"> 141 <div class="card-news__cnt">
297 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее 142 <p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
298 <svg width="17" height="12"> 143 <svg width="17" height="12">
299 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use> 144 <use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
300 </svg></a> 145 </svg></a>
301 </div> 146 </div>
302 </div> 147 </div>
303 </div> 148 </div>
304 </div> 149 </div>
305 </div> 150 </div>
306 </div> 151 </div>
307 </section> 152 </section>
308 @endsection 153 @endsection
309 154
310 @section('form_feedback') 155 @section('form_feedback')
311 <!-- Форма обратной связи --> 156 <!-- Форма обратной связи -->
312 @include('form.form_feedback') 157 @include('form.form_feedback')
313 @endsection 158 @endsection
314 159
315 160