https://rkeeper-crimea.ru/bitrix/tools/concept.stories/js/scripts.js

1var 
2layerPopup = 0, 
3windowWidth = document.documentElement.clientWidth,
4windowHeight = document.documentElement.clientHeight;
5
6
7
8function cptStoriesHideAdv()
9{
10	
11	var hideAdv = document.querySelector(".js-cpt-stories-hide-adv"),
12		siteID = document.querySelector('.cpt-stories-site_id');
13
14	if(hideAdv)
15	{
16		cptStoriesXMLrequest({
17			'path':'/bitrix/tools/concept.stories/hide_adv.php',
18			'data': {
19				'siteID':siteID.value,
20				'check':'Y',
21				'USER_ID': hideAdv.getAttribute('data-user-id'),
22			},
23			'NODE':null,
24			'HIDE_ADV':'Y'
25		});
26	}
27}
28
29(function(window){
30
31	window.CptStories = function(arParams)
32	{
33		this.product = arParams;
34		this.nodes = {};
35		this.eventsCustom = {};
36		this.intervalId = null;
37		this.time = 5;
38		this.start = 0;
39		this.setForLocalStorage = {};
40		this.error = 0;
41		this.initConfig();
42
43
44		if(this.product.SLIDER.ITEMS_CNT === '0')
45			this.error = -100;
46
47		if(this.error === 0)
48			BX.ready(BX.delegate(this.init, this));
49	};
50
51	window.CptStories.prototype = 
52	{
53		initConfig: function(){
54
55			/*this.product.SLIDER.SELECTED = parseInt(this.product.SLIDER.SELECTED,10);
56
57			if(this.product.SLIDER.ITEMS.length>0)
58			{
59				for (var i = 0; i < this.product.SLIDER.ITEMS.length; i++) {
60					this.product.SLIDER.ITEMS[i].SELECTED = parseInt(this.product.SLIDER.ITEMS[i].SELECTED);
61				}
62			}*/
63		},
64
65		initNodes: function(){
66
67			if(this.product.NODE)
68			{
69				this.nodes.obStories = document.querySelector("#"+this.product.NODE);
70
71				var clone = this.nodes.obStories.cloneNode(true);
72
73				this.nodes.obStories.remove();
74
75				document.body.appendChild(clone);
76				
77				this.nodes.obStories = clone;
78
79				this.nodes.obWindow = this.nodes.obStories.querySelector(".js-cpt-stories-modal-guts");
80				this.nodes.obCloseBtn = this.nodes.obStories.querySelector(".js-cpt-stories-close-button");
81				this.nodes.obPauseBtn = this.nodes.obStories.querySelector(".js-cpt-stories-pause-button");
82
83				this.nodes.obBtnNext = this.nodes.obStories.querySelectorAll(".js-cpt-stories-window-next");
84				this.nodes.obBtnPrev = this.nodes.obStories.querySelectorAll(".js-cpt-stories-window-prev");
85
86				this.nodes.obWrSlides = this.nodes.obStories.querySelector(".js-cpt-stories-slides");
87				this.nodes.obSlides = this.nodes.obWrSlides.querySelectorAll(".js-cpt-stories-slide");
88				
89				this.nodes.obFrames = this.nodes.obWrSlides.querySelectorAll(".js-cpt-stories-frame");
90
91				this.nodes.obOverlay = this.nodes.obStories.querySelector(".js-cpt-stories-modal-overlay");
92				this.nodes.obOverlayUser = this.nodes.obStories.querySelector(".js-cpt-stories-modal-overlay-user");
93				this.nodes.obShadow = this.nodes.obStories.querySelector(".js-cpt-stories-bg-shadow");
94
95
96				this.nodes.obStoriesPreview = document.querySelector("#"+this.product.NODE_PREVIEW);
97
98				this.nodes.obWrSlidesPreview = this.nodes.obStoriesPreview.querySelectorAll(".js-cpt-stories-preview-slide");
99
100
101				this.nodes.obBtns = this.nodes.obWrSlides.querySelectorAll(".js-cpt-stories-frame-btn");
102				this.nodes.obFrameTitles = this.nodes.obWrSlides.querySelectorAll(".js-cpt-stories-frame-title");
103				this.nodes.obFrameSubTitles = this.nodes.obWrSlides.querySelectorAll(".js-cpt-stories-frame-subtitle");
104				this.nodes.obFrameText = this.nodes.obWrSlides.querySelectorAll(".js-cpt-stories-frame-text");
105
106				/*this.nodes.obVideos = this.nodes.obWrSlides.querySelectorAll(".js-cpt-stories-video");*/
107
108			}
109
110			if(this.product.IS_WG === 'Y')
111			{
112				this.nodes.obFixBlock = document.querySelector(".js-cpt-stories-fixblock");
113				this.nodes.obHideFixBlockBtn = this.nodes.obFixBlock.querySelector(".js-cpt-stories-close-button");
114			}
115		},
116
117		setFontsSize: function()
118		{
119			var curFSize = null,
120				result = 0,
121				ratio = 100,
122				windowWidth = document.documentElement.clientWidth;
123
124
125			if(windowWidth >= 1200)
126			{
127				ratio = 0;
128			}
129			else if(windowWidth >= 992 && windowWidth <= 1199)
130			{
131				ratio = 0;
132			}
133			else if(windowWidth >= 768 && windowWidth <= 991)
134			{
135				ratio = 10;
136			}
137			else
138			{
139				ratio = 15;
140			}
141
142
143			if(this.nodes.obBtns)
144				for (var i = 0; i < this.nodes.obBtns.length; i++)
145				{
146					this.nodes.obBtns[i].style.fontSize='';
147					curFSize = parseInt(window.getComputedStyle(this.nodes.obBtns[i]).fontSize);
148					result = curFSize - (curFSize * ratio / 100);
149					this.nodes.obBtns[i].style.fontSize=result+'px';
150					this.nodes.obBtns[i].style.lineHeight=(result+4)+'px';
151				}
152				
153			if(this.nodes.obFrameTitles)
154				for (var i = 0; i < this.nodes.obFrameTitles.length; i++)
155				{
156					this.nodes.obFrameTitles[i].style.fontSize='';
157					curFSize = parseInt(window.getComputedStyle(this.nodes.obFrameTitles[i]).fontSize);
158					result = curFSize - (curFSize * ratio / 100);
159					this.nodes.obFrameTitles[i].style.fontSize=result+'px';
160					this.nodes.obFrameTitles[i].style.lineHeight=(result+4)+'px';
161				}
162
163			if(this.nodes.obFrameSubTitles)
164				for (var i = 0; i < this.nodes.obFrameSubTitles.length; i++)
165				{
166					this.nodes.obFrameSubTitles[i].style.fontSize='';
167					curFSize = parseInt(window.getComputedStyle(this.nodes.obFrameSubTitles[i]).fontSize);
168					result = curFSize - (curFSize * ratio / 100);
169					this.nodes.obFrameSubTitles[i].style.fontSize=result+'px';
170					this.nodes.obFrameSubTitles[i].style.lineHeight=(result+6)+'px';
171				}
172
173			if(this.nodes.obFrameText)
174				for (var i = 0; i < this.nodes.obFrameText.length; i++)
175				{
176					this.nodes.obFrameText[i].style.fontSize='';
177					curFSize = parseInt(window.getComputedStyle(this.nodes.obFrameText[i]).fontSize);
178					result = curFSize - (curFSize * ratio / 100);
179					this.nodes.obFrameText[i].style.fontSize=result+'px';
180					this.nodes.obFrameText[i].style.lineHeight=(result+4)+'px';
181				}
182		},
183
184		bindAnaliticsBtns: function()
185		{
186			var that = this;
187			for (var i = 0; i < this.nodes.obBtns.length; i++)
188			{
189
190				var slideID = null,
191					frameID = null,
192					nodeFrame = null;
193
194
195				this.nodes.obBtns[i].addEventListener('click', function()
196				{
197
198					var target = event.target;
199

200					if(target.closest(".js-cpt-stories-frame"))
201					{
202						
203						nodeFrame = target.closest(".js-cpt-stories-frame");
204						slideID = nodeFrame.getAttribute('data-story');
205						frameID = nodeFrame.getAttribute('data-frame');
206
207						if(that.product.SLIDER.ITEMS[slideID].ITEMS[frameID].ANALYTIC_BTN_CLICK)
208							cptStoriesAddScript(that.product.SLIDER.ITEMS[slideID].ITEMS[frameID].ANALYTIC_BTN_CLICK);
209					
210					}
211
212				});
213				
214			}
215		},
216
217		bindBtns: function()
218		{
219			var that = this;
220
221			for (var i = 0; i < this.nodes.obBtns.length; i++)
222			{
223				this.nodes.obBtns[i].addEventListener('click', that.hidePopupStories.bind(that));
224			}
225		},
226
227		bindPauseFromFrame: function()
228		{
229			var that = this;
230		
231			for (var i = 0; i < this.nodes.obFrames.length; i++)
232			{
233				this.nodes.obFrames[i].addEventListener("mousedown", function(e) {
234					that.pauseFrame();
235				});
236		
237				this.nodes.obFrames[i].addEventListener("mouseup", function(e) {
238					that.playFrame();
239				});
240		
241				this.nodes.obFrames[i].addEventListener("touchstart", function(e) {
242					that.pauseFrame();
243				});
244		
245				this.nodes.obFrames[i].addEventListener("touchend", function(e) {
246					that.playFrame();
247				});
248			}
249		},
250
251		getCurrentVideoElement: function() {
252			var currentFrame = this.nodes.obWrSlides.querySelector(
253				".js-cpt-stories-slide[data-story='" + this.product.SLIDER_SELECTED + "'] .js-cpt-stories-frame[data-frame='" + this.product.FRAME_SELECTED + "']"
254			);
255		
256			if (currentFrame) {
257				return currentFrame.querySelector("video");
258			}
259		
260			return null;
261		},
262
263		bindPrevNextBtns: function()
264		{
265			var that = this;
266
267			if(this.nodes.obBtnNext)
268			{
269				for (var i = 0; i < this.nodes.obBtnNext.length; i++)
270				{
271					this.nodes.obBtnNext[i].addEventListener("click", function(e) 
272					{
273						e.preventDefault();
274						that.next();
275					});
276					/*this.nodes.obBtnNext[i].addEventListener("mouseup", function(e) 
277					{
278						e.preventDefault();
279						that.playFrame();
280					});*/
281					
282				}
283			}
284
285			if(this.nodes.obBtnPrev)
286			{
287
288				for (var i = 0; i < this.nodes.obBtnPrev.length; i++)
289				{
290					this.nodes.obBtnPrev[i].addEventListener("click", function(e) 
291					{
292						e.preventDefault();
293						that.prev();
294					});
295					/*this.nodes.obBtnPrev[i].addEventListener("mouseup", function(e) 
296					{
297						e.preventDefault();
298						that.playFrame();
299					});*/
300				}
301			}
302		},
303
304		bindShowPopupStories: function()
305		{
306			var that = this;
307		
308			if (this.nodes.obWrSlidesPreview)
309			{
310				for (var i = 0; i < this.nodes.obWrSlidesPreview.length; i++)
311				{
312					this.nodes.obWrSlidesPreview[i].addEventListener("click", function(e) {
313						that.showPopupStories(e);
314		
315						var currentVideo = that.nodes.obWrSlides.querySelector(
316							".js-cpt-stories-slide[data-story='" + that.product.SLIDER_SELECTED + "'] .js-cpt-stories-frame[data-frame='" + that.product.FRAME_SELECTED + "'] video"
317						);
318		
319						if (currentVideo) {
320							currentVideo.muted = false;
321							currentVideo.play().catch(function(err){
322								console.warn("Первое видео не запустилось:", err);
323							});
324						}
325					});
326				}
327			}
328		},
329
330		bindHidePopupStories: function()
331		{
332			var that = this;
333			if(this.nodes.obCloseBtn)
334				this.nodes.obCloseBtn.addEventListener('click', that.hidePopupStories.bind(that));
335
336			if(this.nodes.obShadow)
337				this.nodes.obShadow.addEventListener('click', that.hidePopupStories.bind(that));
338		},
339
340		bindTooglePlayPause: function()
341		{
342			var target = event.target;
343			event.preventDefault();
344
345
346			if(target.closest(".cpt-stories-pause"))
347			{
348				this.pauseFrame();
349			}
350			else if(target.closest(".cpt-stories-play"))
351			{
352				this.playFrame();
353			}
354		},
355
356		showPopupStories: function()
357		{
358
359			var videos = this.nodes.obStories.querySelectorAll(".js-cpt-stories-video");
360			videos.forEach(function(video) {
361				video.controls = false; 
362				video.muted = false;
363				video.volume = 1;
364				video.play().catch((e) => {
365					console.warn("Не удалось воспроизвести видео:", e);
366				});
367			});
368			var target = event.target, slide = null;
369

370			if(slide = target.closest(".js-cpt-stories-preview-slide"))
371		    {
372				event.preventDefault();
373
374				setBodyOverflowHidden();
375
376
377				if(document.documentElement.clientWidth <= 576)
378				{
379					if(document.documentElement.requestFullScreen) {
380					    document.documentElement.requestFullScreen();
381					  } else if(document.documentElement.mozRequestFullScreen) {
382					    document.documentElement.mozRequestFullScreen();
383					  } else if(document.documentElement.webkitRequestFullScreen) {
384					    document.documentElement.webkitRequestFullScreen();
385					  }
386				}
387				
388
389
390				this.product.SLIDER.SELECTED = slide.getAttribute('data-story');
391
392				this.changeSlide();
393				this.changeFrame();
394
395				this.getCurrentStory();
396				this.ComplitedFramesNav();
397				this.startFrameNav();
398				this.controlVideoPlaybackForCurrentFrame();
399				this.nodes.obStories.classList.remove('cpt-stories-d-none');
400
401
402
403				if(this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].ANALYTICS_START_WATCH)
404					cptStoriesAddScript(this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].ANALYTICS_START_WATCH);
405
406
407
408
409			}
410				
411		},
412
413		hidePopupStories: function()
414		{
415
416			if(document.documentElement.clientWidth <= 576)
417			{
418				if(document.cancelFullScreen)
419					document.cancelFullScreen();
420
421				else if(document.mozCancelFullScreen)
422				    document.mozCancelFullScreen();
423
424				else if(document.webkitCancelFullScreen)
425					document.webkitCancelFullScreen();
426			}
427
428			this.pauseAndResetAllVideos();
429			this.setBtnPlay();
430			this.nodes.obStories.classList.add('cpt-stories-d-none');
431			clearInterval(this.intervalId);
432			deleteBodyOverflowHidden();
433
434		},
435
436		bindEvents: function()
437		{
438			this.bindShowPopupStories();
439			this.bindHidePopupStories();
440			this.bindPrevNextBtns();
441			this.bindPauseFromFrame();
442			this.bindBtns();
443			this.bindAnaliticsBtns();
444
445			if(this.product.IS_WG === 'Y')
446				this.bindHideFixBlockBtn();
447
448			var that = this;
449			if(this.nodes.obPauseBtn)
450				this.nodes.obPauseBtn.addEventListener('click', that.bindTooglePlayPause.bind(that));
451		},
452
453
454		preViewSlides: function()
455		{
456			var data = JSON.parse(localStorage.getItem('cpt-stories-'+this.product.ID)),
457				newDate = {};
458			
459			if(data)
460			{
461
462				if(Object.keys(data).length > 30)
463				{
464					localStorage.removeItem('cpt-stories-'+this.product.ID);
465				}
466				else
467				{
468
469					if(this.product.SLIDER.ITEMS)
470					{
471						for (var pair in this.product.SLIDER.ITEMS){
472
473							if(this.product.SLIDER.ITEMS[pair].ITEMS_CNT === data[pair])
474							{
475								newDate[pair] = data[pair];
476							}
477						}
478					}
479
480					if(Object.keys(newDate).length > 0)
481					{
482
483						this.setForLocalStorage = newDate;
484
485						for (var i = 0; i < this.nodes.obWrSlidesPreview.length; i++)
486						{
487							var dataStory = this.nodes.obWrSlidesPreview[i].getAttribute('data-story');
488
489							for (var pair in this.setForLocalStorage){
490								if(dataStory == pair)
491									this.nodes.obWrSlidesPreview[i].classList.remove('cpt-stories-preview-slide-active');
492
493							}
494							// this.nodes.obWrSlidesPreview[data[i]].classList.remove('cpt-stories-preview-slide-active');
495						}
496					}
497				}
498			}
499		},
500
501		startWg: function(){
502			this.product.WG_START_TIMER = parseFloat(this.product.WG_START_TIMER);
503			var that = this,
504				now = Date.now(),
505				data = JSON.parse(localStorage.getItem('cpt-stories-timer'));
506			
507			if(data)
508			{
509				if(now>=data[0])
510				{
511					localStorage.removeItem('cpt-stories-timer');
512				}
513				else
514				{
515					that.product.WG_START_TIMER = data[0] - now;
516				}
517			}
518
519
520			setTimeout(
521				function()
522				{
523					that.nodes.obFixBlock.classList.add('cpt-stories-show');
524
525					setTimeout(
526					function()
527					{
528						var previmg = that.nodes.obFixBlock.querySelector('.js-cpt-stories-fixblock-img');
529						if(previmg)
530							previmg.classList.add('cpt-stories-animate-rotate');
531					},1000
532				);
533
534
535				},that.product.WG_START_TIMER
536			);
537			
538		},
539
540		hideFixBlock: function()
541		{
542			this.nodes.obFixBlock.classList.remove('cpt-stories-show');
543
544			this.product.WG_HIDDEN_TIMER = parseInt(this.product.WG_HIDDEN_TIMER);
545
546			if(this.product.WG_HIDDEN_TIMER > 0)
547			{
548				var now = Date.now();
549				localStorage.setItem('cpt-stories-timer', JSON.stringify([this.product.WG_HI

549DDEN_TIMER + now]));
550			}
551		},
552
553		bindHideFixBlockBtn: function(){
554
555			if(this.nodes.obHideFixBlockBtn)
556			{
557				var that = this;
558				this.nodes.obHideFixBlockBtn.addEventListener('click', that.hideFixBlock.bind(that));
559			}
560			
561		},
562
563		init: function()
564		{
565			
566			this.initNodes();
567			this.preViewSlides();
568			this.setupFrameParams();
569			window.addEventListener("resize", {handleEvent: this.setupFrameParams, context: this});
570
571
572			if(this.product.IS_WG === 'Y')
573				this.startWg();
574
575			this.changeSlide();
576			this.changeFrame();
577
578			this.bindEvents();
579
580			this.getCurrentStory();
581
582		},
583
584		getCurrentStory: function(){
585			this.getCurrentSlide();
586			this.getCurrentFrame();
587		},
588
589		resetFrames: function(){
590			var obFrameNavs = this.nodes.obStories.querySelectorAll(".js-cpt-stories-slide-progress-item[data-story='"+this.product.SLIDER_SELECTED+"']");
591
592			for (var i = 0; i < obFrameNavs.length; i++)
593			{
594				obFrameNavs[i].style.width = '0%';
595			}
596		},
597
598
599		ComplitedFramesNav: function(){
600
601			this.resetFrames();
602
603			var obFrameNavs = this.nodes.obStories.querySelectorAll(".js-cpt-stories-slide-progress-item[data-story='"+this.product.SLIDER_SELECTED+"']");
604
605			for (var i = 0; i < obFrameNavs.length; i++)
606			{
607				if(parseInt(this.product.SLIDER.ITEMS[this.product.SLIDER_SELECTED].ITEMS[this.product.FRAME_SELECTED].INDEX) === i)
608					break;
609
610				obFrameNavs[i].style.width = '100%';
611			}
612		
613		},
614
615		setBtnPlay: function()
616		{
617			this.nodes.obPauseBtn.classList.add("cpt-stories-pause");
618			this.nodes.obPauseBtn.classList.remove("cpt-stories-play");
619		},
620
621		setBtnPause: function()
622		{
623			this.nodes.obPauseBtn.classList.add("cpt-stories-play");
624			this.nodes.obPauseBtn.classList.remove("cpt-stories-pause");
625		},
626		pauseAndResetAllVideos: function() {
627			var videos = this.nodes.obStories.querySelectorAll(".js-cpt-stories-video");
628		
629			videos.forEach(function(video) {
630				video.pause();
631				video.currentTime = 0;
632			});
633		},
634		playFrame: function() {
635			this.moveFrameNav();
636			this.setBtnPlay();
637		
638			this.controlVideoPlaybackForCurrentFrame();
639			
640			var currentVideo = this.getCurrentVideoElement();
641			if (currentVideo) {
642				currentVideo.muted = false;
643		
644				const playPromise = currentVideo.play();
645				if (playPromise !== undefined) {
646					playPromise.catch(function(err) {
647						console.warn("Ошибка запуска видео:", err);
648					});
649				}
650			}
651		},
652		pauseFrame: function() {
653			if (this.intervalId) {
654				clearInterval(this.intervalId);
655				this.setBtnPause();
656			}
657		
658			var currentVideo = this.nodes.obWrSlides.querySelector(
659				".js-cpt-stories-slide[data-story='" + this.product.SLIDER_SELECTED + "'] .js-cpt-stories-frame[data-frame='" + this.product.FRAME_SELECTED + "'] video"
660			);
661		
662			if (currentVideo && !currentVideo.paused) {
663				currentVideo.pause();
664			}
665		},
666
667
668
669		moveFrameNav: function(){
670			var that = this;
671			var obFrameNav = this.nodes.obStories.querySelector(".js-cpt-stories-slide-progress-item[data-story='"+this.product.SLIDER_SELECTED+"'][data-frame='"+this.product.FRAME_SELECTED+"']");
672
673			this.intervalId = setInterval(function(){
674				obFrameNav.style.width = that.start+'%';
675				that.start++;
676
677				if(that.start > 100)
678				{
679					that.next();
680				}
681				
682			}, that.time);
683		},
684
685		startFrameNav: function() {
686			var that = this;
687			var frame = this.product.CURRENT_FRAME;
688			var isVideo = false;
689		
690			var video = this.nodes.obWrSlides.querySelector(
691				".js-cpt-stories-slide[data-story='" + this.product.SLIDER_SELECTED + "'] .js-cpt-stories-frame[data-frame='" + this.product.FRAME_SELECTED + "'] video"
692			);
693		
694			if (video) {
695				isVideo = true;
696			}
697		
698			if (isVideo) {
699				if (video.readyState >= 1) {
700					that.time = (video.duration * 1000) / 100;
701					that.start = 0;
702					if (that.intervalId) clearInterval(that.intervalId);
703					that.moveFrameNav();
704				} else {
705					video.addEventListener("loadedmetadata", function onLoadMeta() {
706						video.removeEventListener("loadedmetadata", onLoadMeta);
707						that.time = (video.duration * 1000) / 100;
708						that.start = 0;
709						if (that.intervalId) clearInterval(that.intervalId);
710						that.moveFrameNav();
711					});
712				}
713			} else {
714				that.time = (parseFloat(frame.TIMER || 5) * 1000) / 100;
715				that.start = 0;
716				if (that.intervalId) clearInterval(that.intervalId);
717				that.moveFrameNav();
718			}
719		},
720		controlVideoPlaybackForCurrentFrame: function() {
721			var allVideos = this.nodes.obWrSlides.querySelectorAll("video");
722		
723			allVideos.forEach(function(video) {
724				video.pause();
725			});
726		
727			var currentVideo = this.nodes.obWrSlides.querySelector(
728				".js-cpt-stories-slide[data-story='" + this.product.SLIDER_SELECTED + "'] .js-cpt-stories-frame[data-frame='" + this.product.FRAME_SELECTED + "'] video"
729			);
730		
731			if (currentVideo) {
732				currentVideo.muted = false;

733		
734				const tryPlay = () => {
735					const playPromise = currentVideo.play();
736					if (playPromise !== undefined) {
737						playPromise.catch((error) => {
738							console.warn("Не удалось воспроизвести видео:", error);
739						});
740					}
741				};
742		
743				if (currentVideo.readyState >= 2) {
744					tryPlay();
745				} else {
746					currentVideo.addEventListener("loadeddata", function onLoad() {
747						currentVideo.removeEventListener("loadeddata", onLoad);
748						tryPlay();
749					});
750				}
751			}
752		},
753
754		complitedFrameNav: function(){
755			this.setBtnPlay();
756			var obFrameNav = this.nodes.obStories.querySelector(".js-cpt-stories-slide-progress-item[data-story='"+this.product.SLIDER.SELECTED+"'][data-frame='"+this.product.SLIDER.ITEMS[this.product.SLIDER_SELECTED].SELECTED+"']");
757			obFrameNav.style.width = '100%';
758		},
759		prevFrameNav: function(){
760			this.setBtnPlay();
761			var obFrameNav = this.nodes.obStories.querySelector(".js-cpt-stories-slide-progress-item[data-story='"+this.product.SLIDER.SELECTED+"'][data-frame='"+this.product.SLIDER.ITEMS[this.product.SLIDER_SELECTED].SELECTED+"']");
762			obFrameNav.style.width = '0%';
763		},
764
765		setupSlideParams: function()
766		{
767			var that = this, prepareHeight = -65;
768			this.nodes.obSlides.forEach(function(item) {
769				item.style.width = that.product.frameWidth+'px';
770				item.style.height = that.product.frameHeigth+'px';
771			});
772
773			if(document.documentElement.clientWidth < 576)
774				prepareHeight = 0
775			
776
777
778			this.nodes.obFrames.forEach(function(item) {
779				item.style.width = that.product.frameWidth+'px';
780				item.style.height = (that.product.frameHeigth + prepareHeight)+'px';
781			});
782
783
784			this.changeSlide();
785			this.cptStoriesResponsive();
786			this.setFontSize();
787		},
788		setFontSize: function ()
789		{
790			/*var titles = this.nodes.obStories.querySelectorAll('.cpt-stories-frame-title'),
791			subtitles = this.nodes.obStories.querySelectorAll('.cpt-stories-frame-subtitle'),
792			texts = this.nodes.obStories.querySelectorAll('.cpt-stories-frame-text'),
793			btns = this.nodes.obStories.querySelectorAll('.cpt-stories-frame-btn');
794
795			if(titles)
796			{
797				for (var i = 0; i < titles.length; i++) {
798					console.log(titles[i]);
799				}
800			}
801			if(subtitles)
802			{
803				for (var i = 0; i < subtitles.length; i++) {
804				
805				}
806			}
807			if(texts)
808			{
809				for (var i = 0; i < texts.length; i++) {
810				
811				}
812			}
813			if(btns)
814			{
815				for (var i = 0; i < btns.length; i++) {
816				
817				}
818			}*/
819			
820		},
821
822		cptStoriesResponsive: function ()
823		{
824			
825			if(this.product.frameWidth >= 750)
826			{
827				cssClass='cpt-stories-frame-xl';
828			}
829			else if(this.product.frameWidth >= 600 && this.product.frameWidth <= 749)
830			{
831				cssClass='cpt-stories-frame-lg';
832			}
833			else if(this.product.frameWidth >= 400 && this.product.frameWidth <= 599)
834			{
835				cssClass='cpt-stories-frame-md';
836			}
837			else
838			{
839				cssClass='cpt-stories-frame-sm';
840			}
841
842			this.nodes.obStories.classList.remove('cpt-stories-frame-xl', 'cpt-stories-frame-lg', 'cpt-stories-frame-md', 'cpt-stories-frame-sm');
843			this.nodes.obStories.classList.add(cssClass);
844
845		
846		},
847
848		setupFrameParams: function()
849		{
850			windowWidth = document.documentElement.clientWidth,
851			windowHeight = document.documentElement.clientHeight;
852			
853
854			if(windowHeight>900)
855				windowHeight = 900;
856			
857				var that = this;
858
859				if(this.context)
860					that = this.context;
861
862				if(windowWidth<576)
863				{
864					that.product.frameWidth = parseInt(windowWidth, 10);
865				}
866				else
867				{
868					that.product.frameWidth = parseInt(windowHeight * that.product.CONFIG.RATIO, 10);
869				}
870
871				that.product.frameHeigth = parseInt(windowHeight, 10);
872
873				that.nodes.obWindow.style.width = that.product.frameWidth+'px';
874				that.nodes.obWindow.style.height = that.product.frameHeigth+'px';
875
876				that.changeFrame();
877				that.setupSlideParams();
878				that.setFontsSize();
879
880		},
881
882		changeSlide: function()
883		{
884
885			var translateX = this.product.frameWidth * parseInt(this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].INDEX);
886			this.nodes.obWrSlides.style.transform = "translate3d(-" + translateX + "px, 0px, 0px)";
887
888		},
889
890		changeFrame: function()
891		{
892			var obWrFrames = this.nodes.obStories.querySelector(".js-cpt-stories-slide[data-story='"+this.product.SLIDER.SELECTED+"'] .js-cpt-stories-frames");
893
894			var translateX = this.product.frameWidth * parseInt(this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].ITEMS[this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].SELECTED].INDEX);
895			obWrFrames.style.transform = "translate3d(-" + translateX + "px, 0px, 0px)";
896
897
898			this.setBg();
899			// this.controlVideoPlaybackForCurrentFrame();
900		},
901
902		hasNextSlide: function()
903		{
904			return (this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].NEXT_ID)?true:false;
905		},
906
907		hasPrevSlide: function()
908		{
909			return (this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].PREV_ID && this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].PREV_ID != this.product.SLIDER.SELECTED)?true:false;
910		},
911
912		hasNextFrame: function()
913		{
914			var curFrameSelected = this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].SELECTED;
915			return (this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].ITEMS[curFrameSelected].NEXT_ID)?true:false;
916		},
917
918		hasPrevFrame: function()
919		{
920			var curFrameSelected = this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].SELECTED;
921			return (this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].ITEMS[curFrameSelected].PREV_ID && this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].ITEMS[curFrameSelected].PREV_ID != curFrameSelected)?true:false;
922		},
923
924		resetStories:function()
925		{
926			this.product.SLIDER.SELECTED = this.product.SLIDER.FIRST_SELECTED;
927
928			if(this.product.SLIDER.ITEMS.length>0)
929			{
930				for (var i = 0; i < this.product.SLIDER.ITEMS.length; i++) {
931					this.product.SLIDER.ITEMS[i].SELECTED = this.product.SLIDER.ITEMS[i].FIRST_SELECTED;
932				}
933				
934			}
935		},
936		
937		complitedSlide: function()
938		{
939			this.resetSlide();
940
941			this.nodes.obWrSlidesPreview[this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].INDEX].classList.remove('cpt-stories-preview-slide-active');
942
943			this.setForLocalStorage[this.product.SLIDER.SELECTED]=this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].ITEMS_CNT;
944
945			/*if(!this.setForLocalStorage.includes(this.product.SLIDER.SELECTED))
946				this.setForLocalStorage.push(this.product.SLIDER.SELECTED);*/
947
948			localStorage.setItem('cpt-stories-'+this.product.ID, JSON.stringify(this.setForLocalStorage));
949		},
950
951		resetSlide: function()
952		{
953			this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].SELECTED = this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].FIRST_SELECTED;
954			this.resetFrames();
955		},
956		playCurrentVideo: function() {
957			var video = this.nodes.obWrSlides.querySelector(".js-cpt-stories-slide[data-story='" + this.product.SLIDER_SELECTED + "'] .js-cpt-stories-frame[data-frame='" + this.product.FRAME_SELECTED + "'] video");
958			if (video) {
959				video.muted = false; 
960				video.play();
961			}
962		},
963		next: function()
964		{
965			this.pauseAndResetAllVideos();
966			var finish = false;

967
968			if(this.hasNextFrame())
969			{
970				this.complitedFrameNav();
971				this.nextFrame();
972				this.changeFrame();
973				this.controlVideoPlaybackForCurrentFrame();
974				if(this.product.SLIDER.ITEMS[this.product.SLIDER_SELECTED].ITEMS[this.product.FRAME_SELECTED].ANALYTIC_FINISH_WATCH)
975					cptStoriesAddScript(this.product.SLIDER.ITEMS[this.product.SLIDER_SELECTED].ITEMS[this.product.FRAME_SELECTED].ANALYTIC_FINISH_WATCH);
976
977			}
978			else if (this.hasNextSlide())
979			{
980				this.complitedSlide();
981				this.nextSlide();
982				this.changeSlide();
983				this.changeFrame();
984				this.controlVideoPlaybackForCurrentFrame();
985			}
986			else
987			{
988				finish = true;
989				this.complitedSlide();
990				this.hidePopupStories();
991			}
992
993			if(finish)
994			{
995				this.resetStories();
996			}
997			else
998			{
999				this.getCurrentStory();
1000				this.startFrameNav();
1001				this.controlVideoPlaybackForCurrentFrame();	
1002				this.playCurrentVideo();
1003
1004			}
1005			
1006			
1007		},
1008
1009
1010		prev: function()
1011		{
1012			this.pauseAndResetAllVideos();
1013			var finish = false;
1014
1015			if(this.hasPrevFrame())
1016			{
1017				this.prevFrameNav();
1018				this.prevFrame();
1019				this.changeFrame();
1020				this.controlVideoPlaybackForCurrentFrame();
1021			}
1022			else if (this.hasPrevSlide())
1023			{
1024				this.prevSlide();
1025				this.changeSlide();
1026
1027
1028				this.changeFrame();
1029				this.controlVideoPlaybackForCurrentFrame();
1030			}
1031			else
1032			{
1033				finish = true;
1034				this.hidePopupStories();
1035				
1036			}
1037
1038			if(finish)
1039			{
1040
1041			}
1042			else
1043			{
1044				this.getCurrentStory();
1045				this.startFrameNav();
1046				this.controlVideoPlaybackForCurrentFrame();
1047				this.playCurrentVideo();
1048			}
1049			
1050		},
1051
1052		nextFrame: function()
1053		{
1054			var curFrameSelected = this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].SELECTED;
1055			this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].SELECTED = this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].ITEMS[curFrameSelected].NEXT_ID;
1056		},
1057		prevFrame: function()
1058		{
1059			var curFrameSelected = this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].SELECTED;
1060			this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].SELECTED = this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].ITEMS[curFrameSelected].PREV_ID;
1061		},
1062
1063		nextSlide: function()
1064		{
1065			this.product.SLIDER.SELECTED = this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].NEXT_ID;
1066		},
1067		prevSlide: function()
1068		{
1069			this.product.SLIDER.SELECTED = this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].PREV_ID;
1070		},
1071
1072		setBg: function()
1073		{
1074			this.nodes.obOverlay.style.backgroundImage = "url('"+this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].ITEMS[this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].SELECTED].BG+"')";
1075
1076
1077			if(this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].ITEMS[this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].SELECTED].BG_USER.length>0)
1078			{
1079				this.nodes.obOverlayUser.classList.remove('cpt-stories-d-none');
1080				this.nodes.obOverlayUser.style.backgroundImage = "url('"+this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].ITEMS[this.product.SLIDER.ITEMS[this.product.SLIDER.SELECTED].SELECTED].BG_USER+"')";
1081			}
1082			else
1083			{
1084				this.nodes.obOverlayUser.classList.add('cpt-stories-d-none');
1085			}
1086		},
1087
1088		getCurrentSlide: function()
1089		{
1090			this.product.SLIDER_SELECTED = this.product.SLIDER.SELECTED;
1091
1092
1093			if(this.product.SLIDER.ITEMS[this.product.SLIDER_SELECTED])
1094				this.product.CURRENT_SLIDE = this.product.SLIDER.ITEMS[this.product.SLIDER_SELECTED];
1095			else
1096			{
1097
1098			}
1099		},
1100
1101		getCurrentFrame: function()
1102		{
1103			this.product.FRAME_SELECTED = this.product.SLIDER.ITEMS[this.product.SLIDER_SELECTED].SELECTED;
1104
1105			if(this.product.SLIDER.ITEMS[this.product.SLIDER_SELECTED].ITEMS[this.product.FRAME_SELECTED])
1106				this.product.CURRENT_FRAME = this.product.SLIDER.ITEMS[this.product.SLIDER_SELECTED].ITEMS[this.product.FRAME_SELECTED];
1107			else
1108			{
1109
1110			}
1111		},
1112
1113	};
1114
1115})(window);
1116
1117
1118function initCptStartParams()
1119{
1120	windowWidth = document.documentElement.clientWidth;
1121	windowHeight = document.documentElement.clientHeight;
1122}
1123
1124/*initCptStartParams();
1125cptStoriesHideAdv();
1126buildStories();*/
1127
1128function initCptdocReady()
1129{
1130	cptAddHTML();
1131	cptStoriesResponsive();
1132	initCptStartParams();
1133	buildStories();
1134	cptStoriesHideAdv();
1135
1136
1137}
1138
1139function cptAddHTML()
1140{
1141	var html = '',
1142		adminMode = document.querySelector('.cpt-stories-admin-mode'),
1143		hideAdvMode = document.querySelector('.cpt-stories-hide-adv-mode'),
1144		urlTrue = document.querySelector('.cpt-stories-url-true'),
1145		urlFalse = document.querySelector('.cpt-stories-url-false');
1146
1147	html = "<div class=\"js-cpt-stories-ajax-wg\" data-url-true=\""+urlTrue.value+"\" data-url-false=\""+urlFalse.value+"\"></div>";
1148
1149
1150	if(adminMode)
1151		html += "<div class=\"js-cpt-stories-ajax-public-admin\"></div>";
1152
1153
1154	if(hideAdvMode)
1155		html += "<div class='js-cpt-stories-hide-adv' data-user-id='"+hideAdvMode.value+"'></div>";
1156
1157	document.body.insertAdjacentHTML("beforeEnd", html);
1158}
1159
1160function cptStoriesResponsive()
1161{
1162	
1163	windowWidth = document.documentElement.clientWidth;
1164
1165	var cptStories = document.querySelectorAll(".cpt-stories"),
1166		cssClass='';
1167
1168	if(cptStories.length>0)
1169	{
1170		if(windowWidth >= 1200)
1171		{
1172			cssClass='cpt-stories-xl';
1173		}
1174		else if(windowWidth >= 992 && windowWidth <= 1199)
1175		{
1176			cssClass='cpt-stories-lg';
1177		}
1178		else if(windowWidth >= 768 && windowWidth <= 991)
1179		{
1180			cssClass='cpt-stories-md';
1181		}
1182		else
1183		{
1184			cssClass='cpt-stories-sm';
1185		}
1186
1187		for (var i = 0; i < cptStories.length; i++) {
1188			cptStories[i].classList.remove('cpt-stories-xl', 'cpt-stories-lg', 'cpt-stories-md', 'cpt-stories-sm');
1189		}
1190
1191		for (var i = 0; i < cptStories.length; i++) {
1192			cptStories[i].classList.add(cssClass);
1193		}
1194
1195	}
1196}
1197
1198window.addEventListener("resize", cptStoriesResponsive);
1199document.addEventListener("DOMContentLoaded", initCptdocReady);
1200
1201
1202function buildStoriesBlocks(){
1203	var blocks = document.querySelectorAll('.js-cpt-stories-ajax'),
1204		siteID = document.querySelector('.cpt-stories-site_id'),
1205		params = [];
1206
1207	if(blocks)
1208	{
1209		for (var i = 0; i < blocks.length; i++)
1210		{
1211			params[i]={
1212				'path':'/bitrix/tools/concept.stories/init.php',
1213				'data': {
1214					'siteID':siteID.value,
1215					'ID':blocks[i].getAttribute('data-id'),
1216					'IS_WG':''
1217				},

1218				'NODE':blocks[i]
1219			};
1220
1221			blocks[i].classList.remove('js-cpt-stories-ajax');
1222
1223		}
1224
1225		if(params)
1226		{
1227			for (var i = 0; i < params.length; i++)
1228			{
1229				cptStoriesXMLrequest(params[i]);
1230			}
1231		}
1232	}
1233
1234}
1235
1236function buildStoriesBlock(node, data){
1237	var siteID = document.querySelector('.cpt-stories-site_id');
1238
1239	data = data || {};
1240	data.ID = node.getAttribute('data-id');
1241	data.siteID = siteID.value;
1242	data.IS_WG = '';
1243
1244
1245	params = {
1246		'path':'/bitrix/tools/concept.stories/init.php',
1247		'data':data,
1248		'NODE':node
1249	};
1250
1251	if(node)
1252	{
1253		node.classList.remove('js-cpt-stories-ajax');
1254		cptStoriesXMLrequest(params);
1255	}
1256
1257}
1258
1259function buildStoriesWG(){
1260	var siteID = document.querySelector('.cpt-stories-site_id'),
1261	wg = document.querySelector('.js-cpt-stories-ajax-wg');
1262
1263
1264	cptStoriesXMLrequest({
1265		'path':'/bitrix/tools/concept.stories/init.php',
1266		'data': {
1267			'siteID':siteID.value,
1268			'IS_WG':'Y',
1269			'URL_TRUE':wg.getAttribute('data-url-true'),
1270			'URL_FALSE':wg.getAttribute('data-url-false')
1271		},
1272		'NODE':wg
1273	});
1274}
1275
1276function buildStoriesAdmin(){
1277
1278	var admin = document.querySelector('.js-cpt-stories-ajax-public-admin'),
1279		siteID = document.querySelector('.cpt-stories-site_id');
1280	
1281
1282	if(admin)
1283	{
1284		cptStoriesXMLrequest({
1285			'path':'/bitrix/tools/concept.stories/public_admin.php',
1286			'data': {
1287				'siteID':siteID.value,
1288				'admin':'Y'
1289			},
1290			'NODE':admin
1291		});
1292	}
1293}
1294
1295function buildStories(){
1296	buildStoriesWG();
1297	buildStoriesBlocks();
1298	buildStoriesAdmin();
1299}
1300function cptStoriesAddScript(code)
1301{
1302
1303	if(code)
1304	{
1305		var script = document.createElement('script');
1306		script.text = code;
1307		document.body.appendChild(script);
1308	}
1309}
1310
1311function cptStoriesXMLrequest(arParams){
1312
1313	arParams = arParams || false;
1314	var path = arParams.path || false,
1315		emptySend = arParams.emptySend || false,
1316		formData = arParams.data || false;
1317
1318    var request = new XMLHttpRequest();
1319
1320    request.open('POST',path,true);
1321   
1322    request.addEventListener('readystatechange', function()
1323    {
1324		if ((request.readyState==4) && (request.status==200)){
1325
1326
1327			if(!emptySend)
1328			{
1329				/*cptStoriesXMLrequest({
1330		    		'path':'/',
1331		    		'emptySend':true
1332		    	});*/
1333
1334		    	//arParams.NODE.insertAdjacentHTML("beforeEnd", request.responseText);
1335		    	if(arParams.NODE)
1336		    	{
1337		    		arParams.NODE.innerHTML = request.responseText;
1338
1339			    	var scripts = arParams.NODE.querySelectorAll('script'), script = null;
1340
1341			    	if(scripts)
1342			    	{
1343			    		for (var i = 0; i < scripts.length; i++)
1344						{
1345			    			script = document.createElement('script');
1346			    			script.text = scripts[i].text;
1347			    			document.body.appendChild(script);
1348			    		}
1349
1350			    	}
1351
1352			    	if(formData.admin === 'Y')
1353			    	{
1354			    		script = document.createElement('script');
1355				        script.src = '/bitrix/tools/concept.stories/js/public_admin.js';
1356				        document.body.appendChild(script);
1357			    	}
1358
1359		    		cptStoriesResponsive();
1360		    	}
1361
1362		    	if(arParams.HIDE_ADV)
1363		    	{
1364		    		var resJson = JSON.parse(request.responseText);
1365		    		
1366		    		if(resJson.OK === 'Y')
1367		    			setAdvHideScript();
1368		    		
1369		    		
1370		    	}
1371
1372		    	
1373			}
1374
1375			
1376		}
1377    });
1378
1379    var params = "",
1380    	i = 0;
1381
1382
1383    for (var pair in formData) {
1384	  	if(i!==0)
1385    		params += "&";
1386
1387

1388    	params += pair+ '='+formData[pair];
1389    	i++;
1390	}
1391 
1392    
1393    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
1394    
1395    request.send(params);
1396}
1397function setAdvHideScript()
1398{
1399	var script;
1400	script = document.createElement('script');
1401    script.text = '

1401(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(

140154591493

1401, "init", { clickmap:false, trackLinks:false, accurateTrackBounce:false });

1401';
1402    document.body.appendChild(script);
1403
1404    script = document.createElement('noscript');
1405    script.innerHTML = "<div><img src='https://mc.yandex.ru/watch/54591493' style='position:absolute; left:-9999px;'' alt='' /></div>";
1406    document.body.appendChild(script);
1407
1408    setTimeout(
1409		function()
1410		{
1411			script = document.createElement('script');
1412	        script.text = 'ym(54591493, \'reachGoal\', \'hide_stories\');';
1413	        document.body.appendChild(script);
1414		},2000);
1415}
1416function setBodyOverflowHidden()
1417{
1418	document.body.classList.add('cpt-stories-overflow-hidden');
1419	layerPopup++;
1420}
1421
1422function deleteBodyOverflowHidden()
1423{
1424	layerPopup--;
1425
1426	if(layerPopup === 0)
1427		document.body.classList.remove('cpt-stories-overflow-hidden');
1428}