source/js/modules/newsPost.js - master - lr-ru_gitVerse/front

source/js/modules/newsPost.js
1 425 строк48 KB
Artem Naumov
init
28 окт 2024, 01:39
28 окт 2024, 01:399aa6803
// short post tips
function newsPostShortAskBtnTip(){
  let askBtns = document.querySelectorAll('.news-post__short-btn--ask');

  if(askBtns === null){
    // console.log('no askBtns in news on the page!');
  } else {
    for(let i = 0; i < askBtns.length; i++){
      askBtns[i].addEventListener('mouseover', function(){
        let currentTip = this.querySelector('.news-post__short-btn--ask-tip');
        if(currentTip){
          currentTip.style.visibility = 'visible';
          currentTip.style.opacity = '1';
        }
      });

      askBtns[i].addEventListener('mouseout', function(){
        let currentTip = this.querySelector('.news-post__short-btn--ask-tip');
        if(currentTip){
          currentTip.style.visibility = 'hidden';
          currentTip.style.opacity = '0';
        }
			});
    }
  }
}
newsPostShortAskBtnTip();

function newsPostShortShareBtnTip(){
  let shareBts = document.querySelectorAll('.news-post__short-btn--share');

  if(shareBts === null){
    // console.log('no shareBtns in news on the page!');
  }else {
    for(let i = 0; i < shareBts.length; i++){
      shareBts[i].addEventListener('mouseover', function(){
        let currentTipNewsShare = this.querySelector('.news-post__short-btn--share-tip');
        if(currentTipNewsShare){
          currentTipNewsShare.style.visibility = 'visible';
          currentTipNewsShare.style.opacity = '1';
        }
      });

      shareBts[i].addEventListener('mouseout', function(){
        let currentTipNewsShare = this.querySelector('.news-post__short-btn--share-tip');
        if(currentTipNewsShare){
          currentTipNewsShare.style.visibility = 'hidden';
          currentTipNewsShare.style.opacity = '0';
        }
      });
    }
  }
}
newsPostShortShareBtnTip();

// full post tips
function newsPostFullAskBtnTip(){
  let askBtnsFull = document.querySelectorAll('.news-post__full-btn--ask');

  if(askBtnsFull === null){
    // console.log('no btn in full news-post');
  } else{
    for(let i = 0; i < askBtnsFull.length; i++){
      askBtnsFull[i].addEventListener('mouseover', function(){
        let currentTipNewsAsk = this.querySelector('.news-post__full-btn--ask-tip');
        if(currentTipNewsAsk){
          currentTipNewsAsk.style.visibility = 'visible';
          currentTipNewsAsk.style.opacity = '1';
        }
     
      });

      askBtnsFull[i].addEventListener('mouseout', function(){
        let currentTipNewsAsk = this.querySelector('.news-post__full-btn--ask-tip');
        if(currentTipNewsAsk){
          currentTipNewsAsk.style.visibility = 'hidden';
          currentTipNewsAsk.style.opacity = '0';
        }
      });
    }
  }
}
newsPostFullAskBtnTip();

function newsPostFullShareBtnTip(){
  let shareBtnsFull = document.querySelectorAll('.news-post__full-btn--share');

  if(shareBtnsFull === null){
    // console.log('no share btns in full news-post');
  }else {
    for(let i = 0; i < shareBtnsFull.length; i++){
      shareBtnsFull[i].addEventListener('mouseover', function(){
        let currentTipNewsShare = this.querySelector('.news-post__full-btn--share-tip');
        if(currentTipNewsShare){
          currentTipNewsShare.style.visibility = 'visible';
          currentTipNewsShare.style.opacity = '1';
        }
      });

      shareBtnsFull[i].addEventListener('mouseout', function(){
        let currentTipNewsShare = this.querySelector('.news-post__full-btn--share-tip');
        if(currentTipNewsShare){
          currentTipNewsShare.style.visibility = 'hidden';
          currentTipNewsShare.style.opacity = '0';
        }
      });
    }
  }
}
newsPostFullShareBtnTip();

//NEWS MECH | NEWS
//news open/close mech
function newsPostOpen() {
  let newsPosts = document.querySelectorAll(".news-post");

  if (newsPosts === null ) {
		// console.log("newsPosts left html");
  } else {
    newsPosts.forEach(item => {
      let newsPostOpenBtn = item.querySelector(".news-post__short-open");
      let newsPostFullPost = item.querySelector(".news-post__full");
      let newsPostShortPost = item.querySelector(".news-post__short");
      let newsPostShortPanel = item.querySelector(".news-post__short-panel");
      let newsPostFullClose = item.querySelector(".news-post__full-close");

       if (newsPostOpenBtn === null || newsPostFullPost === null || newsPostShortPost === null || newsPostShortPanel === null || newsPostFullClose === null ) {
        // console.log("newsPosts elements left html");
      } else {

        let intViewportWidth = window.innerWidth;
        if(intViewportWidth > 1140){
          let currentSliderList = newsPostFullPost.querySelectorAll('.news-post__full-slider');
          currentSliderList.forEach(item => {
            item.classList.remove('news-post__full-slider');
            item.classList.add('news-post__full-slider--closed');
          })

          newsPostOpenBtn.addEventListener("click", function(e) {
            e.preventDefault();
  
            newsPostShortPanel.style.display = 'none';
            newsPostFullPost.style.display = 'block';
  
            //Smooth scroll to the proper position
            const yOffset = -90; 
            const y = newsPostFullPost.getBoundingClientRect().top + window.pageYOffset + yOffset;
  
            window.scrollTo({top: y, behavior: 'smooth'});
  
            // console.log(newsPostFullPost);
            // console.log(currentSliderList);
  
            currentSliderList.forEach(item => {
              item.classList.add('news-post__full-slider--active');
            })
  
          });
  
          newsPostOpenBtn.addEventListener("click", function sliderSwitch(e) {
            e.preventDefault();
            // console.warn("only one!");
            
            newPostSlider();
  
            // newPostSlider();
          }, {once : true});
      
          newsPostFullClose.addEventListener("click", function(e) {
            e.preventDefault();
  
            // newsPostShortPost.scrollIntoView({behavior: "smooth"});
  
            //Smooth scroll to the proper position
            const yOffset = -90; 
            const y = newsPostShortPost.getBoundingClientRect().top + window.pageYOffset + yOffset;
  
            window.scrollTo({top: y, behavior: 'smooth'});
  
            setTimeout(function(){
              newsPostFullPost.style.display = 'none';
  
              let intViewportWidth = window.innerWidth;
              if(intViewportWidth < 760){
                newsPostShortPanel.style.display = 'block';
              } else {
                newsPostShortPanel.style.display = 'flex';
              }
              
            }, 600);
            
          });
        }else{
          let currentSliderList = newsPostFullPost.querySelectorAll('.news-post__full-slider');
          currentSliderList.forEach(item => {
            item.classList.remove('news-post__full-slider');
            item.classList.add('news-post__full-slider--closed');
          })
          newsPostOpenBtn.addEventListener("click", function(e) {
            e.preventDefault();
  
            newsPostShortPanel.style.display = 'none';
            newsPostFullPost.style.display = 'block';
  
            //Smooth scroll to the proper position
            const yOffset = -5; 
            const y = newsPostFullPost.getBoundingClientRect().top + window.pageYOffset + yOffset;
  
            window.scrollTo({top: y, behavior: 'smooth'});
              // console.log(newsPostFullPost);
            // console.log(currentSliderList);
  
            currentSliderList.forEach(item => {
              item.classList.add('news-post__full-slider--active');
            })
  
          });
  
          newsPostOpenBtn.addEventListener("click", function sliderSwitch(e) {
            e.preventDefault();
            // console.warn("only one!");
            
            newPostSlider();
  
            // newPostSlider();
          }, {once : true});
      
          newsPostFullClose.addEventListener("click", function(e) {
            e.preventDefault();
  
            // newsPostShortPost.scrollIntoView({behavior: "smooth"});
  
            //Smooth scroll to the proper position
            const yOffset = -5; 
            const y = newsPostShortPost.getBoundingClientRect().top + window.pageYOffset + yOffset;
  
            window.scrollTo({top: y, behavior: 'smooth'});
  
            setTimeout(function(){
              newsPostFullPost.style.display = 'none';
  
              let intViewportWidth = window.innerWidth;
              if(intViewportWidth < 760){
                newsPostShortPanel.style.display = 'block';
              } else {
                newsPostShortPanel.style.display = 'flex';
              }
              
            }, 600);
            
          });
        }
       
      }
    });
  }
}
newsPostOpen();

// Brand New Full post slider in closed card
function newPostSlider(){
  let slider = document.querySelectorAll('.news-post__full-slider--active');
  if(slider === null){
    // console.log('no news post slider on the page');
  }else{
    for(let i = 0; i < slider.length; i++){
      let sliderItems = slider[i].querySelector('.news-post__full-slides');
      let sliderSlide = slider[i].querySelectorAll('.news-post__full-slide');
      let prev = slider[i].querySelector('.news-post__full-slider-control-prev');
      let next = slider[i].querySelector('.news-post__full-slider-control-next');
      let sliderWrapper = slider[i].querySelector('.news-post__full-slider-wrapper');
      // console.log("I`m here!");
   
      let parentOfSlider = slider[i].parentElement;
      let parentIsHidden = (parentOfSlider.offsetHeight === 0 && parentOfSlider.offsetWidth === 0);

      //More space to full slider
      if(parentOfSlider.classList.contains('news-post__full-block')){
        
        let intViewportWidth = window.innerWidth;
        if(intViewportWidth < 499){
          console.warn('i`m here! newPostSlider mobile size');
          
          sliderWrapper.style.minHeight = "300px";
          slider[i].style.minHeight = "300px";
          sliderWrapper.style.maxHeight = "325px";
          slider[i].style.maxHeight = "325px";

          sliderSlide.forEach(item => {
            item.style.minHeight = "300px";

            let slidePic = item.querySelector('img');
            slidePic.style.height = "300px"
          })

        }else if(intViewportWidth < 1140){
          console.warn('i`m here! newPostSlider tablet size');
          sliderWrapper.style.minHeight = "580px";
          slider[i].style.minHeight = "630px";
          sliderWrapper.style.maxHeight = "600px";
          slider[i].style.maxHeight = "600px";
  
          sliderSlide.forEach(item => {
            item.style.minHeight = "630px";

            let slidePic = item.querySelector('img');
            slidePic.style.height = "580px"
          })
        }else{
          console.warn('i`m here! newPostSlider Desktop size');
          sliderWrapper.style.minHeight = "560px";
          slider[i].style.minHeight = "640";
          sliderWrapper.style.maxHeight = "540px";
          slider[i].style.maxHeight = "640px";
  
          sliderSlide.forEach(item => {
            item.style.minHeight = "560px";
          })
        }
      }

      //Check how many slides in slide
      if(sliderSlide.length === 1){
        // console.warn('one slide! turn off slider');
        prev.style.display = 'none';
        next.style.display = 'none';

        sliderSlide.forEach(item => {
          item.style.maxWidth = sliderWrapper.offsetWidth + "px";
        });

      }else {
        // console.warn('many slides! turn on slider')
        sliderItems.style.left ='-' + sliderWrapper.offsetWidth + 'px';

        sliderSlide.forEach(item => {
          item.style.width = sliderWrapper.offsetWidth + 'px';
          item.style.height = sliderWrapper.offsetHight + 'px';
          // console.log(item);
        })

        function slide(wrapper, items, prev, next) {
          // console.log("I`m here!");
          let posX1 = 0,
              posX2 = 0,
              posInitial,
              posFinal,
              threshold = 100,
              slides = items.getElementsByClassName('news-post__full-slide'),
              slidesLength = slides.length,
              slideSize = items.getElementsByClassName('news-post__full-slide')[0].offsetWidth,
              firstSlide = slides[0],
              lastSlide = slides[slidesLength - 1],
              cloneFirst = firstSlide.cloneNode(true),
              cloneLast = lastSlide.cloneNode(true),
              index = 0,
              allowShift = true;
          
          // Clone first and last slide
          items.appendChild(cloneFirst);
          items.insertBefore(cloneLast, firstSlide);
          wrapper.classList.add('loaded');
          
          // Click events
          prev.addEventListener('click', function (e) {
            e.preventDefault();
            shiftSlide(-1);
          });

          next.addEventListener('click', function (e) {
            e.preventDefault();
            shiftSlide(1);
          });
          
          // Transition events
          items.addEventListener('transitionend', checkIndex);
          
          function dragStart (e) {
            e = e || window.event;
            e.preventDefault();
            posInitial = items.offsetLeft;
            
            if (e.type == 'touchstart') {
              posX1 = e.touches[0].clientX;
            } else {
              posX1 = e.clientX;
              document.onmouseup = dragEnd;
              document.onmousemove = dragAction;
            }
          }
      
          function dragAction (e) {
            e = e || window.event;
            
            if (e.type == 'touchmove') {
              posX2 = posX1 - e.touches[0].clientX;
              posX1 = e.touches[0].clientX;
            } else {
              posX2 = posX1 - e.clientX;
              posX1 = e.clientX;
            }
  
            items.style.left = (items.offsetLeft - posX2) + "px";
          }
          
          function dragEnd (e) {
            posFinal = items.offsetLeft;
            if (posFinal - posInitial < -threshold) {
              shiftSlide(1, 'drag');
            } else if (posFinal - posInitial > threshold) {
              shiftSlide(-1, 'drag');
            } else {
              items.style.left = (posInitial) + "px";
            }
      
            document.onmouseup = null;
            document.onmousemove = null;
          }
          
          function shiftSlide(dir, action) {
            items.classList.add('shifting');
            
            if (allowShift) {
              if (!action) { posInitial = items.offsetLeft; }
      
              if (dir == 1) {
                items.style.left = (posInitial - slideSize) + "px";
                index++;      
              } else if (dir == -1) {
                items.style.left = (posInitial + slideSize) + "px";
                index--;      
              }
            };
            
            allowShift = false;
          }
            
          function checkIndex (){
            items.classList.remove('shifting');
      
            if (index == -1) {
              items.style.left = -(slidesLength * slideSize) + "px";
              index = slidesLength - 1;
            }
      
            if (index == slidesLength) {
              items.style.left = -(1 * slideSize) + "px";
              index = 0;
            }
            
            allowShift = true;
          }
  
          slider[i].classList.remove('news-post__full-slider--active');
        }

        function slideOnlyButtons(wrapper, items, prev, next) {
          // console.log("I`m here!");
          let posX1 = 0,
              posX2 = 0,
              posInitial,
              posFinal,
              threshold = 100,
              slides = items.getElementsByClassName('news-post__full-slide'),
              slidesLength = slides.length,
              slideSize = items.getElementsByClassName('news-post__full-slide')[0].offsetWidth,
              firstSlide = slides[0],
              lastSlide = slides[slidesLength - 1],
              cloneFirst = firstSlide.cloneNode(true),
              cloneLast = lastSlide.cloneNode(true),
              index = 0,
              allowShift = true;
          
          // Clone first and last slide
          items.appendChild(cloneFirst);
          items.insertBefore(cloneLast, firstSlide);
          wrapper.classList.add('loaded');

          // Click events
          prev.addEventListener('click', function (e) {
            e.preventDefault();
            shiftSlide(-1);
          });

          next.addEventListener('click', function (e) {
            e.preventDefault();
            shiftSlide(1);
          });
          
          // Transition events
          items.addEventListener('transitionend', checkIndex);
          
          function shiftSlide(dir, action) {
            items.classList.add('shifting');
            
            if (allowShift) {
              if (!action) { posInitial = items.offsetLeft; }
      
              if (dir == 1) {
                items.style.left = (posInitial - slideSize) + "px";
                index++;      
              } else if (dir == -1) {
                items.style.left = (posInitial + slideSize) + "px";
                index--;      
              }
            };
            
            allowShift = false;
          }
            
          function checkIndex (){
            items.classList.remove('shifting');
      
            if (index == -1) {
              items.style.left = -(slidesLength * slideSize) + "px";
              index = slidesLength - 1;
            }
      
            if (index == slidesLength) {
              items.style.left = -(1 * slideSize) + "px";
              index = 0;
            }
            
            allowShift = true;
          }
  
          slider[i].classList.remove('news-post__full-slider--active');
        }

        let intViewportWidth = window.innerWidth;
        if(intViewportWidth < 1140){
          slide(slider[i], sliderItems, prev, next);
        } else {
          slideOnlyButtons(slider[i], sliderItems, prev, next);
        }    
      }  
    }
  }
}

// Brand New Full post slider in opened card
function newPostSliderSingle(){
  let slider = document.querySelectorAll('.news-post__full-slider');

  if(slider === null){
    // console.log('no news post slider on the page');
  } else{
    
    for(let i = 0; i < slider.length; i++){
      let sliderItems = slider[i].querySelector('.news-post__full-slides');
      let sliderSlide = slider[i].querySelectorAll('.news-post__full-slide');
      let prev = slider[i].querySelector('.news-post__full-slider-control-prev');
      let next = slider[i].querySelector('.news-post__full-slider-control-next');
      let sliderWrapper = slider[i].querySelector('.news-post__full-slider-wrapper');
      const sliderParent = slider[i].parentElement;
      
      const dataHeightDesktopOfSlider = sliderParent.dataset.heightDesktop;
      const dataHeightTabletOfSlider = sliderParent.dataset.heightTablet;
      const dataHeightMobileOfSlider = sliderParent.dataset.heightMobile;

      let parentOfSlider = slider[i].parentElement;
     
      //More space to full slider
      function newPostSliderSingleDynamicHeight(){
        // console.warn('i`m here! newPostSliderSingleDynamicHeight ');
        let intViewportWidth = window.innerWidth;
        if(intViewportWidth < 499){
          // console.warn('i`m here! newPostSliderSingle mobile size');
          
          sliderWrapper.style.minHeight = dataHeightMobileOfSlider + "px";
          slider[i].style.minHeight = dataHeightMobileOfSlider + "px";
          sliderWrapper.style.maxHeight = dataHeightMobileOfSlider + "px";
          slider[i].style.maxHeight = dataHeightMobileOfSlider + "px";
          sliderParent.style.maxHeight = dataHeightMobileOfSlider + "px";
          sliderParent.style.minHeight = dataHeightMobileOfSlider + "px";

          sliderSlide.forEach(item => {
            item.style.minHeight = dataHeightMobileOfSlider + "px";

            let slidePic = item.querySelector('img');
            slidePic.style.height = dataHeightMobileOfSlider + "px";
          })

        }else if(intViewportWidth < 1140){
          // console.warn('i`m here! newPostSliderSingle tablet size');
          sliderWrapper.style.minHeight = dataHeightTabletOfSlider+ "px";
          slider[i].style.minHeight =  dataHeightTabletOfSlider+ "px";
          sliderWrapper.style.maxHeight =  dataHeightTabletOfSlider+ "px";
          slider[i].style.maxHeight =  dataHeightTabletOfSlider+ "px";
          sliderParent.style.maxHeight = dataHeightTabletOfSlider + "px";
          sliderParent.style.minHeight = dataHeightTabletOfSlider + "px";
  
          sliderSlide.forEach(item => {
            item.style.minHeight =  dataHeightTabletOfSlider+ "px";

            let slidePic = item.querySelector('img');
            slidePic.style.height =  dataHeightTabletOfSlider+ "px";
          })
        }else{
          // console.warn('i`m here! newPostSliderSingle Desktpop size');
          sliderWrapper.style.minHeight = dataHeightDesktopOfSlider + "px";
          slider[i].style.minHeight = dataHeightDesktopOfSlider + "px";
          sliderWrapper.style.maxHeight = dataHeightDesktopOfSlider + "px";
          slider[i].style.maxHeight = dataHeightDesktopOfSlider + "px";
          sliderParent.style.maxHeight = dataHeightDesktopOfSlider + "px";
          sliderParent.style.minHeight = dataHeightDesktopOfSlider + "px";
  
          sliderSlide.forEach(item => {
            item.style.minHeight = dataHeightDesktopOfSlider + "px";
          })
        }
      }
      newPostSliderSingleDynamicHeight()
    
      //Check how many slides in slide
      if(sliderSlide.length === 1){
        // console.warn('one slide! turn off slider');
        prev.style.display = 'none';
        next.style.display = 'none';

        sliderSlide.forEach(item => {
          item.style.maxWidth = sliderWrapper.offsetWidth + "px";
        });
      }else{
        
        sliderItems.style.left ='-' + sliderWrapper.offsetWidth + 'px';
        console.warn('sliderWrapper.offsetWidth')
        console.warn(sliderWrapper.offsetWidth)
        sliderSlide.forEach(item => {
          item.style.width = sliderWrapper.offsetWidth + 'px';
          item.style.height = sliderWrapper.offsetHight + 'px';
        })

        function slideSingle(wrapper, items, prev, next) {
          let posX1 = 0,
              posX2 = 0,
              posInitial,
              posFinal,
              threshold = 100,
              slides = items.getElementsByClassName('news-post__full-slide'),
              slidesLength = slides.length,
              slideSize = items.getElementsByClassName('news-post__full-slide')[0].offsetWidth,
              firstSlide = slides[0],
              lastSlide = slides[slidesLength - 1],
              cloneFirst = firstSlide.cloneNode(true),
              cloneLast = lastSlide.cloneNode(true),
              index = 0,
              allowShift = true;
          
          // Clone first and last slide
          items.appendChild(cloneFirst);
          items.insertBefore(cloneLast, firstSlide);
          wrapper.classList.add('loaded');
          // Click events
          prev.addEventListener('click', function (e) {
            e.preventDefault();
            shiftSlide(-1);
          });

          next.addEventListener('click', function (e) {
            e.preventDefault();
            shiftSlide(1);
          });
          
          // Transition events
          items.addEventListener('transitionend', checkIndex);
          
          function shiftSlide(dir, action) {
            items.classList.add('shifting');
            
            if (allowShift) {
              if (!action) { posInitial = items.offsetLeft; }
      
              if (dir == 1) {
                items.style.left = (posInitial - slideSize) + "px";
                index++;      
              } else if (dir == -1) {
                items.style.left = (posInitial + slideSize) + "px";
                index--;      
              }
            };
            
            allowShift = false;
          }
            
          function checkIndex(){
            items.classList.remove('shifting');
            if (index == -1) {
              items.style.left = -(slidesLength * slideSize) + "px";
              index = slidesLength - 1;
            }
      
            if (index == slidesLength) {
              items.style.left = -(1 * slideSize) + "px";
              index = 0;
            }
            
            allowShift = true;
          }
  
          slider[i].classList.remove('news-post__full-slider--active');
  
        }

        slideSingle(slider[i], sliderItems, prev, next);  
      }  
    }
  }
}
newPostSliderSingle();

function singleUniversalSliderDetect(){
  let singleUniversalSliderContainer = document.querySelectorAll('.single-universal-slider');
  if(singleUniversalSliderContainer === null){
    // console.log('no single post on the page');
  } else{
    for (let i = 0; i < singleUniversalSliderContainer.length; i++) {
      let sliderContainer = singleUniversalSliderContainer[i].querySelector('.news-post__full-slider');
      let sliderVideoContainer = singleUniversalSliderContainer[i].querySelectorAll('.news-post__full-video');
      sliderVideoContainer.forEach(item =>{
        item.classList.remove('news-post__full-video');
        item.classList.add('news-post__full-video--universal');
      });
      sliderContainer.classList.remove('news-post__full-slider');
      sliderContainer.classList.add('news-post__full-slider--universal');
    }
  }
}
singleUniversalSliderDetect();

//Video  in slider
function fullPostSliderVideoNews() {
  let videos = document.querySelectorAll('.news-post__full-video');

  if (videos === null) {
    // console.log("sliderVideos left HTML");
  } else {
    for (let i = 0; i < videos.length; i++) {
      setupVideo(videos[i]);
    }


    function setupVideo(video) {
      let link = video.querySelector('.news-post__full-video-link');
      let media = video.querySelector('.news-post__full-video-media');
      let button = video.querySelector('.news-post__full-video-button');

      let id = parseMediaURL(media);
    
      video.addEventListener('click', () => {
        let iframe = createIframe(id);
    
        link.remove();
        button.remove();
        video.appendChild(iframe);

        link.removeAttribute('href');
        video.classList.add('video--enabled');   
       
        videoControl();
      });
    }

    function parseMediaURL(media) {
      let regexp = /https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i;
      let url = media.src;
      let match = url.match(regexp);
    
      return match[1];
    }

    function createIframe(id) {
      let iframe = document.createElement('iframe');
    
      iframe.setAttribute('allowfullscreen', '');
      iframe.setAttribute('allow', 'autoplay');
      iframe.setAttribute('src', generateURL(id));
      iframe.classList.add('video__media');
      iframe.setAttribute("id", "newsVideo");
    
      return iframe;
    }
    
    function generateURL(id) {
      let query = '?rel=0&showinfo=0&autoplay=1&enablejsapi=1';
    
      return 'https://www.youtube.com/embed/' + id + query;
    } 
  }
}
fullPostSliderVideoNews();
//Video  in universal slider
function fullPostSliderVideoNewsUniversal() {
  let videos = document.querySelectorAll('.news-post__full-video--universal');

  if (videos === null) {
    // console.log("sliderVideos left HTML");
  } else {
    for (let i = 0; i < videos.length; i++) {
      setupVideo(videos[i]);
    }


    function setupVideo(video) {
      let link = video.querySelector('.news-post__full-video-link');
      let media = video.querySelector('.news-post__full-video-media');
      let button = video.querySelector('.news-post__full-video-button');

      let id = parseMediaURL(media);
    
      video.addEventListener('click', () => {
        let iframe = createIframe(id);
    
        link.remove();
        button.remove();
        video.appendChild(iframe);

        link.removeAttribute('href');
        video.classList.add('video--enabled');   
       
        videoControl();
      });
    }

    function parseMediaURL(media) {
      let regexp = /https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i;
      let url = media.src;
      let match = url.match(regexp);
    
      return match[1];
    }

    function createIframe(id) {
      let iframe = document.createElement('iframe');
    
      iframe.setAttribute('allowfullscreen', '');
      iframe.setAttribute('allow', 'autoplay');
      iframe.setAttribute('src', generateURL(id));
      iframe.classList.add('video__media');
      iframe.setAttribute("id", "newsVideo");
    
      return iframe;
    }
    
    function generateURL(id) {
      let query = '?rel=0&showinfo=0&autoplay=1&enablejsapi=1';
    
      return 'https://www.youtube.com/embed/' + id + query;
    } 
  }
}

//Video control
function videoControl(){

  // console.warn('videoCntrl function');
  let iframes = document.querySelectorAll('iframe');
  // console.log(iframes);
  let nextBtn = document.querySelectorAll('.news-post__full-slider-control-next');
  let prevBtn = document.querySelectorAll('.news-post__full-slider-control-prev');

  for(let i = 0; i < nextBtn.length; i++){
    nextBtn[i].addEventListener('click', function(){
      console.warn('BAM!!');
      let pauseAllYouTubeVideos = () => { 
        let iframes = document.querySelectorAll('iframe');
        Array.prototype.forEach.call(iframes, iframe => { 
          iframe.contentWindow.postMessage(JSON.stringify({ event: 'command', 
        func: 'pauseVideo' }), '*');
       });
      }
      pauseAllYouTubeVideos();
    });
  }

  for(let i = 0; i < prevBtn.length; i++){
    prevBtn[i].addEventListener('click', function(){
      console.warn('BAM!!');
      let pauseAllYouTubeVideos = () => { 
        let iframes = document.querySelectorAll('iframe');
        Array.prototype.forEach.call(iframes, iframe => { 
          iframe.contentWindow.postMessage(JSON.stringify({ event: 'command', 
        func: 'pauseVideo' }), '*');
       });
      }
      pauseAllYouTubeVideos();
    });
  }

  window.addEventListener('scroll', function(){
    let pauseAllYouTubeVideos = () => { 
      let iframes = document.querySelectorAll('iframe');
      Array.prototype.forEach.call(iframes, iframe => { 
        iframe.contentWindow.postMessage(JSON.stringify({ event: 'command', 
      func: 'pauseVideo' }), '*');
     });
    }

    pauseAllYouTubeVideos();
  });
  
}

//height of video, if it`s alone in news-post__full-block-minimized-wrapper without slider
function aloneVideoInNews(){
  let videoBlocks = document.querySelectorAll('.news-post__full-video');
  let intViewportWidth = window.innerWidth;
  if(videoBlocks === null){
    // console.log('no video');
  }else{
    videoBlocks.forEach(item => {
      const videoParentElement = item.parentElement;
      if(videoParentElement.classList.contains('news-post__full-block-minimized-wrapper')){
        if(intViewportWidth > 1140){
          item.style.height = '650px';
        }else if(intViewportWidth < 1140 && intViewportWidth >= 768){
          item.style.height = '470px';
        }else if(intViewportWidth < 768 && intViewportWidth > 475){
          item.style.height = '400px';
        }else if(intViewportWidth < 475){
          item.style.height = '245px';
        }
      }
    });
  }
}
aloneVideoInNews()

function showMoreBtnRotate() {
  const showMoreBtn = document.querySelector(".show-more");
  const showMoreIconBtn = document.querySelector(".show-more__icon");

  if (showMoreBtn === null || showMoreIconBtn === null ) {
		// console.log("showMoreButnRotate left html");
  } else {
    showMoreBtn.addEventListener("mouseover", function() {
      showMoreIconBtn.classList.add("show-more__icon--rotate");
    });
  
    showMoreBtn.addEventListener("click", function() {
      showMoreIconBtn.classList.add("show-more__icon--click");
    });
  
    showMoreBtn.addEventListener("mouseout", function() {
      showMoreIconBtn.classList.remove("show-more__icon--rotate");
      showMoreIconBtn.classList.remove("show-more__icon--click");
    });
  }
}
// showMoreBtnRotate();


//single news post mech
function singleNewsPostMech(){
  let singleNewsPostContainer = document.querySelector('.single-news-post');

  if(singleNewsPostContainer === null){
    // console.log('no single post on the page');
  } else{
    // console.warn('news post single');
    let singleNewsPost = singleNewsPostContainer.querySelector('.news-post');
    let singleNewsPostPanel = singleNewsPost.querySelector('.news-post__short-panel');
    let singleNewsPostFull = singleNewsPost.querySelector('.news-post__full');
    let singleNewsPostTitle = singleNewsPost.querySelector('.news-post__short-title');
    let singleNewsPostClose = singleNewsPost.querySelector('.news-post__full-close');
    singleNewsPostContainer.style.marginBottom = '35px';

    if(singleNewsPostClose === null){
      newPostSliderSingle();
      fullPostSliderVideoNews();
    }else{
      singleNewsPostTitle.style.pointerEvents = 'none';
      singleNewsPostPanel.style.display = 'none';
      singleNewsPostFull.style.display = 'block';
      singleNewsPostClose.style.display = 'none';
      
      newPostSliderSingle();
      fullPostSliderVideoNews();
    }
  }
}

// Brand New Full post slider in opened card
function newPostSliderSingleUniversal(){
  let slider = document.querySelectorAll('.news-post__full-slider--universal');

  if(slider === null){
    // console.log('no news post slider on the page');
  } else{
    
    for(let i = 0; i < slider.length; i++){
      let sliderItems = slider[i].querySelector('.news-post__full-slides');
      let sliderSlide = slider[i].querySelectorAll('.news-post__full-slide');
      let prev = slider[i].querySelector('.news-post__full-slider-control-prev');
      let next = slider[i].querySelector('.news-post__full-slider-control-next');
      let sliderWrapper = slider[i].querySelector('.news-post__full-slider-wrapper');
      const sliderParent = slider[i].parentElement;
      
      const dataHeightDesktopOfSlider = sliderParent.dataset.heightDesktop;
      const dataHeightTabletOfSlider = sliderParent.dataset.heightTablet;
      const dataHeightMobileOfSlider = sliderParent.dataset.heightMobile;

      let parentOfSlider = slider[i].parentElement;
     
      //More space to full slider
      function newPostSliderSingleDynamicHeight(){
        // console.warn('i`m here! newPostSliderSingleDynamicHeight ');
        let intViewportWidth = window.innerWidth;
        if(intViewportWidth < 499){
          // console.warn('i`m here! newPostSliderSingle mobile size');
          
          sliderWrapper.style.minHeight = dataHeightMobileOfSlider + "px";
          slider[i].style.minHeight = dataHeightMobileOfSlider + "px";
          sliderWrapper.style.maxHeight = dataHeightMobileOfSlider + "px";
          slider[i].style.maxHeight = dataHeightMobileOfSlider + "px";
          sliderParent.style.maxHeight = dataHeightMobileOfSlider + "px";
          sliderParent.style.minHeight = dataHeightMobileOfSlider + "px";

          sliderSlide.forEach(item => {
            item.style.minHeight = dataHeightMobileOfSlider + "px";

            let slidePic = item.querySelector('img');
            slidePic.style.height = dataHeightMobileOfSlider + "px";
          })

        }else if(intViewportWidth < 1140){
          // console.warn('i`m here! newPostSliderSingle tablet size');
          sliderWrapper.style.minHeight = dataHeightTabletOfSlider+ "px";
          slider[i].style.minHeight =  dataHeightTabletOfSlider+ "px";
          sliderWrapper.style.maxHeight =  dataHeightTabletOfSlider+ "px";
          slider[i].style.maxHeight =  dataHeightTabletOfSlider+ "px";
          sliderParent.style.maxHeight = dataHeightTabletOfSlider + "px";
          sliderParent.style.minHeight = dataHeightTabletOfSlider + "px";
  
          sliderSlide.forEach(item => {
            item.style.minHeight =  dataHeightTabletOfSlider+ "px";

            let slidePic = item.querySelector('img');
            slidePic.style.height =  dataHeightTabletOfSlider+ "px";
          })
        }else{
          // console.warn('i`m here! newPostSliderSingle Desktpop size');
          sliderWrapper.style.minHeight = dataHeightDesktopOfSlider + "px";
          slider[i].style.minHeight = dataHeightDesktopOfSlider + "px";
          sliderWrapper.style.maxHeight = dataHeightDesktopOfSlider + "px";
          slider[i].style.maxHeight = dataHeightDesktopOfSlider + "px";
          sliderParent.style.maxHeight = dataHeightDesktopOfSlider + "px";
          sliderParent.style.minHeight = dataHeightDesktopOfSlider + "px";
  
          sliderSlide.forEach(item => {
            item.style.minHeight = dataHeightDesktopOfSlider + "px";
          })
        }
      }
      newPostSliderSingleDynamicHeight()
    
      //Check how many slides in slide
      if(sliderSlide.length === 1){
        // console.warn('one slide! turn off slider');
        prev.style.display = 'none';
        next.style.display = 'none';

        sliderSlide.forEach(item => {
          item.style.maxWidth = sliderWrapper.offsetWidth + "px";
        });
      }else{
        
        sliderItems.style.left ='-' + sliderWrapper.offsetWidth + 'px';
        console.warn('sliderWrapper.offsetWidth')
        console.warn(sliderWrapper.offsetWidth)
        sliderSlide.forEach(item => {
          item.style.width = sliderWrapper.offsetWidth + 'px';
          item.style.height = sliderWrapper.offsetHight + 'px';
        })

        function slideSingle(wrapper, items, prev, next) {
          let posX1 = 0,
              posX2 = 0,
              posInitial,
              posFinal,
              threshold = 100,
              slides = items.getElementsByClassName('news-post__full-slide'),
              slidesLength = slides.length,
              slideSize = items.getElementsByClassName('news-post__full-slide')[0].offsetWidth,
              firstSlide = slides[0],
              lastSlide = slides[slidesLength - 1],
              cloneFirst = firstSlide.cloneNode(true),
              cloneLast = lastSlide.cloneNode(true),
              index = 0,
              allowShift = true;
          
          // Clone first and last slide
          items.appendChild(cloneFirst);
          items.insertBefore(cloneLast, firstSlide);
          wrapper.classList.add('loaded');
          // Click events
          prev.addEventListener('click', function (e) {
            e.preventDefault();
            shiftSlide(-1);
          });

          next.addEventListener('click', function (e) {
            e.preventDefault();
            shiftSlide(1);
          });
          
          // Transition events
          items.addEventListener('transitionend', checkIndex);
          
          function shiftSlide(dir, action) {
            items.classList.add('shifting');
            
            if (allowShift) {
              if (!action) { posInitial = items.offsetLeft; }
      
              if (dir == 1) {
                items.style.left = (posInitial - slideSize) + "px";
                index++;      
              } else if (dir == -1) {
                items.style.left = (posInitial + slideSize) + "px";
                index--;      
              }
            };
            
            allowShift = false;
          }
            
          function checkIndex(){
            items.classList.remove('shifting');
            if (index == -1) {
              items.style.left = -(slidesLength * slideSize) + "px";
              index = slidesLength - 1;
            }
      
            if (index == slidesLength) {
              items.style.left = -(1 * slideSize) + "px";
              index = 0;
            }
            
            allowShift = true;
          }
  
          slider[i].classList.remove('news-post__full-slider--active');
  
        }

        slideSingle(slider[i], sliderItems, prev, next);  
      }  
    }
  }
}


function singleUniversalSliderMech(){
  let singleUniversalSliderContainer = document.querySelectorAll('.single-universal-slider');

  if(singleUniversalSliderContainer === null){
    // console.log('no single post on the page');
  } else{
    // console.warn('news post single');
    newPostSliderSingleUniversal();
    fullPostSliderVideoNewsUniversal();
  }
}

singleUniversalSliderMech()

function doubleNewsLinkToFullBar(){
  let newsPost = document.querySelectorAll('.news-post')
  if(newsPost === null){

  }else{
    for (let i = 0; i < newsPost.length; i++) {
      const shortBtnAsk = newsPost[i].querySelector('.news-post__short-btn--ask');
      const shortBtnShare = newsPost[i].querySelector('.news-post__short-btn--share');
      const fullBtnAsk = newsPost[i].querySelector('.news-post__full-btn--ask');
      const fullBtnShare = newsPost[i].querySelector('.news-post__full-btn--share');

      if(shortBtnAsk){
        fullBtnAsk.href = shortBtnAsk.href;
      }

      if(shortBtnShare){
        fullBtnShare.href = shortBtnShare.href;
      }
    }
  }
}
doubleNewsLinkToFullBar();

function newsShareModal(){
  let shareModal = document.querySelector('.modal-share');
  let shareModalBlur = document.querySelector('.modal-share__blur');
  let btnShareModalClose = document.querySelector('.modal-share__close');
  let shareModalOpenBtn = document.querySelectorAll('.news-post__short-btn--share');
  let shareModalFullOpenBtn = document.querySelectorAll('.news-post__full-btn--share');
  let body = document.querySelector('body');
  let modalUrl = document.querySelector('.modal-share__output');
  let shareModalWrapper = document.querySelector('.modal-share__wrapper');
  let newsPostTrigger = document.querySelector('.news-post');

  if(newsPostTrigger){
    function openShareModal(e) {
      e.preventDefault();
      console.warn(this);
      console.log(modalUrl);
      modalUrl.innerHTML = this.href;
      shareModal.classList.add('modal-share--on');
      body.classList.add('page-body__no-scroll');
      shareModalWrapper.classList.add('modal-share__wrapper--opening');
    }
  
    function closeShareModal() {
      shareModalWrapper.classList.remove('modal-share__wrapper--opening');
      shareModalWrapper.classList.add('modal-share__wrapper--closing');
      console.warn('newsShareModal action!')
      console.warn(shareModalOpenBtn)
      const handleAnimationEnd = function() {
        shareModal.classList.remove('modal-share--on');
        shareModalWrapper.classList.remove('modal-share__wrapper--closing');
        body.classList.remove('page-body__no-scroll');
        shareModalWrapper.removeEventListener('animationend', handleAnimationEnd);
      };
      
      shareModalWrapper.addEventListener('animationend', handleAnimationEnd);
    }
  
    if(shareModal === null || btnShareModalClose === null) {
      // console.warn('No modals here!');
    } else {
      for(let i = 0; i < shareModalOpenBtn.length; i++){
        shareModalOpenBtn[i].addEventListener('click', openShareModal);
      }
  
      for(let i = 0; i < shareModalFullOpenBtn.length; i++){
        shareModalFullOpenBtn[i].addEventListener('click', openShareModal);
      }
  
      btnShareModalClose.addEventListener('click', closeShareModal);
  
      shareModalBlur.addEventListener('click', closeShareModal);
    }
  }
}
newsShareModal();

function newsAskModal() {
  let askModal = document.querySelector('.modal-ask');
  let askModalBlur = document.querySelector('.modal-ask__blur');
  let btnAskModalClose = document.querySelector('.modal-ask__close');
  let askModalOpenBtn = document.querySelectorAll('.news-post__short-btn--ask');
  let askModalFullOpenBtn = document.querySelectorAll('.news-post__full-btn--ask');
  let askModalForm = document.querySelector('.modal-ask__form-inner');
  let newsPostTrigger = document.querySelector('.news-post');

  if(newsPostTrigger){
    let url = document.querySelector("[name='SendQuestionForm[url]']");

    let body = document.querySelector('body');
  
    function openModal(e) {
      e.preventDefault();
      askModal.classList.add('modal-ask--on');
      body.classList.add('page-body__no-scroll');
      url.value = this.href;
      askModalForm.classList.add('modal-ask__form-inner--opening');
      // console.log(url);
    }
  
    function closeModal() {
      askModalForm.classList.remove('modal-ask__form-inner--opening');
      askModalForm.classList.add('modal-ask__form-inner--closing');
      console.warn('newsAskModal action!')
      
      
      const handleAnimationEnd = function() {
        askModal.classList.remove('modal-ask--on');
        askModalForm.classList.remove('modal-ask__form-inner--closing');
        body.classList.remove('page-body__no-scroll');
        askModalForm.removeEventListener('animationend', handleAnimationEnd);
      };
      
      askModalForm.addEventListener('animationend', handleAnimationEnd);
    }
  
    if(askModal && btnAskModalClose && askModalBlur) {
      askModalOpenBtn.forEach(btn => btn.addEventListener('click', openModal));
      askModalFullOpenBtn.forEach(btn => btn.addEventListener('click', openModal));
    
      btnAskModalClose.addEventListener('click', closeModal);
      askModalBlur.addEventListener('click', closeModal);
    }
  }
}

newsAskModal();

//Video in universal slider
function fullPostSliderVideo() {
  let videos = document.querySelectorAll('.universal-slider__video');

  if (videos === null) {
    // console.log("sliderVideos left HTML");
  }else{

    videos.forEach(video => {
      setupVideo(video)
    });

    function setupVideo(video) {
      let link = video.querySelector('.universal-slider__video-link');
      let media = video.querySelector('.universal-slider__video-media');
      let button = video.querySelector('.universal-slider__video-button');


      let id = parseMediaURL(media);
    
      video.addEventListener('click', () => {
        let iframe = createIframe(id);
    
        link.remove();
        button.remove();
        video.appendChild(iframe);

        link.removeAttribute('href');
        video.classList.add('video--enabled');   
       
        videoControlForUniversalSlider();
      });
    }

    function parseMediaURL(media) {
      let regexp = /https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i;
      let url = media.src;
      let match = url.match(regexp);
    
      return match[1];
    }

    function createIframe(id) {
      let iframe = document.createElement('iframe');
    
      iframe.setAttribute('allowfullscreen', '');
      iframe.setAttribute('allow', 'autoplay');
      iframe.setAttribute('src', generateURL(id));
      iframe.classList.add('video__media');
      iframe.setAttribute("id", "newsVideo");
    
      return iframe;
    }
    
    function generateURL(id) {
      let query = '?rel=0&showinfo=0&autoplay=1&enablejsapi=1';
    
      return 'https://www.youtube.com/embed/' + id + query;
    } 
  }
}

// fullPostSliderVideo();
//News Slider on mane page
function newsSlider() {
	const modifiers = {
		controlNews: 'news-slider__control--active',
	};

	const elNews = document.querySelector('.js-news-slider');
	if (elNews === null) {
		// console.log("newsSlider left html");
	} else {
		const newsItem = elNews.querySelectorAll('.js-news-slider__item');
		const newsItems = elNews.querySelector('.js-news-slider__items');
		const newsNext = elNews.querySelector('.js-news-slider__next');
		const newsPrevious = elNews.querySelector('.js-news-slider__previous');

		//Max value is scrollWidth - clientWidth, since it's the right side of the block
		const maxScrollValueN = newsItems.scrollWidth - elNews.clientWidth;
		//State values
		let currentSlideN = 0;
		let currentXN = 0;

		//Toggle controls visibility
		const updateNewsControls = () => {
			//Hide previous button if we are at the start
			newsPrevious.classList.toggle(modifiers.controlNews, currentXN !== 0);
			//Hide next button if we are at the end
			newsNext.classList.toggle(modifiers.controlNews, currentXN < maxScrollValueN);
		};

		//Slide to card by its index
		const slideToNews = (index) => {
			//Check for minimal/maximal valid endexes
			if(index < 0 || index > newsItems.length - 1) return;

			//Get total width of all items. CSS is built the way that items don't have any offsets between them.
			//Padding are used for that reason
			let scrollValueN = 0;
			for(let i = 0; i < index; i++) {
				scrollValueN += newsItem[i].clientWidth;
			}

			//Limit by maximal scroll value
			const targetValueN = Math.min(scrollValueN, maxScrollValueN);

			//Scroll to card
			newsItems.scrollTo({left: targetValueN, behavior: 'smooth'});

			//Update state values and controls
			currentSlideN = index;
			currentXN = targetValueN;
			updateNewsControls();
		};

		//Update controls on page load, They start hidden not to have visible controls that can't be clicked while js still loads.
		updateNewsControls();

		//Whenever you click controls you go to next or previous index
		newsNext.addEventListener('click', () => slideToNews(currentSlideN + 1));
		newsPrevious.addEventListener('click', () => slideToNews(currentSlideN - 1));

	}
}
		

newsSlider();