File: D:/HostingSpaces/SBogers10/boldt.komma.pro/wwwroot/js/site/app.js
/* ==========================================================================
Browser Handler
========================================================================== */
var BrowserHandler = {
userAgent: '',
browserInfo: '',
init: function init() {
BrowserHandler.userAgent = window.navigator.userAgent;
BrowserHandler.browserInfo = BrowserHandler.getBrowserInfo();
BrowserHandler.handleIE();
BrowserHandler.handleSafari();
},
handleIE: function handleIE() {
// Detect versions below ie11
var msie = BrowserHandler.userAgent.indexOf('MSIE ');
var ielt11 = msie > 0; // Detect ie11
var ie11 = !!navigator.userAgent.match(/Trident.*rv\:11\./); // If Internet Explorer
if (ielt11 || ie11) {
// Default version
var version = '11'; // Way to detect version < 11
if (ielt11) version = parseInt(BrowserHandler.userAgent.substring(msie + 5, BrowserHandler.userAgent.indexOf(".", msie))); // Append classes to HTML (we have to do this separately because else ie will fail)
document.body.classList.add('ie');
document.body.classList.add('v' + version);
}
},
// Fallback for older safari version
handleSafari: function handleSafari() {
if (BrowserHandler.browserInfo.name === 'Safari' && BrowserHandler.browserInfo.version <= 10) {
document.getElementsByTagName('html')[0].classList.add('ie');
}
},
getBrowserInfo: function getBrowserInfo() {
var ua = navigator.userAgent,
tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
return {
name: 'IE ',
version: tem[1] || ''
};
}
if (M[1] === 'Chrome') {
tem = ua.match(/\bOPR\/(\d+)/);
if (tem != null) {
return {
name: 'Opera',
version: tem[1]
};
}
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/(\d+)/i)) != null) {
M.splice(1, 1, tem[1]);
}
return {
name: M[0],
version: M[1]
};
}
};
BrowserHandler.init();
/* ==========================================================================
| Prevent Bots handler
|
| We named this chocolate factory and belonging confusing js hooks
| to prevent smart bots from blocking these variable or functions.
|
========================================================================== */
var ChocolateFactory = {
bannedVisitor: [],
/** Get all the chocolate factory and start
* Looping through those start flashing tickets
*/
enter: function enter() {
var chocolateFactories = document.querySelectorAll('.js-chocolate-factory');
if (isset(chocolateFactories)) {
var amountOfChocolateFactories = chocolateFactories.length;
for (var i = 0; i < amountOfChocolateFactories; i++) {
var ChocolateBar = chocolateFactories[i];
ChocolateFactory._flashTicket(ChocolateBar);
}
}
},
/**
* If factory has a golden ticket
* Then we can make them go on the tour if there has been click on the ticket
*
* @param chocolateBar
* @private
*/
_flashTicket: function _flashTicket(chocolateBar) {
// Try get the ticket from the chocolateBar
var goldenTicket = chocolateBar.querySelector('.js-golden-ticket'); // Only continue if chocolate bar has a golden ticket
if (isset(goldenTicket)) {
goldenTicket.addEventListener('click', function () {
ChocolateFactory.enjoyTheTour(chocolateBar);
});
} else {
console.log('To bad, no golden tickets has been found.');
}
},
/**
* Start the tour through the factory
* And get the names and properties of the members of the group
* If there are members in the group of course
*
* @param chocolateFactory
*/
enjoyTheTour: function enjoyTheTour(chocolateFactory) {
// Ask for the tour group
var tourGroup = chocolateFactory.querySelectorAll('input, textarea');
if (isset(tourGroup)) {
// For each visitor we want a belonging Oompa Loompa
var oompaLoompas = {};
var amountOfOompaLoompas = 0;
var tourGroupSize = tourGroup.length;
for (var i = 0; i < tourGroupSize; i++) {
// Get the visitor from the group
var visitor = tourGroup[i]; // Ask for its name
var visitorName = visitor.getAttribute('name'); // Check if the visitor is banned
if (ChocolateFactory._isVisitorBanned(visitorName)) continue;
oompaLoompas[visitorName] = ChocolateFactory._getArrangement(visitor);
amountOfOompaLoompas++;
} // Check for insurance that there are oompa loompas
if (amountOfOompaLoompas === 0) return; // Send submit request
ChocolateFactory._finishTour(oompaLoompas, chocolateFactory);
} else {
console.log('To bad, no members to visit this factory');
}
},
/**
* Check if the visitor name isn't allow
*
* @param visitorName
* @returns {boolean}
* @private
*/
_isVisitorBanned: function _isVisitorBanned(visitorName) {
if (ChocolateFactory.bannedVisitor.indexOf(visitorName) !== -1) {
return true;
}
return false;
},
/**
* Most get visitor have a normal arrangement
* But sometimes there are special cases
* Like a Selector or checkbox
*
* @param visitor
* @returns {*}
* @private
*/
_getArrangement: function _getArrangement(visitor) {
var visitorType = visitor.nodeName;
switch (visitorType) {
default:
return visitor.value;
}
},
/**
* Finish the tour
* If successful show thanks message
* Or show defined error message or fallback
*
* @param group
* @param chocolateFactory
* @returns {*|void}
* @private
*/
_finishTour: function _finishTour(group, chocolateFactory) {
// Add willie to the group
group = ChocolateFactory._addWillieWonka(group); // Get the gate for finish the tour
var gate = '/contact/process';
try {
Ajax.post(gate, group, function (HttpRequest) {
var response = JSON.parse(HttpRequest.response);
switch (HttpRequest.status) {
case 200:
return ChocolateFactory._thanksForVisiting(response.redirectUrl);
case 422:
return ChocolateFactory._giveFeedbackToMembers(response.errors, chocolateFactory);
default:
break;
}
return ChocolateFactory._unknownGapInFactory(chocolateFactory);
});
} catch (e) {
return ChocolateFactory._unknownGapInFactory(chocolateFactory);
}
},
/**
* Add willie wonka to the group
* Ps... it actually the secret code!
*
* @param group
* @returns {*}
* @private
*/
_addWillieWonka: function _addWillieWonka(group) {
group._willie = 'wonka';
return group;
},
/**
* Add the feedback to the desired area.
* Most likely to the visitor directly, but sometime to the factory desired feedback area
*
* @param errors
* @param chocolateFactory
* @private
*/
_giveFeedbackToMembers: function _giveFeedbackToMembers(errors, chocolateFactory) {
// Grab the factory feedback area
var feedbackArea = chocolateFactory.querySelector('.js-error-area'); // Clear the current html
if (isset(feedbackArea)) feedbackArea.innerHTML = ''; // Clear the previous marked jackets
ChocolateFactory._clearPreviousMarkedJackets(chocolateFactory);
Object.keys(errors).forEach(function (visitor) {
var jacket = null;
var visitorFeedbackArea = null; // Honey elements doesn't has a accessible element
if (visitor !== '_honey' && visitor !== '_secretCode') {
// Grab the visitor
var visitorNode = chocolateFactory.querySelector('#' + visitor); // Find the jacket of a visitor
jacket = ChocolateFactory._grabVisitorJacket(visitorNode); // If found get the desired area
if (isset(jacket)) visitorFeedbackArea = jacket.querySelector('.js-form-element-error'); // Clear the current html
if (isset(visitorFeedbackArea)) visitorFeedbackArea.innerHTML = '';
} // Get the feedback for this visitor
var visitorFeedback = errors[visitor]; // Spit out each line
var visitorFeedbackAmount = visitorFeedback.length;
for (var i = 0; i < visitorFeedbackAmount; i++) {
var visitorFeedbackLine = visitorFeedback[i]; // Honey elements doesn't has a accessible element area
if (visitor !== '_honey' && visitor !== '_secretCode') {
// Mark the jacket
if (isset(jacket)) jacket.classList.add('has-error'); // Append feedback to visitor feedback area if defined
if (isset(visitorFeedbackArea)) {
var currentFeedbackArea = visitorFeedbackArea.innerHTML;
currentFeedbackArea += '<span>' + capitalizeFirstLetter(visitorFeedbackLine) + '</span>';
visitorFeedbackArea.innerHTML = currentFeedbackArea;
}
} // Append feedback to factory feedback area if defined
if (isset(feedbackArea)) {
var _currentFeedbackArea = feedbackArea.innerHTML;
_currentFeedbackArea += '<li>' + capitalizeFirstLetter(visitorFeedbackLine) + '</li>';
feedbackArea.innerHTML = _currentFeedbackArea;
}
}
});
},
/**
* Clear the previous marked jackets
*
* @param chocolateFactory
* @private
*/
_clearPreviousMarkedJackets: function _clearPreviousMarkedJackets(chocolateFactory) {
var markedJackets = chocolateFactory.querySelectorAll('.has-error');
var markedJacketsAmount = markedJackets.length;
for (var i = 0; i < markedJacketsAmount; i++) {
markedJackets[i].classList.remove('has-error');
}
},
/**
* Grab the jacket of the visitor
*
* @param visitor
* @returns {null|*|(() => (Node | null))|ActiveX.IXMLDOMNode|(Node & ParentNode)}
* @private
*/
_grabVisitorJacket: function _grabVisitorJacket(visitor) {
// Check if visitor is defined
if (!isset(visitor)) return null; // Do loop settings
currentLayer = visitor;
safetyBreak = 0; // Grab the next layer till it is the jacket (or safetyBreak has been reached
do {
safetyBreak++;
currentLayer = currentLayer.parentNode;
if (currentLayer.classList.contains('js-form-element')) return currentLayer;
} while (currentLayer.tagName !== 'BODY' && safetyBreak <= 10);
return null;
},
/**
* Redirect the visitor to the thanks page
*
* @param nextStop
* @private
*/
_thanksForVisiting: function _thanksForVisiting(nextStop) {
window.location = nextStop;
},
/**
* Unknown error occurred, log the error
*
* @param chocolateFactory
* @private
*/
_unknownGapInFactory: function _unknownGapInFactory(chocolateFactory) {
console.log(chocolateFactory);
console.log('ChocolateFactory: Unkown Error');
}
};
ChocolateFactory.enter();
/* ==========================================================================
Cookie handler
- Primary usage for toggling the cookie message and/or switch
========================================================================== */
var CookieHandler = {
cookieBar: null,
cookieOverlay: null,
cookieMessage: null,
cookieSwitch: null,
cookieFadeOutAnimationDuration: 400,
acceptTracking: false,
// Initialize cookie handler
init: function init() {
// Bind cookie bar or overlay to cookieMessage
CookieHandler.cookieMessage = document.querySelector('.js-cookie-bar, .js-cookie-overlay'); // Bind cookie bar to cookieBar
CookieHandler.cookieBar = document.querySelector('.js-cookie-bar'); // If isset init the functions for cookie bar
if (isset(CookieHandler.cookieBar)) {
CookieHandler.initCookieBar();
} else {
// Else try to connect cookie overlay with tracking to cookieOverlay
CookieHandler.cookieOverlay = document.querySelector('.js-cookie-overlay'); // If isset init the functions for cookie overlay
if (isset(CookieHandler.cookieOverlay)) {
CookieHandler.initCookieOverlay();
}
} // If either type of cookie has been found check if settings are defined
if (isset(CookieHandler.cookieMessage)) {
CookieHandler.checkForCookieSettings();
} // Bind cookie switch to Handler
CookieHandler.cookieSwitch = document.querySelector('.js-cookie-switch'); // If isset init the functions for cookie switch
if (isset(CookieHandler.cookieSwitch)) {
CookieHandler.initCookieSwitch();
}
},
// Init the cookie bar actions
initCookieBar: function initCookieBar() {
var closeButton = CookieHandler.cookieBar.querySelector('.js-disable-cookie-bar');
if (isset(closeButton)) {
closeButton.addEventListener('click', CookieHandler.closeCookieMessage);
}
},
// Init the cookie overlay actions
initCookieOverlay: function initCookieOverlay() {
// Open the cookie settings event
var openCookieSettingsButton = CookieHandler.cookieMessage.querySelector('.js-change-cookies-settings');
if (isset(openCookieSettingsButton)) {
openCookieSettingsButton.addEventListener('click', CookieHandler.openCookieSettings);
} // Toggle of the tracking input
var toggleTrackingInput = CookieHandler.cookieMessage.querySelector('.c-cookie-type__input--tracking');
if (isset(toggleTrackingInput)) {
if (toggleTrackingInput.checked === true) {
CookieHandler.acceptTracking = true;
}
toggleTrackingInput.addEventListener('change', CookieHandler.toggleTrackingSetting);
} // Accept / Save cookies button event
var acceptButton = CookieHandler.cookieMessage.querySelector('.js-accept-cookies');
if (isset(acceptButton)) {
acceptButton.addEventListener('click', CookieHandler.setCookieSettings);
}
},
// Init the cookie switch actions
initCookieSwitch: function initCookieSwitch() {
// Toggle of the tracking input
var toggleTrackingInput = CookieHandler.cookieSwitch.querySelector('.c-cookie-type__input--tracking');
if (isset(toggleTrackingInput)) {
// Force the state of the cookie switch input because the pop-up is forced on checked
// while the switch checks by php if the cookie really exist or not
if (toggleTrackingInput.checked === true) {
CookieHandler.acceptTracking = true;
} else {
CookieHandler.acceptTracking = false;
}
toggleTrackingInput.addEventListener('change', CookieHandler.toggleTrackingSetting);
} // Save cookies button event
var saveButton = CookieHandler.cookieSwitch.querySelector('.js-save-cookie-settings');
if (isset(saveButton)) {
saveButton.addEventListener('click', function () {
CookieHandler.cookieFadeOutAnimationDuration = 0; // On the switch click we want no delay :)
CookieHandler.setCookieSettings();
});
}
},
checkForCookieSettings: function checkForCookieSettings() {
if (Cookie.get('cookieMessage')) {
CookieHandler.cookieMessage.classList.add('is-accepted');
} else {
CookieHandler.cookieMessage.classList.remove('is-accepted');
}
},
closeCookieMessage: function closeCookieMessage() {
Cookie.set('cookieMessage', true, 90);
CookieHandler.cookieMessage.classList.add('fade-out');
},
openCookieSettings: function openCookieSettings() {
CookieHandler.cookieOverlay.querySelector('.js-cookie-settings').classList.remove('is-hidden');
CookieHandler.cookieOverlay.querySelector('.js-cookie-info').classList.add('is-hidden');
},
toggleTrackingSetting: function toggleTrackingSetting() {
if (CookieHandler.acceptTracking) {
CookieHandler.acceptTracking = false;
} else {
CookieHandler.acceptTracking = true;
}
},
setCookieSettings: function setCookieSettings() {
// Set tracking cookie or delete it if isset according to the desired settings
if (CookieHandler.acceptTracking) {
Cookie.set('trackingCookieAccepted', 'true', 90);
} else {
if (Cookie.get('trackingCookieAccepted')) {
Cookie.erase('trackingCookieAccepted');
}
}
CookieHandler.closeCookieMessage(); // Reload after animation to automatically trigger the tracking after accepting it
setTimeout(function () {
location.reload();
}, CookieHandler.cookieFadeOutAnimationDuration);
}
};
CookieHandler.init();
/* ==========================================================================
Input handler
This handler can be remove when the css support for :focus-within is better
========================================================================== */
var InputHandler = {
inputFields: null,
init: function init() {
// Get the form inputs
InputHandler.inputFields = document.querySelectorAll('form input, form textarea');
var inputLength = InputHandler.inputFields.length;
for (var i = 0; i < inputLength; i++) {
var input = InputHandler.inputFields[i];
var inputId = input.getAttribute('id'); // Check if there is an id on the input
if (isset(inputId)) {
var inputLabel = document.querySelector('form label[for="' + inputId + '"]'); // // And if there is a belonging label
if (isset(inputLabel)) {
InputHandler.addEventListenersToInput(input);
}
}
}
},
addEventListenersToInput: function addEventListenersToInput(input) {
// Add the fill class and trigger removeFocus so the input will be automatic be marked as filled or not
parentElement = input.parentNode;
parentElement.classList.add('filled');
InputHandler.removeFocus(input);
input.addEventListener('focus', function () {
// We loop through the input elements because autocomplete (on chrome) triggers al the focus elements but none focus out
var inputLength = InputHandler.inputFields.length;
for (var i = 0; i < inputLength; i++) {
var loopedInput = InputHandler.inputFields[i]; // Trigger add focus on this focused element
if (loopedInput === input) {
InputHandler.addFocus(this);
} // Remove focus on all other input/textarea elements
else {
InputHandler.removeFocus(loopedInput);
}
}
});
input.addEventListener('focusout', function () {
InputHandler.removeFocus(this);
});
},
addFocus: function addFocus(input) {
if (isset(input)) {
var inputId = input.getAttribute('id');
parentElement = input.parentNode;
parentElement.classList.add('focused');
parentElement.classList.add('filled'); // If there is a error message remove it on focus
var errorMessage = document.querySelector('form .error-message#' + inputId + '-error');
if (isset(errorMessage)) {
errorMessage.classList.add('fade-out');
}
}
},
// Reset the label location only if the input is empty
removeFocus: function removeFocus(input) {
if (isset(input)) {
var inputValue = input.value;
parentElement = input.parentNode;
parentElement.classList.remove('focused');
if (!isset(inputValue) || inputValue === '') {
parentElement.classList.remove('filled');
}
}
}
};
InputHandler.init();
/* ==========================================================================
Google Maps handler
- https://developers.google.com/maps/documentation/javascript/adding-a-google-map
========================================================================== */
var MapsHandler = {
map: '',
key: 'AIzaSyCVGPUmRmQRxXvzzWu3Xyu77XebQxQ-f4Y',
location: {
lat: 51.033112,
lng: 5.329608
},
styling: '',
init: function init() {
// Get map by id
MapsHandler.map = document.getElementById('map'); // Check if a map is defined
if (isset(MapsHandler.map)) {
if (MapsHandler.map.hasAttribute('data-google-lat')) MapsHandler.location.lat = parseFloat(MapsHandler.map.getAttribute('data-google-lat'));
if (MapsHandler.map.hasAttribute('data-google-lng')) MapsHandler.location.lng = parseFloat(MapsHandler.map.getAttribute('data-google-lng'));
MapsHandler.setCustomStyling(); // See if google variable exists
if (typeof google == 'undefined' || typeof google.maps == 'undefined') {
// Load external script
getScript('https://maps.googleapis.com/maps/api/js?key=' + MapsHandler.key, MapsHandler.drawMap);
} else {
MapsHandler.drawMap();
}
}
},
drawMap: function drawMap() {
// Create a map
var map = new google.maps.Map(MapsHandler.map, {
zoom: 12,
center: MapsHandler.location,
disableDefaultUI: true,
styles: MapsHandler.styling
}); // Add a marker
var marker = new google.maps.Marker({
position: MapsHandler.location,
map: map,
icon: '/img/googleMapsMarker.png'
});
},
setCustomStyling: function setCustomStyling() {
MapsHandler.styling = [{
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [{
"hue": "#2c2e33"
}, {
"saturation": 7
}, {
"lightness": 19
}, {
"visibility": "on"
}]
}, {
"featureType": "administrative.locality",
"elementType": "geometry.fill",
"stylers": [{
"hue": "#ff0000"
}]
}, {
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#447abe"
}]
}, {
"featureType": "administrative.neighborhood",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#142c45"
}, {
"lightness": "65"
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"hue": "#ffffff"
}, {
"saturation": -100
}, {
"lightness": 100
}, {
"visibility": "simplified"
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"hue": "#ffffff"
}, {
"saturation": -100
}, {
"lightness": 100
}, {
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"hue": "#bbc0c4"
}, {
"saturation": -93
}, {
"lightness": 31
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"hue": "#bbc0c4"
}, {
"saturation": -93
}, {
"lightness": 31
}, {
"visibility": "on"
}]
}, {
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [{
"hue": "#bbc0c4"
}, {
"saturation": -93
}, {
"lightness": -2
}, {
"visibility": "simplified"
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"hue": "#e9ebed"
}, {
"saturation": -90
}, {
"lightness": -8
}, {
"visibility": "simplified"
}]
}, {
"featureType": "transit",
"elementType": "all",
"stylers": [{
"hue": "#e9ebed"
}, {
"saturation": 10
}, {
"lightness": 69
}, {
"visibility": "on"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"hue": "#e9ebed"
}, {
"saturation": -78
}, {
"lightness": 67
}, {
"visibility": "simplified"
}]
}];
}
};
MapsHandler.init();
/* ==========================================================================
NavigationHandler handler
- Primary usage for mobile NavigationHandler
- Secondary if site used a pop-up/slide-in menu
========================================================================== */
var NavigationHandler = {
navElement: '',
scrolled: 0,
isActive: false,
// Initialize click event
init: function init() {
// Bind Navigation to Handler
NavigationHandler.navElement = document.getElementById('mobile-navigation'); // Bind clicks to menu button
var mobileMenuButton = document.querySelector('.js-nav-trigger');
if (isset(mobileMenuButton)) {
mobileMenuButton.addEventListener('click', function () {
NavigationHandler.open();
});
} // Bind clicks to sticky menu button
var stickyMenuButton = document.getElementById('sticky-menu-trigger');
if (isset(stickyMenuButton)) {
stickyMenuButton.addEventListener('click', function () {
NavigationHandler.open();
});
}
var mobileShade = document.getElementById('mobile-shader');
if (isset(mobileShade)) {
mobileShade.addEventListener('click', function () {
NavigationHandler.close();
});
}
var mobileClose = document.getElementById('mobile-close');
if (isset(mobileClose)) {
mobileClose.addEventListener('click', function () {
NavigationHandler.close();
});
}
if (isset(NavigationHandler.navElement)) {
setTimeout(function () {
NavigationHandler.navElement.classList.add('allow-animation');
}, 500);
}
},
// Toggle navigation
toggle: function toggle() {
if (!NavigationHandler.isActive) NavigationHandler.open();else NavigationHandler.close();
},
// Open Navigation
open: function open() {
console.log('open');
NavigationHandler.scrolled = window.pageYOffset;
NavigationHandler.navElement.classList.add('active');
NavigationHandler.navElement.classList.add('shader-active');
NavigationHandler.isActive = true;
setTimeout(function () {
document.body.classList.add('preventScroll');
}, 400);
},
// Close Navigation
close: function close() {
NavigationHandler.navElement.classList.remove('active');
NavigationHandler.navElement.classList.remove('shader-active');
NavigationHandler.isActive = false;
document.body.classList.remove('preventScroll');
window.scrollTo(0, NavigationHandler.scrolled);
}
};
NavigationHandler.init();
/* ==========================================================================
Navigation handler
- Handles the showing and hiding of the overlay-menu component which has the proper classes.
========================================================================== */
var OverlayMenuHandler = {
// init: function () {
// const overlayMenuTrigger = document.querySelector('.js-overlay-menu-trigger');
// OverlayMenuHandler.initOverlayMenu(overlayMenuTrigger);
// },
init: function init() {
var overlayMenuTriggerList = document.querySelectorAll('.js-overlay-menu-trigger');
var overlayMenuTriggerListCount = overlayMenuTriggerList.length;
if (isset(overlayMenuTriggerList) && overlayMenuTriggerListCount !== 0) {
for (var i = 0; i < overlayMenuTriggerListCount; i++) {
var overlayMenuTrigger = overlayMenuTriggerList[i];
OverlayMenuHandler.initOverlayMenu(overlayMenuTrigger);
}
}
},
initOverlayMenu: function initOverlayMenu(overlayMenuTrigger) {
overlayMenuTrigger.addEventListener('click', OverlayMenuHandler.toggleOverlayMenu, false);
},
toggleOverlayMenu: function toggleOverlayMenu(event) {
var overlayMenuNav = document.querySelector('.js-overlay-menu'); // const overlayMenuBody = overlayMenu.querySelector('.js-overlay-menu-persist-scrolling');
// Bail if overlayMenu doesn't exist
if (!overlayMenuNav) return; // Clear previously locked scroll on the body
bodyScrollLock.enableBodyScroll(overlayMenuNav); // If the overlayMenu is already active, collapse it and quit
if (document.body.classList.contains('is-overlay-menu-active')) {
document.body.classList.remove('is-overlay-menu-active');
return;
} // Lock scrolling on the body
bodyScrollLock.disableBodyScroll(overlayMenuNav); // Toggle active overlayMenu by setting a class on the body
document.body.classList.toggle('is-overlay-menu-active');
}
};
OverlayMenuHandler.init();
var pjaxReady = false;
var hasAnimationEnded = false;
var isAnimationReversed = false;
var overlayElement = document.querySelector('.pageTransitionOverlay');
var transitionEvent = whichTransitionEvent();
var linkDestination;
if (overlayElement) {
init();
}
function init() {
document.body.classList.remove('preventScroll');
document.addEventListener("pjax:error", pjaxFailed);
var links = document.querySelectorAll('a[href]:not(.pjax)');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function (e) {
if (isset(e.currentTarget.href)) {
linkDestination = e.currentTarget.href;
startAnimation();
e.preventDefault();
return false;
}
});
}
MapsHandler.init();
NavigationHandler.init();
initForm();
overlayElement.classList.remove('down');
overlayElement.classList.remove('done');
}
function initForm() {
if (document.querySelectorAll('form').length > 0) {
console.log('initForm');
var formPjax = new Pjax({
debug: false,
elements: "form[action]",
// intentionally set to an incorrect class, since we need to load Pjax manually
selectors: ["form"],
switches: {
"form": function form(oldEl, newEl, options) {
// this is identical to the default behavior
oldEl.outerHTML = newEl.outerHTML;
this.onSwitch();
initForm();
}
},
cacheBust: false,
scrollTo: false
});
}
}
var pjax = new Pjax({
//debug: true,
elements: ".ajax",
// intentionally set to an incorrect class, since we need to load Pjax manually
selectors: ["title", "meta[name=description]", ".c-body"],
switches: {
".c-body": function cBody(oldEl, newEl, options) {
// this is identical to the default behavior
oldEl.outerHTML = newEl.outerHTML;
this.onSwitch();
revertAnimation();
}
},
cacheBust: false
});
function elementTransitionEnded() {
if (overlayElement.classList.contains('down')) {
pjax.loadUrl(linkDestination);
} else if (overlayElement.classList.contains('done')) {
overlayElement.classList.remove('done');
overlayElement.removeEventListener(transitionEvent, elementTransitionEnded);
}
}
function startAnimation() {
isAnimationReversed = false;
overlayElement.addEventListener(transitionEvent, elementTransitionEnded);
overlayElement.classList.add('down');
}
function revertAnimation() {
isAnimationReversed = true;
hasAnimationEnded = false;
pjaxReady = false;
overlayElement.classList.remove('down');
overlayElement.classList.add('done');
init();
}
function pjaxFailed() {
console.log("pjax:error");
} // Function from David Walsh: http://davidwalsh.name/css-animation-callback
function whichTransitionEvent() {
var t,
el = document.createElement("fakeelement");
var transitions = {
"transition": "transitionend",
"OTransition": "oTransitionEnd",
"MozTransition": "transitionend",
"WebkitTransition": "webkitTransitionEnd"
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
/* ==========================================================================
Resize handler
- Handler the objects which are or need to be recalculated on resize
========================================================================== */
var ResizeHandler = {
time: Date.now(),
timeout: null,
waitThrottle: 1000,
waitDebounce: 500,
//Initialisation
init: function init() {
// Trigger start up resize
ResizeHandler.triggerOnInit(); // Throttle Resize
window.addEventListener('resize', function () {
if (ResizeHandler.time + ResizeHandler.waitThrottle - Date.now() < 0) {
ResizeHandler.triggerThrottle();
ResizeHandler.time = Date.now();
}
}); // Smooth Resize
window.addEventListener('resize', function () {
ResizeHandler.triggerSmooth();
}); // Debounce Resize
window.addEventListener('resize', function () {
if (isset(ResizeHandler.timeout)) clearTimeout(ResizeHandler.timeout);
ResizeHandler.timeout = setTimeout(ResizeHandler.triggerDebounce, ResizeHandler.waitDebounce);
});
},
// Trigger on start up
// All function should be in here
triggerOnInit: function triggerOnInit() {// ResizeHandler.resizeWhatDoesItCostAdvantageFigure();
// console.log('Initial Resize');
},
// Trigger resize functions with throttle (preferred)
triggerThrottle: function triggerThrottle() {// console.log('Throttled Resize');
},
// Trigger resize on debounce
triggerDebounce: function triggerDebounce() {// console.log('Debounce Resize');
// ResizeHandler.resizeWhatDoesItCostAdvantageFigure();
},
// Trigger resize on the flight
triggerSmooth: function triggerSmooth() {// console.log('Smooth Resize');
} // ------------------------------ CUSTOM SCROLL HANDLERS ------------------------------------
// Example function
// resizeWhatDoesItCostAdvantageFigure: function () {
// var el = document.querySelector('.advantages-own-guiding-row figure');
// if(isset(el)){
// el.style.maxHeight = 'none';
// el.style.maxHeight = el.offsetHeight + 'px';
// }
// },
};
ResizeHandler.init();
/* ==========================================================================
Scroll handler
- Handler the objects which are bind on scroll events or visible in viewport
========================================================================== */
var ScrollHandler = {
// Variables for debounce and throttle effects
time: Date.now(),
timeout: null,
waitThrottle: 1000,
waitDebounce: 300,
// Variables for scroll direction
lastScrollTopPosition: 0,
scrollDirectionDown: true,
scrollDirectionUp: false,
//Initialisation
init: function init() {
// Trigger start on start up
ScrollHandler.triggerOnInit(); // Throttle scroll
window.addEventListener('scroll', function () {
if (ScrollHandler.time + ScrollHandler.waitThrottle - Date.now() < 0) {
ScrollHandler.triggerThrottle();
ScrollHandler.time = Date.now();
}
}); // Smooth scroll
window.addEventListener('scroll', function () {
ScrollHandler.triggerSmooth();
}); // Debounce scroll
window.addEventListener('scroll', function () {
if (isset(ScrollHandler.timeout)) clearTimeout(ScrollHandler.timeout);
ScrollHandler.timeout = setTimeout(ScrollHandler.triggerDebounce, ScrollHandler.waitDebounce);
});
},
// Trigger on start up
triggerOnInit: function triggerOnInit() {
ScrollHandler.triggerElementInViewportAnimation();
},
// Trigger scroll functions with throttle (preferred)
triggerThrottle: function triggerThrottle() {
// console.log('Throttled scroll');
ScrollHandler.triggerElementInViewportAnimation();
},
// Trigger scroll on debounce
triggerDebounce: function triggerDebounce() {// console.log('Debounce scroll');
},
// Trigger scroll on the flight
triggerSmooth: function triggerSmooth() {
// console.log('Smooth scroll');
ScrollHandler.detectScrollDirection();
ScrollHandler.toggleStickyNavigation();
},
// Detect if part of a given element is visible in the viewport
// El must be a node element
detectIfElementIsPartlyInViewport: function detectIfElementIsPartlyInViewport(el) {
if (isset(el)) {
var rect = el.getBoundingClientRect(); // DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
var windowHeight = window.innerHeight || document.documentElement.clientHeight;
var windowWidth = window.innerWidth || document.documentElement.clientWidth;
var verticalInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
var horizontalInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
return verticalInView && horizontalInView;
}
},
// Detect if a given element is fully visible in the viewport
// El must be a node element
detectIfElementIsFullyInViewport: function detectIfElementIsFullyInViewport(el) {
if (isset(el)) {
var rect = el.getBoundingClientRect();
return rect.top >= 0 && rect.bottom <= window.innerHeight;
}
},
detectScrollDirection: function detectScrollDirection() {
var scrollTopPosition = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
if (scrollTopPosition >= ScrollHandler.lastScrollTopPosition) {
ScrollHandler.scrollDirectionDown = true;
ScrollHandler.scrollDirectionUp = false;
} else {
ScrollHandler.scrollDirectionDown = false;
ScrollHandler.scrollDirectionUp = true;
}
ScrollHandler.lastScrollTopPosition = scrollTopPosition;
},
// Trigger animation on elements that have 'element-in-viewport' and that are in the viewport
// These animation can only be triggered once, if you want more then that you should write an specific function for this
triggerElementInViewportAnimation: function triggerElementInViewportAnimation() {
var elements = document.querySelectorAll('.element-in-viewport');
var elementsLength = elements.length;
for (var e = 0; e < elementsLength; e++) {
var element = elements[e];
if (ScrollHandler.detectIfElementIsPartlyInViewport(element)) {
element.classList.remove('element-in-viewport');
}
}
},
// ------------------------------ CUSTOM SCROLL HANDLERS ------------------------------------
// Hide or show sticky navigation when header isn't visible
toggleStickyNavigation: function toggleStickyNavigation() {
var mainNavigation = document.querySelector('body >header');
var stickyNavigation = document.getElementById('sticky-navigation');
if (isset(stickyNavigation) && isset(mainNavigation)) {
// Show sticky navigation
if (!ScrollHandler.detectIfElementIsFullyInViewport(mainNavigation) && ScrollHandler.scrollDirectionUp) {
stickyNavigation.classList.add('active');
} // Hide sticky navigation
if (ScrollHandler.scrollDirectionDown || ScrollHandler.detectIfElementIsPartlyInViewport(mainNavigation)) {
stickyNavigation.classList.remove('active');
}
}
}
};
ScrollHandler.init();
/* ==========================================================================
Scroll To Click handler
========================================================================== */
var ScrollToHandler = {
// Animation settings
offset: 60,
//pixel
duration: 1000,
//ms
// Animation variables
body: null,
start: 0,
change: 0,
currentTime: 0,
allowAnimation: false,
scrollToAnimation: null,
// Watch the EasingFunction helper for the available methods
easing: 'easeInOutQuad',
init: function init() {
var anchorLinks = document.querySelectorAll('.js-scroll-to-target');
var anchorLinksAmount = anchorLinks.length;
for (var i = 0; i < anchorLinksAmount; i++) {
var anchorLink = anchorLinks[i];
anchorLink.addEventListener('click', function (event) {
ScrollToHandler.prepareScrollTo(this.getAttribute('href'));
event.preventDefault();
});
}
},
/**
* Prepare the Handler for the animation
*/
prepareScrollTo: function prepareScrollTo(elementId) {
// Get the scroll to element
elementId = elementId.substr(elementId.indexOf('#') + 1);
var scrollToElement = document.getElementById(elementId);
ScrollToHandler.scrollToElement(scrollToElement);
},
scrollToElement: function scrollToElement(el) {
var scrollToElementPosition = el.getBoundingClientRect(); // Reset or define the Handler variables
ScrollToHandler.body = document.documentElement;
ScrollToHandler.start = Math.max(ScrollToHandler.body.scrollTop, document.body.scrollTop, window.pageYOffset); //Use Math.max because safari doesn't support document.documentElement.scrollTop
ScrollToHandler.change = scrollToElementPosition.top + ScrollToHandler.start - ScrollToHandler.start - ScrollToHandler.offset;
ScrollToHandler.startTime = 'now' in window.performance ? performance.now() : new Date().getTime();
ScrollToHandler.allowAnimation = true; // Trigger animation
scrollToAnimation = requestAnimationFrame(ScrollToHandler.animateScroll); // Stop on scroll
window.addEventListener('mousedown', ScrollToHandler.abortScrollAnimation);
window.addEventListener('wheel', ScrollToHandler.abortScrollAnimation);
window.addEventListener('DOMMouseScroll', ScrollToHandler.abortScrollAnimation);
window.addEventListener('mousewheel', ScrollToHandler.abortScrollAnimation);
window.addEventListener('keyup', ScrollToHandler.abortScrollAnimation);
window.addEventListener('touchmove', ScrollToHandler.abortScrollAnimation);
},
/*
* Animate the scroll position
*/
animateScroll: function animateScroll(timestamp) {
// Calculate progress from 0 - 1
var progress = Math.min(1, (timestamp - ScrollToHandler.startTime) / ScrollToHandler.duration);
if (progress < 0) progress = 0; // Convert progress with easing function
progress = EasingFunctions[ScrollToHandler.easing](progress);
var newScrollTop = ScrollToHandler.start + ScrollToHandler.change * progress;
ScrollToHandler.body.scrollTop = newScrollTop;
if (ScrollToHandler.body.scrollTop === 0) document.body.scrollTop = newScrollTop; // Safari doesn't support so if ScrollToHandler.body.scrollTop is 0 force the scroll position through document.body.scrollTop
if (progress < 1 && ScrollToHandler.allowAnimation) {
scrollToAnimation = requestAnimationFrame(ScrollToHandler.animateScroll);
}
},
/*
* Abort the scroll animation
*/
abortScrollAnimation: function abortScrollAnimation(event) {
ScrollToHandler.allowAnimation = false;
cancelAnimationFrame(ScrollToHandler.scrollToAnimation);
}
};
ScrollToHandler.init();
var SearchHandler = {
form: document.getElementById('searchForm'),
searchBar: document.getElementById('searchbar'),
resultHolder: document.getElementById('searchresults'),
searchUrl: null,
init: function init() {
if (this.form && isset(this.form.dataset.searchUrl)) {
this.searchUrl = this.form.dataset.searchUrl;
var languageId = this.searchBar.dataset.languageId;
console.debug('searchHandler initialized with searchUrl: ' + this.searchUrl);
this.searchBar.addEventListener('keydown', debounce(function () {
SearchHandler.search(SearchHandler.searchBar.value, 1, 5, languageId);
}, 200));
}
},
search: function search(term) {
var page = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var amount = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
var language_id = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
if (term === "") return;
var xhr = new XMLHttpRequest();
var token = document.querySelector('meta[name="csrf-token"]').content;
var queryParams = {
'term': term,
'page': page,
'amount': amount,
'language_id': language_id
};
var queryUrlPart = '';
for (var param in queryParams) {
queryUrlPart += (queryUrlPart !== '' ? '&' : '?') + param + '=' + encodeURIComponent(queryParams[param]);
}
xhr.open('get', this.searchUrl + queryUrlPart, true);
xhr.responseType = 'json';
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.setRequestHeader('X-CSRF-TOKEN', token);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
SearchHandler.processSearchResponse(xhr.response);
} else {
console.error('SearchHandler: Could not search because of an error. ' + xhr.statusText);
}
}
};
xhr.send();
},
processSearchResponse: function processSearchResponse(response) {
if (!SearchHandler.validateSearchResponse(response)) return;
if (typeof response.data !== 'undefined' && response.data.length > 0) {
while (this.resultHolder.children.length > 0) {
this.resultHolder.removeChild(this.resultHolder.firstChild);
}
console.log(response.data);
length = response.data.length;
var items = [];
for (var index = 0; index < length; index++) {
console.log(response.data[index]);
var item = {
id: response.data[index].id,
type: response.data[index].type,
name: response.data[index].attributes.translation[0].attributes.name
};
items.push(item);
}
this.resultHolder.appendChild(document.createElement('ul'));
for (var _index = 0; _index < length; _index++) {
var element = document.createElement('li');
element.setAttribute('data-id', items[_index].id);
element.setAttribute('data-type', items[_index].type);
element.innerText = items[_index].name;
this.resultHolder.children[0].appendChild(element);
}
} else {
while (this.resultHolder.children.length > 0) {
this.resultHolder.removeChild(this.resultHolder.firstChild);
}
this.resultHolder.innerHTML = "<p>Geen zoekresultaten</p>";
}
},
validateSearchResponse: function validateSearchResponse(response) {
if (isset(response) && response.hasOwnProperty('data') && response.hasOwnProperty('meta')) return response;
console.error('Search response was not valid');
return false;
}
};
SearchHandler.init();
/* ==========================================================================
Share buttons handler
========================================================================== */
var ShareButtonsHandler = {
shareButtonsElement: null,
shareMessageElement: null,
shareMessage: null,
init: function init() {
// Get the youtube players containers
ShareButtonsHandler.shareButtonsElement = document.getElementById('js-shareButtons');
ShareButtonsHandler.shareMessageElement = document.getElementById('js-shareButtonData');
if (isset(ShareButtonsHandler.shareButtonsElement) && isset(ShareButtonsHandler.shareMessageElement)) {
ShareButtonsHandler.convertShareMessageToObject();
var items = ShareButtonsHandler.shareButtonsElement.querySelectorAll('.js-social-media-item');
var buttons = ShareButtonsHandler.shareButtonsElement.querySelectorAll('.js-social-media-button');
var buttonsLength = buttons.length;
var _loop = function _loop(i) {
var button = buttons[i];
var item = items[i];
button.addEventListener('click', function () {
var social = item.getAttribute('data-social');
var functionName = 'click' + capitalizeFirstLetter(social) + 'Button';
if (typeof ShareButtonsHandler[functionName] === 'function') {
ShareButtonsHandler[functionName]();
} else {
console.log('Method not build yet: ' + functionName);
}
});
};
for (var i = 0; i < buttonsLength; i++) {
_loop(i);
}
}
},
convertShareMessageToObject: function convertShareMessageToObject() {
var messageObject = {};
for (var i = 0, attributes = ShareButtonsHandler.shareMessageElement.attributes, attributesLength = attributes.length; i < attributesLength; i++) {
var attribute = attributes[i];
var attributeName = attribute.name;
attributeName = attributeName.replace(/data-/g, '');
attributeName = snakeToCamel(attributeName);
messageObject[attributeName] = attribute.value;
}
ShareButtonsHandler.shareMessage = messageObject;
},
clickFacebookButton: function clickFacebookButton() {
FB.ui({
method: 'share',
mobile_iframe: true,
href: ShareButtonsHandler.shareMessage.url
}, function (response) {});
},
clickTwitterButton: function clickTwitterButton() {
window.open('https://twitter.com/intent/tweet?text=' + ShareButtonsHandler.shareMessage.encodeName + '&url=' + ShareButtonsHandler.shareMessage.encodeUrl, 'newwindow', 'width=500, height=600');
},
clickLinkedinButton: function clickLinkedinButton() {
window.open('https://www.linkedin.com/shareArticle?mini=true&url=' + ShareButtonsHandler.shareMessage.encodeUrl + '&title=' + ShareButtonsHandler.shareMessage.encodeName + '&summary=' + ShareButtonsHandler.shareMessage.encodeSummary, 'newwindow', 'width=500, height=600');
},
clickMailButton: function clickMailButton() {
window.open('mailto:?subject=' + ShareButtonsHandler.shareMessage.name + '&body=' + ShareButtonsHandler.shareMessage.url, '_self');
},
clickLinkButton: function clickLinkButton() {
ShareButtonsHandler.shareMessageElement.select();
copyToClipboard('#js-shareButtonData');
var flashMessage = ShareButtonsHandler.shareButtonsElement.querySelector('.js-link-copied-message');
flashMessage.classList.add('clicked');
setTimeout(function () {
flashMessage.classList.remove('clicked');
}, 2000);
}
};
ShareButtonsHandler.init();
/**
* Created by Pascal on 06/12/17.
* (Name changes by Rob on 18/03/18)
*/
/* Example
const headerImageSliderSetting = new SliderProjectorSetting({
sliderProjectorId: 'header-image-slider',
slideQuery: '#header-image-slider .placeholder figure',
dots: '#header-image-slider .slider-navigation-labels .navigation span',
captions: '#header-image-slider .slider-navigation-labels .caption p',
autoSlider: true,
sliderInterval: 4000
});
headerImageSliderSetting = headerImageSliderSetting.prepareParameters();
const headerImageSlider = new SliderProjector(headerImageSliderSetting).init();
*/
var slideProjectors = [];
var slideProjectorContainers = document.querySelectorAll('.js-slide-projector');
var slideProjectorContainersLength = slideProjectorContainers.length;
for (var i = 0; i < slideProjectorContainersLength; i++) {
var slideProjector = slideProjectorContainers[i];
var slideProjectorId = slideProjector.getAttribute('id');
if (slideProjectorId !== null) {
var slideProjectorSetting = new SliderProjectorSetting({
sliderId: slideProjectorId,
slideQuery: '#' + slideProjectorId + ' .js-slide-projector__slide',
navigationButtons: '#' + slideProjectorId + ' .js-slide-projector__button',
autoSlider: true,
sliderInterval: 4000
});
slideProjectors.push(new SliderProjector(slideProjectorSetting.prepareParameters()).init());
} else console.log('An image slider has no id...');
}
function SliderProjectorSetting(settingsObject) {
var self = this;
this.sliderId = '';
this.definedPreviousNext = true;
this.autoSlider = false;
this.sliderInterval = 4000;
this.navigationButtons = '';
this.dots = '';
this.captions = '';
this.slideQuery = '';
this.setSliderProjectorId = function (string) {
this.sliderId = string;
return this;
};
this.setDefinedPreviousNext = function (_boolean) {
this.definedPreviousNext = _boolean;
return this;
};
this.setAutoSlider = function (_boolean2) {
this.autoSlider = _boolean2;
return this;
};
this.setSliderInterval = function (integer) {
this.sliderInterval = integer;
return this;
};
this.setSlideQuery = function (string) {
this.slideQuery = string;
return this;
};
this.setNavigationButtons = function (string) {
this.navigationButtons = string;
return this;
};
this.setDots = function (string) {
this.dots = string;
return this;
};
this.setCaptions = function (string) {
this.captions = string;
return this;
};
this.getSliderProjectorId = function () {
return this.sliderId;
};
this.getDefinedPreviousNext = function () {
return this.definedPreviousNext;
};
this.getAutoSlider = function () {
return this.autoSlider;
};
this.getSliderInterval = function () {
return this.sliderInterval;
};
this.getSlideQuery = function () {
return this.slideQuery;
};
this.getNavigationButtons = function () {
return this.navigationButtons;
};
this.getDots = function () {
return this.dots;
};
this.getCaptions = function () {
return this.captions;
}; // Invert setters to getters
this.prepareParameters = function () {
return {
sliderId: self.getSliderProjectorId(),
definedPreviousNext: self.getDefinedPreviousNext(),
autoSlider: self.getAutoSlider(),
sliderInterval: self.getSliderInterval(),
navigationButtons: self.getNavigationButtons(),
dots: self.getDots(),
captions: self.getCaptions(),
slideQuery: self.getSlideQuery()
};
}; // Mass assign settings
this.fill = function () {
// Object.keys(settingsObject).forEach(function (key) {
// self[key] = settingsObject[key];
// });
var settingsObjectKeys = Object.keys(settingsObject);
var settingsObjectLength = settingsObjectKeys.length;
for (var _i = 0; _i < settingsObjectLength; _i++) {
var key = settingsObjectKeys[_i];
self[key] = settingsObject[key];
}
};
this.fill();
return {
sliderId: self.setSliderProjectorId,
definedPreviousNext: self.setDefinedPreviousNext,
autoSlider: self.setAutoSlider,
sliderInterval: self.setSliderInterval,
navigationButtons: self.setNavigationButtons,
dots: self.setDots,
captions: self.setCaptions,
slideQuery: self.setSlideQuery,
prepareParameters: self.prepareParameters
};
}
function SliderProjector(settings) {
//Define SliderProjector object
var self = this;
this.sliderObject = ''; //SlideParameters
this.activeSlideId = 0;
this.previousSlideId = 0;
this.nextSlideId = 0;
this.availableSlides = 1;
this.slides = [];
this.autoSliderInterval = null;
this.settings = {};
this.init = function () {
//Append settings to self
this.settings = settings; //Assign needed elements and calculations
this.sliderObject = document.getElementById(this.settings.sliderId);
this.slides = document.querySelectorAll(this.settings.slideQuery);
this.availableSlides = this.slides.length;
this.activeSlideId = 0; //Define previous and next if we want to use those
if (self.settings.definedPreviousNext) this.setPreviousAndNextSlide(); // Set active slide (and possible previous and next classes)
this.setSlide(); // Swipe interaction
var swipeGestures = new Hammer(this.sliderObject);
swipeGestures.on('swipeleft', function () {
self.resetAutoSlider();
self.nextSlide();
self.setSlide();
});
swipeGestures.on('swiperight', function () {
self.resetAutoSlider();
self.previousSlide();
self.setSlide();
});
if (this.settings.navigationButtons !== '') {
// Click interaction
var navigationButtons = document.querySelectorAll(this.settings.navigationButtons);
var navigationButtonsLength = navigationButtons.length;
for (var _i2 = 0; _i2 < navigationButtonsLength; _i2++) {
var navigationButton = navigationButtons[_i2];
navigationButton.addEventListener('click', function () {
self.clickNavigationButton(this);
});
}
}
if (this.settings.dots !== '') {
// Click interaction
var dots = document.querySelectorAll(this.settings.dots);
var dotsLength = dots.length; // console.log(this.settings.dots);
// console.log(dots);
for (var _i3 = 0; _i3 < dotsLength; _i3++) {
var dot = dots[_i3]; // console.log('hier');
dot.addEventListener('click', function () {
self.clickDot(this);
});
}
}
self.autoSlider();
};
this.autoSlider = function () {
if (this.autoSliderInterval !== null) clearInterval(this.autoSliderInterval);
if (this.settings.autoSlider && Number.isInteger(this.settings.sliderInterval)) {
this.autoSliderInterval = setInterval(function () {
self.nextSlide();
self.setSlide();
}, this.settings.sliderInterval);
}
};
this.resetAutoSlider = self.autoSlider;
this.nextSlide = function () {
this.activeSlideId++;
if (this.activeSlideId >= this.availableSlides) this.activeSlideId = 0;
if (self.settings.definedPreviousNext) this.setPreviousAndNextSlide();
};
this.previousSlide = function () {
this.activeSlideId--;
if (this.activeSlideId < 0) this.activeSlideId = this.availableSlides - 1;
if (self.settings.definedPreviousNext) this.setPreviousAndNextSlide();
};
this.setPreviousAndNextSlide = function () {
this.nextSlideId = this.activeSlideId + 1;
if (this.nextSlideId >= this.availableSlides) this.nextSlideId = 0;
this.previousSlideId = this.activeSlideId - 1;
if (this.previousSlideId < 0) this.previousSlideId = this.availableSlides - 1;
};
this.setSlide = function () {
// Loop through the form elements
var slidesLength = self.slides.length;
for (var _i4 = 0; _i4 < slidesLength; _i4++) {
var slide = self.slides[_i4]; // Convert data set attribute to desired type
var slideOrder = parseInt(slide.getAttribute('data-order')); // Remove and set active for all slides
if (slideOrder !== self.activeSlideId) slide.classList.remove('is-active');else slide.classList.add('is-active'); // If we use the previous and next, also set those classes
if (self.settings.definedPreviousNext) {
if (slideOrder !== self.previousSlideId) slide.classList.remove('previous');else slide.classList.add('previous');
if (slideOrder !== self.nextSlideId) slide.classList.remove('next');else slide.classList.add('next');
}
}
if (self.settings.dots !== '') {
self.setActiveDot();
}
if (self.settings.captions !== '') {
self.setActiveCaption();
}
};
this.clickNavigationButton = function (navButton) {
self.activeSlideId = parseInt(navButton.getAttribute('data-order'));
if (self.settings.definedPreviousNext) self.setPreviousAndNextSlide();
self.setSlide();
var next = document.querySelector(self.settings.navigationButtons + '.next');
var previous = document.querySelector(self.settings.navigationButtons + '.previous');
next.setAttribute('data-order', self.nextSlideId);
previous.setAttribute('data-order', self.previousSlideId);
self.resetAutoSlider(); // next.querySelector('p').innerHTML = self.slides[self.nextSlideId].dataset.name;
// previous.querySelector('p').innerHTML = self.slides[self.previousSlideId].dataset.name;
};
this.clickDot = function (clickedDot) {
self.activeSlideId = parseInt(clickedDot.getAttribute('data-order'));
self.setSlide();
self.resetAutoSlider();
};
this.setActiveDot = function () {
var dots = document.querySelectorAll(this.settings.dots);
var dotsLength = dots.length;
for (var _i5 = 0; _i5 < dotsLength; _i5++) {
var dot = dots[_i5];
dotOrder = parseInt(dot.getAttribute('data-order'));
if (dotOrder !== self.activeSlideId) dot.classList.remove('is-active');else dot.classList.add('is-active');
}
};
this.setActiveCaption = function () {
var captions = document.querySelectorAll(this.settings.captions);
var captionsLength = captions.length;
for (var _i6 = 0; _i6 < captionsLength; _i6++) {
var caption = captions[_i6];
captionOrder = parseInt(caption.getAttribute('data-order'));
if (captionOrder !== self.activeSlideId) caption.classList.remove('is-active');else caption.classList.add('is-active');
}
};
}
/* ==========================================================================
Tabslider handler
- Handles the tabslider component which has the proper classes.
========================================================================== */
var TabsliderHandler = {
tabsliderList: null,
tabslider: null,
tabsliderTimeouts: [],
autoSlideTiming: 5000,
init: function init() {
TabsliderHandler.tabsliderList = document.querySelectorAll('.js-tabslider');
var tabsliderListCount = TabsliderHandler.tabsliderList.length;
if (isset(TabsliderHandler.tabsliderList) && tabsliderListCount !== 0) {
for (var _i7 = 0; _i7 < tabsliderListCount; _i7++) {
var tabslider = TabsliderHandler.tabsliderList[_i7];
TabsliderHandler.initTabslider(tabslider);
}
}
},
initTabslider: function initTabslider(tabslider) {
var container = tabslider.querySelector('.js-tabslider-container'); // Check if container element exists
if (container == null) {
console.error("There is no container for the content tabs defined.");
return;
}
var hasAutoSlide = false;
if (tabslider.getAttribute('data-auto-slide') == 'true') {
if (tabslider.id == '') console.warn('Provide the tabslider with a (unique) id to be able to auto slide');else {
hasAutoSlide = true;
TabsliderHandler.tabsliderTimeouts['tabslider-' + tabslider.id] = setTimeout(function () {
TabsliderHandler.triggerAutoSlide(tabslider);
}, TabsliderHandler.autoSlideTiming);
}
}
tabslider.addEventListener('click', function (event) {
// Bail if we didn't click on the trigger element
if (!event.target.classList.contains('js-tabslider-trigger')) return; // Bail if already active
if (event.target.classList.contains('is-active')) {
return;
}
TabsliderHandler.toggleTabslider(event.target.dataset.tabId, tabslider); // Only scroll to when tab are below
if (window.innerWidth < 1200) {
var activeTabHeading = tabslider.querySelector('.js-tabslider-container .js-tabslider-content.is-active h2');
ScrollToHandler.scrollToElement(activeTabHeading);
}
if (hasAutoSlide) {
clearTimeout(TabsliderHandler.tabsliderTimeouts['tabslider-' + tabslider.id]);
TabsliderHandler.tabsliderTimeouts['tabslider-' + tabslider.id] = setTimeout(function () {
TabsliderHandler.triggerAutoSlide(tabslider);
}, TabsliderHandler.autoSlideTiming);
}
});
},
triggerAutoSlide: function triggerAutoSlide(tabslider) {
var activeTab = parseInt(tabslider.querySelector('.is-active').getAttribute('data-tab-id'));
var tabs = tabslider.querySelectorAll('.js-tabslider-container .js-tabslider-content');
activeTab++;
if (activeTab > tabs.length) activeTab = 1;
TabsliderHandler.toggleTabslider(activeTab, tabslider);
TabsliderHandler.tabsliderTimeouts['tabslider-' + tabslider.id] = setTimeout(function () {
TabsliderHandler.triggerAutoSlide(tabslider);
}, TabsliderHandler.autoSlideTiming);
},
toggleTabslider: function toggleTabslider(tabId, tabslider) {
var triggers = tabslider.querySelectorAll('.js-tabslider-trigger');
var tabs = tabslider.querySelectorAll('.js-tabslider-container .js-tabslider-content');
var images = document.querySelectorAll('.js-tabslider-image'); // Check if number of triggers and tabs match
if (triggers.length !== tabs.length) {
console.error("There are ".concat(triggers.length, " trigger buttons and ").concat(tabs.length, " tabs. These must match."));
}
if (isset(triggers) && triggers.length > 0) {
// Loop through all tabs
for (var _i8 = 0; _i8 < triggers.length; _i8++) {
var tabsliderTab = tabs[_i8];
var tabsliderTrigger = triggers[_i8];
tabsliderTrigger.classList.remove('is-active');
tabsliderTab.classList.remove('is-active');
if (tabsliderTab.dataset.tabId == tabId) {
tabsliderTab.classList.add('is-active');
tabsliderTrigger.classList.add('is-active'); // event.target.classList.toggle('is-active');
} // Check if images in header are set for the tabslider
if (images.length > 0) {
// Bail if not the first tabslider. Only the first tabslider gets to control the header/hero images
if (tabsliderTab.closest('.js-tabslider') !== TabsliderHandler.tabsliderList[0]) {
return;
}
var tabsliderImage = images[_i8];
if (typeof tabsliderImage != 'undefined') {
tabsliderImage.classList.remove('is-active');
if (tabsliderImage.dataset.tabId === tabId) {
tabsliderImage.classList.add('is-active');
}
} else {
console.error("There are ".concat(triggers.length, " trigger buttons and ").concat(images.length, " tabslider images. These must match."));
}
}
}
}
}
};
TabsliderHandler.init();
/* ==========================================================================
Youtube handler
========================================================================== */
var YoutubeHandler = {
youtubeClass: '.js-youtube-player',
players: [],
init: function init() {
// Get the youtube players containers
var youtubePlayers = document.querySelectorAll(YoutubeHandler.youtubeClass);
var youtubePlayersAmount = youtubePlayers.length;
for (var _i9 = 0; _i9 < youtubePlayersAmount; _i9++) {
var youtubePlayer = youtubePlayers[_i9];
var youtubePlayerId = youtubePlayer.getAttribute('id');
if (youtubePlayerId !== null) {
// Strip the necessary data from the html and create objects from it
var youtubeElement = {
id: youtubePlayer.getAttribute('id'),
link: youtubePlayer.getAttribute('data-youtube-link'),
autoPlay: parseInt(youtubePlayer.getAttribute('data-auto-play'))
};
YoutubeHandler.players.push(youtubeElement);
} else {
console.log("Element not include because there isn't a id on the player");
console.log(youtubePlayer);
}
}
if (youtubePlayersAmount >= 1) YoutubeHandler.initYoutube();
},
/**
* Check if external script is loaded
*
*/
initYoutube: function initYoutube() {
// See if YT variable exists
if (typeof YT == 'undefined' || typeof YT.Player == 'undefined') {
// Setup API ready function
window.onYouTubePlayerAPIReady = function () {
YoutubeHandler.loadPlayers();
}; // Load external script
getScript('https://www.youtube.com/iframe_api'); // If YT already exists load player
} else {
YoutubeHandler.loadPlayers();
}
},
/**
* Create the Youtube player(s) with parameters
* And rewrite the players to key them by the element id
*
*/
loadPlayers: function loadPlayers() {
var players = [];
var youtubePlayersAmount = YoutubeHandler.players.length;
for (var _i10 = 0; _i10 < youtubePlayersAmount; _i10++) {
var youtubePlayer = YoutubeHandler.players[_i10]; // Load player
youtubePlayer.player = new YT.Player(youtubePlayer.id, {
height: 200,
width: 200,
videoId: youtubePlayer.link,
host: 'https://www.youtube-nocookie.com',
playerVars: {
modestbranding: 0,
rel: 0,
disablekb: 1,
autoplay: youtubePlayer.autoPlay
},
events: {
// 'onReady': YoutubeHandler.onReady,
'onStateChange': YoutubeHandler.onStateChange
}
});
players[youtubePlayer.id] = youtubePlayer;
}
YoutubeHandler.players = players;
},
/**
* When player is ready to play
*/
onReady: function onReady(event) {
var playerContainerId = event.target.getIframe().getAttribute('id');
var player = YoutubeHandler.players[playerContainerId].player; // Show video
// setTimeout(function(){ $('#' + playerContainerId).stop().animate({ opacity: 1 },1000) },800);
// If not on tablet or mobile, play on high quality
// player.mute();
// player.playVideo();
// player.setPlaybackQuality('hd1080');
},
/**
* Listener for Youtube state change
*/
onStateChange: function onStateChange(event) {
var playerContainerId = event.target.getIframe().getAttribute('id');
var player = YoutubeHandler.players[playerContainerId].player;
var videoState = event.data; // Loop video
if (event.data === YT.PlayerState.ENDED) {
player.playVideo();
}
}
};
YoutubeHandler.init();