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

source/js/modules/modals.js
194 строки7 KB
Artem Naumov
init
28 окт 2024, 01:39
28 окт 2024, 01:399aa6803
function newsPostAskModal() {

    let askButton = document.querySelectorAll('.bar-btns__ask');
    let modalAsk = document.querySelector('.modal-ask');
    let modalAskClose = document.querySelector('.modal-ask__form-close');

    

    if (askButton === null || modalAsk === null || modalAskClose === null) {
        // console.log("askButton left html");
        
	} else {
        

        for(let i = 0; i < askButton.length; i++){
            askButton[i].addEventListener("click", function(e) {
                e.preventDefault();
                modalAsk.style.display = "flex";
            });
        }

       
        modalAskClose.addEventListener('click', function() {
            modalAsk.style.display = "none";
        });
    }

    
}
newsPostAskModal();

function newsPostShareModal() {
    let shareButton = document.querySelectorAll('.bar-btns__share');
    let modalShare = document.querySelector('.modal-share');
    let modalShareClose = document.querySelector(".modal-share__form-close");

    if (shareButton === null || modalShare === null || modalShareClose === null) {
		// console.log("askButton left html");
	} else {

        for(let i = 0; i < shareButton.length; i++){
            shareButton[i].addEventListener("click", function(e) {
                e.preventDefault();
                modalShare.style.display = "flex";
            });
        }
        
        modalShareClose.addEventListener('click', function() {
            modalShare.style.display = "none";
        });
    }
}
newsPostShareModal();

// modals on vendor-page
function vendorPageAskModal() {
    let askButton = document.querySelector('.single-vendor-description__panel--ask');
    let modalAsk = document.querySelector('.modal-ask');
    let modalAskClose = document.querySelector('.modal-ask__form-close');

    if (askButton === null || modalAsk === null || modalAskClose === null) {
        // console.log("askButton left html");
        
	}else{
        askButton.addEventListener("click", function(e) {
            e.preventDefault();
            modalAsk.style.display = "flex";
        });

        modalAskClose.addEventListener('click', function() {
            modalAsk.style.display = "none";
        });
    } 
}
vendorPageAskModal();

function vendorPageShareModal() {
    let shareButton = document.querySelector('.single-vendor-description__panel--share');
    let modalShare = document.querySelector('.modal-share');
    let modalShareClose = document.querySelector(".modal-share__form-close");

    if (shareButton === null || modalShare === null || modalShareClose === null) {
		// console.log("askButton left html");
	} else {

        shareButton.addEventListener("click", function(e) {
            e.preventDefault();
            modalShare.style.display = "flex";
        });
        
        modalShareClose.addEventListener('click', function() {
            modalShare.style.display = "none";
        });
    }  
}
vendorPageShareModal();

function catalogOffersAskModal() {
  const bodyContainer = document.querySelector('body');
  const modalAskBlur = document.querySelector('.modal-ask__blur');
  const modalAskFormActiveState = document.querySelector('.modal-ask__form-inner--done');
  const modalAskBtnDone = document.querySelector('.modal-ask__btn--done');
  let modalAsk = document.querySelector('.modal-ask');
  let catalogAskButtons = document.querySelectorAll('.ask-request');
  let modalAskID = document.querySelector('.modal-ask__id b');
  let modalAskInputID = document.querySelector('[name="SendQuestionForm[id]"]');
  let modalAskInputURL = document.querySelector('[name="SendQuestionForm[url]"]');
  let modalAskClose, modalAskInput;
  let modalAskForm = document.querySelector('.modal-ask__form-inner');

  if (catalogAskButtons.length > 0 && modalAsk !== null) {
    modalAskClose = modalAsk.querySelector('.modal-ask__close');
    inputDefaultVal = modalAskInputURL.value;
    for (let i = 0; i < catalogAskButtons.length; i++) {
      catalogAskButtons[i].addEventListener('click', function(e) {
        e.preventDefault();
        // modalAskFormActiveState.style.display = 'none';
        if (this.dataset.number) {
          modalAskInputID.value = this.dataset.number;
          modalAskID.innerText = this.dataset.number;
        }
        modalAsk.classList.add('modal-ask--on');
        bodyContainer.classList.add('page-body__no-scroll');
        modalAskForm.classList.add('modal-ask__form-inner--opening');
      });
    }
    // modalAskClose.addEventListener('click', function() {
    //   onModalClose();
    // });
    // modalAskBlur.addEventListener('click', function() {
    //   onModalClose();
    // });
    modalAskBtnDone.addEventListener('click', function() {
      onModalClose();
    });

    function onModalClose() {
      modalAskForm.classList.remove('modal-ask__form-inner--opening');
      modalAskForm.classList.add('modal-ask__form-inner--closing');
      
      const handleAnimationEnd = function() {
        modalAsk.classList.remove('modal-ask--on');
        modalAskForm.classList.remove('modal-ask__form-inner--closing');
        bodyContainer.classList.remove('page-body__no-scroll');
        modalAskForm.removeEventListener('animationend', handleAnimationEnd);

        modalAskInput = modalAsk.getElementsByTagName('input');
        for (var i = 0; i < modalAskInput.length; i++) {
          if (modalAskInput[i].type == "text") {
            modalAskInput[i].value = "";
          }
        }
      };
      
      modalAskForm.addEventListener('animationend', handleAnimationEnd);
    }
  }
}
catalogOffersAskModal();

//cookie modal
function cookieModalShow(){
  let storedCookieLocalStorageParametr = localStorage.getItem('cookiePar');
  if(storedCookieLocalStorageParametr === null || storedCookieLocalStorageParametr === 'cookieModalNotSeen'){
    localStorage.setItem('cookiePar', 'cookieModalNotSeen');

    generateModal();
  }else if(storedCookieLocalStorageParametr === 'cookieModalSeen'){
    // console.log('cookie modal info have been seen, do nothing :)')
  }
}
cookieModalShow();

//create and inject cookie-info modal
function generateModal(){

    let cookieModal = document.createElement('div');
    const body = document.querySelector('.page-body__container');

    cookieModal.classList.add('cookie-info-modal');
    cookieModal.innerHTML = `
        <div class="cookie-info-modal__title">Используем куки</div>
        <div class="cookie-info-modal__text">Продолжая пользоваться сайтом, вы соглашаетесь на использование <a href="https://final.lr.ru/articles/privacy#private-cookies-scroll-trigger">файлов куки</a></div>
        <div class="cookie-info-modal__button">Отлично!</div> `;

    body.appendChild(cookieModal);
    console.warn(cookieModal)

    const cookieModalBtn = document.querySelector('.cookie-info-modal__button');
    cookieModalBtn.addEventListener('click', function(){
      localStorage.setItem('cookiePar', 'cookieModalSeen');
      cookieModal.style.display = 'none';
    });
}