https://www.magnitogorsk.ru/themes/mgn/assets/js/main.js

1function getMobileOperatingSystem() {
2            var userAgent = navigator.userAgent || navigator.vendor || window.opera;
3
4            // Windows Phone must come first because its UA also contains "Android"
5            if (/windows phone/i.test(userAgent)) {
6                return "Windows Phone";
7            }
8
9            if (/android/i.test(userAgent)) {
10                return "Android";
11            }
12
13            // iOS detection from: http://stackoverflow.com/a/9039885/177710
14            if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
15                return "iOS";
16            }
17
18            return "unknown";
19        }
20
21
22$(document).ready(function () {
23    
24                if (getMobileOperatingSystem() == 'iOS') { $('.btn-just-icon-ios, .btn-ios').show();} 
25				else if (getMobileOperatingSystem() == 'Android') { $('.btn-just-icon-android, .btn-android').show();} 
26				else { $('.btn-just-icon-other, .btn-other').show();} 
27	//Главное меню
28	var burger = $('.burger')
29	var mainMenu = $('.main-menu')
30
31	function toggleMenu() {
32		$(burger).toggleClass('active')
33		$(mainMenu).stop()
34		$(mainMenu).slideToggle()
35	}
36
37	$(burger).click(toggleMenu)
38
39	//Мобильное меню
40	var mobileMenuLink = $('.top-menu__item--mobile .top-menu__link')
41
42	function toggleMobileMenu(e) {
43		e.preventDefault()
44		$(mobileMenuLink).toggleClass('active')
45	}
46
47	$(mobileMenuLink).click(toggleMobileMenu)
48
49	//Погода
50	var API_KEY = 'ff223394b775d8327ed5acee0c906194'
51	var degree = $('.top-menu__degrees')
52	var weatherIcon = $('.top-menu__ico--weather')
53
54	$.getJSON(
55		'https://api.openweathermap.org/data/2.5/weather?lat=53.4186100&lon=59.0472200&units=metric&APPID=' +
56			API_KEY,
57		function (data) {
58			var weathertype = data.weather[0].description
59
60			if (weathertype == 'broken clouds' || weathertype == 'scattered clouds') {
61				$(weatherIcon).css(
62					'background-image',
63					'url(' + '/themes/mgn/assets/img/weather/weather1.png' + ')'
64				)
65			} else if (weathertype == 'few clouds' || weathertype == 'mist') {
66				$(weatherIcon).css(
67					'background-image',
68					'url(' + '/themes/mgn/assets/img/weather/weather3.png' + ')'
69				)
70			} else if (weathertype == 'clear sky') {
71				$(weatherIcon).css(
72					'background-image',
73					'url(' + '/themes/mgn/assets/img/weather/weather2.png' + ')'
74				)
75			} else if (weathertype == 'shower rain' || weathertype == 'rain') {
76				$(weatherIcon).css(
77					'background-image',
78					'url(' + '/themes/mgn/assets/img/weather/weather4.png' + ')'
79				)
80			} else if (weathertype == 'thunderstorm') {
81				$(weatherIcon).css(
82					'background-image',
83					'url(' + '/themes/mgn/assets/img/weather/weather8.png' + ')'
84				)
85			} else if (weathertype == 'snow') {
86				$(weatherIcon).css(
87					'background-image',
88					'url(' + '/themes/mgn/assets/img/weather/weather6.png' + ')'
89				)
90			} else {
91				$(weatherIcon).css(
92					'background-image',
93					'url(' + '/themes/mgn/assets/img/weather/weather1.png' + ')'
94				)
95			}
96
97			$(degree).text(data.main.temp + ' °С')
98		}
99	)
100
101	// Главный слайдер
102	$('.main-slider__block').slick({
103		arrows: false,
104		dots: true,
105		appendDots: '.main-slider__dots',
106		infinite: true,
107		speed: 700,
108		autoplay: true,
109		autoplaySpeed: 5000,
110		slidesToShow: 1,
111		adaptiveHeight: true,
112		pauseOnHover: true,
113		pauseOnDotsHover: true,
114	})
115
116	// Слайдер новостей
117	$('.day-news-slider__block').slick({
118		arrows: false,
119		dots: true,
120		infinite: true,
121		autoplay: true,
122		autoplaySpeed: 7000,
123		speed: 500,
124		slidesToShow: 1,
125		adaptiveHeight: true,
126		pauseOnHover: true,
127		pauseOnDotsHover: true,
128	})
129
130	// Слайдер бинеров
131	$('.banner-slider__block').slick({
132		arrows: false,
133		dots: true,
134		infinite: true,
135		speed: 300,
136		slidesToShow: 1,
137		adaptiveHeight: true,
138		autoplay: true,
139		autoplaySpeed: 2000,
140		fade: true,
141		cssEase: 'linear',
142	})
143
144	// Слайдер сайтов планшетный
145	$('.sites__list').slick({
146		arrows: true,
147		dots: false,
148		infinite: true,
149		speed: 300,
150		autoplay: true,
151		autoplaySpeed: 2000,
152		slidesToShow: 5,
153		adaptiveHeight: true,
154		pauseOnHover: true,
155		responsive: [
156			{
157				breakpoint: 1400,
158				settings: {
159					slidesToShow: 4,
160				},
161			},
162			{
163				breakpoint: 1200,
164				settings: {
165					slidesToShow: 4,
166				},
167			},
168			{
169				breakpoint: 1100,
170				settings: {
171					slidesToShow: 3,
172				},
173			},
174			{
175				breakpoint: 998,
176				settings: {
177					slidesToShow: 5,
178				},
179			},
180			{
181				breakpoint: 800,
182				settings: {
183					slidesToShow: 4,
184				},
185			},
186			{
187				breakpoint: 768,
188				settings: {
189					slidesToShow: 3,
190				},
191			},
192			{
193				breakpoint: 576,
194				settings: {
195					slidesToShow: 2,
196				},
197			},
198			{
199				breakpoint: 500,
200				settings: {
201					slidesToShow: 1,
202				},
203			},
204		],
205	})
206
207	// Слайдер сайтов
208	$('.sites-slider__block').slick({
209		arrows: true,
210		dots: false,
211		infinite: true,
212		speed: 300,
213		autoplay: true,
214		autoplaySpeed: 2000,
215		slidesToShow: 5,
216		adaptiveHeight: true,
217		pauseOnHover: true,
218		responsive: [
219			{
220				breakpoint: 1400,
221				settings: {
222					slidesToShow: 4,
223				},
224			},
225			{
226				breakpoint: 1200,
227				settings: {
228					slidesToShow: 4,
229				},
230			},
231			{
232				breakpoint: 1100,
233				settings: {
234					slidesToShow: 3,
235				},
236			},
237			{
238				breakpoint: 998,
239				settings: {
240					slidesToShow: 5,
241				},
242			},
243			{
244				breakpoint: 800,
245				settings: {
246					slidesToShow: 4,
247				},
248			},
249			{
250				breakpoint: 768,
251				settings: {
252					slidesToShow: 3,
253				},
254			},
255			{
256				breakpoint: 576,
257				settings: {
258					slidesToShow: 2,
259				},
260			},
261			{
262				breakpoint: 500,
263				settings: {
264					slidesToShow: 1,
265				},
266			},
267		],
268	})
269
270	//Прокрутка к началу страницы
271	$('.scroll').on('click', function (e) {
272		var anchor = $(this)
273		$('html, body')
274			.stop()
275			.animate(
276				{
277					scrollTop: $(anchor.attr('href')).offset().top,
278				},
279				777
280			)
281		e.preventDefault()
282		return false
283	})
284
285	// Сортировка поиска
286
287	$('#sort__select').on('change', function () {
288		$('#form-search').submit()
289	})
290
291	//Табы
292	var tabLink = $('.tab__link')
293	var tabItem = $('.tab__item')
294
295	function activeTab(e) {
296		e.preventDefault()
297		$(tabLink).removeClass('active')
298		$(tabItem).removeClass('active')
299		var tabItemId = $(this).attr('href')
300		$(tabItemId).addClass('active')
301		$(this).addClass('active')
302	}
303
304	$(tabLink).click(activeTab)
305
306	//Размер таблиц
307	/*var table = $("table");
308	if (table.length > 0) {
309		var tableWidth = $(table).width();
310		var tableParentWidth = $(table)
311			.parent()
312			.width();
313		if (tableWidth > tableParentWidth) {
314			$(table)
315				.parent()
316				.addClass("tableWrapper");
317		}
318	}*/
319
320	// print page
321	// var print_btn = $(".print-content__img");
322	// $(print_btn).click(function () {
323	// 	window.print();
324	// });
325
326	// dub menu
327	var sub_menu_btn = $('.inner-menu-four__item--sub')
328	$(sub_menu_btn).click(function () {
329		$(this).find('.inner-menu-sub').stop().slideToggle()
330	})
331
332	/**
333	 * Отрисовка виджета
334	 * @param {Array} links
335	 */
336	function renderWidget(links = []) {
337		const style = document.createElement('style')
338		style.innerHTML = `
339		.widget {
340			position: fixed;
341			left: 26px;
342			bottom: 33px;
343			border: 1px solid #4A92FF;
344			border-radius: 50%;
345			cursor: pointer;
346			overflow: hidden;
347		}
348
349		.widget__icon {
350			display: flex;
351			justify-content: center;
352			align-items: center;
353			width: 72px;
354			height: 72px;
355			background: #3670C7;
356			border-radius: 50%;
357			margin: 6px;
358			transition: 0.2s;
359		}
360
361		.widget.active .widget__icon {
362			display: none;
363		}
364
365		.widget:not(.active):hover .widget__icon {
366			background: #004EAE;
367		}
368
369		.widget:not(.active) .widget__content {
370			display: none;
371			animation: none;
372		}
373
374		.widget:not(.active) {
375			animation: pulse 2s infinite;
376		}
377
378		@-webkit-keyframes pulse {
379			0% {
380				-webkit-box-shadow: 0 0 0 0 rgba(54,112,199, 0.4);
381			}
382			70% {
383				-webkit-box-shadow: 0 0 0 10px rgba(54,112,199, 0);
384			}
385			100% {
386				-webkit-box-shadow: 0 0 0 0 rgba(54,112,199, 0);
387			}
388		}
389		@keyframes pulse {
390			0% {
391				-moz-box-shadow: 0 0 0 0 rgba(54,112,199, 0.4);
392				box-shadow: 0 0 0 0 rgba(54,112,199, 0.4);
393			}
394			70% {
395				-moz-box-shadow: 0 0 0 10px rgba(54,112,199, 0);
396				box-shadow: 0 0 0 10px rgba(54,112,199, 0);
397			}
398			100% {
399				-moz-box-shadow: 0 0 0 0 rgba(54,112,199, 0);
400				box-shadow: 0 0 0 0 rgba(54,112,199, 0);
401			}
402		}
403
404		.widget.active {
405			width: 320px;
406			height: auto;
407			min-height: 217px;
408			background: #FFFFFF;
409			box-shadow: 0px 7px 11px rgba(110, 146, 202, 0.34);
410			border-radius: 7px;
411			border: none;
412			cursor: auto;
413		}
414
415		.widget__content-title {
416			display: flex;
417			justify-content: center;
418			align-items: center;
419			color: white;
420			font-family: PT_Russia;

421			font-style: normal;
422			font-weight: bold;
423			font-size: 18px;
424			line-height: 24px;
425			text-align: center;
426			background: #3670C7;
427			height: 114px;
428			padding: 0 32px;
429			position: relative;
430		}
431
432		.widget__content-title svg {
433			cursor: pointer;
434			position: absolute;
435			right: 14px;
436			top: 14px;
437		}
438
439		.widget__content-social {
440			display: flex;
441			justify-content: center;
442			aligh-items: center;
443			padding: 30px 0;
444			flex-wrap: wrap;
445			column-gap: 12.5px;
446			row-gap: 12.5px;
447		}
448		`
449
450		const mainIcon = `
451		<div class='widget__icon'>
452			<svg width="35" height="33" viewBox="0 0 35 33" fill="none" xmlns="http://www.w3.org/2000/svg">
453			<path d="M18.216 21.0672H5.91914" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
454			<path d="M18.2165 16.1484H10.8383" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
455			<path d="M28.9997 6L16.9997 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
456			<path d="M28.9997 11H25.9997" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
457			<path d="M23.1344 31.2607V12.4594C23.1344 11.1011 22.0333 10 20.6751 10H3.45939C2.10108 10 1.00001 11.1011 1.00001 12.4594V24.7563C1.00001 26.1146 2.10108 27.2157 3.45939 27.2157H17.0336C17.7808 27.2157 18.4874 27.5553 18.9541 28.1387L21.8205 31.7216C22.2562 32.2662 23.1344 31.9582 23.1344 31.2607Z" stroke="white" stroke-width="1.5"/>
458			<path d="M10.9997 10V4C10.9997 2.34315 12.3428 1 13.9997 1H30.9997C32.6565 1 33.9997 2.34315 33.9997 4V16C33.9997 17.6569 32.6565 19 30.9997 19H22.4997" stroke="white" stroke-width="1.5"/>
459			</svg>
460		</div>
461		`
462
463		const content = `
464		<div class='widget__content'>
465			<div class='widget__content-title'>
466				Присоединяйтесь к нам в&nbspсоциальных сетях
467				<svg id='closeWidget' width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
468					<path d="M1 1L13 13" stroke="white" stroke-width="2"/>
469					<path d="M13 1L1 13" stroke="white" stroke-width="2"/>
470				</svg>
471			</div>
472			<div class='widget__content-social'>
473				${links
474					.filter(({ shown }) => shown)
475					.map(
476						({ type, link, icon }) =>
477							`<a href='${link}' target='_blank'>${icon}</a>`
478					)
479					.join('')}
480			</div>
481		</div>
482		`
483
484		const widget = document.createElement('div')
485
486		widget.innerHTML = content + mainIcon
487		widget.className = 'widget active'
488
489		widget.addEventListener('click', () => {
490			if (!widget.classList.contains('active')) {
491				widget.classList.add('active')
492			}
493		})
494
495		document.head.append(style)
496		document.body.append(widget)
497
498		widget.querySelector('#closeWidget').addEventListener('click', (e) => {
499			e.stopPropagation()
500			widget.classList.remove('active')
501		})
502	}
503
504	const pageException = [
505		'https://www.magnitogorsk.ru/component/structure-of-administration',
506		'https://www.magnitogorsk.ru/component/internet-reception',
507		'https://www.magnitogorsk.ru/content/obrashcheniya-grazhdan/internet-priemnaya',
508	]
509
510	if ($.fn.request) {
511	$('.widget').request('SocialList::onSocial', {
512		success: function (data) {
513			this.success(data).done(function () {
514				var resources = JSON.parse(data.result)
515
516				if (pageException.every((link) => link !== window.location.href)) {
517					renderWidget(resources)
518				}
519			})
520		},
521	})
522	}
523})