File: D:/HostingSpaces/SBogers10/rentman2019.komma.pro/resources/assets/js/site/recruiteeHandler.js
/* ==========================================================================
Recruitee handler
- Provide the timeline with new updates if needed.
========================================================================== */
export const RecruiteeHandler = {
element: null,
readMoreTranslation: null,
jobs: [],
jobKeys: [],
amountOfJobs: 0,
recruiteeOverlay: null,
overlayedJob: {
title: null,
description: null,
requirement: null,
applyLink: null,
navigation: null,
previous: null,
next: null,
},
init: function () {
RecruiteeHandler.element = document.getElementById('recruitee-jobs');
RecruiteeHandler.recruiteeOverlay = document.querySelector('.js-recruitee-job-overlay');
if(isset(RecruiteeHandler.element)) {
RecruiteeHandler.readMoreTranslation = RecruiteeHandler.element.getAttribute('data-read-more');
Ajax.get('https://rentman1.recruitee.com/api/offers', RecruiteeHandler.handleAjax);
}
if(isset(RecruiteeHandler.recruiteeOverlay)) {
// Bind element to overlayed job object
RecruiteeHandler.overlayedJob.title = RecruiteeHandler.recruiteeOverlay.querySelector('.js-recruitee-job-title');
RecruiteeHandler.overlayedJob.description = RecruiteeHandler.recruiteeOverlay.querySelector('.js-recruitee-job-description');
RecruiteeHandler.overlayedJob.requirement = RecruiteeHandler.recruiteeOverlay.querySelector('.js-recruitee-job-requirements');
RecruiteeHandler.overlayedJob.applyLink = RecruiteeHandler.recruiteeOverlay.querySelector('.js-recruitee-job-link');
RecruiteeHandler.overlayedJob.navigation = RecruiteeHandler.recruiteeOverlay.querySelector('.js-recruitee-job-overlay-navigation');
RecruiteeHandler.overlayedJob.previous = RecruiteeHandler.recruiteeOverlay.querySelector('.js-recruitee-job-overlay-previous');
RecruiteeHandler.overlayedJob.next = RecruiteeHandler.recruiteeOverlay.querySelector('.js-recruitee-job-overlay-next');
// Add toggle (close) events to all the close buttons
const closeButtons = RecruiteeHandler.recruiteeOverlay.getElementsByClassName('js-close-recruitee-job-overlay');
for( let i = 0; i < closeButtons.length; i++) {
closeButtons[i].addEventListener('click', function () {
RecruiteeHandler.toggleRecruiteeOverlay();
});
}
// Add next and previous events to all the navigation buttons
RecruiteeHandler.overlayedJob.previous.addEventListener('click', function () {
RecruiteeHandler.setJob(this.getAttribute('data-job-id'));
});
RecruiteeHandler.overlayedJob.next.addEventListener('click', function () {
RecruiteeHandler.setJob(this.getAttribute('data-job-id'));
});
}
},
handleAjax: function (data) {
if(data.status !== 200) {
console.error('RecruiteHandler: Unexpected response ' + data.status);
return;
}
let recruiteeHtml = RecruiteeHandler.element.innerHTML;
const response = JSON.parse(data.response);
RecruiteeHandler.amountOfJobs = response.offers.length;
for(let i = 0; i < RecruiteeHandler.amountOfJobs; i++) {
recruiteeHtml = RecruiteeHandler.appendJob(response.offers[i], recruiteeHtml);
}
RecruiteeHandler.element.innerHTML = recruiteeHtml;
const jobElements = RecruiteeHandler.element.getElementsByClassName('js-open-recruitee-job-model');
for(let i = 0; i < jobElements.length; i++) {
const jobElement = jobElements[i];
jobElement.addEventListener('click', function () {
RecruiteeHandler.setJob(this.getAttribute('data-job-id'));
RecruiteeHandler.toggleRecruiteeOverlay();
});
}
},
setJob: function (jobId) {
// Get the saved job object
const job = RecruiteeHandler.jobs[jobId];
// Update the overlayed job to the clicked job
RecruiteeHandler.overlayedJob.title.innerHTML = job.title;
RecruiteeHandler.overlayedJob.description.innerHTML = job.description;
RecruiteeHandler.overlayedJob.requirement.innerHTML = job.requirements;
RecruiteeHandler.overlayedJob.applyLink.setAttribute('href', job.careers_apply_url);
const jobKey = RecruiteeHandler.jobKeys.indexOf(jobId);
if(jobKey !== -1) {
let previousKey = jobKey - 1;
let nextKey = jobKey + 1;
// Handle the exceptions
if(previousKey <= -1) previousKey = RecruiteeHandler.jobKeys.length - 1;
if(nextKey === RecruiteeHandler.jobKeys.length) nextKey = 0;
// Set the next and previous
RecruiteeHandler.overlayedJob.previous.setAttribute('data-job-id', RecruiteeHandler.jobKeys[previousKey]);
RecruiteeHandler.overlayedJob.next.setAttribute('data-job-id', RecruiteeHandler.jobKeys[nextKey]);
}
},
toggleRecruiteeOverlay: function () {
// If there is none or only 1 job available, we hide the previous and next buttons
if(RecruiteeHandler.amountOfJobs <= 1 && isset(RecruiteeHandler.overlayedJob.navigation)) {
RecruiteeHandler.overlayedJob.navigation.classList.add('is-hidden');
}
// Clear previously locked scroll on the body
bodyScrollLock.enableBodyScroll(RecruiteeHandler.recruiteeOverlay);
// If the overlayMenu is already active, collapse it and quit
if (document.body.classList.contains('is-recruitee-job-overlay-active')) {
// Trigger fade out animation
document.body.classList.add('is-recruitee-job-overlay-fade-out');
// Then remove the classes
setTimeout(function () {
// Reset the scroll position on close to top
const overlayScroller = RecruiteeHandler.recruiteeOverlay.querySelector('.js-recruitee-job-overlay-scroller');
overlayScroller.scrollTop = 0;
document.body.classList.remove('is-recruitee-job-overlay-active');
document.body.classList.remove('is-recruitee-job-overlay-fade-out');
}, 300);
return;
}
// Lock scrolling on the body
bodyScrollLock.disableBodyScroll(RecruiteeHandler.recruiteeOverlay);
// Toggle active overlayMenu by setting a class on the body
document.body.classList.toggle('is-recruitee-job-overlay-active');
},
appendJob: function (job, html) {
RecruiteeHandler.jobs['job-' + job.id] = job;
RecruiteeHandler.jobKeys.push('job-' + job.id);
html += '<div class="c-recruitee-jobs__item js-open-recruitee-job-model" target="_blank" data-job-id="job-' + job.id + '">';
html += '<div class="c-recruitee-jobs__heading">';
html += '<h4 class="c-recruitee-jobs__title">' + job.title + '</h4>';
if(isset(job.department)) html += '<span class="c-recruitee-jobs__department">' + job.department + '</span>';
html += '</div>';
html += '<span class="c-recruitee-jobs__link">' + RecruiteeHandler.readMoreTranslation + '</span>';
html += '<div class="c-recruitee-jobs__icon">' +
' <span class="c-recruitee-jobs__arrow">' +
' <svg width="16px" height="12px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
' <path fill="currentColor" d="M13.3998179,6.7826087 L0.761575693,6.7826087 C0.340969052,6.7826087 1.12798659e-13,6.43222285 1.12798659e-13,6 C1.12798659e-13,5.56777715 0.340969052,5.2173913 0.761575693,5.2173913 L13.3998179,5.2173913 L9.62273769,1.33599661 C9.32532388,1.0303689 9.32532388,0.534848487 9.62273769,0.22922078 C9.9201515,-0.0764069266 10.4023546,-0.0764069266 10.6997684,0.22922078 L15.7769396,5.44661208 C16.0743535,5.75223979 16.0743535,6.24776021 15.7769396,6.55338792 L10.6997684,11.7707792 C10.4023546,12.0764069 9.9201515,12.0764069 9.62273769,11.7707792 C9.32532388,11.4651515 9.32532388,10.9696311 9.62273769,10.6640034 L13.3998179,6.7826087 Z"></path>' +
' </svg>' +
' </span>' +
' </div>' +
'</div>';
return html;
}
};