Анонс

${value.blogStatusTime}

${value.blogTitle}

${value.blogText}

${value.blogTextDate}

УЗНАТЬ БОЛЬШЕ

`; } } if (Object.keys(blogs).length < 3) { document.querySelectorAll('.carousel-title__icon').forEach((icons) => { icons.classList.add('mini'); }) } carouselBlog = document.querySelectorAll('.carousel-blog'); if (window.screen.width >= 1024) { setTimeout(() => { activeCarousel(); }, 300); creatBlogs(); } checkCarouselDateStatus(); } if (window.screen.width >= 1024) { creatCarousel(); } else { creatBlogs(); } function creatBlogs() { for (const [key, value] of Object.entries(blogs)) { streamBlogList.innerHTML += `

Анонс

${value.blogStatusTime}

${value.blogTitle}

${value.blogText}

узнать больше

`; }; streamBlog = document.querySelectorAll('.stream-blog'); streamSubBtn = document.querySelectorAll('.stream-sub-btn'); streamShareBtn = document.querySelectorAll('.stream-share-btn'); checkDateStatus(); tabAddClass('all'); }; function checkDateStatus() { streamBlog.forEach((item) => { if (new Date(item.dataset.start) > now) { item.querySelector('.blog__status-now').innerHTML = "Анонс"; item.dataset.class = "anons"; item.querySelector('.stream-sub-btn').dataset.sub = "anons"; } else if (new Date(item.dataset.start) < now && new Date(item.dataset.end) > now) { item.querySelector('.blog__status-now').innerHTML = "В эфире"; item.querySelector('.stream-sub-btn').dataset.sub = "live"; } else { item.querySelector('.blog__status-now').innerHTML = "Запись"; item.querySelector('.stream-sub-btn').dataset.sub = "record"; item.querySelector('.blog__status-time').classList.add('hide'); } }); }; function checkCarouselDateStatus() { carouselBlog.forEach((item) => { if (new Date(item.dataset.start) > now) { item.querySelector('.carousel__status-now').innerHTML = "Анонс"; item.dataset.class = "anons"; item.querySelector('.stream-sub-btn').dataset.sub = "anons"; } else if (new Date(item.dataset.start) < now && new Date(item.dataset.end) > now) { item.querySelector('.carousel__status-now').innerHTML = "В эфире"; item.querySelector('.stream-sub-btn').dataset.sub = "live"; item.querySelector('.stream-sub-btn').textContent = 'Подписатся'; } else { item.querySelector('.carousel__status-now').innerHTML = "Запись"; item.querySelector('.stream-sub-btn').dataset.sub = "record"; item.querySelector('.carousel__status-time').classList.add('hide'); item.querySelector('.stream-sub-btn').textContent = 'Подписатся'; } }); } streamSubBtn.forEach((sub) => { sub.addEventListener('click', () => { if (sub.dataset.sub == 'anons') { popupArea.innerHTML = ``; formBtn = document.querySelector('.formBtn'); formBtn.addEventListener('click', () => { subcribe(sub.dataset.segment, sub.dataset.sub); }); } else { popupArea.innerHTML = ``; formBtn = document.querySelector('.formBtn'); formBtn.addEventListener('click', () => { subcribe(sub.dataset.subsegment, sub.dataset.sub); }); } openModal(); }); }); streamShareBtn.forEach((share) => { share.addEventListener('click', () => { popupArea.innerHTML = ` `; document.querySelector('.page-link').addEventListener('click', () => { copyToClipboard(document.querySelector('.page-link').dataset.link); }); openModal(); }); }); function subcribe(itemId, itemSub) { document.querySelector('.submitForm').addEventListener('submit', (e) => { e.preventDefault(); if (document.myForm.user_email.value == "") { alert("Пожалуйста введите Ваш Email!"); document.myForm.user_email.focus(); return false; }; if (!document.myForm.user_email.value == "") { r46('profile', 'set', { "email": mail.value, "phone": "", }); r46('segment', 'add', { "email": mail.value, "phone": "", "segment_id": itemId, }); r46('subscription', 'manage', { email: mail.value, email_bulk: true, email_transactional: true, email_chain: true }); }; succesSend(itemSub); setTimeout(() => { closeModal(); }, 3000); r46('subscription', 'mailings', document.myForm.user_email.value, { 'segment': itemId }); return (true); }); }; function openModal() { streamPopup.classList.add('show'); document.body.style.overflowY = 'hidden'; streamPopupContent.classList.add('opacity'); }; function closeModal() { streamPopup.classList.remove('show'); document.body.style.overflowY = 'initial'; streamPopupContent.classList.remove('opacity'); setTimeout(() => { streamPopupContent.classList.remove('succes'); }, 300); }; popupCloseBtn.addEventListener('click', closeModal); document.addEventListener('keydown', (e) => { if (e.code === "Escape" && streamPopup.classList.contains('show')) { closeModal(); } }); streamPopup.addEventListener('click', (e) => { if (e.target === streamPopup) { closeModal(); } }); streamTab.forEach((tabBtn) => { tabBtn.addEventListener('click', () => { tabAddClass(tabBtn.dataset.class); }) }) function tabAddClass(tabClass) { streamTab.forEach((tabBtn) => { if (tabClass == tabBtn.dataset.class) { if (!tabBtn.classList.contains('active')) { tabBtn.classList.add('active'); streamBlogList.classList.add('hide'); setTimeout(() => { showTab(tabBtn.dataset.class); }, 600); } } else { tabBtn.classList.remove('active'); } }); } function succesSend(succesType) { streamPopupContent.classList.add('succes'); if (succesType == 'anons') { document.querySelector('.popup-sub').innerHTML = ` `; } else { document.querySelector('.popup-sub').innerHTML = ` `; } } function showTab(itemClass) { streamBlog.forEach((blog) => { if (itemClass == 'all') { blog.classList.remove('hide'); } else { if (blog.dataset.class == itemClass) { blog.classList.remove('hide'); } else { blog.classList.add('hide'); } } }); setTimeout(() => { streamBlogList.classList.remove('hide'); }, 400); } function activeCarousel() { const galleryContainer = document.querySelector('.gallery-container'); const galleryControlsContainer = document.querySelector('.gallery-controls'); const galleryControls = ['previous', 'next']; const galleryItems = document.querySelectorAll('.gallery-item'); class Carousel { constructor(container, items, controls) { this.carouselContainer = container; this.carouselControls = controls; this.carouselArray = [...items]; } // Update css classes for gallery updateGallery() { this.carouselArray.forEach(el => { el.classList.remove('gallery-item-1'); el.classList.remove('gallery-item-2'); el.classList.remove('gallery-item-3'); el.classList.remove('gallery-item-4'); el.classList.remove('gallery-item-5'); }); this.carouselArray.slice(0, 5).forEach((el, i) => { el.classList.add(`gallery-item-${i+1}`); }); } // Update the current order of the carouselArray and gallery setCurrentState(direction) { if (direction.className == 'gallery-controls-previous') { this.carouselArray.unshift(this.carouselArray.pop()); } else { this.carouselArray.push(this.carouselArray.shift()); } this.updateGallery(); } // Construct the carousel navigation // setNav() { // galleryContainer.appendChild(document.createElement('ul')).className = 'gallery-nav'; // this.carouselArray.forEach(item => { // const nav = galleryContainer.lastElementChild; // nav.appendChild(document.createElement('li')); // }); // }s // Construct the carousel controls setControls() { this.carouselControls.forEach(control => { galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`; // document.querySelector(`.gallery-controls-${control}`).innerText = control; }); } // Add a click event listener to trigger setCurrentState method to rearrange carousel useControls() { const triggers = [...galleryControlsContainer.childNodes]; triggers.forEach(control => { control.addEventListener('click', e => { e.preventDefault(); if (control.className == 'gallery-controls-add') { const newItem = document.createElement('img'); const latestItem = this.carouselArray.length; const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length) + 1; // Assign the necessary properties for new gallery item Object.assign(newItem, { className: 'gallery-item', src: `http://fakeimg.pl/300/?text=${this.carouselArray.length+1}` }); newItem.setAttribute('data-index', this.carouselArray.length + 1); // Then add it to the carouselArray and update the gallery this.carouselArray.splice(latestIndex, 0, newItem); document.querySelector(`[data-index="${latestItem}"]`).after(newItem); this.updateGallery(); } else { this.setCurrentState(control); } }); }); } } const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls); exampleCarousel.setControls(); // exampleCarousel.setNav(); exampleCarousel.useControls(); } function copyToClipboard(link) { // Create an auxiliary hidden input var aux = document.createElement("input"); // Get the text from the element passed into the input aux.value = link; // Append the aux input to the body document.body.appendChild(aux); // Highlight the content aux.select(); // Execute the copy command document.execCommand("copy"); // Remove the input from the body document.body.removeChild(aux); document.querySelector('.page-link').classList.add('succes'); document.querySelector('.page-link > span').textContent = "Ссылка скопирована"; } function log() { console.log('---') } const tabsParent = document.querySelector('.tabs-container') const tabs = document.querySelectorAll('.tab'); const tabContent = document.querySelectorAll('.tab-content'); function hideTabContent() { tabContent.forEach(item => { item.style.display = 'none'; }); tabs.forEach(item => { item.classList.remove('tab_active'); }); } function showTabContent(i = 0) { tabContent[i].style.display = 'block'; tabs[i].classList.add('tab_active'); } hideTabContent(); showTabContent(); tabsParent.addEventListener('click', (event) => { const target = event.target; if (target && target.classList.contains('tab')) { tabs.forEach((item, i) => { if (target === item) { hideTabContent(); showTabContent(i); } }); } }); initStreamerceApp({elementId: 'streamsApp', merchantName: 'technodom'})