' +
'
' +
'- ' +
'
' +
'
' +
'' +
'' +
'
' +
'
' +
'
' +
(hasJobDepartmentFilter
? '- ' +
'
' +
'
' +
'
' +
'Department' +
'' +
'
' +
'
' +
'
' +
'
' : "") +
(hasJobLocationFilter
? '- ' +
'
' +
'
' +
'
' +
'Location' +
'' +
'
' +
'
' +
'
' +
'
' : "") +
(hasJobTypeFilter
? '- ' +
'
' +
'
' +
'
' +
'Job Type' +
'' +
'
' +
'
' +
'
' +
'
' : "") +
'
';
document.querySelector("#kh-embed-jobs-filters").insertAdjacentHTML("afterbegin", filtersTemplate);
khGetTargetContainer().querySelector('.kh-main-container').style.setProperty("--theme-color", hexToRgbNew(orgColorCode.toString()) || hexToRgbNew("#356BB4"));
jobList.forEach((job) => {
job.jobLocations.forEach((location) => {
if (location.countryName != '' && location.countryName && !locationList.some(function (l) { return l.name ? l.name === location.name : l.city === location.city })) {
locationList.push(location);
}
});
});
jobList.forEach((job) => {
job.jobLocations.forEach((loc) => {
if (!locationListWithNoCountry.some(function (lc) { return lc.name ? lc.name === loc.name || lc.name === loc.city : lc.city === loc.city }) && (loc.countryName == '' || !loc.countryName)) {
locationListWithNoCountry.push(loc);
}
});
});
departmentList = departmentList.filter((d) => jobList.map((j) => j.departmentId).indexOf(d.id) !== -1);
bindFilters();
bindJobs(jobList);
addSocialLinks(orgSocialLinks);
accordion();
});
}
function addSocialLinks(socialLinks) {
var socialLinksContainer = document.querySelector(".kh-company-social-links");
if (socialLinks && socialLinksContainer) {
for (var i = 0; i < socialLinks.length; i++) {
if (socialLinks[i].type === SocialNetworkType.LinkedIn) {
var linkedInLink = document.createElement("a");
linkedInLink.className = "header-3 kh-mr-3";
linkedInLink.target = "_blank";
linkedInLink.href = socialLinks[i].url;
linkedInLink.innerHTML = '
';
socialLinksContainer.appendChild(linkedInLink);
} else if (socialLinks[i].type === SocialNetworkType.Twitter) {
var twitterLink = document.createElement("a");
twitterLink.className = "header-3 kh-mr-3";
twitterLink.target = "_blank";
twitterLink.href = socialLinks[i].url;
twitterLink.innerHTML = '';
socialLinksContainer.appendChild(twitterLink);
} else if (socialLinks[i].type === SocialNetworkType.Instagram) {
var instagramLink = document.createElement("a");
instagramLink.className = "header-3 kh-mr-3";
instagramLink.target = "_blank";
instagramLink.href = socialLinks[i].url;
instagramLink.innerHTML = '
';
socialLinksContainer.appendChild(instagramLink);
} else if (socialLinks[i].type === SocialNetworkType.Youtube) {
var youtubeLink = document.createElement("a");
youtubeLink.className = "header-3 kh-mr-3";
youtubeLink.target = "_blank";
youtubeLink.href = socialLinks[i].url;
youtubeLink.innerHTML = '
';
socialLinksContainer.appendChild(youtubeLink);
}
}
}
}
function hexToRgbNew(hex) {
const rgbArray = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => "#" + r + r + g + g + b + b).substring(1).match(/.{2}/g).map((x) => parseInt(x, 16));
return rgbArray[0] + "," + rgbArray[1] + "," + rgbArray[2];
}
function bindJobs(jobs) {
const jobGroupBy = jobs.reduce((group, job) => {
let { departmentName } = job;
if (!departmentName) {
group["Other Jobs"] = group["Other Jobs"] ?? [];
if (!group["Other Jobs"].some(existingJob => existingJob.id === job.id)) {
group["Other Jobs"].push(job);
}
} else {
group[departmentName] = group[departmentName] ?? [];
if (!group[departmentName].some(existingJob => existingJob.id === job.id)) {
group[departmentName].push(job);
}
}
return group;
}, {});
const otherDepartmentJobs = jobGroupBy["Other Jobs"] ?? [];
delete jobGroupBy["Other Jobs"];
const jobGroupByCountry = jobs.reduce((group, job) => {
if (!job.jobLocations || job.jobLocations.length === 0) {
group["Other Jobs"] = group["Other Jobs"] ?? [];
if (!group["Other Jobs"].some(existingJob => existingJob.id === job.id)) {
group["Other Jobs"].push(job);
}
} else {
job.jobLocations?.forEach(location => {
const { countryName } = location;
if (!countryName || countryName == '') {
group["Other Jobs"] = group["Other Jobs"] ?? [];
if (!group["Other Jobs"].some(existingJob => existingJob.id === job.id)) {
group["Other Jobs"].push(job);
}
}
else {
group[countryName] = group[countryName] ?? [];
if (!group[countryName].some(existingJob => existingJob.id === job.id)) {
group[countryName].push(job);
}
}
});
}
return group;
}, {});
const otherCountryJobs = jobGroupByCountry["Other Jobs"] ?? [];
delete jobGroupByCountry["Other Jobs"];
const jobGroupByLocationName = jobs.reduce((group, job) => {
if (!job.jobLocations || job.jobLocations.length === 0) {
group["Other Jobs"] = group["Other Jobs"] ?? [];
if (!group["Other Jobs"].some(existingJob => existingJob.id === job.id)) {
group["Other Jobs"].push(job);
}
} else {
job.jobLocations.forEach(location => {
const locationKey = location.name ?? location.city ?? location.state;
group[locationKey] = group[locationKey] ?? [];
if (!group[locationKey].some(existingJob => existingJob.id === job.id)) {
group[locationKey].push(job);
}
});
}
return group;
}, {});
const otherLocationJobs = jobGroupByLocationName["Other Jobs"] ?? [];
delete jobGroupByLocationName["Other Jobs"];
let groupedJobs = jobGroupByItem == "location" ? jobGroupByLocationName : jobGroupByItem == "country" ? jobGroupByCountry : jobGroupBy;
let groupedOtherJobs = jobGroupByItem == "location" ? otherLocationJobs : jobGroupByItem == "country" ? otherCountryJobs : otherDepartmentJobs;
let filteredJobs = {};
let filteredOtherJobs = {};
if (jobGroupByItem != "department") {
selectedLocations.forEach(location => {
const parsedLocation = JSON.parse(location);
if (jobGroupByItem === "location") {
const locationKey = parsedLocation.name || parsedLocation.city;
if (jobGroupByLocationName[locationKey]) {
filteredJobs[locationKey] = jobGroupByLocationName[locationKey];
}
if (parsedLocation.country == "Others") {
filteredOtherJobs = otherLocationJobs;
}
} else if (jobGroupByItem === "country") {
if (jobGroupByCountry[parsedLocation.country]) {
filteredJobs[parsedLocation.country] = jobGroupByCountry[parsedLocation.country];
}
if (parsedLocation.country == "Others") {
filteredOtherJobs = otherCountryJobs;
}
}
groupedJobs = filteredJobs;
groupedOtherJobs = filteredOtherJobs;
});
}
const orderedJobs = Object.keys(groupedJobs).sort().reduce(function (result, key) {
result[key] = groupedJobs[key];
result[key].sort((a, b) => a.title.toLowerCase() > b.title.toLowerCase ? 1 : -1);
return result;
}, {});
var jobListTemplate = "";
var portalNameUrl = (typeof khConfig.portalName !== 'undefined') ? khConfig.portalName + "/" : "";
const urlParams = new URLSearchParams(window.location.search);
const source = urlParams.get('source');
Object.keys(orderedJobs).forEach((departmentIndex) => {
jobListTemplate += '
' + departmentIndex + '' + orderedJobs[departmentIndex].length + (orderedJobs[departmentIndex].length == 1 ? ' job' : ' jobs') + '
';
orderedJobs[departmentIndex].forEach((job, index) => {
if (job && job.experience) {
const experienceRegex = /^[0-9]+[.]?[0-9]*[ ]*[+]?$/g;
job.experience = experienceRegex.test(job.experience) && job.experience > 0 ? job.experience + (+job.experience === 1 ? " year" : " years") : job.experience;
}
hasJobSalaryRangeItem = hasJobSalaryRangeField && job.salaryRangeFormat && job.salaryRange.maximum !== 0;
hasJobLocationItem = hasJobLocationField && job.jobLocations.length > 0;
hasJobExperienceItem = hasJobExperienceField && job.experience;
hasJobTypeItem = hasJobTypeField && job.jobType;
hasJobIdItem = hasJobIdField && job.jobNumber;
jobListTemplate +=
'
";
});
jobListTemplate += '
';
});
if (groupedOtherJobs && groupedOtherJobs.length) {
jobListTemplate += '
' + "Other Jobs" + '' + groupedOtherJobs.length + (groupedOtherJobs.length == 1 ? ' job' : ' jobs') + '
';
groupedOtherJobs.forEach((job, index) => {
if (job && job.experience) {
const experienceRegex = /^[0-9]+[.]?[0-9]*[ ]*[+]?$/g;
job.experience = experienceRegex.test(job.experience) && job.experience > 0 ? job.experience + (+job.experience === 1 ? " year" : " years") : job.experience;
}
hasJobSalaryRangeItem = hasJobSalaryRangeField && job.salaryRangeFormat && job.salaryRange.maximum !== 0;
hasJobLocationItem = hasJobLocationField && job.jobLocations.length > 0;
hasJobExperienceItem = hasJobExperienceField && job.experience;
hasJobTypeItem = hasJobTypeField && job.jobType;
hasJobIdItem = hasJobIdField && job.jobNumber;
jobListTemplate +=
'
";
});
jobListTemplate += '
';
}
var jobWidget = document.getElementById("kh-job-widget");
if (jobs.length > 0) {
jobWidget.innerHTML = jobListTemplate;
} else {
jobWidget.innerHTML = '
There are no job postings matching the filters.
';
}
}
function bindFilters() {
var departmentSelect = document.getElementById("kh-hiro-departments");
if (departmentSelect) {
departmentList.forEach(function (department) {
var listItem = document.createElement("li");
listItem.className = "kh-form-check";
departmentSelect.appendChild(listItem);
var input = document.createElement("input");
input.className = "kh-form-check-input";
input.type = "checkbox";
input.id = department.id;
input.value = department.id;
input.name = "departments";
input.onchange = function () { filterJobs() };
listItem.appendChild(input);
var label = document.createElement("label");
label.className = "kh-form-check-label kh-cursor-pointer kh-text-truncate-2 kh-pl-2";
label.setAttribute("for", department.id);
label.innerHTML = department.name;
listItem.appendChild(label);
});
}
var jobTypeSelect = document.getElementById("kh-hiro-jobType");
if (jobTypeSelect) {
jobTypeList.forEach(function (jobType) {
var listItem = document.createElement("li");
listItem.className = "kh-form-check";
jobTypeSelect.appendChild(listItem);
var input = document.createElement("input");
input.className = "kh-form-check-input";
input.type = "checkbox";
input.id = jobType.id;
input.value = jobType.id;
input.name = "jobTypes";
input.onchange = function () { filterJobs() };
listItem.appendChild(input);
var label = document.createElement("label");
label.className = "kh-form-check-label kh-cursor-pointer kh-text-truncate-2 kh-pl-2";
label.setAttribute("for", jobType.id);
label.innerHTML = jobType.name;
listItem.appendChild(label);
});
}
var locationSelect = document.getElementById("kh-hiro-locations");
if (locationSelect) {
// locationList: country >> city >> name
const groupedLocations = locationList.reduce((groups, location) => {
if (location.countryName) {
const country = location.countryName;
const city = location.city || "";
const name = location.name || location.city;
if (!name) return groups;
if (!groups[country]) groups[country] = {};
if (!groups[country][city]) groups[country][city] = [];
const exists = groups[country][city].some(function (l) { return l.name === name; });
if (!exists) groups[country][city].push({ name: name, id: location.id });
}
return groups;
}, {});
if (locationListWithNoCountry.length) {
groupedLocations["Others"] = locationListWithNoCountry.reduce((others, location) => {
const city = location.name ?? location.city;
if (city) others.push(city);
return others;
}, groupedLocations["Others"] ?? []);
}
for (const [country, citiesOrNames] of Object.entries(groupedLocations)) {
const isOthers = country === "Others";
if (isOthers) {
const countryItem = document.createElement("li");
countryItem.className = "kh-accordion-item kh-mt-3";
locationSelect.appendChild(countryItem);
const titleDiv = document.createElement("div");
titleDiv.className = "kh-accordion-title kh-d-flex kh-align-items-center kh-cursor-pointer";
titleDiv.innerHTML = `
`;
countryItem.appendChild(titleDiv);
const contentDiv = document.createElement("div");
contentDiv.className = "kh-accordion-content kh-ml-4";
contentDiv.style.display = "none";
countryItem.appendChild(contentDiv);
const cityList = document.createElement("ul");
cityList.className = "kh-list-unstyled kh-font-normal kh-my-2";
contentDiv.appendChild(cityList);
const othersList = Array.isArray(citiesOrNames) ? citiesOrNames : [];
othersList.forEach(function (cityVal) {
const cityItem = document.createElement("li");
cityItem.className = "kh-form-check";
cityList.appendChild(cityItem);
const cityCheckbox = document.createElement("input");
cityCheckbox.type = "checkbox";
cityCheckbox.className = "kh-form-check-input city-checkbox";
cityCheckbox.id = "others-" + String(cityVal).replace(/\s/g, "-") + country.replace(/\s/g, "-");
cityCheckbox.value = cityVal;
cityCheckbox.name = "locations";
cityCheckbox.onchange = function () {
const locationKey = JSON.stringify({ country: "Others", city: cityVal });
if (cityCheckbox.checked) selectedLocations.add(locationKey); else selectedLocations.delete(locationKey);
filterJobs();
};
cityItem.appendChild(cityCheckbox);
const cityLabel = document.createElement("label");
cityLabel.className = "kh-form-check-label kh-cursor-pointer kh-text-truncate-2 kh-pl-2";
cityLabel.setAttribute("for", cityCheckbox.id);
cityLabel.innerHTML = cityVal;
cityItem.appendChild(cityLabel);
});
titleDiv.addEventListener("click", function () {
const isExpanded = contentDiv.style.display === "block";
contentDiv.style.display = isExpanded ? "none" : "block";
});
const countryCheckbox = titleDiv.querySelector("input[type='checkbox']");
countryCheckbox.onchange = function () {
contentDiv.querySelectorAll("input[name='locations']").forEach(function (cb) {
cb.checked = countryCheckbox.checked;
const locationKey = JSON.stringify({ country: "Others", city: cb.value });
if (countryCheckbox.checked) selectedLocations.add(locationKey); else selectedLocations.delete(locationKey);
});
filterJobs();
};
continue;
}
const countryItem = document.createElement("li");
countryItem.className = "kh-accordion-item kh-mt-3";
locationSelect.appendChild(countryItem);
const titleDiv = document.createElement("div");
titleDiv.className = "kh-accordion-title kh-d-flex kh-align-items-center kh-cursor-pointer";
const countryId = "country-" + country.replace(/\s/g, "-");
titleDiv.innerHTML = `
`;
countryItem.appendChild(titleDiv);
const contentDiv = document.createElement("div");
contentDiv.className = "kh-accordion-content kh-ml-4";
contentDiv.style.display = "none";
countryItem.appendChild(contentDiv);
const cityList = document.createElement("ul");
cityList.className = "kh-list-unstyled kh-font-normal kh-my-2";
contentDiv.appendChild(cityList);
for (const [city, names] of Object.entries(citiesOrNames)) {
const cityItem = document.createElement("li");
cityItem.className = "kh-accordion-item kh-mt-2";
cityList.appendChild(cityItem);
const cityTitleDiv = document.createElement("div");
cityTitleDiv.className = "kh-accordion-title kh-d-flex kh-align-items-center kh-cursor-pointer kh-font-normal";
const cityId = "city-" + country.replace(/\s/g, "-") + "-" + (city || "default").replace(/\s/g, "-");
const cityCheckboxId = "city-checkbox-" + cityId;
cityTitleDiv.innerHTML = `
${city || "—"}
`;
cityItem.appendChild(cityTitleDiv);
const cityContentDiv = document.createElement("div");
cityContentDiv.className = "kh-accordion-content kh-ml-4";
cityContentDiv.style.display = "none";
cityItem.appendChild(cityContentDiv);
const nameList = document.createElement("ul");
nameList.className = "kh-list-unstyled kh-font-normal kh-my-2 kh-ml-4";
cityContentDiv.appendChild(nameList);
names.forEach(function (loc) {
const name = loc.name;
const locId = "loc-" + (loc.id != null ? loc.id : (country + "-" + city + "-" + name).replace(/\s/g, "-"));
const nameItem = document.createElement("li");
nameItem.className = "kh-form-check";
nameList.appendChild(nameItem);
const nameCheckbox = document.createElement("input");
nameCheckbox.type = "checkbox";
nameCheckbox.className = "kh-form-check-input city-checkbox";
nameCheckbox.id = locId;
nameCheckbox.value = name;
nameCheckbox.name = "locations";
nameCheckbox.onchange = function () {
handleNameCheckboxChange(country, citiesOrNames);
};
nameItem.appendChild(nameCheckbox);
const nameLabel = document.createElement("label");
nameLabel.className = "kh-form-check-label kh-cursor-pointer kh-text-truncate-2 kh-pl-2";
nameLabel.setAttribute("for", locId);
nameLabel.innerHTML = name;
nameItem.appendChild(nameLabel);
});
const cityCheckbox = cityTitleDiv.querySelector("input.city-group-checkbox");
cityCheckbox.onchange = function (e) {
e.stopPropagation();
const isChecked = cityCheckbox.checked;
names.forEach(function (loc) {
const name = loc.name;
const locationKey = JSON.stringify({ country, city, name });
const cb = document.getElementById("loc-" + String(loc.id != null ? loc.id : (country + "-" + city + "-" + name).replace(/\s/g, "-")));
if (cb) {
cb.checked = isChecked;
if (isChecked) selectedLocations.add(locationKey); else selectedLocations.delete(locationKey);
}
});
handleNameCheckboxChange(country, citiesOrNames);
};
cityTitleDiv.addEventListener("click", function (e) {
if (e.target === cityCheckbox || (e.target.tagName === "INPUT" && e.target.type === "checkbox" && e.target.classList.contains("city-group-checkbox"))) return;
const isExpanded = cityContentDiv.style.display === "block";
cityContentDiv.style.display = isExpanded ? "none" : "block";
});
}
titleDiv.addEventListener("click", function () {
const isExpanded = contentDiv.style.display === "block";
contentDiv.style.display = isExpanded ? "none" : "block";
});
const countryCheckbox = titleDiv.querySelector("input[type='checkbox']");
countryCheckbox.onchange = function () {
handleCountryCheckboxChange(country, citiesOrNames);
};
}
function handleNameCheckboxChange(country, citiesOrNames) {
const countryCheckbox = document.querySelector("#country-" + CSS.escape(country.replace(/\s/g, "-")));
if (!countryCheckbox) return;
var allChecked = true;
for (const city in citiesOrNames) {
if (!citiesOrNames.hasOwnProperty(city)) continue;
const names = citiesOrNames[city];
var cityAllChecked = true;
names.forEach(function (loc) {
const name = loc.name;
const locationKey = JSON.stringify({ country, city, name });
const cb = document.querySelector("#loc-" + CSS.escape(String(loc.id != null ? loc.id : (country + "-" + city + "-" + name).replace(/\s/g, "-"))));
if (cb) {
if (cb.checked) selectedLocations.add(locationKey); else selectedLocations.delete(locationKey);
cityAllChecked = cityAllChecked && cb.checked;
allChecked = allChecked && cb.checked;
}
});
const cityCheckboxId = "city-checkbox-city-" + country.replace(/\s/g, "-") + "-" + (city || "default").replace(/\s/g, "-");
const cityCheckboxEl = document.getElementById(cityCheckboxId);
if (cityCheckboxEl) cityCheckboxEl.checked = cityAllChecked;
}
countryCheckbox.checked = allChecked;
filterJobs();
}
function handleCountryCheckboxChange(country, citiesOrNames) {
const countryCheckbox = document.querySelector("#country-" + CSS.escape(country.replace(/\s/g, "-")));
if (!countryCheckbox) return;
const isChecked = countryCheckbox.checked;
for (const city in citiesOrNames) {
if (!citiesOrNames.hasOwnProperty(city)) continue;
const names = citiesOrNames[city];
names.forEach(function (loc) {
const name = loc.name;
const locationKey = JSON.stringify({ country, city, name });
const cb = document.querySelector("#loc-" + CSS.escape(String(loc.id != null ? loc.id : (country + "-" + city + "-" + name).replace(/\s/g, "-"))));
if (cb) {
cb.checked = isChecked;
if (isChecked) selectedLocations.add(locationKey); else selectedLocations.delete(locationKey);
}
});
const cityCheckboxEl = document.getElementById("city-checkbox-city-" + country.replace(/\s/g, "-") + "-" + (city || "default").replace(/\s/g, "-"));
if (cityCheckboxEl) cityCheckboxEl.checked = isChecked;
}
filterJobs();
}
}
}
window.filterJobs = function () {
var departmentId = getCheckedBoxes("departments");
var jobTypeId = getCheckedBoxes("jobTypes");
var locationName = getCheckedBoxes("locations");
var searchText = document.getElementById("kh-hiro-searchText")?.value;
if (locationName || departmentId || searchText || jobTypeId) {
groupJobs(departmentId, locationName, searchText, jobTypeId);
} else {
bindJobs(jobList);
}
};
function getCheckedBoxes(chkboxName) {
var checkboxes = document.getElementsByName(chkboxName);
var checkboxesChecked = [];
if (chkboxName === "locations") {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i].value);
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkboxesChecked.push(parseInt(checkboxes[i].value));
}
}
}
return checkboxesChecked;
}
window.clearAllFilters = function () {
document.querySelectorAll('input[name="departments"]:checked').forEach(el => el.checked = false);
document.querySelectorAll('input[name="locations"]:checked').forEach(el => el.checked = false);
document.querySelectorAll('input[name="jobTypes"]:checked').forEach(el => el.checked = false);
document.getElementById("kh-hiro-searchText").value = "";
bindJobs(jobList);
};
function groupJobs(departmentId, locationName, searchText, jobTypeId) {
var jobs = jobList.filter(function (j) {
var lNames = j.jobLocations.filter(lc => lc.name).map(l => l.name);
var lCities = j.jobLocations.filter(lc => lc.city).map(l => l.city);
return (departmentId.length === 0 || departmentId.includes(j.departmentId)) && (jobTypeId.length === 0 || jobTypeId.includes(j.jobType)) && (locationName.length === 0 || (lNames && lNames.length && locationName.some(ln => lNames.includes(ln))) || (lCities && lCities.length && locationName.some(lc => lCities.includes(lc))));
});
searchText === "" ? bindJobs(jobs) : bindJobs(jobs.filter(function (j) { return (j.title.toLowerCase().indexOf(searchText.toLowerCase()) !== -1 || j.departmentName.toLowerCase().indexOf(searchText.toLowerCase()) !== -1); }));
}
JobWidget();
var date = new Date().getFullYear();
if (document.getElementById("year")) {
document.getElementById("year").innerText = date;
}
function accordion() {
const accordionTitles = document.querySelectorAll(".kh-accordion-title");
accordionTitles.forEach((accordionTitle) => {
accordionTitle.addEventListener("click", () => {
if (accordionTitle.classList.contains("kh-is-open")) {
accordionTitle.classList.remove("kh-is-open");
} else {
accordionTitle.classList.add("kh-is-open");
}
});
});
}
}
})();