window.addEventListener('DOMContentLoaded', () => { let container = document.querySelector('.article'); if (container && container.clientHeight > 30) { let sideNews = document.querySelector('.article__side-news'); if (sideNews) { sideNews.classList.remove('d-none'); } } }); window.addEventListener('load', () => { let container = document.querySelector('.article'); if (container) { handleSideNewsHeight(); let urlSplitted = window.location.pathname.split('/'); getData(`/countread/${urlSplitted[3]}/${urlSplitted[4]}`); } }); window.addEventListener('resize', handleSideNewsHeight); function handleCollapseClick(event) { event.currentTarget.classList.toggle('icon-arrow-down-outlined'); event.currentTarget.classList.toggle('icon-arrow-up-outlined'); var swiperCaption = document.querySelector('.swiper-slide-active .article__slides__caption'); if(swiperCaption){ swiperCaption.classList.toggle('caption-full'); swiperCaption.classList.toggle('caption-initial'); } else{ document.querySelector('.article__slides__caption').classList.toggle('caption-full'); document.querySelector('.article__slides__caption').classList.toggle('caption-initial'); } } function handleSideNewsHeight() { let container = document.querySelector('.article'); if (container) { let articles = document.querySelectorAll('.article__side-news li > *'); let accumHeight = 0; for(let article of articles) { accumHeight += (article.clientHeight + 30); //article + article margin-bottom if ((accumHeight - 30) > (container.clientHeight + 30)) { article.classList.add('d-none'); } } } } if (location.href.includes('/article') && !document.querySelector('.alert.error')) { let splitted = location.pathname.split('/'); let categoryId = splitted.find(element => element.includes('hub01-home')); getData(`/constructBreadcrumb/${categoryId}`).then((breadcrumbs) => { let crumbs = breadcrumbs.crumbs; const fragment = document.createDocumentFragment(); // ← uses a DocumentFragment instead of a
const breadcrumbNav = document.querySelector('nav#breadcrumb'); const breadcrumbList = document.createElement('ul'); breadcrumbList.classList.add('breadcrumb'); breadcrumbList.classList.add('d-flex'); breadcrumbList.classList.add('align-items-center'); for (let i = 0; i < crumbs.length; i++) { if (i == crumbs.length - 1) { const breadcrumbItem = document.createElement('li'); breadcrumbItem.classList.add('breadcrumb-item'); breadcrumbItem.classList.add('active'); if (crumbs[i][Object.keys(crumbs[i])] != '') { const breadcrumbLink = document.createElement('a'); breadcrumbLink.href = crumbs[i][Object.keys(crumbs[i])]; breadcrumbLink.textContent = Object.keys(crumbs[i]); if (breadcrumbItem) { breadcrumbItem.appendChild(breadcrumbLink); } } else { breadcrumbItem.textContent = Object.keys(crumbs[i]); } if(breadcrumbList) { breadcrumbList.appendChild(breadcrumbItem); } } else { const breadcrumbItem = document.createElement('li'); breadcrumbItem.classList.add('breadcrumb-item'); if (crumbs[i][Object.keys(crumbs[i])] != '') { const breadcrumbLink = document.createElement('a'); breadcrumbLink.classList.add('d-flex'); breadcrumbLink.classList.add('align-items-center'); breadcrumbLink.href = crumbs[i][Object.keys(crumbs[i])]; breadcrumbLink.textContent = Object.keys(crumbs[i]); const nextArrow = document.createElement('i'); nextArrow.classList.add('icon'); nextArrow.classList.add('icon-arrow-right'); breadcrumbLink.appendChild(nextArrow); if (breadcrumbItem) { breadcrumbItem.appendChild(breadcrumbLink); } } else { breadcrumbItem.textContent = Object.keys(crumbs[i]); const nextArrow = document.createElement('i'); nextArrow.classList.add('icon'); nextArrow.classList.add('icon-arrow-right'); if (breadcrumbItem) { breadcrumbItem.appendChild(nextArrow); } } breadcrumbList.appendChild(breadcrumbItem); } } fragment.appendChild(breadcrumbList); breadcrumbNav.appendChild(fragment); let breadcrumbJLD = document.createElement('script'); breadcrumbJLD.type = 'application/ld+json'; breadcrumbJLD.text = jldBreadcrumb(location, crumbs); document.head.appendChild(breadcrumbJLD); }); } // burger menu in mobile & tablet window.addEventListener('DOMContentLoaded', (event) => { let burgerMenu = document.querySelector('.menu-burger'); if (burgerMenu) { burgerMenu.parentNode.classList.add('container-menu-burger'); let burgerMenuIcon = document.querySelector('.icon-menu'); let burgerMenuNavLinks = document.querySelectorAll('.menu-burger .nav-item'); let burgerMenuNavContainers = document.querySelectorAll('.menu-burger .menu-sub'); // showing and hiding menu on button click burgerMenuIcon.addEventListener('click', () => { burgerMenu.classList.toggle('active'); burgerMenuIcon.classList.toggle('active'); burgerMenuIcon.classList.toggle('icon-menu'); burgerMenuIcon.classList.toggle('icon-close'); burgerMenu.parentNode.classList.toggle('active'); document.body.classList.toggle('overflow-hidden'); }); for (let menuLink of burgerMenuNavLinks) { menuLink.addEventListener('click', () => { let title = menuLink.innerText.trim(); for (let link of burgerMenuNavLinks) { if (link == menuLink) { menuLink.classList.toggle('active'); } else { link.classList.remove('active'); } } let toggle = document.querySelector(`.menu-sub[data-container-id="${title}"]`); for (let linkToggle of burgerMenuNavContainers) { if (linkToggle == toggle) { toggle.classList.toggle('active'); } else { linkToggle.classList.remove('active'); } } }) } } }); function openCancelSubscription(event) { let subscriptionId = event.currentTarget.dataset.subscriptionId; let cancelSubscriptionPop = document.querySelector('#popup-cancel-subscription'); cancelSubscriptionPop.setAttribute('data-subscription-id', subscriptionId); openPop('popup-cancel-subscription') } var deactivateSubscription = function (event) { event.preventDefault(); var context = document.getElementsByTagName("html")[0].dataset.application; let subscriptionId = event.currentTarget.closest('#popup-cancel-subscription').dataset.subscriptionId; $.ajax({ type: 'DELETE', url: '/' + context + '/deactivateSubscription/' + subscriptionId, success: function (result) { if (result.error) { openPop('popup-cancel-subscription-error'); closePop('popup-cancel-subscription'); } else { openPop('popup-cancel-subscription-confirmation'); closePop('popup-cancel-subscription'); } }, error: function (result) { openPop('popup-cancel-subscription-error'); closePop('popup-cancel-subscription'); } }); } function closeCancelConfirmationPopup(event) { closePop('popup-cancel-subscription-confirmation'); window.location.reload(); } window.addEventListener('DOMContentLoaded', (event) => { //article detail carousel Thumbs bottom var articleCarousel = new Swiper('.article-detail__carousel .article-swiper-container', { slidesPerView: 3, spaceBetween: 10, watchSlidesVisibility: true, breakpoints: { 640: { slidesPerView: 5, spaceBetween: 14 } } }); //article detail caroussel Top var articleCarouselTop = new Swiper('.article__slides .gallery-top', { slidesPerView: 'auto', allowTouchMove: false, loop: true, loopedSlides: 1, thumbs: { swiper: articleCarousel }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); // carousel initiation let carousels = document.querySelectorAll('.swiper-container'); if (typeof (carousels) != 'undefined' && carousels != null) { carousels.forEach(carouselItem => { let config = JSON.parse(carouselItem.dataset.config); config.realSlideCount = carouselItem.querySelectorAll('.swiper-slide').length || 0; let centeredSlides = config.centeredSlides; let loopFix = config.loop && centeredSlides != true; let slideEffect = config.effect; if (loopFix) { config.loop = false; } let swiper = new Swiper(carouselItem, config); function handleNextClick() { swiper.slideTo(0); if (swiper.params.slidesPerView === 'auto') { swiper.translateTo(config.slidesOffsetBefore || 0); } } function handlePrevClick() { swiper.slideTo(swiper.slides.length - 1); if (swiper.params.slidesPerView === 'auto') { swiper.translateTo(config.slidesOffsetAfter || swiper.maxTranslate()); } } if (loopFix && swiper.navigation.prevEl && swiper.navigation.nextEl) { swiper.navigation.prevEl.addEventListener('click', handlePrevClick); swiper.on('transitionEnd', function () { if (swiper.progress === 0) { swiper.navigation.prevEl.addEventListener('click', handlePrevClick); } else { swiper.navigation.prevEl.removeEventListener('click', handlePrevClick); } if (swiper.progress === 1) { swiper.navigation.nextEl.addEventListener('click', handleNextClick); } else { swiper.navigation.nextEl.removeEventListener('click', handleNextClick); } }); } if (centeredSlides && slideEffect != 'coverflow') { swiper.on('slidePrevTransitionStart', () => { if (swiper.activeIndex < swiper.originalParams.initialSlide) { swiper.slides[0].classList = 'swiper-slide swiper-slide-prev'; swiper.slides[1].classList = 'swiper-slide swiper-slide-active'; swiper.slides[2].classList = 'swiper-slide swiper-slide-next'; } }); swiper.on('sliderMove', () => { if (swiper.activeIndex <= swiper.originalParams.initialSlide) { swiper.allowSlidePrev = false; } else { swiper.allowSlidePrev = true; } }); } if (slideEffect == 'coverflow') { swiper.on('transitionEnd', () => { if ($('.swiper-wrapper .swiper-slide-duplicate.swiper-slide-active:first-child').length > 0) { swiper.slideTo(swiper.slides.length - 3) } }); } }); } }); // Method to check whether the element is displayed on screen or not function isInViewport(el) { const rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } function toggleCollapse(event, collapseIcon, expandIcon) { // The target body that will collapse|expand on click let collapseBody = event.currentTarget.parentNode.querySelector('.collapse__body'); let collapseHeader = event.currentTarget; // Changing the icon upon click event.currentTarget.querySelector('i').classList.toggle(collapseIcon); event.currentTarget.querySelector('i').classList.toggle(expandIcon); // Collapsing|expanding the target body collapseBody.classList.toggle('active'); // Adding active class to identify the target body collapseBody.classList.toggle('d-none'); collapseBody.classList.toggle('d-block'); // Close any other open item document.querySelectorAll('.collapse__body').forEach((e) => { if(!e.classList.contains('active')){ e.classList.remove('d-block'); e.classList.add('d-none'); e.parentNode.querySelector('.collapse__header i').classList.add(collapseIcon); e.parentNode.querySelector('.collapse__header i').classList.remove(expandIcon); } }); // Removing active after expanding to avoid having two active items on next click collapseBody.classList.remove('active'); if(isInViewport(collapseHeader) == false){ document.querySelector('body').scrollTo({ top: collapseHeader.offsetTop, }); } } function addCollapseStyle(collapseElement){ collapseElement.style.maxHeight = "0px"; collapseElement.style.opacity = "0"; } function cyberCollapse(event, collapseIcon, expandIcon) { const imgActive = "img-active"; // The target body that will collapse|expand on click let collapseBody = event.currentTarget.parentNode.querySelector('.collapse-container__body'); let collapseHeader = event.currentTarget; let targetIcon = event.currentTarget.querySelector('i'); // Animating the collapseIcon upon click if(event.currentTarget.querySelector('i').classList.contains(collapseIcon)){ targetIcon.style.transform = 'rotate(-180deg)'; } setTimeout(()=>{ targetIcon.style.transform = null; targetIcon.classList.toggle(collapseIcon); targetIcon.classList.toggle(expandIcon); }, 350); // Changing the icon image upon click event.currentTarget.querySelector('#imgIcon').classList.toggle(imgActive); event.currentTarget.querySelector('#imgIconActive').classList.toggle(imgActive); // Collapsing|expanding the target body collapseBody.classList.toggle('active'); // Adding active class to identify the target body collapseBody.classList.toggle('d-block'); addCollapseStyle(collapseBody); // Adding style rules to be used with css transition let timeOut; if(!collapseBody.classList.contains('d-none')){ collapseHeader.classList.remove('focus'); timeOut = 350; setTimeout(()=>{collapseBody.classList.add('d-none');}, timeOut); } else{ collapseHeader.classList.add('focus'); timeOut = 1; collapseBody.classList.remove('d-none'); setTimeout(()=>{collapseBody.style.maxHeight = null; collapseBody.style.opacity = null;}, timeOut); } // Close any other open item document.querySelectorAll('.collapse-container__body').forEach((e) => { if(!e.classList.contains('active')){ e.classList.remove('d-block'); addCollapseStyle(e); setTimeout(()=>{e.classList.add('d-none');}, 350); //Waiting for css transition before adding d-none class e.parentNode.querySelector('.collapse-container__header i').classList.add(collapseIcon); e.parentNode.querySelector('.collapse-container__header i').classList.remove(expandIcon); if (e.parentNode.querySelector('#imgIcon').classList.contains(imgActive)){ e.parentNode.querySelector('#imgIcon').classList.remove(imgActive); } if (!e.parentNode.querySelector('#imgIconActive').classList.contains(imgActive)){ e.parentNode.querySelector('#imgIconActive').classList.add(imgActive); } if(e.parentNode.parentNode.querySelector('.card-header').classList.contains('focus')){ e.parentNode.parentNode.querySelector('.card-header').classList.remove('focus'); } } }); // Removing active after expanding to avoid having two active items on next click collapseBody.classList.remove('active'); if(isInViewport(collapseHeader) == false){ document.querySelector('body').scrollTo({ top: collapseHeader.offsetTop, }); } } var handleConsentLogin = function () { let loginType = document.querySelector( ".login-consent .radio input:checked" ).value; let redirect = document.getElementById("targetURL").value; let saveSelection = document.querySelector( ".login-consent .checkbox input" ).checked; const body = { allowHe: loginType == "he", saveChanges: saveSelection }; window.location.href = `/consent-form?allowHE=${body.allowHe}&saveChanges=${body.saveChanges}&redirect=${redirect}`; }; var updateQueryString = function (key, value, url) { if (!url) url = window.location.href; var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"), hash; if (re.test(url)) { if (typeof value !== 'undefined' && value !== null) return url.replace(re, '$1' + key + "=" + value + '$2$3'); else { hash = url.split('#'); url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, ''); if (typeof hash[1] !== 'undefined' && hash[1] !== null) url += '#' + hash[1]; return url; } } else { if (typeof value !== 'undefined' && value !== null) { var separator = url.indexOf('?') !== -1 ? '&' : '?'; hash = url.split('#'); url = hash[0] + separator + key + '=' + value; if (typeof hash[1] !== 'undefined' && hash[1] !== null) url += '#' + hash[1]; return url; } else return url; } }; var urlize = function (url) { var prefix = $('html').data('route-prefix'); var application = $('html').data('application'); if (application) { url = '/' + application + url; } if (prefix) { url = prefix + url; } return url; } var handleDownloadClick = function (e, progressbarId) { //e.preventDefault(); //e.stopPropagation(); //show loading pop // openPop('mm-com-loading-pop', true); //Show the subscription pop var element = e; if ($(element).hasClass('show-dialog')) { var dialog = document.querySelector('dialog'); dialog.showModal(); } else { // $(document.getElementById(progressbarId)).show().prev().attr("disabled", "disabled"); var assetId = $(element).attr("data-article-id"); var assetImage = $(element).attr("data-article-image"); var assetSubTitle = $(element).attr("data-article-subTitle"); var assetName = $(element).attr("data-article-name"); var walletId = $(element).data("wallet-id"); var contentType = $(element).attr("data-article-type"); var target = window.location.href; target = updateQueryString('status', undefined, target); target = updateQueryString('trigger', undefined, target); if (target.indexOf("?") !== -1) { target += "&trigger=" + assetId; } else { target += "?trigger=" + assetId; } var url = urlize('/getDeliveryUrl?assetId=' + assetId + '&trigger=' + assetId + '&contentType=' + contentType ); if (walletId) { url += "&walletId=" + walletId; } $.ajax({ dataType: "json", url: url, timeout: 120000, success: function (result, status) { if(result.downloadUrl) { window.location.replace(result.downloadUrl); } }, error: function (result, exception) { openPop('download-error-popup'); } }); } }; const gymondoScripts = { subscribe: function (event) { const typeId = event.currentTarget.getAttribute("subTypeId"); const customRedirect = event.currentTarget.getAttribute("customRedirect"); const context = this.getApplicationContext(); if (isvliveLoggedIn == false) { // redirect him to auth flow this.isNotLoggedInHandler(typeId,customRedirect); return; } const url = "/" + context + "/api/payment/subTypeId/" + typeId; $.ajax({ dataType: "json", type: "POST", url: url, headers: { "x-csrfsynctoken": "" + getCookieCSRFString("csrfsynctoken") + "", }, success: function (result, status) { gymondoSubscriptionHandlers.gymondoSuccessHandler(result); }, error: function (result, status) { gymondoSubscriptionHandlers.gymondoErrorHandler(result); }, }); }, isNotLoggedInHandler: function (subTypeId,customRedirect) { let url; if(customRedirect && customRedirect!=""){ url = `${location.origin}/`+customRedirect; }else{ url = `${location.origin}/vodafonefitness`; } let errorRedirect=url.toString(); let URLObject = new URL(url.toString()); URLObject.searchParams.set("subscribe",subTypeId); let redirect=URLObject.origin+URLObject.pathname+URLObject.search; let authenticationUrl = location.origin+"/authentication?redirect="+encodeURIComponent(redirect)+"&errorRedirect="+encodeURIComponent(errorRedirect); window.location.replace(authenticationUrl); return; }, getApplicationContext: function () { return $("html").data("application"); }, handleVideoPlay: function (videoFram) { document.querySelector("#gymondo-video-player .modal-body").innerHTML = videoFram; openPop("gymondo-video-player"); }, closeVideoModal: function () { //Remove the iframe to avoid playing the video in the background after the modal is closed document.querySelector(".modal-body.gymondo-video-player__body").innerHTML = ""; closePop("gymondo-video-player"); }, }; var gymondoSubscriptionHandlers = { gymondoSuccessHandler: function (result) { if (result && result.redirectUrl) { window.location.replace(result.redirectUrl); } else if ( result && result.response && result.response.paymentStatus === "CAPTURED" ) { let URLObject = new URL(location.href); URLObject.searchParams.delete("subscribe"); window.location.replace(URLObject.origin+URLObject.pathname+URLObject.search); } else if (result.response && result.response.consumerDescription) { openAlertPopup("alert-error-popup", result.response.consumerDescription); document.querySelector("#alert-error-popup").click(); } else { openPop("alert-error-popup"); document.querySelector("#alert-error-popup").click(); } }, gymondoErrorHandler: function (result) { openPop("alert-error-popup"); document.querySelector("#alert-error-popup").click(); }, } window.addEventListener('DOMContentLoaded', function () { let URLObject = new URL(location.href); if (URLObject.searchParams.get("subscribe") && URLObject.searchParams.get("subscribe")!="") { document.getElementById('gymondo-btn').click(); } }); $('.gymondo-confirmation__register.eventToTrack').on('click', () => { $('#gtm-event-track').attr('category', $('.gymondo-confirmation__register.eventToTrack').attr('category')); $('#gtm-event-track').attr('action', $('.gymondo-confirmation__register.eventToTrack').attr('action')); $('#gtm-event-track').attr('titletotrack', $('.gymondo-confirmation__register.eventToTrack').attr('titletotrack')); $('#gtm-event-track').click(); window.open($('.gymondo-confirmation__register.eventToTrack').attr('data-href'), $('.gymondo-confirmation__register.eventToTrack').attr('target')); }) function handleCardTrackedElements(trackedElements, trackedElementIndex){ if(!trackedElements || !trackedElements.length) return; for(let elementIndex = 0; elementIndex < trackedElements.length; elementIndex++){ trackedElements[elementIndex].setAttribute("valuetotrack",trackedElementIndex); } } function handleSquareCarouselTrackingSlotNumbers() { setTimeout(() => { let carousselSlides = document.querySelectorAll(".swiper.card-square-carousel .swiper-slide"); if(!carousselSlides || !carousselSlides.length) return; for (let slideIndex = 0; slideIndex < carousselSlides.length; slideIndex++) { carousselSlides[slideIndex] .querySelector(".eventToTrack") .setAttribute("valuetotrack", `${carousselSlides[slideIndex].getAttribute("data-swiper-slide-index")}`); } }, 500) } function handleTopModulHeaderCarouselSlotNumbers(){ setTimeout(() => { let carousselSlides = document.querySelectorAll(".swiper.card-overlapped--big .swiper-slide"); if(!carousselSlides || !carousselSlides.length) return; for(let slideIndex = 0; slideIndex < carousselSlides.length; slideIndex++){ let trackedElements = carousselSlides[slideIndex].querySelectorAll(".eventToTrack"); handleCardTrackedElements(trackedElements, slideIndex); } }, 500); } function handleSubCategoryMenuArticlesSlotNUmbers(){ setTimeout(() => { let subCategoriesMenus = document.querySelectorAll(".menu-sub-articles.category-render"); if(!subCategoriesMenus || !subCategoriesMenus.length) return; for(let menuIndex = 0; menuIndex < subCategoriesMenus.length; menuIndex++){ let menuArticles = subCategoriesMenus[menuIndex].querySelectorAll(".standard-card.card-standard--menu"); if(!menuArticles || !menuArticles.length) return; for(let articleIndex = 0; articleIndex < menuArticles.length; articleIndex++){ let trackedElements = menuArticles[articleIndex].querySelectorAll(".eventToTrack"); handleCardTrackedElements(trackedElements, articleIndex); } } }, 500) } window.addEventListener("load", function(){ handleSquareCarouselTrackingSlotNumbers(); handleTopModulHeaderCarouselSlotNumbers(); handleSubCategoryMenuArticlesSlotNUmbers(); }); const imapScripts = { selectImapTabAsActive: function(){ const arcorTabBtn = document.getElementById('ArcorTabBtn'); const arcorTabPan = document.getElementById('ArcorTabPane'); const imapTabBtn = document.getElementById('ImapTabBtn'); const imapTabPan = document.getElementById('ImapTabPane'); if(arcorTabBtn.classList.contains('active') && !imapTabBtn.classList.contains('active')){ arcorTabBtn.classList.remove('active'); arcorTabPan.classList.remove('active'); imapTabBtn.classList.add('active'); imapTabPan.classList.add('active'); } }, checkValidation: function(){ const passwordValidity = document.getElementById('imap-password').reportValidity(); const usernameValidity = document.getElementById('imap-username').reportValidity(); if(usernameValidity && passwordValidity) this.loginHandler(); }, loginHandler: function(){ const me = this; const username = document.getElementById('imap-username').value; const data = {username: username} const url = "/getImapParameters"; $.ajax({ dataType: "json", type: "POST", data: data, url: url, headers: {"x-csrfsynctoken": "" + getCookieCSRFString("csrfsynctoken") + ""}, success: function (result, status) { console.log('Getting IMAP parameters success....') me.updateParameters(result); }, error: function (result, status) { console.log('Error getting IMAP properties...') console.log(result); }, }); }, updateParameters: function(params){ const context = document.getElementById('imap-context'); context.value = params.context; const timestamp = document.getElementById('imap-timestamp'); timestamp.value = params.timestamp; const hash = document.getElementById('imap-hash'); hash.value = params.hash; this.submit(); }, submit: function(){ const imapForm = document.getElementById('imap-login-form'); console.log('Sending login request to IMAP...'); imapForm.submit(); } }; const applicationContext = document.querySelector('html').getAttribute('data-application'); window.addEventListener('DOMContentLoaded', async (event) => { document.documentElement.style.height = window.outerHeight; // relying on cookie instead of x-authenticated header to overcome backend static caching issue if(document.getElementById('header__logout')){ document.getElementById('header__logout').classList.remove('d-flex'); document.getElementById('header__logout').classList.add('d-none'); } if (isLoggedIn) { var loggedInEmailCookie = getCookie('mm-castor-logged-in2'); if (loggedInEmailCookie && loggedInEmailCookie !== '') { toggleVisibility('header__email', 'header__email__loggedin'); toggleVisibility('footer__email', 'footer__email__loggedin'); toggleVisibility('no-login-box', 'rectangle_1'); } document.getElementById('header__logout').classList.add('d-flex'); await userProfile.loadUserProfile(); } else { if(document.getElementById('header__logout')){ document.getElementById('header__logout').classList.remove('d-flex'); document.getElementById('header__logout').classList.add('d-none'); } } let irregularCards = document.querySelectorAll('.card-overlapped--landscape, .card-overlapped--portrait'); for (let i = 0; i < irregularCards.length; i++) { let grid = irregularCards[i].closest('.grid'); grid.classList.add('irregular-card-section'); if (grid.querySelector('.gujAd:not(.GujAdInUse)')) { grid.classList.add('hidden-Ads'); } } let hiddenAds = document.querySelectorAll('.gujAd.rectangle:not(.GujAdInUse)'); for (let i = 0; i < hiddenAds.length; i++) { let grid = hiddenAds[i].closest('.grid'); if (grid) { grid.classList.add('hidden-Ads-default-section'); } } if(document.querySelector('.container-fluid>.container')){ let mainContainer = document.querySelector('.container-fluid>.container'); let lastChild = mainContainer.lastElementChild; let previousChild = lastChild.previousElementSibling; if (lastChild.classList.contains('gujAd')) { lastChild.classList.add('mt-none'); lastChild.classList.add('pt-none'); if (lastChild.classList.contains('mobile')) { lastChild.className = 'gujAd mobile pb-none mb-l mb-md-xxx'; if (!(previousChild.classList.contains('mb-l') || previousChild.classList.contains('pb-l'))) { previousChild.classList.add('pb-none'); previousChild.classList.add('mb-l'); previousChild.classList.add('mb-md-xxx'); } } else { previousChild.classList.add('pb-none'); previousChild.classList.add('mb-l'); previousChild.classList.add('mb-md-xxx'); } } } let allAddresses = document.getElementsByTagName('a'); for (let i = allAddresses.length - 1; i >= 0; i--) { if (allAddresses[i].innerHTML.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi)) { let sourceMailAddressInnerHtml = allAddresses[i].innerHTML; let sourceMailAddressParentElement = allAddresses[i].parentElement; const targetMailAddressElement = document.createElement("span"); targetMailAddressElement.innerHTML = (splitMail(sourceMailAddressInnerHtml)); sourceMailAddressParentElement.appendChild(targetMailAddressElement); targetMailAddressElement.addEventListener('click', function () { window.location.href = 'mailto:' + sourceMailAddressInnerHtml; } , false); allAddresses[i].parentNode.replaceChild(targetMailAddressElement, allAddresses[i]); } } // ajax links in inner menu let ajaxItems = document.querySelectorAll('.ajax-item'); if (typeof (ajaxItems) != 'undefined' && ajaxItems != null) { ajaxItems.forEach(ajaxItem => { if (!ajaxItem.closest('.menu-sub')) { if (!window.matchMedia("(min-width: 1024px)").matches) { ajaxItem.addEventListener('click', () => { updateSection(ajaxItem); }); if (ajaxItem.classList.contains('active')) { updateSection(ajaxItem); } } } }); } let msisdnForm = document.getElementById('login-msisdn-form'); if (msisdnForm) { msisdnForm.addEventListener('submit', function (event) { if (msisdnForm.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); document.querySelector('.login-box-container__form__input').classList.add('invalid'); } msisdnForm.classList.add('was-validated'); }, false); } //Init Tabs component in my subscription-and-purchases page initTab('#subscriptionsAndPurchases'); initTab('#loginTabs'); function getSubcategory(item, menuContainer, ajaxContainer) { let id = item.getAttribute('data-id'); let limit = item.getAttribute('data-limit'); let offset = item.getAttribute('data-offset') ? item.getAttribute('data-offset') : 0; let moduleFiltering = ' '; let moreBtn; if (menuContainer.classList.contains('menu-flat')) { moreBtn = ajaxContainer.nextElementSibling.querySelector('.btn'); } if (item.getAttribute('data-module-filter') != '') { moduleFiltering = item.getAttribute('data-module-filter'); } let type = item.closest('.sub-nav-bar').getAttribute('data-ajax-layout'); let cachedFeed; if (moduleFiltering) { cachedFeed = sessionStorage.getItem(`${id}-${type}-${limit}-${moduleFiltering}`); } else { cachedFeed = sessionStorage.getItem(`${id}-${type}-${limit}`); } if (cachedFeed) { ajaxContainer.innerHTML = cachedFeed; } else { let url = `/${applicationContext}/portal_fragments_subcategory?id=${id}&limit=${limit}&offset=${offset}&type=${type}&module_filtering=${moduleFiltering}`; getData(url).then((response) => { setActive(item, menuContainer, 'li'); if (moduleFiltering) { sessionStorage.setItem(`${id}-${type}-${limit}-${moduleFiltering}`, response); } else { sessionStorage.setItem(`${id}-${type}-${limit}`, response); } ajaxContainer.innerHTML = response; if (moreBtn) { let path = id.split('-'); for (let i = 0; i < path.length; i++) { if ((path[i] == 'ratgeber' && path[i + 1] != '') || (path[i] == 'fussball' && path[i + 1] != '') || (path[i] == 'news' && path[i + 1] && path[i + 1] != '' && i != 2)) { path[i] = path[i + 1]; } path[i] = path[i].replace('_', ''); } moreBtn.href = `/${path[2]}/${path[3]}`; } }).catch(function (error) { console.log(`error getting subcategory articles ${error}`); }); } } // Update content from menu function updateSection(ajaxItem) { let menuContainer = ajaxItem.closest('.ajax-container'); let feedContainer = document.querySelector('.ajax-container+.grid'); setActive(ajaxItem, menuContainer, 'li') getSubcategory(ajaxItem, menuContainer, feedContainer); } function setActive(selectedItem, container, selectedClass) { let items = container.querySelectorAll(selectedClass); for (let i = 0; i < items.length; i++) { items[i].classList.remove('active'); } if (selectedItem) { selectedItem.classList.add('active'); } } function splitMail(mailString) { var splittefMailArray = mailString.split("@"); const replacedHtmlElement = ""; return replacedHtmlElement; } function visibilityClassHandler(element){ if(element.classList.contains('gujAd')) return 'd-block'; if(element.classList.contains('login-wrapper')) return 'd-null'; return 'd-flex'; } function toggleVisibility(idA, idB) { var elemA = document.getElementById(idA); var elemB = document.getElementById(idB); if (elemA && elemB) { elemA.classList.toggle('d-none'); elemA.classList.toggle(visibilityClassHandler(elemA)); elemB.classList.toggle('d-none'); elemB.classList.toggle(visibilityClassHandler(elemB)); } } }); function getDeviceType() { const userAgent = window.navigator.userAgent; if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(userAgent)) { return "tablet"; } if (/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(userAgent)) { return 'mobile'; } return 'desktop'; } function initTab(elem) { document.addEventListener('click', function (e) { if (!e.target.matches(elem + ' .tabs__btn')) return; if (e.target.matches(elem + ' .tabs__btn.info-link')) return; if (!e.target.classList.contains('active')) { findActiveElementAndRemoveIt(elem + ' .tabs__btn'); findActiveElementAndRemoveIt(elem + ' .tabs__pane'); e.target.classList.add('active'); setTimeout(function () { var pane = document.querySelectorAll(elem + ' .tabs__pane.' + e.target.dataset.name); Array.prototype.forEach.call(pane, function (el) { el.classList.add('active'); }); }, 200); } }); } function findActiveElementAndRemoveIt(elem) { var elementList = document.querySelectorAll(elem); Array.prototype.forEach.call(elementList, function (e) { e.classList.remove('active'); }); } var getCookieCSRFString = function (cname) { let name = cname + '='; let decodedCookie = decodeURIComponent(document.cookie); let ca = decodedCookie.split(';'); for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return null; }; //foodland lazy load items async function highlightActiveItem(e) { //show loading for clicked video videojs('video-player').pause(); videojs('video-player').bigPlayButton.hide(); $('.loading-state').addClass('active'); //highlight active video var element = $(e.target).closest('.article-list-item.video'); if ($('.article-list-item.video').removeClass('active')) { $('.article-list-item.video').removeClass('active'); } element.addClass('active'); var videoId = element.data('id'); var videoType = element.data('content-type'); var videoTitle = element.find('.video-title').attr('data-title'); var videoSubtitle = element.find('.video-subtitle').text(); var videoImg = element.find('img').attr('src'); $('.streaming-video__title').text(videoTitle); $('.streaming-video__subtitle').text(videoSubtitle); videojs('video-player').poster(videoImg); videojs('video-player').autoplay(true); //tracking $('#gtm-event-track').attr('category','Foodland'); $('#gtm-event-track').attr('action','Click on ' + videoTitle); $('#gtm-event-track').attr('titletotrack','Click on ' + videoTitle); $('#gtm-event-track').click(); $('#video-player').data('piwik-title', videoId+"-"+videoTitle); //call src of video await videoStreamingProcess.callStreamingVideo(videoId, videoType,videoTitle); //Foodland Adobe Analytics if(window.location.pathname == '/foodland'){ contentServicesUtils.foodlandVideoAction('play', videoTitle); } }; // $('#popup-purchase').on('shown.bs.modal', function (e) { // $("#gtm-event-track").attr("categorytotrack", $('.jsTrack').attr('category')); // $("#gtm-event-track").attr("actiontotrack", "Pop-up shown"); // $("#gtm-event-track").attr("titletotrack", "purchase page shown"); // $("#gtm-event-track").click(); // }) // $('#popup-purchase').on('hidden.bs.modal', function (e) { // setTimeout(function () { // if (!document.body.contains(document.getElementById('result-modal'))) { // $("#gtm-event-track").attr("categorytotrack", $('.jsTrack').attr('category')); // $("#gtm-event-track").attr("actiontotrack", "Pop-up closed"); // $("#gtm-event-track").attr("titletotrack", "purchase page closed"); // $("#gtm-event-track").click(); // } // }, 1000); // }); // Check authentication and open Modal .. change modaId var checkAuth = function(targetUrl, modalId, categoryToTrack) { if(!isvliveLoggedIn) { window.localStorage.setItem('purchase', true); document.querySelector('.foodland-banner__btn').classList.add('hide'); targetUrl = location.origin + '/' + targetUrl; const url = location.origin + '/authentication?redirect=' + encodeURIComponent(targetUrl.toString()); window.location.replace(url); } else { $('.jsTrack').attr('category', categoryToTrack); openPop('popup-purchase'); ///ADOBE ANALYTICS FOR FOODLAND if(window.location.pathname == '/foodland'){ contentServicesUtils.foodlandFunnelStart(); } } } if ($('.slick-slider').length > 0) { $('.article-teaser .slick-slider').slick({ dots: false, arrows: false, infinite: false, slidesToShow: 6, slidesToScroll: 3, responsive: [ { breakpoint: 768, settings: { slidesToShow: 3, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 2, slidesToScroll: 2 } } ] }); $('.slick-slider').on('init', function () { $(this).css('visibility', 'visible'); }); $('.slick-slider').not('.slick-initialized').slick({ }); } var debounce_timer, autoLoadHandlerEnabled = $('[rel=js-autoloaded-items]').data('infinite-src') ? true : false; window.addEventListener('scroll', function(e) { if(autoLoadHandlerEnabled && (($(window).scrollTop() + $(window).height()) > ($(document).height() - 900))) { if ($('.item__loader').length == 0) { var initialLast = $('.article-list-item.video:first-of-type').closest('.grid'); initialLast.after(`
`); } if (debounce_timer) { window.clearTimeout(debounce_timer); } debounce_timer = window.setTimeout(function () { // run your actual function here autoLoadHandler(); $('.item__loader').remove(); }, 100); } }); var autoLoadHandler = function(){ var $parentContainer = $('[rel=js-autoloaded-items]'); var dataSrc = $parentContainer.data('infinite-src'); var parentCol = $parentContainer.find('.grid'); // increment offset of that url var oldOffset = getUrlParameter(dataSrc, 'offset') || 0, limit = getUrlParameter(dataSrc, 'limit') || 10; var newOffset = parseInt(limit)+parseInt(oldOffset); dataSrc = updateQueryStringParameter(dataSrc, 'offset', newOffset); // hit on that url // start loading $.get({ url: dataSrc, dataType: 'html' }).done(function (htmlContent) { var parsedDoc = (new DOMParser()).parseFromString(htmlContent, "text/html"), jQueryParsedDoc = $(parsedDoc); listOfNewItems = jQueryParsedDoc.find('.article-list-item'); if(listOfNewItems.length) { // if there's result + result.length > 0 //// append to $(this) + change offset in the attribute newOffset++; for (let i = 0; i < listOfNewItems.length; i++) { $(listOfNewItems[i]).find('.number').text(newOffset+i); parentCol.append(listOfNewItems[i]); } $parentContainer.data('infinite-src', dataSrc); // truncateHeadlines(); // $('.article-list-item.video').click(highlightActiveItem); } else { // else //// delete event handler of scroll autoLoadHandlerEnabled = false; } }).fail(function (params) { // else, delete event handler of scroll autoLoadHandlerEnabled = false; }); } function getUrlParameter(uri, name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); var results = regex.exec(uri); return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); }; function updateQueryStringParameter(uri, key, value) { var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i"); var separator = uri.indexOf('?') !== -1 ? "&" : "?"; if (uri.match(re)) { return uri.replace(re, '$1' + key + "=" + value + '$2'); } else { return uri + separator + key + "=" + value; } } var getApplicationContext = function() { // var prefix = $('html').data('route-prefix'); var application = $('html').data('application'); var context = '/' + application; context = context.slice(1); return context; } // var showResultPopup = function(resultMsg, success, reload,callback) { // if(success == undefined) { // success = false; // } // if(reload == undefined) { // reload = false; // } // if($("#result-modal").length > 0){ // $("#result-modal").remove(); // } // var resultModal = document.createElement('div'); // setAttributes(resultModal, {'class':'modal', 'id':'result-modal', 'tabindex':'-1', 'role':'dialog', 'aria-labelledby':'resultModal', 'aria-hidden': 'true'}); // var resultModalDialog = document.createElement('div'); // setAttributes(resultModalDialog, {'class':'modal-dialog modal-dialog-centered', 'role':'document'}); // var resultModalContent = document.createElement('div'); // setAttributes(resultModalContent, {'class':'modal-content', 'style':'margin: auto; padding: 10px;'}); // var resultModalBody = document.createElement('div'); // setAttributes(resultModalBody, {'class':'modal-body'}); // resultModalBody.innerText = resultMsg; // resultModalContent.appendChild(resultModalBody); // var resultModalButtonContainer = document.createElement('div'); // setAttributes(resultModalButtonContainer, {'class':'p-2'}); // var resultModalButton = document.createElement('button'); // setAttributes(resultModalButton, {'type':'button', 'class':'btn btn-purple btn-block btn-solid', 'data-dismiss':'modal', 'onclick': 'closePop("#result-modal")'}); // var resultModalButtonText = document.createTextNode('Ok'); // resultModalButton.appendChild(resultModalButtonText); // resultModalButtonContainer.appendChild(resultModalButton); // resultModalContent.appendChild(resultModalButtonContainer); // resultModalDialog.appendChild(resultModalContent); // resultModal.appendChild(resultModalDialog); // document.querySelector('.modal').classList.remove('show'); // if (! $('body #result-modal').length > 0) { // $('body').append(resultModal); // } // document.querySelector('#result-modal').classList.add('show'); // $('#result-modal button').click(function(){ // if(callback){ // callback(); // } // if (success || reload) { // location.reload(); // } // }) // }; // var setAttributes = function (el, attrs) { // for(var key in attrs) { // el.setAttribute(key, attrs[key]); // } // } function updatePercentVideoWatched(){ const gtmTracker = document.getElementById('gtm-event-track'); const category = gtmTracker.getAttribute('category'); const actionTracked = gtmTracker.getAttribute('action'); const videoTitle = gtmTracker.getAttribute('titletotrack'); const playPosition = gtmTracker.getAttribute('valuetotrack'); if(category == 'Video Foodland Tracking'){ let prefix; if(actionTracked.startsWith('Preview')){ prefix = 'Preview '; } else { prefix = 'Full '; } const actionText = prefix + 'video watched ' + playPosition + '% of duration'; $('#gtm-event-track').attr('category', 'Foodland'); $('#gtm-event-track').attr('action', actionText); $('#gtm-event-track').attr('valuetotrack', playPosition); $('#gtm-event-track').attr('titletotrack', videoTitle); $('#gtm-event-track').click(); } } function closeStremingPop(event){ event.preventDefault(); event.stopPropagation(); let streamingVideopop = event.target.parentElement.parentElement; let videoPlayerControl = streamingVideopop.querySelector('.video-player-container .vjs-play-control') if(videoPlayerControl.classList.contains('vjs-playing')){ videoPlayerControl.click(); } updatePercentVideoWatched(); closePop('popup-streaming-video'); //Foodland Adobe Analytics if(window.location.pathname == '/foodland'){ const gtmTracker = document.getElementById('gtm-event-track'); const videoTitle = gtmTracker.getAttribute('titletotrack'); contentServicesUtils.foodlandVideoAction('finish', videoTitle); } } // Should remove the ads slots whenever the the marketing cookie is turned off function handleAdsDisplay() { if (GujAd.Privacy && GujAd.Privacy.Choices.Marketing !== true) { document.querySelectorAll('.gujAd.rectangle').forEach(el => { if(el.parentNode.classList.contains('grid')) return; el.parentNode.classList.add('d-none'); if (el.parentNode.parentNode.classList.contains('swiper-slide')) { el.parentNode.parentNode.classList.add('d-none'); } }); } } window.addEventListener('DOMContentLoaded', () => { var checkPrivacyManagerLoad = setInterval(function(){ if(window._sp_ && window._sp_.privacyManager){ document.querySelector('button[class^=sp_choice').addEventListener('click', handleAdsDisplay); document.querySelector('#tab-saveandexit').addEventListener('click', handleAdsDisplay); clearInterval(checkPrivacyManagerLoad); } }, 1000); }); window.addEventListener('load', () => { handleAdsDisplay(); }); window.addEventListener('DOMContentLoaded', () => { // Desktop portal navigation //Showing / Hiding Main Menu let nav = document.querySelector('.navigation.menu-raised'); let menuContainer = document.querySelector('.menu-main'); let menuItems; if (menuContainer) { menuItems = menuContainer.querySelectorAll('.nav-item'); menuItems.forEach(menuItem => menuItem.addEventListener('mouseleave', () => { menuItem.classList.remove('active'); })); } if (nav) { loadMenuStructure(); nav.addEventListener('mouseenter', () => { nav.querySelector('.nav-toggle').classList.add('active'); nav.querySelector('.nav-toggle').removeAttribute('hidden'); // Add this line to change the border color to '#ccc' when nav-toggle is active document.querySelector('.navigation').style.borderColor = '#ccc'; }); nav.addEventListener('mouseleave', () => { nav.querySelector('.nav-toggle').classList.remove('active'); nav.querySelector('.nav-toggle').setAttribute('hidden', 'true'); document.querySelector('.navigation').style.borderColor = 'var(--omega-dark)'; document.querySelector('.navigation').style.backgroundColor = 'var(--omega-dark)'; resetMenu(); }); } if (typeof (menuItems) != 'undefined' && menuItems != null) { menuItems.forEach(menuItem => { if (getDeviceType() == 'desktop') { menuItem.addEventListener('mouseenter', (e) => { toggleMenu(menuItem, menuContainer, e); }); } else { menuItem.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); toggleMenu(menuItem, menuContainer, e); }); } }); } // ajax links in inner menu or portal navigation let ajaxItems = document.querySelectorAll('.ajax-item'); if (typeof (ajaxItems) != 'undefined' && ajaxItems != null) { ajaxItems.forEach(ajaxItem => { if (ajaxItem.closest('.menu-sub')) { if (getDeviceType() == 'desktop') { ajaxItem.addEventListener('mouseover', () => { if (document.querySelectorAll('.grid.ajax.feed').length > 7) { updateFeed(ajaxItem); } }); } else { ajaxItem.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); if (document.querySelectorAll('.grid.ajax.feed').length > 7) { updateFeed(ajaxItem); } }); } } }); } function loadMenuStructure() { let url = `/${applicationContext}/portal_layout_header-menu_fragment`; getData(url).then((response) => { let res = stringToHTML(response); for (let i = 0; i < res.length; i++) { let feedContainer = document.querySelector(`#sub-${res[i].getAttribute('data-parent-id')}`); let fragment = document.createDocumentFragment(); // ← uses a DocumentFragment instead of a
let ajaxContainer = document.createElement('div'); ajaxContainer.className = 'grid one-row one-col two-md-col three-lg-col four-xl-col ajax feed'; ajaxContainer.setAttribute('id', `feed-${res[i].getAttribute('data-id')}`); ajaxContainer.innerHTML = res[i].innerHTML; fragment.appendChild(ajaxContainer); feedContainer.insertBefore(fragment, feedContainer.querySelector('.row')); } }).catch(function (error) { console.log(`error getting subcategory articles ${error}`); }); } // Update navigation content function updateFeed(ajaxItem) { let menuContainer = ajaxItem.closest('.menu-toggle'); if (menuContainer) { let title = menuContainer.id.replace('cat-', ''); let feedContainer = menuContainer.querySelector(`#sub-${title}`); let id = ajaxItem.getAttribute('data-id'); let activeFeed = document.getElementById(`feed-${id}`); setActive(activeFeed, feedContainer, '.feed') setActive(ajaxItem, menuContainer, 'li'); if (getDeviceType() != 'desktop') { let moreBtn = menuContainer.querySelector('.btn'); if (moreBtn) { if (moreBtn) { let path = id.split('-'); for (let i = 0; i < path.length; i++) { if ((path[i] == 'ratgeber' && path[i + 1] != '') || (path[i] == 'fussball' && path[i + 1] != '') || (path[i] == 'news' && path[i + 1] && path[i + 1] != '' && i != 2)) { path[i] = path[i + 1]; } path[i] = path[i].replace('_', ''); } moreBtn.href = `/${applicationContext}/${path[2]}/${path[3]}`; moreBtn.textContent = `Startseite ${ajaxItem.textContent.trim()}`; } } } } } // Open menu of hover/click function toggleMenu(menuItem, menuContainer, e) { let title = slugify(menuItem.querySelector('.nav-link').innerText.toLowerCase()); let redirectionLink = menuItem.getAttribute('href'); let activeItem = document.querySelector(`#cat-${title}`); setActive(menuItem, menuContainer, 'li'); if (activeItem) { setActive(activeItem, menuContainer.parentNode, '.menu-toggle'); document.querySelector('.nav-toggle').classList.add('active'); document.querySelector('.nav-toggle').classList.remove('hidden'); document.querySelector('.navigation').style.borderColor = '#ccc'; document.querySelector('.navigation').style.backgroundColor = 'var(--dark-omega)'; if (getDeviceType() != 'desktop') { let moreBtn = activeItem.querySelector('.btn'); if (moreBtn) { let path = menuItem.getAttribute('data-id').split('-'); for (let i = 0; i < path.length; i++) { path[i] = path[i].replace('_', ''); } moreBtn.href = `/${applicationContext}/${path[2]}`; moreBtn.textContent = `Startseite ${title.trim().toLowerCase().replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())))}`; } } } else if (e.type == 'click' && redirectionLink && redirectionLink != '') { window.location = redirectionLink; } else { document.querySelector('.navigation').style.borderColor = 'var(--omega-dark)'; document.querySelector('.navigation').style.backgroundColor = 'var(--omega-dark)'; document.querySelector('.nav-toggle').classList.remove('active'); setTimeout(() => { document.querySelector('.nav-toggle').classList.add('hidden'); resetMenu(); }, 10); // delay resetMenu() by 10 milliseconds } } // Reset Navigation menu function resetMenu() { let subMenus = document.querySelectorAll('.menu-toggle'); subMenus.forEach(subMenu => { let subNavItem = subMenu.querySelector('.menu-sub').querySelectorAll('.nav-item')[0]; setActive(subNavItem, subMenu.querySelector('.menu-sub'), 'li') updateFeed(subNavItem); }); document.querySelector('.nav-toggle').classList.add('hidden'); } function setActive(selectedItem, container, selectedClass) { let items = container.querySelectorAll(selectedClass); for (let i = 0; i < items.length; i++) { items[i].classList.remove('active'); } if (selectedItem) { selectedItem.classList.add('active'); } } }); // popups window.addEventListener('DOMContentLoaded', async (event) => { let modals = document.querySelectorAll('.modal'); if (modals.length > 0) { let closeBtns = document.querySelectorAll('.modal .btn-close-popup'); for (let closeBtn of closeBtns) { closeBtn.addEventListener('click', () => { dialogClose(closeBtn); }); } // add event listener for pressing escape document.addEventListener('keyup', (e) => { if (e.key == 'Escape') { //Closing Video Streaming of Foodland on Pressing Esc while popup is displayed if(document.querySelector('#popup-streaming-video.modal.show')){ let streamingModal = document.querySelector('#popup-streaming-video.modal.show'); let videoPlayerControl = streamingModal.querySelector('.video-player-container .vjs-play-control'); if(videoPlayerControl.classList.contains('vjs-playing')){ videoPlayerControl.click(); } updatePercentVideoWatched(); closePop('popup-streaming-video'); //Foodland Adobe Analytics if(window.location.pathname == '/foodland'){ const gtmTracker = document.getElementById('gtm-event-track'); const videoTitle = gtmTracker.getAttribute('titletotrack'); contentServicesUtils.foodlandVideoAction('finish', videoTitle); } }else { closePop(document.querySelector('.modal.show').getAttribute('id')); } } }); } // idle popup let idlePopup = document.querySelector('#popup-idle'); let noShowStartTime, noShowEndTime, beforeShowTime, pauseTimeStart, pauseTimeEnd, currentTime; let timeout; if (idlePopup) { let showPopup = true; // get configs from anthrax noShowStartTime = idlePopup.getAttribute('data-pause-time-start').trim().split(':'); noShowEndTime = idlePopup.getAttribute('data-pause-time-end').trim().split(':'); beforeShowTime = parseInt(idlePopup.getAttribute('data-wait-before-show-time')) * 60 * 1000; pauseTimeStart = moment().set("hour", noShowStartTime[0]).set("minute", noShowStartTime[1]).set("second", 0); pauseTimeEnd = moment().set("hour", noShowEndTime[0]).set("minute", noShowEndTime[1]).set("second", 0); if (noShowEndTime[0] < noShowStartTime[0]) { pauseTimeEnd = pauseTimeEnd.add(1, 'day') } currentTime = moment(); // check if never-show found in profile if (isLoggedIn) { const data = await userProfile.getUserProfile(); if (data && data.additionalInfo) { let neverShowPopup = userProfile.loadAdditionalInfoByKey('popup-idle-never-show'); if ((typeof neverShowPopup != 'undefined') && (neverShowPopup == 'true')) { localStorage.setItem('popup-idle-never-show', 'true'); showPopup = false; } } let neverShowPopupCookie = localStorage.getItem('popup-idle-never-show'); if ((typeof neverShowPopupCookie != 'undefined') && (neverShowPopupCookie == 'true')) { showPopup = false; } if (showPopup) { // add event listeners for actions to reset timer resetIdlePopupEvents(); // add event listener for never-show checkbox document.getElementById('idlePopupCheckBox').addEventListener('change', (e) => { if (e.target.checked == true) { localStorage.setItem('popup-idle-never-show', 'true'); if (isLoggedIn && userProfile) { userProfile.saveAdditionalInfoParam('popup-idle-never-show', "true", true) } resetIdlePopupEvents(false); } else { localStorage.setItem('popup-idle-never-show', 'false'); if (isLoggedIn && userProfile) { userProfile.saveAdditionalInfoParam('popup-idle-never-show', "false", true) } } }); } } else { // check if never-show found in local storage let neverShowPopupCookie = localStorage.getItem('popup-idle-never-show'); if ((typeof neverShowPopupCookie != 'undefined') && (neverShowPopupCookie == 'true')) { showPopup = false; } if (showPopup) { // add event listeners for actions to reset timer resetIdlePopupEvents(); // add event listener for never-show checkbox document.getElementById('idlePopupCheckBox').addEventListener('change', (e) => { if (e.target.checked == true) { localStorage.setItem('popup-idle-never-show', 'true'); if (isLoggedIn && userProfile) { userProfile.saveAdditionalInfoParam('popup-idle-never-show', "true", true) } resetIdlePopupEvents(false); } else { localStorage.setItem('popup-idle-never-show', 'false'); if (isLoggedIn && userProfile) { userProfile.saveAdditionalInfoParam('popup-idle-never-show', "false", true) } } }); } } } function getTimeLeft() { // check if currentTime not within pause range // if within return pause end + time to wait from anthrax if (moment().isBetween(pauseTimeStart, pauseTimeEnd)) { let duration = moment.duration(pauseTimeEnd.diff(moment())); return duration.add(beforeShowTime, 'milliseconds'); } else { return beforeShowTime; } } function resetIdleTimer() { // clear timeout and initiate a new one clearTimeout(timeout); timeout = setTimeout(function () { if (localStorage.getItem("popup-idle-never-show") != 'true' && getDeviceType() == 'desktop') { openPop('popup-idle'); } }, getTimeLeft()); } function resetIdlePopupEvents(resetOption = true) { if (resetOption) { // all events that will reset popup timer // if never-show false add event listeners window.addEventListener('load', resetIdleTimer, false); document.addEventListener('mousemove', resetIdleTimer, false); document.addEventListener('keypress', resetIdleTimer, false); document.addEventListener('mousedown', resetIdleTimer, false); document.addEventListener('touchstart', resetIdleTimer, false); document.addEventListener('click', resetIdleTimer, false); document.addEventListener('scroll', resetIdleTimer, false); window.addEventListener('orientationchange', resetIdleTimer, false); } else { // if never-show true remove event listeners window.removeEventListener('load', resetIdleTimer, false); document.removeEventListener('mousemove', resetIdleTimer, false); document.removeEventListener('keypress', resetIdleTimer, false); document.removeEventListener('mousedown', resetIdleTimer, false); document.removeEventListener('touchstart', resetIdleTimer, false); document.removeEventListener('click', resetIdleTimer, false); document.removeEventListener('scroll', resetIdleTimer, false); window.removeEventListener('orientationchange', resetIdleTimer, false); } } }); // open popup (+ hide other popups) function openPop(popUpId, hideOtherPops = true) { if (hideOtherPops) { document.querySelectorAll('.modal').forEach(elem => { elem.classList.remove('show') }); } document.querySelector(`.modal#${popUpId}`).classList.add('show'); document.body.classList.add('overflow-hidden'); } // open popup (+ hide other popups) function openAlertPopup(popUpId, message, hideOtherPops = true) { if (hideOtherPops) { document.querySelector('.modal').classList.remove('show'); } if(document.querySelector(`.modal#${popUpId}`)){ document.querySelector(`.modal#${popUpId} .${popUpId}__subtitle`).textContent = message; document.querySelector(`.modal#${popUpId}`).classList.add('show'); } document.body.classList.add('overflow-hidden'); } // close popup function closePop(popUpId) { document.querySelector(`.modal#${popUpId}`).classList.remove('show'); document.body.classList.remove('overflow-hidden'); } /* function closeDownloadUrlPopUp(popUpId, url) { closePop(popUpId); window.location.assign(url); } */ // close popup and reload page function closeAndReload(popUpId) { closePop(popUpId); location.reload(); } // close popup by clicking btns inside popup function dialogClose(btn) { closePop(`${btn.closest('.modal').getAttribute('id')}`); } function showResultPopup(resultMsg, success, reload,callback) { if(success == undefined) { success = false; } if(reload == undefined) { reload = false; } if($("#result-modal").length > 0){ $("#result-modal").remove(); } var resultModal = document.createElement('div'); setAttributes(resultModal, {'class':'modal', 'id':'result-modal', 'tabindex':'-1', 'role':'dialog', 'aria-labelledby':'resultModal', 'aria-hidden': 'true'}); var resultModalDialog = document.createElement('div'); setAttributes(resultModalDialog, {'class':'modal-dialog modal-dialog-centered', 'role':'document'}); var resultModalContent = document.createElement('div'); setAttributes(resultModalContent, {'class':'modal-content', 'style':'margin: auto; padding: 10px;'}); var resultModalBody = document.createElement('div'); setAttributes(resultModalBody, {'class':'modal-body black-text'}); resultModalBody.innerText = resultMsg; resultModalContent.appendChild(resultModalBody); var resultModalButtonContainer = document.createElement('div'); setAttributes(resultModalButtonContainer, {'class':'p-2'}); var resultModalButton = document.createElement('button'); setAttributes(resultModalButton, {'type':'button', 'class':'btn btn--purple btn-block btn-solid', 'data-dismiss':'modal', 'onclick': 'closePop("result-modal")'}); var resultModalButtonText = document.createTextNode('Ok'); resultModalButton.appendChild(resultModalButtonText); resultModalButtonContainer.appendChild(resultModalButton); resultModalContent.appendChild(resultModalButtonContainer); resultModalDialog.appendChild(resultModalContent); resultModal.appendChild(resultModalDialog); // document.querySelector('.modal').classList.remove('show'); if (! $('body #result-modal').length > 0) { $('body').append(resultModal); } document.querySelector('#result-modal').classList.add('show'); $('#result-modal button').click(function(){ if(callback){ callback(); } if (success || reload) { location.reload(); } }) }; // Handling Progress-bar on horizontal scrolling let responsiveTable = document.querySelector('.table-responsive'); if (responsiveTable) { responsiveTable.addEventListener("scroll", () => { let container = document.querySelector(".table-responsive"); let winScroll = container.scrollLeft; let width = container.scrollWidth - container.clientWidth; let scrolled = (winScroll / width) * 100; document.getElementById("progress-bar").style.width = `calc(50% + ${scrolled}%)`; }) } window.addEventListener("DOMContentLoaded", function(){ let searchBtn = document.querySelector('.search-btn'); let searchQuery = document.getElementById("search-query"); if (searchQuery) { searchQuery.addEventListener('keyup', (e) => { if (e.key == 'Enter') { doSearch(); } }) } document.querySelectorAll('.search-input').forEach(item => { item.addEventListener('keyup', (e) => { if (e.key == 'Enter') { doSearch(); } }) }) if (getDeviceType() == 'mobile') { let body = document.querySelector("body"); let searchBox = document.querySelector('.search-box'); let closeIcon = document.querySelector(".search-box .icon-close"); let searchBoxQuery = document.getElementById("search-box-query"); //toggle d-none class on click icon-search searchBtn.onclick = function (e) { searchBox.classList.toggle('d-none'); searchBoxQuery.focus() removeCloseIcon(); e.preventDefault(); e.stopPropagation(); } //close search-box when click anywhere in the body body.addEventListener("click", function () { searchBox.classList.add('d-none'); removeCloseIcon(); }, false); // //prevent closing search box click on it searchBox.addEventListener("click",function(e){ e.preventDefault(); e.stopPropagation(); }) //remove input value while clicking on close icon closeIcon.addEventListener("click",function(){ searchBoxQuery.value = ''; }) function removeCloseIcon(){ closeIcon.classList.add('d-none'); searchBoxQuery.value = ''; } } else { searchBtn.onclick = () => doSearch(); } }); function doSearch() { let searchActionQuery = document.getElementById("search-action-query"); let searchBoxQuery = document.getElementById("search-box-query"); let searchQuery = document.getElementById("search-query"); //desktop search bar if(searchQuery && searchQuery.value){ window.location = window.location.origin + '/search?rows=10&o=0&omitCache=true&q='+searchQuery.value+'&offset=0'; } //mobile search box else if(searchBoxQuery && searchBoxQuery.value){ window.location = window.location.origin + '/search?rows=10&o=0&omitCache=true&q='+searchBoxQuery.value+'&offset=0'; } // news page search input else if(searchActionQuery && searchActionQuery.value){ window.location = window.location.origin + '/search?rows=10&o=0&omitCache=true&q='+searchActionQuery.value+'&offset=0'; } } function showCloseIcon(){ let closeIcon = document.querySelector(".search-box .icon-close"); closeIcon.classList.remove('d-none'); } if (document.querySelector('.article')) { //social share buttons init $('#articleSocials').jsSocials({ showLabel: false, showCount: false, shareIn: 'blank', shares: ['facebook', 'twitter', 'email'] }); document.querySelectorAll('#articleSocials .jssocials-share a').forEach( function (e) { e.setAttribute('rel', 'noopener noreferrer'); } ); } $(window).scroll(function(){ // sticky button in element page if($('#stickyButton').position()){ //stick nav to top of page var scrollValue = $(this).scrollTop(); var stickyButton = ($('#stickyButton').offset().top - 47); if (scrollValue > stickyButton) { $('#stickyButton').addClass('bg-white'); } else { $('#stickyButton').removeClass('bg-white'); } } }); var subscriptionFlow = { updateQueryString: function (key, value, url) { if (!url) url = window.location.href; var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"), hash; if (re.test(url)) { if (typeof value !== 'undefined' && value !== null) return url.replace(re, '$1' + key + "=" + value + '$2$3'); else { hash = url.split('#'); url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, ''); if (typeof hash[1] !== 'undefined' && hash[1] !== null) url += '#' + hash[1]; return url; } } else { if (typeof value !== 'undefined' && value !== null) { var separator = url.indexOf('?') !== -1 ? '&' : '?'; hash = url.split('#'); url = hash[0] + separator + key + '=' + value; if (typeof hash[1] !== 'undefined' && hash[1] !== null) url += '#' + hash[1]; return url; } else return url; } }, subscribe: function (e, serviceType) { //addLoader var element = e.currentTarget; openPop('mm-com-loading-pop'); var typeId = $(element).attr("data-subscription-type-id"); var assetName = $(element).attr("data-paymentflow-id"); var context = $('html').data("application"); var target = window.location.href; target = this.updateQueryString('status', undefined, target); target = this.updateQueryString('trigger', undefined, target); if (target.indexOf("?") !== -1) { target += "&trigger=" + typeId; } else { target += "?trigger=" + typeId; } if(!isvliveLoggedIn) { this.isNotLoggedInHandler(serviceType); return; } var url = '/' + context + '/api/payment/subTypeId/' + typeId; var that = this; $.ajax({ dataType: "json", type: 'POST', url: url, data: { target: target, assetName: assetName }, headers: { 'x-csrfsynctoken': '' + getCookieCSRFString('csrfsynctoken') + '' }, success: function (result, status) { closePop('mm-com-loading-pop'); that.foodlandSuccessHandler(result); }, error: function (result, status) { closePop('mm-com-loading-pop'); that.foodlandErrorHandler(result); } }); }, clearPopup: function () { window.localStorage.removeItem('purchase'); }, isNotLoggedInHandler: function (subscriptionType) { const targetUrl = window.location.origin + '/foodland'; const url = window.location.origin + '/authentication?redirect=' + encodeURIComponent(targetUrl.toString()); window.location.replace(url); }, foodlandSuccessHandler: function (result) { let purchaseConfirmationUrl = '/foodland/confirmation'; if (result && result.redirectUrl) { window.location.replace(result.redirectUrl); } else if (result && result.response && result.response.paymentStatus === 'CAPTURED') { window.location.replace(purchaseConfirmationUrl); } else if (result.response && result.response.consumerDescription) { openAlertPopup("alert-error-popup", result.response.consumerDescription); document.querySelector("#alert-error-popup").click(); } else { openPop("alert-error-popup"); document.querySelector("#alert-error-popup").click(); } }, foodlandErrorHandler: function (result) { openPop('alert-error-popup'); //ADOBE ANALYTICS FOR FOODLAND if(window.location.pathname == '/foodland'){ contentServicesUtils.foodlandFunnelFailure(); } } }; window.addEventListener("DOMContentLoaded", function(){ let listItems = document.querySelectorAll('.list .list-sm-row'); let toggleBtn = document.querySelector('.list-toggle-btn'); let toggleBtnText = document.querySelector('.list-toggle-btn span'); let toggleBtnIcon = document.querySelector('.list-toggle-btn [class^="icon"]'); for (let i = 4; i < listItems.length; i++) { listItems[i].classList.remove('d-flex'); listItems[i].classList.add('d-none'); } if (toggleBtn) { toggleBtn.addEventListener('click', () => { for (let i = 4; i < listItems.length; i++) { listItems[i].classList.toggle('d-flex'); listItems[i].classList.toggle('d-none'); } toggleBtnText.innerText = (toggleBtn.innerText === 'Alle Meldungen') ? 'Weniger Meldungen' : 'Alle Meldungen'; if (toggleBtnIcon.className === 'icon-arrow-down') { toggleBtnIcon.classList.add('icon-arrow-up'); toggleBtnIcon.classList.remove('icon-arrow-down'); } else if (toggleBtnIcon.className === 'icon-arrow-up') { toggleBtnIcon.classList.add('icon-arrow-down'); toggleBtnIcon.classList.remove('icon-arrow-up'); } }); } }); // TODO: File to be changed to pure JS in future sprint var userProfile=(function() { var currentProfile = null; function _dispatchEvent(eventTitle) { var event = document.createEvent('Event'); event.initEvent(eventTitle, true, true); window.dispatchEvent(event); } async function _loadUserProfile() { const response = await fetch ('/userProfile'); try { const data = await response.json(); _setUserProfile(data, false); return data; } catch (err) { console.error(`error loading profile ${err}`) } /* $.ajax({ url: "/userProfile", type: "GET", contentType: "application/json; charset=utf-8", traditional: true, success: function (data) { _setUserProfile(data, false); }, error: function (err) { console.log('error getting user ' + err); } // TODO display errors to user }); */ } async function _getUserProfile() { if (currentProfile) { return currentProfile; } else { return await _loadUserProfile(); } } function _setUserProfile(data, mute) { data.fullname = null; data.email = null; var firstNamePresent = false; var lastNamePresent = false; if ((data.firstName != "") && (typeof data.firstName != 'undefined')) { firstNamePresent = true; } if ((data.lastName != "") && (typeof data.lastName != 'undefined')) { lastNamePresent = true; } if (firstNamePresent && lastNamePresent) { data.fullname = data.firstName + ' ' + data.lastName; } else if (!firstNamePresent && lastNamePresent) { var anrede = "Frau / Herr"; if ((data.gender != "") && (typeof data.gender != 'undefined')) { if (data.gender == "Female") { anrede = "Frau"; } else { anrede = "Herr"; } } data.fullname = anrede + ' ' + data.lastName; } else if (firstNamePresent && !lastNamePresent) { data.fullname = data.firstName; } if (data.additionalInfo) { var email = $.grep(data.additionalInfo, function(e){ return e.key == "email"; })[0]; if ((typeof email != 'undefined') && (email.value.indexOf('@arcor.de') > -1)) { // check for email @arcor.de is temporary - must be removed as soon as VF fixes ARCOR-1597 data.email = email.value; } else { // entire fallback for username @arcor.de is temporary - must be removed as soon as VF fixes ARCOR-1597 var userName = $.grep(data.additionalInfo, function(e){ return e.key == "userName"; })[0]; if ((typeof userName != 'undefined') && (userName.value.indexOf('@arcor.de') > -1)) { data.email = userName.value; } } } currentProfile = data; if (!mute) { _dispatchEvent("userProfileUpdated"); } } function _updateUserProfileData(profileData, mute, callback) { $.ajax({ url: "/userProfile", type: "PUT", data:JSON.stringify(profileData), dataType: "json", contentType: "application/json; charset=utf-8", traditional: true, success: function (data) { _setUserProfile(data, mute); if (callback){ callback(data,"SUCCESS") } }, error: function (data) { _setUserProfile(data, mute); if (callback){ callback(data,"ERROR") } } }); } function _submitUserProfile(){ $('.save').html("Speichern..."); var profileData= formUtils.getFormDataJson($("#userProfileForm")); if ($("#userProfileForm").data("changed")) { _updateUserProfileHandler(profileData, false, function(){ $('.save').css('background-color', '#428600').html("Gespeichert").addClass('disabled'); window.setTimeout(function() { $('.save').css('background-color', '').html("Speichern").addClass('disabled'); }, 5000); }); } } function _loadAdditionalInfoByKey(key){ var addtionalInfo= currentProfile.additionalInfo; var output = formUtils.parseArrayToJson(addtionalInfo,"key","value"); return output[key]; } function _updateUserProfileHandler(profileData, mute, callback) { // TODO integrate into _updateUserProfileData _updateUserProfileData(profileData, mute, function(data,status){ if (status==="SUCCESS") { } if (callback) { callback(); } }); } function _addtionalInfoParserToKeyValueArr(jsonObj) { let arr = Object.keys(jsonObj).map(e => { let object1 = {}; object1.key = e; object1.value = jsonObj[e]; return object1; }); return arr; } function _saveAddtionalInfo(jsonObj, mute, callback){ var addtionalInfoArray=_addtionalInfoParserToKeyValueArr(jsonObj); var jsonAddtionalInfo={}; jsonAddtionalInfo.additionalInfo=addtionalInfoArray; _updateUserProfileHandler(jsonAddtionalInfo, mute, callback); // TODO display errors to user: handle in callback } function _saveAdditionalInfoParam(paramName, paramVal, mute) { let jsonObj = {}; jsonObj[paramName] = paramVal; let addtionalInfoArray = _addtionalInfoParserToKeyValueArr(jsonObj); let jsonAddtionalInfo = {}; jsonAddtionalInfo.additionalInfo = addtionalInfoArray; _updateUserProfileHandler(jsonAddtionalInfo, mute, function () { }); // TODO display errors to user: add handler } function _removeNotificationBox(notificationBoxId){ var jsonAddtionalInfo = {}; var newKey = 'removedNotificationBox_' + notificationBoxId + ''; jsonAddtionalInfo[newKey] = true; _saveAddtionalInfo(jsonAddtionalInfo, true, function(){ document.getElementById(notificationBoxId).remove(); // TODO display errors to user: add handler }); } return { updateUserProfileData: _updateUserProfileData, submitUserProfile:_submitUserProfile, saveAdditionalInfoParam:_saveAdditionalInfoParam, saveAddtionalInfo:_saveAddtionalInfo, loadAdditionalInfoByKey:_loadAdditionalInfoByKey, removeNotificationBox:_removeNotificationBox, loadUserProfile:_loadUserProfile, getUserProfile:_getUserProfile, dispatchEvent:_dispatchEvent } })(); var isDocumentReady = false; var langDir = 'ltr'; var videoStreamingProcess = { loginUser: function() { targetUrl = location.origin + '/' + 'foodland'; const url = location.origin + '/authentication?redirect=' + encodeURIComponent(targetUrl.toString()); window.location.replace(url); }, detecOrientation: function () { window.addEventListener("orientationchange", function () { var angle = null; if(typeof(screen.orientation) !== 'undefined') { angle = screen.orientation.angle; } else { angle = window.orientation; } if (angle === 90 || angle === -90 || angle === 270) { if ($('#section-sticky').hasClass("sticky")) { $('#section-sticky').removeClass("sticky"); } } if (angle === 0 || angle === 180) { if (!$('#section-sticky').hasClass("sticky")) { $('#section-sticky').addClass("sticky"); } } }); }, detectLangDir: function() { if (langDir === 'rtl') { var MouseTimeDisplay = videojs.getComponent('MouseTimeDisplay'); MouseTimeDisplay.prototype.update = function update(seekBarRect, seekBarPoint) { var seekBarPoint = 1 - seekBarPoint; var _this2 = this; // If there is an existing rAF ID, cancel it so we don't over-queue. if (this.rafId_) { this.cancelAnimationFrame(this.rafId_); } this.rafId_ = this.requestAnimationFrame(function () { var duration = _this2.player_.duration(); var content = videojs.formatTime(seekBarPoint * duration, duration); _this2.el_.style.left = seekBarRect.width * seekBarPoint + 'px'; _this2.getChild('timeTooltip').update(seekBarRect, seekBarPoint, content); }); }; var SeekBar = videojs.getComponent('SeekBar'); SeekBar.prototype.handleMouseMove = function handleMouseMove(event) { var newTime = this.player_.duration() - this.calculateDistance(event) * this.player_.duration(); // Don't let video end while scrubbing. if (newTime === this.player_.duration()) { newTime = newTime - 0.1; } // Set new time (tell player to seek to new time) this.player_.currentTime(newTime); }; var Player = videojs.getComponent('Player'); Player.prototype.volume = function volume(percentAsDecimal) { var vol = void 0; if (percentAsDecimal !== undefined) { // Force value to between 0 and 1 vol = Math.max(0, Math.min(1, parseFloat(percentAsDecimal))); vol = 1 - vol; this.cache_.volume = vol; this.techCall_('setVolume', vol); return this; } // Default to 1 when returning current volume. vol = parseFloat(this.techGet_('volume')); return isNaN(vol) ? 1 : vol; }; } }, callPreview: function (articleId,videoTitle) { $.ajax({ type: 'POST', url: '/api/streaming/preview/' + articleId, success: function (result) { var options = { articleId: articleId, shouldSavePlayHistory: true, applicationContext: getApplicationContext(), contentType: 'VIDEO_PREVIEW', redirectUrl: encodeURI(location.href) }; var videoPlayerState = {}; var callbacks = callbacks ? callbacks : {}; videoStreamingProcess.setupPlayerAndPlayVideo(result.url, result.ticket, options, videoPlayerState,videoTitle, callbacks); }, error: function (result) { if(result.responseJSON && result.responseJSON.errorMessage){ openAlertPopup("alert-error-popup", result.responseJSON.errorMessage); }else{ openAlertPopup('alert-error-popup', 'Es besteht ein Problem mit Ihrer Internetverbindung. Bitte laden Sie die Seite erneut.'); } } }); }, callStreamingVideo: function (articleId, articleContentType,videoTitle) { //flow of calling video var hasSub; if (!isvliveLoggedIn) { // $('.foodland-banner__btn').prop('disabled', false); videoStreamingProcess.callPreview(articleId,videoTitle); } else { $.ajax({ type: 'GET', url: '/' + getApplicationContext() + '/api/subscription', success: function (result) { if (result.statusCode >= 400) { openPop('alert-error-popup'); } if (result.errorMessage) { $('.jsTrack').attr('category', 'Foodland'); if(window.localStorage.getItem('purchase') != null && window.localStorage.getItem('purchase') === 'true'){ openPop('popup-purchase',true); window.localStorage.setItem('purchase', false); } // $('.video-purchase button').prop('disabled', false); videoStreamingProcess.callPreview(articleId,videoTitle); } else { hasSub = result.sub; var articleOptions = { isLoggedIn: isvliveLoggedIn, subscriptionId: hasSub.id, articleId: articleId, shouldSavePlayHistory: true, applicationContext: getApplicationContext(), contentType: articleContentType, redirectUrl: encodeURI(location.href) }; var videoPlayerState = {}; document.querySelector('.foodland-banner__btn').classList.add('hide'); $('.streaming-video__purchase-btn').removeClass('active'); videoStreamingProcess.startVideoPlugin(articleOptions, videoPlayerState,videoTitle); } }, error: function () { var callBackUrl = window.location.href; $('.jsTrack').attr('category', 'Foodland'); openPop('popup-purchase',true); document.querySelector('#popup-purchase').click(); $('.foodland-banner__btn').addClass('active'); $('.streaming-video__purchase-btn').addClass('active'); videoStreamingProcess.callPreview(articleId,videoTitle); } }); } }, startVideoPlugin: function (options, state,videoTitle, callbacks) { var videoPlayerState = state; var callbacks = callbacks ? callbacks : {}; options.contentType = options.contentType ? options.contentType : 'FULL_LENGTH_VIDEO'; $.ajax({ type: 'GET', url: '/api/streaming/fullvideo/' + options.articleId + '/subId/' + options.subscriptionId, success: function (result) { if(result.statusCode == 401){ videoStreamingProcess.loginUser(); } else if(result.statusCode >= 400){ openPop('alert-error-popup'); } else if (result.playUrl) { var playUrl = result.playUrl; var ticket = result.streamingTicket; var initPlayer = function (state) { switch (options.contentType) { case 'FULL_LENGTH_VIDEO': case 'VIDEO': videoStreamingProcess.updatePlayHistory(options); if (callbacks.onPlayerInit) { callbacks.onPlayerInit(state, options) } videoStreamingProcess.setupPlayerAndPlayVideo(playUrl, ticket, options, state,videoTitle, callbacks); break; default: openPop('alert-error-popup'); } } videoPlayerState.continuePlaying = initPlayer; videoStreamingProcess.playIfPlaybackIsAllowed(videoPlayerState, options, callbacks.prePlayCheck, initPlayer) } else if (result.url) { window.location.href = decodeURIComponent(result.url); } else { openPop('alert-error-popup'); } }, error: function (result) { // showResultPopup(result.responseJSON.errorMessage, false, true); if(result.responseJSON && result.responseJSON.errorMessage){ openAlertPopup('alert-error-popup', result.responseJSON.errorMessage); } else { openPop('alert-error-popup'); } } }); }, updatePlayHistory: function (options) { if (options.isLoggedIn && options.shouldSavePlayHistory || options.shouldSavePlayHistory === undefined) { $.ajax({ type: 'PUT', url: '/' + options.applicationContext + '/api/playhistory/' + options.articleId, data: { contentType: 'FULL_LENGTH_VIDEO', playPosition: options.playPosition || 0 }, success: function (result) { }, error: function (result) { } }); } }, playIfPlaybackIsAllowed: function (state, options, prePlayCheck, initPlayer) { if(initPlayer === undefined) { initPlayer = null; } if (prePlayCheck) { prePlayCheck(state, options); } else if (initPlayer) { initPlayer(state); } }, setupPlayerAndPlayVideo: function (streamingUrl, streamingTicket, options, videoPlayerState,videoTitle, callbacks) { videoStreamingProcess.detecOrientation(); // On mobile devices the autoplay only works when the video is muted. Ref.: https://googlechrome.github.io/samples/muted-autoplay/ //if lang from right to left videoStreamingProcess.detectLangDir(); //url properties if (!streamingUrl.includes('https')) { streamingUrl = streamingUrl.includes('http') ? streamingUrl.replace('http', 'https') : streamingUrl; } var isDesktop = $('#video-player').attr('data-device-is-desktop') === "true"; if (streamingUrl.indexOf('mondia.streaming.mediaservices.windows.net') !== -1) { streamingUrl = streamingUrl.replace(/^https?:/i, ''); } //video player properties var videoOptions = { muted: false, controlBar: { children: [ "playToggle", "progressControl", "currentTimeDisplay", "timeDivider", "durationDisplay", "muteToggle", "volumeControl", "fullscreenToggle" ] } }; var debounceUpdate = true, updateInterval = 5, // seconds debounceStreamUpdate = true, streamUpdateInterval = 20; // seconds var chunkStartTimeStamp, usageDuration = 0, maxUsageDuration = 0; //initialize video player instance videojs('video-player', videoOptions, function onPlayerReady() { var player = this; var ticket = streamingTicket; player.landscapeFullscreen(); Object.assign(videoPlayerState, { debounceUpdate: true, updateInterval: 5, debounceStreamUpdate: true, streamUpdateInteval: 20, chunkStartTimeStamp: null, usageDuration: 0, maxUsageDuration: 0, player: player, ticket: ticket }); var onPlayerStart = callbacks.onPlayerStart, onPlayerPause = callbacks.onPlayerPause, onPlayerStop = callbacks.onPlayerStop; player.setAttribute('data-articleId', options.articleId); player.src({ src: streamingUrl, type: 'application/x-mpegURL' }); //stop loading if ($('.loading-state').hasClass('active')) { $('.loading-state').removeClass('active'); } if (options.playPosition) { player.setAttribute('data-playPosition', options.playPosition); player.one('playing', function () { options.playPosition = player.getAttribute('data-playPosition'); if (options.playPosition) { var time = player.duration() * options.playPosition / 100; player.currentTime(time); } }); } var startWatch = function () { chunkStartTimeStamp = new Date().getTime(); // $('#gtm-event-track').attr('category', 'Foodland'); // $('#gtm-event-track').attr('action', 'click on any video'); // $('#gtm-event-track').attr('titletotrack', 'Videos shown'); // $('#gtm-event-track').click(); } // var stopWatchAndReport = function (opts) { // var restart = opts ? opts.restart : false; // var chunkEndTimeStamp = new Date().getTime(); // var chunkLength = chunkEndTimeStamp - chunkStartTimeStamp; // in ms // var complete = player.ended(); // usageDuration += chunkLength; // if (maxUsageDuration < chunkLength) { // maxUsageDuration = chunkLength; // } // if (options.shouldSavePlayHistory === false) return; // $.ajax({ // type: 'POST', // url: '/' + options.applicationContext + '/api/play/report/' + ticket, // data: { // usageDuration: Math.floor(usageDuration / 1000), // maxUsageDuration: Math.floor(maxUsageDuration / 1000), // partial: !complete, // realm: 'web' // }, // success: function (result) { }, // error: function (result) { } // }); // if (restart) { // startWatch(); // } // } var continuePlaying = function () { if (player.paused) player.play(); } Object.assign(videoPlayerState, { continuePlaying: continuePlaying }); player.on('play', function () { startWatch(videoPlayerState); openPop('popup-streaming-video'); }); player.on('pause', function () { // stopWatchAndReport(videoPlayerState, options); if (onPlayerPause) { onPlayerPause(videoPlayerState, options); } }); player.on('ended', function (event) { if (onPlayerStop) { onPlayerStop(videoPlayerState, options); } //if preview if (Math.floor(player.duration()) == 30) { //if logged in but not subscribed VS if not logged in var subscribeModal = document.getElementById('popup-purchase'); if (isvliveLoggedIn) { if (!subscribeModal.classList.contains('show')) { openPop('popup-purchase',true); } } else { window.localStorage.setItem('purchase', true); videoStreamingProcess.loginUser(); } } }); player.on('timeupdate', function (event) { //if(!videoTitle) return; var playedTime = player.currentTime(); var intPlayedTime = parseInt(playedTime, 10); var triggerUpdate = intPlayedTime % updateInterval === 1; var videoStatus; var playPosition = Math.round(playedTime / player.duration() * 100); const playPercentage = [0,10,20, 25,40, 50,60, 75,80, 100]; switch (options.contentType) { case 'FULL_LENGTH_VIDEO': case 'VIDEO': videoStatus = 'Full Video'; break; default: videoStatus = 'Preview Video'; break; } if (playPercentage.includes(playPosition)) { let videoTitleToTrack = $('.streaming-video__title').text(); if($("#gtm-event-track").attr('valuetotrack') == playPosition) return $('#gtm-event-track').attr('category', 'Video Foodland Tracking'); $('#gtm-event-track').attr('action', videoStatus); $('#gtm-event-track').attr('valuetotrack', playPosition); $('#gtm-event-track').attr('titletotrack', videoTitleToTrack); $('#gtm-event-track').click(); } if (triggerUpdate && debounceUpdate) { debounceUpdate = false; videoStreamingProcess.updatePlayHistory({ isLoggedIn: true, articleId: player.getAttribute('data-articleId'), contentType: 'FULL_LENGTH_VIDEO', applicationContext: getApplicationContext(), playPosition: playPosition }); videoStreamingProcess.playIfPlaybackIsAllowed(videoPlayerState, options, callbacks.prePlayCheck); } else if (!debounceUpdate) { setTimeout(function () { debounceUpdate = true; }, 500); } var triggerStreamUpdate = intPlayedTime % streamUpdateInterval === streamUpdateInterval - 1; if (triggerStreamUpdate && debounceStreamUpdate) { debounceStreamUpdate = false; // stopWatchAndReport({ // restart: true // }); } else if (!debounceStreamUpdate) { setTimeout(function () { debounceStreamUpdate = true; }, 500); } }); }); } }; //# sourceMappingURL=post.js.map