File: /var/www/vhosts/creativefellows.nl/jhtaxatie.creativefellows.nl/public/js/app.js
Foundation.Abide.defaults.validators['price_not_lower'] = function($el, required, parent)
{
if($el.val() == "") return true;
const price = $el.val().replace(/[^0-9-]/g,'');
const min_price = $el.closest("[data-truck-request]").data("price");
if( price.length == 0 || price < min_price ){
return false;
}
else{
return true;
}
};
Foundation.Abide.defaults.validators['is_year'] = function($el, required, parent)
{
if($el.val() == "") return true;
const year = $el.val();//.replace(/[^0-9-]/g,'');
if( year.length != 4){
$el.next().text("Voer in volgens format YYYY")
return false;
}
else{
return true;
}
};
Foundation.Abide.defaults.validators['sticker_number'] = function($el, required, parent)
{
var sticker_no = $el.val().replace(/[^0-9.]/g,'');
$el.val(sticker_no);
if(sticker_no.replace(/[^0-9]/g,'').length != 8)
{
$el.next().text("Stickernummer klopt niet").addClass("is-visible");
return false;
}
else{
$el.next().removeClass("is-visible");
var sticker_number_only = sticker_no.replace(/[^0-9]/g,'');
$el.val( sticker_number_only.slice(0,2) + "." + sticker_number_only.slice(2,5) + "." + sticker_number_only.slice(5,8) );
return true;
}
};
Foundation.Abide.defaults.validators['not_equal_to'] = function($el, required, parent)
{
var new_pw_el = $('#'+$el.attr('data-not-equal-to'));
var current_pw = new_pw_el.val();
var new_pw = $el.val();
if(new_pw.length < 6)
{
$el.next().text("Nieuw wachtwoord moet uit minimaal 6 tekens bestaan").addClass("is-visible");
return false;
}
if(current_pw == new_pw)
{
new_pw_el.next().text("Nieuw wachtwoord mag niet gelijk zijn aan oude wachtwoord").addClass("is-visible");
return false;
}
else{
new_pw_el.next().removeClass("is-visible");
return true;
}
};
Foundation.Abide.defaults.validators['year_built'] = function($el, required, parent)
{
if($el.val() == "" || $el.data("changed")) return true;
const year = $el.val();
let $option = '';
let disabled = false;
if( year.length != 4){
$el.next().text("Voer in volgens format YYYY")
return false;
}
$target = $("#" + $el.data("elements") );
if(year < 2023 ){
$option = $target.find("option").eq(1);
disabled = false;
}
else{
$option = $target.find("option").eq(2);
disabled = true;
}
// set select
$target.val( $option.val() ).prop("disabled",disabled);
if( $('#'+ $target.attr("id") +'_copy').length === 0 ){
$input = $("<input type='hidden'>").attr({
name: $target.attr("name"),
id: $target.attr("id")+'_copy',
value: $option.val(),
//disabled : true,
});
$input.insertAfter($target);
}
else $target.next().val($option.val());
// set form version
$el.closest(".form-group").find(".navigate-form").attr("data-show","group"+ $option.val());
$("#group"+ $option.val() ).find(".navigate-form").attr("data-show","group3");
$el.data("changed",true);
return true;
};
$(document).foundation().ready(function(){
$(".default-form").navigateForm();
$(document).on('focus', '.calendar', function(){
$(this).datepicker( $.datepicker.regional["nl"] ).setInputValue();
});
$(".secureDelete").showConfirmCallout();
$("select[name='filter']").on("change",function() {
$("select[name='filter'] option").each(function()
{
var val = $(this).val().split("||");
$.each(val, function( index, value ) {
//console.log( index + ": " + value );
$("."+value).addClass("hidden");
});
});
var val = $(this).val().split("||");
$.each(val, function( index, value ) {
console.log( index + ": " + value );
$("."+value).removeClass("hidden");
});
});
$(".signature").JhSignature();
$(".smart-select").toggleItems();
$(".ajax-submit").submitAjax();
$("[data-truck-enquiry]").truckEnquiry();
$("[data-truck-request]").truckRequest();
if( $("#reveal-feedback").length ){
$("#reveal-feedback").foundation("open");
}
$("#form_version").change(function(){
// set form version
$(this).closest(".form-group").find(".navigate-form").attr("data-show","group"+$(this).val());
$("#group"+$(this).val()).find(".navigate-form").attr("data-show","group3");
if( $('#form_version_copy').length === 0 ){
$input = $("<input type='hidden' >").attr({
name: 'form_version',
id: 'form_version_copy',
value: $(this).val(),
});
$input.insertAfter( $(this) );
}
else $('#form_version_copy').val( $(this).val() );
});
$("[data-disable-checks]").disableChecks();
});
$.fn.disableChecks = function()
{
return this.each(function(){
const plugin = $(this);
const stelling_type = parseInt($(this).val());
const $all_elements = $(this).data("disable-checks").split(","); // hide all
plugin.init = function()
{
plugin.set();
plugin.on("change",plugin.set);
}
plugin.set = function(){
let $selected_elements = $(this).find(":selected").data("elements").split(",").filter(r => r != "") ?? false;
for (let i = 0; i < $all_elements.length; i++){
$("#"+ $all_elements[i]).addClass("multiple-choice__strike");
}
for (let i = 0; i < $selected_elements.length; i++){
$("#"+ $selected_elements[i]).removeClass("multiple-choice__strike");
}
}
plugin.init();
});
}
$.fn.truckRequest = function()
{
return this.each(function(){
const plugin = $(this),
$stars_check = plugin.find(".choice-truck_stars input[type=checkbox]"),
$star_pricing = plugin.find(".truck-pricing");
$options_total = plugin.find("[data-options_price]"),
$price_truck = plugin.find("[data-truck_price]"),
$create = plugin.find("button[type=submit]");
$sliders = plugin.find(".slider");
$custom = plugin.find("[data-custom-option]"),
$truck_catalog = plugin.find("#truck_catalog"),
$options = plugin.find("input[data-price]"),
$delivery = plugin.find("#delivery");
$functions = plugin.find("#functions");
$custom_price = plugin.find("[data-custom-starprice]");
let custom_fields = ["truck_price","serialnumber","datebuild","capacity","liftheight","buildheight","forklength","hours","battery","charger"];
let price_edited = false;
plugin.settings = {
price : plugin.data("price"),
price_org : plugin.data("price"),
correction_factor : 1,
transport : plugin.data("transport"),
options: plugin.data("options"),
catalog: "/request/catalog/",
functions_selected : [],
patch_request : plugin.data("edit"),
custom_price: {
3: null,
4: null,
5: null,
},
};
plugin.init = function()
{
// set edited price
if( plugin.data("custom-price") == 1){
price_edited = true;
plugin.settings.custom_price[3] = plugin.data("custom-price-3");
plugin.settings.custom_price[4] = plugin.data("custom-price-4");
plugin.settings.custom_price[5] = plugin.data("custom-price-5");
}
plugin.on("change", "input[data-price]", plugin.set);
$stars_check.change(plugin.set);
$sliders.on("changed.zf.slider", function(event,element) {
plugin.setSliderValue(element);
});
//add custom option
$custom.click(plugin.customOption);
// custom request
plugin.customRequest();
//activate edit
$custom_price.on("click",plugin.editStarPrice);
plugin.set();
}
plugin.editStarPrice = function(event)
{
price_edited = true;
// disable pricing slider
$("#truck_price_custom").prop("disabled",true).closest(".checkbox-custom").hide();
let $row = $(this).closest(".sum-stars-row"),
$label = $row.find(".price-element"),
$price = $row.find(".input-element"),
$price_options = $row.find(".sum-price"),
$button = $(this).children();
let star_count = $row.data("stars");
//console.log(plugin.settings.custom_price[3]);
// toggle button
$button.toggleClass("fa-pencil").toggleClass("fa-check");
// toggle input / label
$label.toggleClass("hide");
$price.toggleClass("hide");
// enable input
//$price.attr("disabled",false);
//console.log($price);
if($price.find("input").val() == 0){
$price.find("input").each(function(){
$(this).val( $(this).data("value") );
});
}
// key up with options
$price.find("input").keyup(function(){
$(this).val( $(this).val().replace(/,/g, '.') );
let price_truck_incl = parseFloat( $(this).val() ) + plugin.settings.options ;
let price_truck_excl = parseFloat( $(this).val() ) - plugin.settings.options ;
// update with options
if($(this).data("calculate") == 0){
$price.eq(1).find(".custom-option-description").val( price_truck_incl );
$label.eq(1).text( price_truck_incl );
$(this).closest(".input-element").prev().text( $(this).val() );
plugin.settings.custom_price[star_count] = price_truck_incl;
}
// update without options
else{
$price.eq(0).find(".custom-option-description").val( price_truck_excl );
$label.eq(0).text( price_truck_excl );
$(this).closest(".input-element").prev().text( $(this).val() );
plugin.settings.custom_price[star_count] = price_truck_excl;
}
//console.log(plugin.settings.custom_price );
});
}
plugin.customRequest = function(event)
{
$truck_catalog.change(plugin.catalog);
for(var i=0; i< custom_fields.length;i++)
{
let field_id = custom_fields[i];
$("#"+field_id).blur(function(){
plugin.find("[data-"+ field_id +"]").text( $(this).val() );
});
}
$("#truck_price").blur(function()
{
plugin.settings.price = parseFloat($(this).val());
plugin.settings.price_org = parseFloat($(this).val());
plugin.set();
});
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
function inArray(needle, haystack) {
var length = haystack.length;
for(var i = 0; i < length; i++) {
if(haystack[i] == needle) return true;
}
return false;
}
$functions.on( "keydown", function( event ) {
if( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
}).autocomplete({
source: function( request, response ) {
$.ajax({
type: "GET",
url:"/request/functions/"+ extractLast( request.term ),
success: function (data) {
response($.map(data, function (value, key) {
if(inArray(value,plugin.settings.functions_selected)) return;
return {
label: value,
value: key,
};
}));
},
dataType: 'json'
});
},
search: function() {
//var term = extractLast( this.value );
//if ( term.length <= 2 ) {
//return false;
//}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui )
{
var terms = split( this.value );
terms.pop();
terms.push( ui.item.value );
terms.push( "" );
this.value = terms.join( ", " );
plugin.settings.functions_selected = terms;
//var term_ids = $functions.prev().val() ? split( $functions.prev().val() ) : [];
///term_ids.push( ui.item.value );
$functions.prev().val( terms.join(",") );
return false;
}
});
}
plugin.catalog = function(event)
{
let catalog_id = $(this).val();
$.ajax({
url: plugin.settings.catalog + catalog_id,
method: "GET",
success: function(data){
//console.log(plugin.find(".truck-image img"));
plugin.find(".truck-image img").attr("src",data.image);
plugin.find("[data-type]").text(data.name);
plugin.find("[data-segment]").text(data.description);
plugin.find("[data-transport_price]").text(data.transport);
plugin.find("[data-choice-row]").remove();
plugin.find("button").prop("disabled",false);
$delivery.val(data.transport);
plugin.settings.transport = data.transport;
$options = plugin.find("input[data-price]");
var count = 0;
$.each(data.options, function(key,option) {
//console.log(key);
//console.log(option);
let $html = $('<div class="choice-row" data-choice-row>\
<span class="float-left">\
<input type="checkbox" name="options[]" value="'+ count +'" data-price="'+ option.value +'" id="'+ option.label +'"><label for="'+ option.label +'">'+ option.label +'</label>\
<input type="hidden" name="options_price[]" value="'+ option.value +'" id="'+ option.label +'">\
</span>\
<span class="option-price float-right">'+ option.value +'</span>\
</div>');
$html.insertBefore( plugin.find("[choice-row-custom]") );
count++;
});
}
});
}
plugin.customOption = function()
{
let $row = $(this).closest(".choice-row__custom");
let $description = $row.find(".custom-option-description");
let $price = $row.find(".custom-option-price");
let id = $description.val().replace(" ","");
let $html = $('<div class="choice-row">\
<span class="float-left">\
<input type="checkbox" name="custom_options[]" value="'+ $description.val() +'" data-price="'+ ($price.val() ? $price.val() : 0) +'" id="'+ id +'" checked><label for="'+ id +'">'+ $description.val() +'</label>\
<input type="hidden" name="custom_options_price[]" value="'+ ($price.val() ? $price.val() : 0) +'">\
</span>\
<span class="option-price float-right">'+ ($price.val() ? $price.val() : 0) +'</span>\
</div>');
$html.insertBefore( $row );
$description.val("");
$price.val("");
$html.find("input[type=checkbox]").change(plugin.set);
// reset selector
$options = plugin.find("input[data-price]");
plugin.set();
}
plugin.setSliderValue = function($slider_element)
{
var price_correction = $("#"+ $slider_element.attr("aria-controls")).val()/10;
$slider_element.find(".slider-value").text( price_correction );
plugin.settings.correction_factor = price_correction/100;
plugin.settings.price = plugin.settings.price_org + (plugin.settings.correction_factor * plugin.settings.price_org);
plugin.set();
}
plugin.set = function()
{
//console.log(plugin.settings);
plugin.selectedOptions();
plugin.starPricing();
$price_truck.text( plugin.priceFormat(plugin.settings.price) )
$options_total.text( plugin.priceFormat(plugin.settings.options) );
}
plugin.starPricing = function()
{
// show all star prices
$star_pricing.find(".sum-stars-row").show();
//console.log($stars_check);
$stars_check.each(function() {
// // v2 price
let price_truck = plugin.selectedStarPrice( $(this).val(), $(this).data("factor"), true);
let price_truck_excl = plugin.selectedStarPrice( $(this).val(), $(this).data("factor"), false);
// v1 price
//let price_truck = $(this).data("factor") * plugin.settings.price + plugin.settings.options ;
//let price_truck_excl= $(this).data("factor") * plugin.settings.price;
let $row = $star_pricing.find(".sum-stars-row[data-stars="+ $(this).next().text() +"]");
//
$row.find(".star-price .price-element").text( plugin.priceFormat( plugin.round(price_truck,0.5) ) );
$row.find(".sum-star-org-price .price-element").text( plugin.priceFormat( plugin.round(price_truck_excl,0.5) ) );
// set data price attribute
$row.find(".star-price input").data("value",plugin.round(price_truck,0.5));//.val(price_truck);
// hide if not selected
if( !$(this).is(':checked') ){
$star_pricing.find(".sum-stars-row[data-stars="+ $(this).next().text() +"]").hide();
}
});
}
plugin.round = function(value, step)
{
step || (step = 1.0);
let inv = 1.0 / step;
let factored_half = Math.round(value * inv) / inv;
return Math.round(factored_half * 100) / 100
}
plugin.selectedStarPrice = function(star,star_factor,include_options){
if(price_edited == false)
{
if(include_options == true) return star_factor * plugin.settings.price + plugin.settings.options ;
else return star_factor * plugin.settings.price;
}
else
{
if(include_options == true) return plugin.settings.custom_price[star] + plugin.settings.options;
else return plugin.settings.custom_price[star];
}
}
plugin.selectedOptions = function()
{
let $selected = plugin.find("input[data-price]").filter(":checked");
let sum = 0;
$selected.each(function() {
sum += Number($(this).data("price"));
});
plugin.settings.options = sum;
}
plugin.priceFormat = function(value)
{
return plugin.format(value,2,",",".");
}
plugin.format = function(number, decimals, dec_point, thousands_sep)
{
// Strip all characters but numerical ones.
number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
var n = !isFinite(+number) ? 0 : +number,
prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
s = '',
toFixedFix = function (n, prec) {
var k = Math.pow(10, prec);
return '' + Math.round(n * k) / k;
};
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || '';
s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}
// init the plugin
plugin.init();
});
}
$.fn.truckEnquiry = function()
{
return this.each(function(){
let plugin = $(this);
let $sliders = plugin.find(".slider");
let $links = plugin.find("#filter-trucks a.icon");
let $buttons = plugin.find("[data-submit]");
let $stars = plugin.find("#filter-sterren input[type=checkbox]");
let $segment = plugin.find("#filter-segment input[type=checkbox]");
let $only_sale = plugin.find("#filter-sale input[type=checkbox]");
let $reset = plugin.find(".button[data-reset]");
let $sort = plugin.find("[data-sort]");
let $functions = plugin.find("#functions");
let $selected = plugin.find("#selected_specs").val() == "" ? [] : plugin.find("#selected_specs").val().trim().split(",");
plugin.settings = {
functions_selected : $selected,
};
plugin.init = function()
{
$sliders.on("changed.zf.slider", function(event,element) {
plugin.setSliderValue(element);
});
$links.click(plugin.toggleFilters);
$stars.change(plugin.setStars);
$segment.change(plugin.setSegment);
$buttons.click(plugin.search);
$only_sale.change(plugin.setSale);
plugin.find(".label").each(function(){
$(this).click(function(){
// remove from dom
$(this).remove();
// get label
let label = $(this).text();
// remove from selection
$.each($selected, function(key,option) {
if(option == label){
$selected.splice(key, 1);
}
});
// update input
$("#selected_specs").val( plugin.settings.functions_selected.join(",") );
});
});
// reset
$reset.click( plugin.resetFilters );
//sort
$sort.change(plugin.sort);
}
plugin.sort = function(){
console.log($(this).data("sort") );
$("#" + $(this).data("sort") ).val( $(this).val() );
plugin.search();
}
plugin.resetFilters = function()
{
let q = $("#q").val();
let f = $("#selected_specs").val();
location.href = "/request?q="+ q +"&specs="+f;
// reset sliders
/*$reset.each(function(){
let target_element = $(this).data("reset");
let $slider_element = $("#"+target_element);
$("#"+ target_element +"_min").val( $slider_element.data("start") ).trigger('change');
$("#"+ target_element +"_max").val( $slider_element.data("end") ).trigger('change');
});*/
}
plugin.setStars = function(){
var checked = [];
plugin.find("#filter-sterren input[type=checkbox]").each(function() {
if($(this).is(":checked")) checked.push(this.value);
});
$("#selected_sterren").val( checked.join("-") );
}
plugin.setSale = function(){
var checked = [];
plugin.find("#filter-sale input[type=checkbox]").each(function() {
if($(this).is(":checked")) checked.push(this.value);
});
$("#selected_sale").val( checked.join("-") );
}
plugin.setSegment = function(){
var checked = [];
plugin.find("#filter-segment input[type=checkbox]").each(function() {
if($(this).is(":checked")) checked.push(this.value);
});
$("#selected_segment").val( checked.join("-") );
}
plugin.search = function(){
$( "#request-form" ).submit();
}
plugin.toggleFilters = function(){
$(".filter-options").addClass("hide");//("filter-options",false);
}
// set slider value
plugin.setSliderValue = function($slider_element)
{
//plugin.settings.values[setting] = parseFloat(value);
//var value = $("#". $slider_element.attr("aria-controls") ).val();
//set html value
$slider_element.find(".slider-value").text( $("#"+ $slider_element.attr("aria-controls")).val() );
}
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
function inArray(needle, haystack) {
var length = haystack.length;
for(var i = 0; i < length; i++) {
if(haystack[i] == needle) return true;
}
return false;
}
$functions.on( "keydown", function( event ) {
if( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
}).autocomplete({
source: function( request, response ) {
$.ajax({
type: "GET",
url:"/request/functions/"+ extractLast( request.term ),
success: function (data) {
response($.map(data, function (value, key) {
if(inArray(value,plugin.settings.functions_selected)) return;
return {
label: value,
value: key,
};
}));
},
dataType: 'json'
});
},
search: function() {},
focus: function() { return false;},
select: function( event, ui )
{
plugin.settings.functions_selected.push( ui.item.value );
$functions.next().append( $('<span class="label label__search">'+ ui.item.value +'</span>') );
this.value = '';
$("#selected_specs").val( plugin.settings.functions_selected.join(",") );
return false;
}
});
// init the plugin
plugin.init();
});
}
$.fn.submitAjax = function()
{
return this.each(function(){
var plugin = $(this);
var url = plugin.attr("data-url");
var header = plugin.attr("data-header");
var return_url = plugin.attr("data-return");
var tp = $('<div class="confirm-callout"><div class="row"><div class="small-12 medium-6 medium-offset-3 columns text-center"><div class="callout secondary" data-closable="fade-out"><h5>'+ header +'</h5></p><a href="'+ return_url +'" class="button secondary">Sluiten</a></div></div></div></div>');
var panel = tp.find(".callout");
var close_btn = tp.find("button.secondary");
var shadeout;
plugin.init = function()
{
plugin.on("click",plugin.submit)
}
plugin.submit = function(){
$.ajax({
url: url,
method: "POST",
success: function () {
plugin.showConfirm()
},
error: function () {
}
});
}
plugin.showConfirm = function(){
// create mask element if not exists
if( !shadeout ) plugin.createShadeOut();
// insert message
$("footer").before(tp);
// close
close_btn.on("click",function(event){
plugin.hideShadeOut();
});
}
// create shadeout layer
plugin.createShadeOut = function(){
shadeout = $('<div class="shade-out"></div>').hide();
shadeout.insertAfter("#footer");
shadeout.on("click",function(event)
{
plugin.hideShadeOut();
panel.hide();
}).fadeIn()
}
// hide shade-out
plugin.hideShadeOut = function()
{
shadeout.removeClass("is-open").fadeOut("fast");
}
// hide shade-out
plugin.showShadeOut = function()
{
shadeout.addClass("is-open").fadeIn("fast");
}
// init the plugin
plugin.init();
});
}
$.fn.setInputValue = function()
{
$(this).on("change",function(){
var val = $(this).val();
this.setAttribute('value',val );
});
}
$.fn.showConfirmCallout = function()
{
return this.each(function(){
var plugin = $(this);
var link_to_page = $(this).attr("href");
var msg = $(this).attr("data-msg");
var tp = $('<div class="confirm-callout"><div class="row"><div class="small-12 medium-6 medium-offset-3 columns text-center"><div class="callout secondary" data-closable="fade-out"><h5>Let op!</h5><p>'+ ( typeof msg !== typeof undefined && msg !== false != "" ? msg : 'Weet je zeker dat je dit item wilt verwijderen?' ) +'</p><a href="'+ link_to_page +'" class="button primary">Bevestig</a> <button class="button secondary" data-close>Annuleren</button></div></div></div></div>');
var panel = tp.find(".callout");
var close_btn = tp.find("button.secondary");
plugin.init = function()
{
$(this).on("click",function(event){
event.preventDefault();
if( $(this).hasClass("inited") )
{
// toggle panel
panel.toggle();
// toggle shadeout
plugin.showShadeOut();
return;
}
// create mask element if not exists
plugin.createShadeOut();
$("footer").before(tp);
$(this).addClass("inited").addClass("open");
});
// close
close_btn.on("click",function(event){
plugin.hideShadeOut();
});
}
// create shadeout
plugin.createShadeOut = function()
{
shadeout = $('<div class="shade-out"></div>').hide();
shadeout.insertAfter("#footer");
shadeout.on("click",function(event)
{
plugin.hideShadeOut();
panel.hide();
}).fadeIn()
}
// hide shade-out
plugin.hideShadeOut = function()
{
shadeout.removeClass("is-open").fadeOut("fast");//.remove();
//$(this).removeClass("inited");
}
// hide shade-out
plugin.showShadeOut = function()
{
shadeout.addClass("is-open").fadeIn("fast");
}
// init the plugin
plugin.init();
});
}
$.fn.navigateForm = function()
{
var field_count = $(this).find(".input-element").length;
var inputs = $(this).find("input[type=\"text\"]");
var textareas = $(this).find("textarea");
var buttons = $(this).find(".navigate-form");
var progress = $("#progress-status");
var count = 0;
var counter = 0;
// navigate the form
buttons.on("click",function(event)
{
// set counter
counter = 0;
var show_el = $(this).attr("data-show");
var hide_el = $(this).attr("data-hide");
// back button
if( $(this).hasClass("back") ){
$("#"+show_el).removeClass("hidden");
$("#"+hide_el).addClass("hidden");
return;
}
// select all required fields in open element
$("#"+ hide_el +" [required]").each(function() {
// check if parent is hidden
var parent_element = $(this).closest("div.columns");
if( parent_element.is(":hidden") ) return
if($(this).attr("type") == "hidden") return;
validateElement($(this),$(this).prop("tagName"));
});
// toggle if no errors
if(counter == 0)
{
$("#"+show_el).removeClass("hidden");
$("#"+hide_el).addClass("hidden");
}
else{
// stop button action
event.preventDefault();
}
});
// duplicate image upload
$(document).on('click', '.duplicate-image-upload', function(){
var append_to = $(this).attr("data-append-to");
//var src = $(this).attr("data-html-src");
//src.find(".placeholder").html("testtest");
var clone = $(this).parent().clone();
clone.removeClass("first-item").find("input").val("");
var placeholder = clone.find(".placeholder");
clone.find(".placeholder").html( placeholder.attr("data-label") ).css("color","");
clone.appendTo(append_to);
});
// duplicate input
$(document).on('click', '.duplicate-input-field', function(){
var append_to = $(this).attr("data-append-to");
var clone = $(this).parent().clone();
var clone_input = clone.find("input");
var current_sticker = parseInt( clone_input.val().replace(/[^0-9]/g,'') ) + 1 + "";
var next_sticker = current_sticker.slice(0,2)+ "." + current_sticker.slice(2,5) + "." + current_sticker.slice(5,8);
clone.removeClass("first-item");
clone_input.val( next_sticker );
clone.appendTo(append_to);
Foundation.reInit('abide');
clone_input.focus().blur(function(){
var unique = [];
$(".input__stickernumber").each(function(){
if( unique.includes($(this).val()) ) $(this).addClass("is-invalid-input").next().show().text("Stickernummer niet uniek");
else{
unique.push( $(this).val() );
$(this).removeClass("is-invalid-input").next().hide().text("Stickernummer klopt niet");
}
});
});
});
var count = $('.duplicate-time-keeping').length;// ?? 0;
$('.duplicate-time-keeping').click(function(){
var wrapper = $(this).attr("data-append-to");
var clone = $(this).closest(".row__time-keeped").clone().removeClass("row__first-item");
clone.find(".fa").removeClass(".fa-plus").addClass("fa-minus");
clone.find(".duplicate-time-keeping").click(function(){
$(this).closest(".row__time-keeped").remove();
})
clone.find("input").each(function(){
if($(this).prop("type") == "number"){
$(this).val("");
}
if($(this).prop("type") == "checkbox" || $(this).hasClass("calendar")){
var basename = $(this).data("base-name");
$(this).prop("id",basename + count);
$(this).next().prop("for",basename + count);
}
});
clone.appendTo(wrapper);
count++;
});
// duplicate image upload
$(document).on('click', '.delete-field', function(){
var parent_el = $(this).parent();
console.log(parent_el);
if(!parent_el.hasClass("first-item")) $(this).parent().remove();
else
{
var inp = parent_el.find('input[type="hidden"]');
var placeholder = parent_el.find(".placeholder");
inp.val("");
parent_el.find(".placeholder").html(placeholder.attr("data-label"));
}
});
// fix image name in upload
$(document).on('change', 'input[type="file"]', function(event){
var img_path = $(this).val().split('\\');
var img_name = img_path[img_path.length - 1];
var files = event.currentTarget.files[0];
var filesize = ((files.size/1024)/1024).toFixed(4);
if (files.name != "item" && typeof files.name != "undefined" && filesize <= 3)
{
$(this).parent().next().html(img_name);
}
else if(filesize > 2)
{
$(this).parent().next().html("<strong>"+img_name+"</strong> is te groot om te uploaden").css("color","#cc4b37");
$(this).val("");
}
});
// check if an item has a value
var validateElement = function(element,tagname)
{
//console.log(element+ " = "+tagname);
if(element.val() === "" || tagname == "SELECT" && element.val() == 0 )
{
element.addClass("is-invalid-input");
element.next().show();
element.on("keyup",function(){
validateElement(element);
});
counter++;
}
else if(element.val() != "" && element.hasClass("is-invalid-input")){
counter++;
}
else
{
element.removeClass("is-invalid-input");
element.next().hide();
}
}
// update progress bar if element has value
inputs.on("blur",function()
{
if( $(this).val() ){
count++;
progress.html( Math.ceil( (count/field_count)*100 ) );
}
});
textareas.on("blur",function()
{
if( $(this).val() != ""){
$(this).addClass("has-value");
}else $(this).removeClass("has-value");
});
}
/*
* Fullscreen an item
*/
$.fn.JhSignature = function(){
return this.each(function(){
var plugin = $(this);
var canvas = plugin.find("canvas")[0];//.eq[0];
var textarea = plugin.parent().find("textarea");
var signaturePad;
plugin.init = function()
{
signaturePad = new SignaturePad(canvas,{backgroundColor: 'rgb(255, 255, 255, 0)'});
if(plugin.attr("data-signature")){
signaturePad.fromDataURL("data:image/png;base64," + plugin.attr("data-signature"),{ ratio: 0.5});
textarea.text( plugin.attr("data-signature") );
}
signaturePad.onEnd = function (event) {
var imgdata = signaturePad.toDataURL();
var parts = imgdata.split(';base64,');
textarea.text( parts[1] );
//console.log("set");
};
plugin.resize()
}
// fix resolutions issue with scaled canvas
plugin.resize = function(){
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
signaturePad.clear();
}
// init the plugin
plugin.init();
});
}
/*
* Toggle items with a click
*/
$.fn.toggleItems = function(){
return this.each(function(){
var plugin = $(this);
var options = plugin.find("div.item");
var selected_el = options.find('input[type="radio"]:checked');
plugin.init = function()
{
options.on("click",function(){
plugin.toggle($(this), true);
});
/*
// make first item selected if not selected
if(selected_el.length == 0)
{
options.first().find("input").prop("checked", true);
plugin.toggle( options[0], false);
}
else{
plugin.toggle( selected_el, false);
}
*/
}
plugin.toggle = function(element,forcedisplay)
{
var span = $(element).closest("div");
var show = span.attr("data-show-options");
var hide = span.attr("data-hide-options");
//console.log(show);
// return if element already hidden
if(forcedisplay == false && span.closest(".columns").css('display') == "none") return;
// show
$(show).closest(".columns").show();
// hide
$(hide).closest(".columns").hide();
}
// init the plugin
plugin.init();
});
}