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