// ========================================================
// ON READY
// ========================================================
$(function() {
windowResize();
Menu = new Menu;
$('.js-switch').switch();
$('.acc-container-group').accordion({
'type': 'openOne',
'onInit': function() {
// Directly link to reviews
if (window.location.hash) {
$(window.location.hash).addClass("acc-active");
}
}
});
$('#contactform').formValidate({
'ajax': true,
'success': function(data) {
window.location.href = '/bedankt/';
},
'error': function() {},
});
$('.js-bg-sourceset').sourceset({
'isBackground': true,
'queries': [40,60]
}); // Default { 'src': 'data-src' } Image source switcher
$('.js-treatment-nav').on('touchstart click', function(e) {
e.preventDefault();
$body.toggleClass('treatment-nav-active');
});
});
// ========================================================
// Google Maps
// ========================================================
function initMap() {
if (!$('#map').length) return;
var image = {
url: '/wp-content/themes/pbg/assets/images/icon-pin.svg',
scaledSize: new google.maps.Size(160, 160),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(90, 110)
}
//var stylesArray = [ { "featureType": "water", "stylers": [ { "color": "#2faae1" } ] },{ "featureType": "landscape.man_made", "stylers": [ { "color": "#eeeeee" } ] },{ } ];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
scrollwheel: false,
mapTypeControl: false,
draggable: false,
zoomControl: false,
center: {
lat: 52.38350,
lng: 4.884200
},
//styles: stylesArray
});
var beachMarker = new google.maps.Marker({
position: {
lat: 52.38285,
lng: 4.8840773
},
map: map,
icon: image
});
}
// ========================================================
// MENU
// ========================================================
var Menu = function() {
this.menu = $('#menu');
this.hamburger = this.menu.find('.menu-nav-button');
this.toggleClass = 'menu-active';
this.hamburger.on('click', this.toggleMenu.bind(this));
$window.on('resize', this.resize.bind(this));
this.resize();
}
Menu.prototype.resize = function() {
windowResize();
if (SCREENSIZE >= 64) {
this.closeMenu();
}
}
Menu.prototype.toggleMenu = function(e) {
e.preventDefault();
if (!$body.hasClass(this.toggleClass)) {
this.openMenu();
} else {
this.closeMenu();
}
}
Menu.prototype.openMenu = function() {
$body.addClass(this.toggleClass);
this.windowScroll = $window.scrollTop();
$body.css({
'position': 'fixed',
'top': -this.windowScroll + 'px',
'min-height': '100%',
'width': '100%',
'padding': '0'
});
if ($body.hasClass(this.stickyClass)) this.menu.css('top', this.windowScroll + 'px');
$window.scrollTop(0);
}
Menu.prototype.closeMenu = function() {
$body.removeClass(this.toggleClass);
$body.css({
'position': '',
'top': '',
'min-height': '',
'width': '',
'padding': ''
});
this.menu.css('top', '');
$window.scrollTop(this.windowScroll);
}
// ========================================================
// IMAGE SOURCE SWITCH
// ========================================================
var SourceSet = function(node, settings) {
this.settings = $.extend({}, this.default_settings, settings);
this.element = $(node);
this.queries = this.settings.queries;
this.sourceset = this.settings.sourceset;
this.isBackground = this.settings.isBackground;
this.size = 0;
this.source = this.element.attr(this.sourceset).replace(/\s/g,'').split(',');
this.checksourceBound = this.checksource.bind(this);
$window.on('resize', this.checksourceBound);
this.checksource();
}
SourceSet.prototype.checksource = function() {
windowResize();
if (this.size >= SCREENSIZE) return;
for (var i = 0; i < this.queries.length; i++) {
if (SCREENSIZE >= this.queries[i]) {
this.size = SCREENSIZE;
if (this.isBackground) {
this.element.css('background-image', 'url('+this.source[i]+')');
} else {
this.element.attr('src', this.source[i]);
}
}
}
if (this.isBackground && this.element.css('background-image') == this.source[this.queries.length - 1]) {
$window.off('resize', this.checksourceBound);
}
if (this.element.attr('src') == this.source[this.queries.length - 1]) {
$window.off('resize', this.checksourceBound);
}
}
SourceSet.prototype.default_settings = {
'queries': [],
'isBackground': false,
'sourceset': 'data-src'
}
$.fn.sourceset = function(settings) {
return $(this).each(function(index, el) {
var item = $(el);
if (!item.data('sourceset')) {
item.data('sourceset', new SourceSet(el, settings));
}
});
};
// ========================================================
// SWITCH
// ========================================================
var Switch = function(node, settings) {
this.settings = $.extend({}, this.defaultSettings, settings);
this.container = node;
this.triggers = [];
this.activeId = 0;
this.activeTriggerClass = this.settings.activeTriggerClass;
this.container.find(this.settings.trigger).each(function(index, el) {
el = $(el);
this.triggers.push(new SwitchTrigger(index, el, this));
}.bind(this));
}
Switch.prototype.defaultSettings = {
'trigger': '.switch-trigger',
'activeTriggerClass': 'switch-trigger-active'
}
var SwitchTrigger = function(index, node, root) {
this.index = index;
this.trigger = node;
this.root = root;
this.trigger.on('click', this.click.bind(this));
return this;
}
SwitchTrigger.prototype.click = function() {
this.root.triggers[this.root.activeId].trigger.removeClass(this.root.activeTriggerClass);
this.trigger.addClass(this.root.activeTriggerClass);
this.root.activeId = this.index;
}
$.fn.switch = function(settings) {
return $(this).each(function(index, el) {
el = $(el);
if (!el.data('switch')) {
el.data('switch', new Switch(el, settings));
}
});
}
// ========================================================
// ACCORDION
// ========================================================
var Accordion = function(node, settings) {
this.groups = {};
node.each(function(index, el) {
el = $(el);
var instance = el.data('accordion');
if (!instance) {
el.data('accordion', new AccordionContent(el, settings, this));
}
}.bind(this));
return this;
}
var AccordionContent = function(node, settings, accordion) {
this.settings = $.extend({}, this.default_settings, settings);
this.container = node;
this.groupName = this.container.attr(this.settings.groupName);
this.accordion = accordion;
this.setGroup();
this.trigger = this.container.find(this.settings.trigger);
this.content = this.container.find(this.settings.content);
this.active = this.settings.activeClass;
this.speed = this.settings.speed;
this.type = this.settings.type;
this.isVisible = !this.container.hasClass(this.active);
this.checkStatus();
this.checkStatusHandler = this.checkStatus.bind(this)
this.trigger.bind('click', this.checkStatusHandler);
this.settings.onInit();
}
AccordionContent.prototype.default_settings = {
'trigger': '.acc-trigger',
'content': '.acc-content',
'activeClass': 'acc-active',
'groupName': 'data-acc-group',
'type': 'default', // default, openOne (requires a group)
'speed': 300,
'onInit': function() {}
}
AccordionContent.prototype.setGroup = function() {
if (this.groupName) {
if (!this.accordion.groups[this.groupName]) {
this.accordion.groups[this.groupName] = [];
}
this.accordion.groups[this.groupName].push(this);
}
}
AccordionContent.prototype.killAccordion = function() {
this.content.css('display', '');
this.trigger.unbind('click', this.checkStatusHandler);
}
AccordionContent.prototype.checkStatus = function(e) {
if (e) e.preventDefault();
switch (this.type) {
case 'default':
if (this.isVisible) {
this.hideContent();
} else {
this.showContent();
}
break;
case 'openOne':
if (this.isVisible) {
this.hideContent()
} else {
this.openOne();
}
break;
}
}
AccordionContent.prototype.showContent = function() {
this.content.stop().slideDown(this.speed);
this.container.addClass(this.active);
this.isVisible = true;
}
AccordionContent.prototype.hideContent = function() {
this.content.stop().slideUp(this.speed, function() {
this.container.removeClass(this.active);
}.bind(this));
this.isVisible = false;
}
AccordionContent.prototype.openAll = function() {
var groupLength = this.accordion.groups[this.groupName].length;
for (var i = 0; i < groupLength; i++) {
this.accordion.groups[this.groupName][i].showContent();
}
}
AccordionContent.prototype.openOne = function() {
this.closeAll();
this.showContent();
}
AccordionContent.prototype.closeAll = function() {
var groupLength = this.accordion.groups[this.groupName].length;
for (var i = 0; i < groupLength; i++) {
this.accordion.groups[this.groupName][i].hideContent();
}
}
$.fn.accordion = function(settings) {
return new Accordion($(this), settings);
}
// ========================================================
// VALIDATE FORM ELEMETS
// ========================================================
/*
NOTE: To use different validations on the same input type, you can use a data-type.
Usage:
*/
/*
NOTE: To submit a form with ajax just switch the boolean to true.
It will submit the form with the given action and method property.
Use the callbacks after the submit has been done.
Usage:
$('form').formValidate({
'ajax': true,
'success': function() {},
'error': function() {},
});
*/
var FormValidate = function(node, settings) {
this.settings = $.extend({}, this.defaultSettings, settings);
this.form = node;
this.form.attr('novalidate', '');
this.inputContainer = this.settings.inputContainer;
this.errorClass = this.settings.errorClass;
this.ajax = this.settings.ajax;
this.requiredFields = [];
this.form.find('[required]').each(function(index, el) {
this.requiredFields.push(new FormInput(index, el, this));
}.bind(this));
this.form.on('submit', this.submit.bind(this));
}
FormValidate.prototype.defaultSettings = {
'inputContainer': '.fieldset',
'errorClass': 'error',
'ajax': false,
'beforeSend': function() {},
'success': function() {},
'error': function() {},
}
FormValidate.prototype.submit = function(e) {
var inputLength = this.requiredFields.length;
var errors = [];
for (var i = 0; i < inputLength; i++) {
var input = this.requiredFields[i];
if (!input.validate()) {
errors.push(input);
}
}
if (errors.length) {
var firstError = errors[0].input;
var errorPosition = firstError.offset().top;
var time = ($window.scrollTop() / errorPosition) * 300;
$bodyHtml.animate({
'scrollTop': errorPosition - 100
}, time, function() {
firstError.focus();
});
// Blocks the submition
return false;
} else {
// Submits the form normal or with ajax
if (this.ajax) {
$.ajax({
'url': this.form.attr('action'),
'data': this.form.serialize(),
'type': this.form.attr('method'),
'beforeSend': this.settings.beforeSend,
'success': this.settings.success,
'error': this.settings.error
});
return false;
} else {
return true;
}
}
}
$.fn.formValidate = function(settings) {
return $(this).each(function(index, el) {
el = $(el);
if (!el.data('formValidate')) {
el.data('formValidate', new FormValidate(el, settings));
}
});
}
var FormInput = function(index, node, FormValidate) {
this.index = index;
this.input = $(node);
this.root = FormValidate;
this.errorClass = this.root.errorClass;
this.container = this.input.closest(this.root.inputContainer);
this.nodeName = node.nodeName.toLowerCase();
switch(this.nodeName) {
case 'select':
this.validate = this.validateSelect;
this.input.on('blur change', this.validate.bind(this));
break;
case 'textarea':
this.validate = this.validateText;
this.input.on('blur keydown', function(e) {
setTimeout(this.validateText.bind(this, e), 0);
}.bind(this));
break;
case 'input':
switch(this.input.attr('type')) {
case 'radio':
this.validate = this.validateRadio;
this.group = $('[name='+this.input.attr('name')+']');
this.input.on('blur change', function(e) {
setTimeout(this.validate.bind(this, e), 0);
}.bind(this));
break;
case 'checkbox':
this.validate = this.validateCheckbox;
this.input.on('blur change', function(e) {
setTimeout(this.validate.bind(this, e), 0);
}.bind(this));
break;
case 'number':
switch(this.input.attr('data-type')) {
case 'currency':
this.validate = this.validateCurrency;
break;
default:
this.validate = this.validateNumber;
}
this.input.on('blur keydown', function(e) {
setTimeout(this.validate.bind(this, e), 0);
}.bind(this));
break;
case 'text':
switch(this.input.attr('data-type')) {
case 'zipcode':
this.validate = this.validateZipcode;
break;
default:
this.validate = this.validateText;
}
this.input.on('blur keydown', function(e) {
setTimeout(this.validate.bind(this, e), 0);
}.bind(this));
break;
case 'email':
this.validate = this.validateEmail;
this.input.on('blur', function(e) {
setTimeout(this.validate.bind(this, e), 0);
}.bind(this));
break;
}
break;
}
}
FormInput.prototype.isInputVisible = function() {
if (!this.input.is(':visible') || this.input.css('opacity') != '1') {
this.container.removeClass(this.errorClass);
return false;
} else {
return true;
}
}
FormInput.prototype.validateSelect = function() {
if (!this.isInputVisible()) return true;
var val = this.input.val();
if (val.length) {
this.container.removeClass(this.errorClass);
return true;
} else {
this.container.addClass(this.errorClass);
return false;
}
}
FormInput.prototype.validateZipcode = function() {
if (!this.isInputVisible()) return true;
var val = this.input.val();
// This regex is for Dutch zipcodes
var reg = /^[1-9][0-9]{3} ?(?!sa|sd|ss)[a-z]{2}$/i;
if (val.length && reg.test(val)) {
this.container.removeClass(this.errorClass);
return true;
} else {
this.container.addClass(this.errorClass);
return false;
}
}
FormInput.prototype.validateText = function() {
if (!this.isInputVisible()) return true;
var val = this.input.val();
if (val.length) {
this.container.removeClass(this.errorClass);
return true;
} else {
this.container.addClass(this.errorClass);
return false;
}
}
FormInput.prototype.validateRadio = function() {
if (!this.isInputVisible()) return true;
var val = false;
this.group.each(function(index, el) {
el = $(el);
if (el.prop('checked')) {
val = true;
}
}.bind(this));
if (val) {
this.container.removeClass(this.errorClass);
return true;
} else {
this.container.addClass(this.errorClass);
return false;
}
}
FormInput.prototype.validateCheckbox = function() {
if (!this.isInputVisible()) return true;
var val = this.input.prop('checked');
if (val) {
this.container.removeClass(this.errorClass);
return true;
} else {
this.container.addClass(this.errorClass);
return false;
}
}
FormInput.prototype.validateEmail = function() {
if (!this.isInputVisible()) return true;
var val = this.input.val();
var reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (val.length && reg.test(val)) {
this.container.removeClass(this.errorClass);
return true;
} else {
this.container.addClass(this.errorClass);
return false;
}
}
FormInput.prototype.validateNumber = function() {
if (!this.isInputVisible()) return true;
var val = this.input.val();
var reg = /^\d+$/;
if (val.length && reg.test(val)) {
this.container.removeClass(this.errorClass);
return true;
} else {
this.container.addClass(this.errorClass);
return false;
}
}