/*global dataLayer, SCSRenderAPI, $, SCS, SiteUtils*/
import CommonUtils from './common.mjs';
import { appendStockToHTML } from './stock.mjs';
export default class {
contentVersion = '>=1.0.0 <2.0.0';
constructor(params) {
this.contentItemData = params.contentItemData || {};
this.scsData = params.scsData;
this.contentClient = params.contentClient;
this.libs = this.contentClient.getLibs() || {};
this.assetsFolder = import.meta.url.replace('/render.mjs', '');
this.Mustache = params.Mustache || this.libs.Mustache || window.Mustache;
window.TemplateBundle = params.YextLib || this.YextLib;
window.parent.contentCache = window.parent.contentCache || {};
this.localUtils = window.SiteUtils ? window.SiteUtils : {};
this.commonUtils = new CommonUtils(this.contentClient, null, null, this.localUtils);
//isDisabled by default
//In context of a given site takes following values:view|preview|edit|navigate
this.view = 'disable';
if (window.SiteUtils) {
//the layout is getting rendered for a specific site in view or peview mode
this.view = SCSRenderAPI.getRenderMode() || this.view;
}
if (this.scsData) {
//the layout is getting rendered for a specific site in sitebuilder
this.view = this.scsData.viewMode || this.view;
}
}
isEnabled(parentObj) {
let enabled = true;
//the component relies on theme or site specific functions to render
//we disable the layout for preview from asset repository
//this method can be custom extended to disable from other places like
//- site builder | preview mode etc..
if (this.view == 'disable') {
const blankHtml =
'
' +
'
' +
'
' +
'
' +
'
' +
'
VIEW DISABLED
' +
'' +
'
' +
'
' +
'
' +
'
';
parentObj.insertAdjacentHTML('beforeend', blankHtml);
enabled = false;
}
return enabled;
}
/** @returns Retrieves location from CDN for view mode */
getCurrentLocation() {
let currentLocation = '';
if (this.view == 'view') {
const req = new XMLHttpRequest();
req.open('GET', document.location, false);
req.send(null);
const headers = req.getAllResponseHeaders().toLowerCase();
const arr = headers.trim().split(/[\r\n]+/);
const headerMap = {};
arr.forEach(function (line) {
const parts = line.split(': ');
const header = parts.shift();
const value = parts.join(': ');
headerMap[header] = value;
});
currentLocation = headerMap['x-client-country'] || '';
}
return currentLocation;
}
/**
* Finds the desc of the location code from the languageModel model
*
* @param {any} locationCode
* @param {any} languageModel
* @returns
*/
getCurrentLocationName(locationCode = 'ND', languageModel = {}) {
let locationName = '';
if (languageModel.fields) {
const continents = languageModel.fields.continents || {};
(continents.list || []).forEach((languageModelItemFieldContinentListItem) => {
const countries = languageModelItemFieldContinentListItem.countries || {};
(countries.list || []).forEach((languageModelItemFieldContinentListItemCountry) => {
if (languageModelItemFieldContinentListItemCountry.CountryCode == locationCode) {
locationName = languageModelItemFieldContinentListItemCountry.CountryName;
}
});
});
}
return locationName;
}
/**
* Receives in input the current location of the user and calculates if the site should redirect to the lg.rg
* version based on the current location and browser language.
*
* @param {any} locationCode
*
* | eg. it, de etc
* @returns
*/
isCorrectRegion(locationCode = 'ND') {
const currentUrl = new URL(window.location.href);
const parameters = {
utm_campaign: currentUrl.searchParams.get('utm_campaign'),
utm_content: currentUrl.searchParams.get('utm_content'),
utm_source: currentUrl.searchParams.get('utm_source'),
utm_medium: currentUrl.searchParams.get('utm_medium'),
utm_term: currentUrl.searchParams.get('utm_term'),
utm_id: currentUrl.searchParams.get('utm_id'),
};
for (const property in parameters) {
if (parameters[property]) {
sessionStorage.setItem(property, parameters[property]);
}
}
const result = {
isCorrectRegion: true,
isRedirect: false,
redirectUrl: '',
suggestedLanguage: {
countryCode: locationCode != 'ND' ? locationCode : '',
countryName: '',
language: 'en',
languageCode: 'en',
notTargetedLanguages: false,
userRegLang: '',
userCountryCode: '',
},
};
const renderMode = SCSRenderAPI.getRenderMode();
const siteId = SCS.siteId;
if (locationCode != 'ND' && renderMode === 'view') {
const localeCode = this.commonUtils.getPageLanguageCode('iso');
const url = (localeCode && localeCode.split('-')) || 'ND'; //SCS.pageLanguageCode ? SCS.pageLanguageCode.split('-') : 'ND';
let requested___Url =
url != 'ND'
? url.length > 1
? url[0] + (url.length > 1 ? '-' + url[url.length - 1] : '').toLowerCase()
: 'NO_REG'
: 'NO_LANG';
let browserLanguage = window.navigator.language.split('-')[0];
const cookieLanguageCode = this.commonUtils.getCookies().cookieLanguageCode || 'ND';
let userRegLang = this.commonUtils.getCookies().userRegLang || 'ND';
if (cookieLanguageCode == 'ND') {
this.showCookieBanner = true;
}
const pageLt = SCSRenderAPI.pageModel.properties.pageLayout;
if (pageLt.indexOf('404') > -1) {
requested___Url = '404';
}
if (requested___Url == '404') {
if (cookieLanguageCode !== 'ND' || userRegLang !== 'ND') {
browserLanguage = cookieLanguageCode;
if (SCS.siteInfo.properties.localeAliases[userRegLang]) {
browserLanguage = userRegLang;
}
} else {
browserLanguage = 'en';
}
} else if (requested___Url == 'NO_LANG') {
if (cookieLanguageCode !== 'ND' || userRegLang !== 'ND') {
let sp = '/';
if (window.location.origin == window.SCS.siteInfo.properties.customProperties.SITE_CDN_DOMAIN) {
sp = window.SCS.sitePrefix ? window.SCS.sitePrefix : '/';
} else if (
window.location.origin == window.SCS.siteInfo.properties.customProperties.SITE_VANITY_DOMAIN
) {
sp = '/';
}
let ep = '/';
if (window.location.origin == window.SCS.siteInfo.properties.customProperties.SITE_CDN_DOMAIN) {
ep = '/';
} else if (
window.location.origin == window.SCS.siteInfo.properties.customProperties.SITE_VANITY_DOMAIN
) {
ep = window.location.pathname;
}
let redirectLanguage =
cookieLanguageCode !== 'ND' ? cookieLanguageCode : userRegLang !== 'ND' ? userRegLang : 'en';
if (SCS.siteInfo.properties.localeAliases[redirectLanguage]) {
redirectLanguage = redirectLanguage.toLowerCase();
} else {
redirectLanguage = 'en';
}
const newurl = window.location.origin + sp + redirectLanguage + ep;
result.redirectUrl = newurl;
result.isRedirect = true;
result.redirectLanguage = redirectLanguage;
} else {
let pageLanguage = 'en';
if (SCS.siteInfo.properties.localeAliases[browserLanguage + '-' + locationCode]) {
userRegLang = browserLanguage + '-' + locationCode;
pageLanguage = browserLanguage + '-' + locationCode;
} else if (SCS.siteInfo.properties.localeAliases['en-' + locationCode]) {
browserLanguage = 'en';
userRegLang = browserLanguage + '-' + locationCode;
pageLanguage = browserLanguage + '-' + locationCode;
} else {
browserLanguage = 'en';
userRegLang = browserLanguage + '-' + locationCode;
pageLanguage = browserLanguage;
}
let sp = '/';
if (window.location.origin == window.SCS.siteInfo.properties.customProperties.SITE_CDN_DOMAIN) {
sp = window.SCS.sitePrefix ? window.SCS.sitePrefix : '/';
} else if (
window.location.origin == window.SCS.siteInfo.properties.customProperties.SITE_VANITY_DOMAIN
) {
sp = '/';
}
let ep = '/';
if (window.location.origin == window.SCS.siteInfo.properties.customProperties.SITE_CDN_DOMAIN) {
ep = '/';
} else if (
window.location.origin == window.SCS.siteInfo.properties.customProperties.SITE_VANITY_DOMAIN
) {
ep = window.location.pathname;
}
let redirectLanguage = pageLanguage;
if (SCS.siteInfo.properties.localeAliases[redirectLanguage]) {
redirectLanguage = redirectLanguage.toLowerCase();
} else {
redirectLanguage = 'en';
}
const newurl = window.location.origin + sp + redirectLanguage + ep;
result.redirectUrl = newurl;
result.isRedirect = true;
result.redirectLanguage = redirectLanguage;
}
} else if (requested___Url == 'NO_REG') {
if (userRegLang !== 'ND') {
const lg_rg = userRegLang.split('-');
browserLanguage = lg_rg[0] ? lg_rg[0].toLowerCase() : browserLanguage;
locationCode = lg_rg[1] ? lg_rg[1].toLowerCase() : locationCode;
if (SCS.siteInfo.properties.localeAliases[userRegLang]) {
browserLanguage = userRegLang;
}
if (browserLanguage != SiteUtils.getPageLanguageCodeNormalized().toLowerCase()) {
let sp = '/';
if (window.location.origin == window.SCS.siteInfo.properties.customProperties.SITE_CDN_DOMAIN) {
sp = window.SCS.sitePrefix ? window.SCS.sitePrefix : '/';
}
let ep = window.location.pathname;
const splittedEp = ep.split('/' + SiteUtils.getPageLanguageCodeNormalized().toLowerCase());
if (splittedEp && splittedEp[1]) {
ep = splittedEp[1];
} else {
ep = '/';
}
let redirectLanguage = browserLanguage;
if (SCS.siteInfo.properties.localeAliases[redirectLanguage]) {
redirectLanguage = redirectLanguage.toLowerCase();
} else {
redirectLanguage = 'en';
}
const newurl = window.location.origin + sp + redirectLanguage + ep;
result.redirectUrl = newurl;
result.isRedirect = true;
result.redirectLanguage = redirectLanguage;
} else {
result.isCorrectRegion = true;
result.suggestedLanguage.language = browserLanguage;
result.suggestedLanguage.countryCode = locationCode;
result.suggestedLanguage.languageCode = userRegLang;
const u = window.location.pathname;
this.commonUtils.setCookies(u, siteId, browserLanguage, browserLanguage + '-' + locationCode);
}
} else {
let pageLanguage = 'en';
if (SCS.siteInfo.properties.localeAliases[browserLanguage + '-' + locationCode]) {
userRegLang = browserLanguage + '-' + locationCode;
pageLanguage = browserLanguage + '-' + locationCode;
} else if (SCS.siteInfo.properties.localeAliases['en-' + locationCode]) {
browserLanguage = 'en';
userRegLang = browserLanguage + '-' + locationCode;
pageLanguage = browserLanguage + '-' + locationCode;
} else {
browserLanguage = 'en';
userRegLang = browserLanguage + '-' + locationCode;
pageLanguage = browserLanguage;
}
if (pageLanguage != SiteUtils.getPageLanguageCodeNormalized().toLowerCase()) {
let sp = '/';
if (window.location.origin == window.SCS.siteInfo.properties.customProperties.SITE_CDN_DOMAIN) {
sp = window.SCS.sitePrefix ? window.SCS.sitePrefix : '/';
}
const ep = '/';
let redirectLanguage = pageLanguage;
if (SCS.siteInfo.properties.localeAliases[redirectLanguage]) {
redirectLanguage = redirectLanguage.toLowerCase();
} else {
redirectLanguage = 'en';
}
const newurl = window.location.origin + sp + redirectLanguage + ep;
result.redirectUrl = newurl;
result.isRedirect = true;
result.redirectLanguage = redirectLanguage;
} else {
result.isCorrectRegion = true;
result.suggestedLanguage.language = browserLanguage;
result.suggestedLanguage.countryCode = locationCode;
result.suggestedLanguage.languageCode = pageLanguage;
const u = window.location.pathname;
this.commonUtils.setCookies(u, siteId, browserLanguage, pageLanguage);
}
}
} else {
if (SiteUtils.getPageLanguageCodeNormalized()) {
const lg_rg = SiteUtils.getPageLanguageCodeNormalized().split('-');
browserLanguage = lg_rg[0] ? lg_rg[0].toLowerCase() : browserLanguage;
locationCode = lg_rg[1] ? lg_rg[1].toLowerCase() : locationCode;
}
if (
userRegLang == 'ND' ||
(browserLanguage + '-' + locationCode).toLowerCase() === userRegLang.toLowerCase()
) {
result.isCorrectRegion = true;
let pageLanguage = 'en';
if (SCS.siteInfo.properties.localeAliases[browserLanguage + '-' + locationCode]) {
userRegLang = browserLanguage + '-' + locationCode;
pageLanguage = browserLanguage + '-' + locationCode;
} else if (SCS.siteInfo.properties.localeAliases['en-' + locationCode]) {
browserLanguage = 'en';
userRegLang = browserLanguage + '-' + locationCode;
pageLanguage = browserLanguage + '-' + locationCode;
} else {
browserLanguage = 'en';
userRegLang = browserLanguage + '-' + locationCode;
pageLanguage = browserLanguage;
}
result.suggestedLanguage.language = browserLanguage;
result.suggestedLanguage.countryCode = locationCode;
result.suggestedLanguage.languageCode = pageLanguage;
result.userRegLang = userRegLang;
const u = window.location.pathname;
this.commonUtils.setCookies(u, siteId, browserLanguage, userRegLang);
} else {
result.isCorrectRegion = false;
const splitedUserReg = userRegLang.split('-');
browserLanguage = splitedUserReg[0] ? splitedUserReg[0] : browserLanguage;
locationCode = splitedUserReg[splitedUserReg.length - 1]
? splitedUserReg[splitedUserReg.length - 1]
: locationCode;
result.suggestedLanguage.language = browserLanguage;
result.suggestedLanguage.countryCode = locationCode;
let pageLanguage = browserLanguage;
if (SCS.siteInfo.properties.localeAliases[browserLanguage + '-' + locationCode]) {
pageLanguage = browserLanguage + '-' + locationCode;
} else {
pageLanguage = browserLanguage;
}
result.suggestedLanguage.languageCode = pageLanguage;
result.userRegLang = userRegLang;
const ur = window.location.href.split('/' + this.commonUtils.getPageLanguageCode('ir') + '/');
ur[1] = ur[1] || '';
if (ur[1] == 'home') {
ur[1] = '';
}
if (pageLt && pageLt.indexOf('404') > -1) {
ur[1] = '';
}
let newurl = '';
if (ur[1] == '') {
newurl = ur[0] + '/' + pageLanguage;
} else {
newurl = ur[0] + '/' + pageLanguage + '/' + ur[1];
}
result.redirectUrl = newurl;
result.redirectLanguage = pageLanguage;
}
}
}
return result;
}
/**
* @returns Validates against the header field "domain_redirect_rules_json" and redirects the site to another dom
* for eg. {'en-ca': 'site1.cm'}
*/
iscorrectDomain(model) {
const result = {
isRedirect: false,
redirectUrl: '',
};
const renderMode = SCSRenderAPI.getRenderMode();
if (renderMode === 'view') {
//enabled only for cdn sites
const redirectRules = this.commonUtils.getRedirectRules(model);
if (redirectRules) {
const pageLanguage = this.commonUtils.getPageLanguageCode('IR');
const ____language = this.commonUtils.getLanguageFromLocale(pageLanguage).toLowerCase();
let checkOnlyDomain = false;
if (redirectRules[pageLanguage]) {
const domain = new URL(redirectRules[pageLanguage]);
const redirectHost = domain.hostname;
const _currentHost = window.location.hostname;
try {
const _currentHostSiteId = _currentHost.split('.')[1];
const redirectHostSiteId = redirectHost.split('.')[1];
if (_currentHostSiteId != redirectHostSiteId) {
result.isRedirect = true;
result.redirectUrl = redirectRules[globalLanguage];
}
} catch (err) {
checkOnlyDomain = true;
console.log('unwanted configuration error in site header configuration');
}
if (checkOnlyDomain && redirectHost != _currentHost) {
result.isRedirect = true;
result.redirectUrl = redirectRules[pageLanguage];
}
} else if (redirectRules[____language + '-go']) {
const globalLanguage = ____language + '-go';
const domain = new URL(redirectRules[globalLanguage]);
const redirectHost = domain.hostname;
const _currentHost = window.location.hostname;
try {
const _currentHostSiteId = _currentHost.split('.')[1];
const redirectHostSiteId = redirectHost.split('.')[1];
if (_currentHostSiteId != redirectHostSiteId) {
result.isRedirect = true;
result.redirectUrl = redirectRules[globalLanguage];
}
} catch (err) {
checkOnlyDomain = true;
console.log('unwanted configuration error in site header configuration');
}
if (checkOnlyDomain && redirectHost != _currentHost) {
result.isRedirect = true;
result.redirectUrl = redirectRules[globalLanguage];
}
}
}
}
return result;
}
/**
* Checks if the current location is correct or not. If not, redirects to the correct location.
*
* @returns {boolean}
*/
setRegion() {
// check if localhost to enable basic tests in the local environment
let currentLocation;
const localhost = window.location.hostname.indexOf('localhost') > -1;
if (localhost) {
currentLocation = 'bt';
} else {
currentLocation = this.getCurrentLocation();
}
// check if only English lang is available
const englishLocaleOnly = !SCSRenderAPI?.siteInfo?.properties?.localeFallbacks;
if (englishLocaleOnly) {
this.correctRegionResult = {
isCorrectRegion: true,
isRedirect: false,
redirectUrl: '',
suggestedLanguage: {
countryCode: 'ND',
countryName: '',
language: 'en',
languageCode: 'en',
notTargetedLanguages: false,
userRegLang: '',
userCountryCode: '',
},
};
const pageLanguage = this.commonUtils.getPageLanguageCode('ir');
if (!pageLanguage.startsWith('en')) {
const redirectModel = {
redirect: {
flag: true,
policy: 'LOCALE',
locale: 'en',
},
language: 'en',
};
return this.commonUtils.doRedirect(redirectModel);
}
return true;
}
let proceed = true;
this.correctRegionResult = this.isCorrectRegion(currentLocation);
if (this.correctRegionResult?.isRedirect && this.correctRegionResult?.redirectLanguage) {
const redirectModel = {
redirect: {
flag: true,
policy: 'LOCALE',
locale: this.correctRegionResult.redirectLanguage,
},
language: this.correctRegionResult.redirectLanguage,
};
proceed = this.commonUtils.doRedirect(redirectModel);
}
return proceed;
}
manageLocationPost(model) {
let proceed = true;
const correctDomainResult = this.iscorrectDomain(model);
if (correctDomainResult?.isRedirect && correctDomainResult?.redirectUrl) {
const redirectModel = {
redirect: {
flag: true,
policy: 'DOMAIN',
url: correctDomainResult.redirectUrl,
},
};
proceed = this.commonUtils.doRedirect(redirectModel);
}
return proceed;
}
async createModel(headerData) {
this.content = '';
try {
const content = headerData || this.contentItemData;
// extract the content that will be used as the model
//this.content = Object.assign({}, this.contentItemData);
this.content = Object.assign({}, content);
/*let contentType;
let customSettings;
const secureContent = false;
*/
if (this.scsData) {
this.content = Object.assign(this.content, {
scsData: this.scsData,
});
//contentType = this.content.scsData.showPublishedContent === true ? 'published' : 'draft';
//customSettings = this.content.scsData.customSettingsData || {};
}
this.content = await this.commonUtils.doRegionalizationHeader(this.content);
//used in red banner, language selector
this.content.blank_gif = this.localUtils.getSiteCSSImage('blank.gif');
this.content.search_svg = this.localUtils.getSiteCSSImage('search.svg');
this.content.flags_png = this.localUtils.getSiteCSSImage('flags.png');
this.content.siteId = this.commonUtils.getSiteId();
this.content.redirectRules = this.commonUtils.getRedirectRules(this.content);
this.content.pageLanguageCode = this.commonUtils.getPageLanguageCode('ir');
const fields = this.content && this.content.fields;
const self = this;
if (fields) {
Object.keys(fields).forEach((key) => {
if ((key.indexOf('linksLeftSide') > -1 || key.indexOf('linksRightSide') > -1) && fields[key]) {
fields[key].forEach((item) => {
self.commonUtils.transformUpperHeaderLinks(item);
});
}
});
this.content['languageModel'] = fields.languageSelector ? fields.languageSelector : '';
this.content['languageSelector'] = fields.languageSelector ? fields.languageSelector : '';
if (fields.yextAnswers || fields.yext_ansswers) {
fields.yext_ansswers = true;
}
if (fields.addSearch || fields.add_search) {
fields.add_search = true;
}
fields.cookie_policy_link = fields.cookiePolicyLink;
fields.cookie_alert_timeout = fields.cookieAlertTimeout;
fields.cookie_alert_message = fields.cookieAlertMessage;
fields.modal_title = fields.modalTitle;
fields.modal_subtitle = fields.modalSubtitle;
}
const suggestedLanguage = this.correctRegionResult?.suggestedLanguage;
if (suggestedLanguage) {
this.content['countryCode'] = suggestedLanguage.countryCode?.toLowerCase();
this.content['countryName'] = suggestedLanguage.countryName;
}
this.content['continueLink'] = this.correctRegionResult.redirectUrl;
this.content.logo_link = this.localUtils.getPageUrl('');
this.content['CurrentCountryCode'] = this.commonUtils.getCountryCodeFromLocale(
this.commonUtils.getPageLanguageCode('ir')
);
this.content['add_search_link'] = this.localUtils.getPageUrl('search-results');
this.commonUtils.setRedBanner(this.content);
this.commonUtils.setLanguageSelector(this.content);
this.commonUtils.callMenu(this.content);
} catch (e) {
console.log('HEADER2:MODEL:CREATION:', e);
}
return this.content;
}
renderHTML(model, templateHTML) {
let renderedHTML = '';
try {
// Use Mustache to expand the HTML template with the data.
renderedHTML = this.Mustache.render(templateHTML, model);
} catch (e) {
console.error(e.stack);
console.log('HEADER2:RENDERHTML:', e);
}
return renderedHTML;
}
//main entry in dynamic mode
render(parentObj) {
try {
if (this.isEnabled(parentObj)) {
let proceed = true;
proceed = proceed && this.setRegion(parentObj);
proceed &&
this.commonUtils
.getLanguageAsset(this.contentItemData)
.then((result) => {
this.contentItemData = result;
this.cacheName = 'headerItem' + this.contentItemData.id;
console.log('HEADER2:RENDER:IN:PROGRESS:', this.contentItemData.id);
Promise.all([
this.commonUtils.queryContent(this.contentItemData.id, this.cacheName),
this.contentClient.importText(this.assetsFolder + '/layout.html'),
this.contentClient.importCSS(this.assetsFolder + '/design.css'),
])
.then(async (results) => {
const headerData = results[0];
const templateHtml = results[1];
window.parent.contentCache[this.cacheName] = headerData;
const model = await this.createModel(headerData);
proceed = this.manageLocationPost(model);
const compHTML = proceed ? this.renderHTML(model, templateHtml) : '';
// insert the result into the page
if (compHTML) {
parentObj.insertAdjacentHTML('beforeend', compHTML);
this.afterRender(parentObj);
}
console.log('HEADER2:RENDER:COMPLETED:');
})
.catch((e) => {
console.log('HEADER2:RENDERHTML:QUERY:', e);
});
})
.catch((e) => {
console.log('HEADER2:RENDERHTML:FALLBACKS:', e);
});
}
} catch (err) {
console.error('HEADER2:RENDER:FAILED', err);
console.error(err.stack);
}
}
hydrate(parentObj) {
this.compiled = true;
let proceed = true;
try {
proceed = proceed && this.setRegion(parentObj);
const divHydrate = parentObj.querySelector('.data-container-hydrate-header');
const hydrateData = divHydrate ? divHydrate.dataset.hydrate : null;
if (proceed && hydrateData) {
this.content = JSON.parse(hydrateData);
}
proceed = proceed && this.manageLocationPost(this.content);
proceed = proceed && this.afterRender(parentObj);
} catch (err) {
console.error('HEADER2:HYDRATE:FAILED', err);
console.error(err.stack);
}
}
initializeYext() {
const search_result = this.localUtils.getPageUrl('search-results');
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://assets.sitescdn.net/answers-search-bar/v1.0/answers.css';
document.head.appendChild(link);
var yextAnswers = document.createElement('style');
yextAnswers.type = 'text/css';
const css = `.GDHeaderTop__right .yxt-SearchBar-button {
display: none;
}
.GDHeaderTop__right .yxt-SearchBar-wrapper {
max-width: 18rem
}
.GDHeaderTop__right .yxt-SearchBar-container button {
/* background-color:rgba(245,245,245,.97); */
}
.GDHeaderTop__right .yxt-SearchBar-container input {
background-color: #fff;
font-size: 13px;
font-weight: 600
}
.GDHeaderTop__right .js-yext-submit {
/* background-color:rgba(245,245,245,.97); */
}
.GDHeaderTop__right .yxt-GeoLocationFilter-container,.GDHeaderTop__right .yxt-SearchBar-container {
border: none;
background-color: transparent
}
.GDHeaderTop__right .yxt-GeoLocationFilter-container .yxt-AutoComplete-results .yxt-AutoComplete-option,.GDHeaderTop__right .yxt-SearchBar-container .yxt-AutoComplete-results .yxt-AutoComplete-option {
font-size: 13px
}
#menu .yxt-SearchBar-button {
display: none
}
#menu .yxt-SearchBar {
height: inherit
}
#menu .yxt-SearchBar .mobile-search {
font-weight: 600
}
#menu .yxt-SearchBar .yxt-AutoComplete-results .yxt-AutoComplete-option {
font-size: 13px;
margin-left: 3rem
}`;
yextAnswers.appendChild(document.createTextNode(css));
document.head.appendChild(yextAnswers);
const script = document.createElement('script');
script.text = `function initAnswers() {
ANSWERS.init({
apiKey: 'be237845c2319226a185c32c9326a806',
experienceKey: 'ingersoll-rand-answers',
experienceVersion: 'PRODUCTION',
locale: 'en',
businessId: '3109138',
templateBundle: TemplateBundle.default,
onReady: function() {
ANSWERS.addComponent('SearchBar', {
container: '.search-form',
name: 'search-bar', //Must be unique for every search bar on the same page
redirectUrl: '${search_result}',
placeholderText: 'Search...',
});
},
});
}`;
document.head.appendChild(script);
const scriptAnswers = document.createElement('script');
scriptAnswers.setAttribute('src', 'https://assets.sitescdn.net/answers-search-bar/v1.0/answers.min.js');
scriptAnswers.setAttribute('onload', 'ANSWERS.domReady(initAnswers)');
scriptAnswers.setAttribute('async', '');
scriptAnswers.setAttribute('defer', '');
document.head.appendChild(scriptAnswers);
return 1;
}
manageRightMenu() {
const jqOCM = SCSRenderAPI.getJQuery();
const links = document.getElementsByClassName('js-headerLink');
if (links && links.length > 0) {
for (let i = 0; i < links.length; i++) {
let href = jqOCM(links.item(i)).data('cta-link');
const type = jqOCM(links.item(i)).data('url-type');
if (type != 'EXTERNAL' && this.compiled) {
const splitted = href.split('./');
if (splitted && splitted.length > 0) {
href = SiteUtils.getPageUrl(splitted[splitted.length - 1]);
}
}
jqOCM(links.item(i)).attr('href', href);
}
} else {
const collection = document.querySelectorAll('a.GDHeaderTop__Home__a');
for (let i = 0; i < collection.length; i++) {
let href = jqOCM(collection[i]).attr('href');
const isHrefRelative = !!href?.match(/^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/gm);
if (href && isHrefRelative && this.compiled) {
const splitted = href.split('./');
if (splitted && splitted.length > 0) {
href = SiteUtils.getPageUrl(splitted[splitted.length - 1]);
jqOCM(collection[i]).attr('href', href);
}
}
}
const collection2 = document.querySelectorAll('a.GDHeaderTop__CTA__a');
for (let i = 0; i < collection2.length; i++) {
let href = jqOCM(collection2[i]).attr('href');
const isHrefRelative = !!href?.match(/^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/gm);
if (href && isHrefRelative && this.compiled) {
const splitted = href.split('./');
if (splitted && splitted.length > 0) {
href = SiteUtils.getPageUrl(splitted[splitted.length - 1]);
jqOCM(collection2[i]).attr('href', href);
}
}
}
}
}
manageSearch() {
const addSearchForm = document.querySelector('form#demo-2');
if (this.shouldAddSearch()) {
this.setSearchFormAction(addSearchForm);
} else {
this.hideSearchForm(addSearchForm);
console.log('skip addSearch');
}
this.addEventListenerToFormSearch(addSearchForm);
if (this.content.fields.yext_ansswers) {
this.initializeYext();
} else {
console.log('skip yext');
}
}
getBrandName() {
const hostname = window.location.hostname;
if (hostname.includes('ingersollrand') && hostname.includes('powertools')) return 'ptl';
if (hostname.includes('ingersollrand')) return 'irp';
if (hostname.includes('powertools')) return 'ptl';
if (hostname.includes('liftingsolutions')) return 'ptl';
return undefined;
}
removeEmptyFields(obj) {
Object.keys(obj).forEach((key) => {
if (
obj[key] === undefined ||
obj[key] === null ||
obj[key] === '' ||
obj[key] === 'undefined' ||
obj[key] === 'null'
) {
delete obj[key];
}
});
return obj;
}
addEventListenerToFormSearch(form) {
if (form) {
form.addEventListener('submit', () => {
const input = form.querySelector('input');
if (input) {
const value = input.value;
if (value && typeof window !== 'undefined' && typeof window?.dataLayer !== 'undefined') {
dataLayer?.push(
this?.removeEmptyFields({
event: 'infinity-search',
'event-type': 1,
'search-term': value,
brand: this.getBrandName() ?? undefined,
})
);
}
}
});
}
}
shouldAddSearch() {
return this.content.fields.add_search || this.content.fields.addSearch;
}
setSearchFormAction(form) {
if (form) {
form.setAttribute('action', this.localUtils.getPageUrl('search-results'));
}
}
hideSearchForm(form) {
if (form) {
form.style.display = 'none';
}
}
/**
* This fixes the parent layout slot css to enable to menu to have the overlay dropdowns
*
* @param {any} parentObj
*/
setContainerStyle(parentObj) {
let element = parentObj.closest('.scs-container-styles');
if (element) {
element.style.overflow = 'visible';
}
element = parentObj.closest('.scs-custom-component-wrapper');
if (element) {
element.style.overflow = 'visible';
}
element = parentObj.closest('.scs-edit-mode .scs-component-bounding-box');
if (element) {
element.style.overflow = 'visible';
}
element = parentObj.closest('.scs-container-styles');
if (element) {
const childElement = element.closest('.scs-edit-mode .scs-component-bounding-box');
if (childElement) {
childElement.style.overflow = 'visible';
}
}
}
/** This is a banner that appears for few seconds and then disappers */
manageCookieBanner() {
if (this.showCookieBanner) {
document.querySelector('.cl-banner').style.display = 'block';
} else {
document.querySelector('.cl-banner').style.display = 'none';
}
const accept = document.querySelector('a[class = "cl-accept"]');
if (accept) {
accept.addEventListener('click', (event) => {
document.querySelector('.cl-banner').style.display = 'none';
//event.stopPropagation();
});
}
const divTimeOut = document.querySelector('.CoockieMessageTimeOut');
if (divTimeOut) {
const timeout = (divTimeOut.dataset.timeout || 1) * 1000;
setTimeout(() => {
const box = document.querySelector('.cl-banner');
box.style.display = 'none';
}, timeout);
}
}
/**
* This appers in the bottom where if the language in the URL is different than the system suggested language
* version then it warms the first time unless accepted by the user, in which case it updates the cookie about the
* user selection
*/
manageRedBanner() {
const jqOCM = SCSRenderAPI.getJQuery();
if (this.correctRegionResult && !this.correctRegionResult.isCorrectRegion) {
jqOCM('#redBanner').show();
jqOCM('#redBannerCountryCode').removeClass();
jqOCM('#redBannerCountryCode').addClass(
'flag flag-' + this.correctRegionResult.suggestedLanguage.countryCode.toLowerCase()
);
if (!this.correctRegionResult.suggestedLanguage.countryName) {
this.correctRegionResult.suggestedLanguage.countryName = this.getCurrentLocationName(
this.correctRegionResult.suggestedLanguage.countryCode,
this.content.languageModel
);
}
jqOCM('#redBannerCountryName').text(this.correctRegionResult.suggestedLanguage.countryName);
jqOCM('#regionFormDialogClose').attr(
'data-cx-lang',
SiteUtils.getPageLanguageCodeNormalized().toLowerCase()
);
jqOCM('.js-redBannerContinue .brandcolor').attr('href', this.correctRegionResult.redirectUrl);
jqOCM('.js-redBannerContinue .brandcolor').attr(
'data-cx-flag',
this.correctRegionResult.suggestedLanguage.countryCode
);
jqOCM('.js-redBannerContinue .brandcolor').attr(
'data-cx-lang',
this.correctRegionResult.suggestedLanguage.language
);
}
}
/** In pages without a banner or brandstripe this automatically adds one. */
manageBrandStripe() {
const isVisible = (elem) => {
if (elem) {
const styles = window.getComputedStyle(elem);
return (
elem.offsetWidth > 0 ||
elem.offsetHeight > 0 ||
styles.display === 'block' ||
styles.visibility === 'visible'
);
} else {
return false;
}
};
const jqOCM = SCSRenderAPI.getJQuery();
const pagebanner = document.querySelector('.GD-LandingWithCTA');
const pageHasBanner = isVisible(pagebanner);
const pagebstrip = document.querySelector('.redstripe');
//there can be multiple redstripes, I don't want to loop through all elems to check visibility of each so use jquery
const pageHasBStrip = jqOCM('.redstripe').is(':visible');
if (!pageHasBanner && !pageHasBStrip && pagebstrip) {
pagebstrip.style.display = 'block';
}
}
manageLanguagePostRender() {
try {
const labelLanguageSelectors = document.querySelectorAll('.js-labelLanguageSelector');
(labelLanguageSelectors || []).forEach((labelLanguageSelector) => {
console.log(labelLanguageSelector);
});
const self = this;
const collection = document.querySelectorAll('a.country');
//const pageLt = SCSRenderAPI.pageModel.properties.pageLayout;
const currentUrl = window.location.href;
const currentPageLanguage = this.commonUtils.getPageLanguageCode('ir');
const pageIs404 = currentUrl.indexOf('404') > -1;
for (let i = 0; i < collection.length; i++) {
const element = collection[i];
const link = element.dataset['cx-link'] || element.dataset.cxLink;
const href = element.getAttribute('href');
const isHrefRelative = !!href?.match(/^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/).*/gm);
if (!href || isHrefRelative) {
if (link && link.endsWith('/home')) {
const languageCode = link.split('/home')[0];
let pageUrl = currentUrl.split(`/${currentPageLanguage}/`)[1] || '';
if (pageUrl === 'home') {
pageUrl = '';
}
if (pageIs404) {
pageUrl = '';
}
const newHref = `${currentUrl.split(`/${currentPageLanguage}/`)[0]}/${languageCode}/${pageUrl}`;
element.setAttribute('href', newHref);
} else if (link && !href) {
element.setAttribute('href', link);
}
}
}
const globalLanguageSel = document.querySelector('.js-globalLanguageSel');
if (globalLanguageSel) {
globalLanguageSel.addEventListener('click', (event) => {
const countryCollection = document.querySelectorAll('a.country');
self.commonUtils.setEventCountrySelector(countryCollection);
//event.stopPropagation();
});
}
const redBannerCountrySel = document.querySelector('.js-redBannerCountrySel');
if (redBannerCountrySel) {
redBannerCountrySel.addEventListener('click', (event) => {
const countryCollection = document.querySelectorAll('a.country');
self.commonUtils.setEventCountrySelector(countryCollection);
//event.stopPropagation();
});
}
const redBannerContinue = document.querySelector('.js-redBannerContinue');
if (redBannerContinue) {
redBannerContinue.addEventListener('click', (event) => {
const elementHref = redBannerContinue.querySelector('a');
const url = elementHref.getAttribute('href');
const lang = elementHref.dataset['cx-lang'] || elementHref.dataset.cxLang;
const countryCode = elementHref.dataset['cx-flag'] || elementHref.dataset.cxFlag;
const siteId = elementHref.dataset['cx-site'] || self.content.siteId;
self.commonUtils.setCookies(url, siteId, lang, lang + '-' + countryCode);
//event.stopPropagation();
});
}
const regionFormDialogClose = document.querySelector('#regionFormDialogClose');
if (regionFormDialogClose) {
regionFormDialogClose.addEventListener('click', (event) => {
const siteId = regionFormDialogClose.dataset['cx-site'] || self.content.siteId;
const locale = regionFormDialogClose.dataset['cx-lang'] || regionFormDialogClose.dataset.cxLang;
const __lang = (window.SCS.localeAlias || 'en').split('-')[0];
const ___url = window.location.pathname;
self.commonUtils.setCookies(___url, siteId, __lang, locale);
const redBanner = document.getElementById('redBanner');
if (redBanner) {
redBanner.style.display = 'none';
}
//event.stopPropagation();
});
}
const accordionArrows = document.querySelectorAll('.js-accordionArrow');
if (accordionArrows) {
for (let i = 0; i < accordionArrows.length; i++) {
const accordionArrow = accordionArrows[i];
const parentAccordionArrow = accordionArrow.parentElement;
parentAccordionArrow.addEventListener('click', (event) => {
//parentAccordionArrow.classList.toggle('fa-arrow-up');
//parentAccordionArrow.classList.toggle('fa-arrow-down');
//event.stopPropagation();
});
}
}
const pageLanguage = this.commonUtils.getPageLanguageCode('ir');
const labelLanguageSelector = { label: '', title: '', flag: '' };
labelLanguageSelector.label = 'Global (' + pageLanguage.toUpperCase() + ')';
const countryCode = this.commonUtils.getCountryCodeFromLocale(pageLanguage);
if (countryCode) {
const countryName = this.getCurrentLocationName(countryCode, this.content.languageModel);
const locale = this.commonUtils.getLanguageFromLocale(pageLanguage);
labelLanguageSelector.label = countryName + ' (' + locale.toUpperCase() + ')';
labelLanguageSelector.flag = 'flag-' + countryCode.toLowerCase();
}
const modalSpanRegLang = document.querySelector('.js-modal-span-reg-lang');
const modalSpanRegFlag = document.querySelector('.js-modal-span-reg-flag');
const textHeaderLang = document.querySelector('.js-text-header-lang');
if (modalSpanRegLang && labelLanguageSelector.label) {
if (modalSpanRegLang.innerText) {
modalSpanRegLang.innerText = labelLanguageSelector.label;
} else if (modalSpanRegLang.textContent) {
modalSpanRegLang.textContent = labelLanguageSelector.label;
}
}
if (modalSpanRegFlag && labelLanguageSelector.flag) {
// Remove classes that begines with flag- from modalSpanRegFlag
const classes = modalSpanRegFlag.className.split(' ');
const newClasses = classes.filter((item) => {
return !item.startsWith('flag-');
});
modalSpanRegFlag.className = newClasses.join(' ');
modalSpanRegFlag.classList.add(labelLanguageSelector.flag);
}
if (textHeaderLang && labelLanguageSelector.label) {
if (textHeaderLang.innerText) {
textHeaderLang.innerText = labelLanguageSelector.label;
} else if (textHeaderLang.textContent) {
textHeaderLang.textContent = labelLanguageSelector.label;
}
}
} catch (Err) {
console.log('HEADER:ERR:manageLanguagePostRender', Err);
}
}
manageMobileMenu() {
const self = this;
const menu = document.querySelector('#menu');
if (menu) {
menu.addEventListener('click', (event) => {
const countryCollection = document.querySelectorAll('a.country');
self.commonUtils.setEventCountrySelector(countryCollection);
//event.stopPropagation();
});
}
const hamburger = document.querySelector('#hamburger');
if (hamburger) {
hamburger.addEventListener('click', (event) => {
window.$ = window.$ || $ || window.jQuery;
if ($ && $.fn.mmenu) {
$('#menu').mmenu();
} else {
console.log('HEADER:JQUERYUI MMENU NOT AVAILABLE');
}
//event.stopPropagation();
});
}
}
afterRender(parentObj) {
this.manageRightMenu();
this.manageSearch();
this.setContainerStyle(parentObj);
this.manageLanguagePostRender();
this.manageCookieBanner();
this.manageRedBanner();
this.manageBrandStripe();
this.manageMobileMenu();
appendStockToHTML(this.content?.fields?.showStockFeed);
return true;
}
}