File: /var/www/vhosts/creativefellows.nl/okaycolor.creativefellows.nl/public/js/app.js
$(document).foundation().ready(function(){
// toggle items
$("a.more").toggleOptions();
// section dropdowns
$("a.toggle-section-dropdown").toggleDropDown();
$(".delete-row").deleteRow();
$(".duplicate-row").duplicateRow();
$("input#url").validateUrl();
$("textarea").on("blur",function()
{
if( $(this).val() != "")
{
$(this).addClass("has-value");
}
else $(this).removeClass("has-value");
});
// confirm delete
$(".button.delete").showConfirmCallout();
// change position of product properties
$("div.draggable").changePosition();
$("ul.draggable").changeListPosition();
// Show filename on file uploads
$("body").on("change", "input[type=file]", function(){
var label = $(this).prev();
var txt = label.attr("data-label");
label.text(this.files[0].name);
});
// delete element from dom
$(".delete").deleteElement();
// Autocomplete search
$("#search-site").autocomplete({
source: function (request, response){
$.ajax({
type: "GET",
url:"/search",
data: request,
success: response,
dataType: 'json',
});
}
},
{
minLength: 2,
autoFocus: true,
select:function(e,ui){
location.href = ui.item.url;
}
});
//////////////////////////
//////// FRONTEND ////////
//////////////////////////
// Select a new product
$(".select-product-properties").selectProduct();
// file upload
$(".uploader[data-upload]").fileProcessor();
// Shopping cart
$("#shopping-cart").shoppingCart();
// cart details click
$("#shopping-cart-details").shoppingCartDetails();
});
/*
* Set linked form input values after click
$.fn.uploadFiles = function(){
return this.each(function(){
var plugin = $(this);
var $name = plugin.attr("data-productname");
var $size = plugin.attr("data-productsize");
var $_width = plugin.attr("data-width");
var $_height= plugin.attr("data-height");
var $url = plugin.attr("data-url");
var $thumb = plugin.attr("data-preview");
var $tp = $('<div class="reveal large" data-reveal data-animation-in="scale-in-up" data-animation-out="scale-out-down"><button class="close-button hide" data-close aria-label="Close modal" type="button"><span aria-hidden="true">×</span></button></div>');
var $reveal,$upload_name,$upload_progress,$button_label,$preview,$confirm;
plugin.init = function()
{
plugin.on("click",plugin.setUpload);
}
// get reveal template
plugin.setUpload = function()
{
var $html = plugin.getReveal();
$html.append('<h3>'+ $name + ' <small>'+ $size +' cm </small></h3>'); //<span class="float-right"><i class="fal fa-cloud-upload"></i></span>
$html.append('\
<div class="grid-x file-upload align-middle">\
<div class="cell small-12 medium-3">\
<label for="exampleFileUpload" class="button secondary expanded upload-label" data-label="Upload">Upload</label>\
<input type="file" id="exampleFileUpload" name="files[]" accept=".pdf,.png,.jpg,.jpeg" class="fileupload show-for-sr">\
</div>\
<div class="cell small-12 medium-9">\
<div class="grid-x grid-padding-x">\
<div class="cell small-10 filename">Geen bestand geselecteerd</div>\
<div class="cell small-2 percentage">0%</div>\
<div class="cell small-12">\
<div id="progress" class="progress">\
<div class="progress-meter progress-bar progress-bar-success" style="width:0"></div>\
</div>\
</div>\
</div>\
</div>\
\
<div class="cell small-4">\
<div class="callout" id="canvas-actions">\
\
<div>\
<h6 class="hide2">Benodigd formaat</h6><p id="pdf-size">'+ $_width +' x '+ $_height +' cm</p>\
<h6>Bestandsformaat</h6><p id="upload-size">-</p>\
<h6>Resolutie / DPI</h6><p id="upload-dpi">-</p>\
<h6>Schalen</h6><p id="upload-scale">100%</p>\
</div>\
\
<div>\
<h6>Opvullen</h6>\
<div class="switch">\
<input class="switch-input" id="opvullen" type="checkbox" name="stretch" value="1">\
<label class="switch-paddle" for="opvullen">\
<span class="show-for-sr">Opvullen</span>\
</label>\
</div>\
</div>\
\
<div>\
<h6>Roteren</h6>\
<div class="switch">\
<input class="switch-input" id="roteren" type="checkbox" name="rotate" value="1">\
<label class="switch-paddle" for="roteren">\
<span class="show-for-sr">Opvullen</span>\
</label>\
</div>\
</div>\
\
<div>\
<h6>Spiegelen</h6>\
<div class="switch">\
<input class="switch-input" id="spiegelen" type="checkbox" name="mirroe" value="1">\
<label class="switch-paddle" for="spiegelen">\
<span class="show-for-sr">Opvullen</span>\
</label>\
</div>\
</div>\
\
</div>\
</div>\
\
<div class="cell small-8"><div \
class="preview preview-upload" \
style="padding-bottom:'+ plugin.getFileRatio() +'%;" \
data-actions="#canvas-actions" \
data-width="'+ $_width +'" \
data-height="'+ $_height +'" \
data-orgwidth="'+ $_width +'" \
data-orgheight="'+ $_height +'" ></div></div>\
<div class="cell small-12 "><div class="clear"></div></div>\
\
</div>');
var $group = $('<div class="expanded button-group">');
$confirm = $('<button class="button primary" data-close>Upload Bevestigen</button>');
$html.append( $group.append($confirm) );
// reveal
reveal = new Foundation.Reveal($html,{"speed":500});
// open reveal
reveal.open();
$upload_name = $html.find(".filename");
$upload_progress = $html.find(".percentage");
$preview = $html.find(".preview");
$button_label = $html.find(".upload-label");
// ini upload
plugin.upload( $html.find(".fileupload") );
if($thumb){
plugin.setImage($thumb,148,210);
}
}
plugin.getFileRatio = function()
{
return (($_height / $_width) * 100);
}
plugin.upload = function($button)
{
$button.fileupload({
url: '/upload/file',
dataType: 'json',
method: "post",
change: function (e, data) {
var $name = data.files[0].name;
var $size = data.files[0].size;
// set name
$upload_name.text( $name );
//update button
$button_label.html('<i class="fas fa-spinner fa-spin"></i> Bezig');
// disable confirm
$confirm.prop("disabled",true);
},
done: function (e, data) {
// image preview
var file = data.result.files[0];
// set preview image
plugin.setImage( file.preview, file.width, file.height);
// size of upload in mm
plugin.setUploadSize( file.width, file.height);
// size of upload in mm
plugin.setUploadDPI( file.dpi, file.width);
// reset upload button to default
$button_label.html( $button_label.attr("data-label") );
// enable button
$confirm.prop("disabled",false);
// confirm upload
$confirm.on("click",function(){
$.ajax({
type: 'POST',
url: $url,
data: {
file: file.url,
image: file.preview
},
success: function(response){
if(response){
plugin.attr("data-hasupload","true");
}
}
});
});
//$("#files").find(".user-file").attr("src",files.preview);
// $("#upload-dpi").html(files.dpi);
// $("#upload-size").html(files.width + " x " + files.height + " mm");
// $("#post-file").val(files.url);
},
progressall: function(e, data){
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
// $upload_progress.html(progress+"%");
}
}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
}
plugin.setUploadSize = function(width,height)
{
$("#upload-size").html(width + " x " + height + " mm").attr("data-width", width).attr("data-height", height);
}
plugin.setUploadDPI = function(dpi,width)
{
$("#upload-dpi").html( dpi ).attr("data-dpi", dpi).attr("data-resolution-x",Math.floor(dpi / 25.4) * width);
}
plugin.setImage = function(src,width,height)
{
if(!src) return;
var img = $("<img>").attr("src",src);
//img.attr("data-width",width).attr("data-height",height);
$preview.html("").append(img);
// fit image
$preview.attr("data-orgwidth",width).attr("data-orgheight",height).fitImage();
}
plugin.getReveal = function()
{
return $tp.clone();
}
plugin.init();
});
}
*/
$.fn.fileProcessor = function(element, options){
return this.each(function(){
var uploader = $(this);
var options = $(this).attr("data-options");
var pages = uploader.find("[data-drag-pages]");
var layout = uploader.find("[data-accept-pages]");
var usage = [];
var button_upload = $(this).find(".fileupload");
var button_label = button_upload.prev();
var button_complete = $(this).find("[data-complete]");
var $progress = uploader.find("[data-progress]")
var $name = uploader.find("[data-uploadname]")
var $size = uploader.find("[data-uploadsize]")
uploader.settings = {
icons : ["remove","fill","rotate","flip","dpi"],
labelDefault : '<i class="fal fa-cloud-upload"></i> Kies bestand',
labelUploading : '<i class="fas fa-spinner fa-spin"></i> Bezig',
dpi_mm : 25.4
}
uploader.init = function()
{
// start drag & drop + upload
uploader.start();
// finish uploade
button_complete.on("click",uploader.complete);
}
uploader.start = function(){
// get options from dom
uploader.getDataOptions(options)
// upload files
uploader.upload();
// drag pages
pages.draggable({
revert: true,
zIndex: 100,
classes: {
"ui-draggable-dragging": "cloning"
},
});
// accept pages
layout.droppable({
accept: pages,
addClasses: false,
classes: {
"ui-droppable-hover": "place-page"
},
drop: function( event, ui ) {
// dragged element
var page = ui.draggable;
// clone the image
var $imagewrapper = uploader.cloneImage(page);
// insert clone
$(this).find(".page-inner").prepend( $imagewrapper );
// set page no
$(this).find(".page-inner").attr("data-page", page.attr("data-page-id"));
// image tools
$imagewrapper.fitImage();
$imagewrapper.find("img").attr({
"data-width-px": $(this).find(".page-inner").width(),
"data-height-px": $(this).find(".page-inner").height()
});
// make page selected
page.addClass("done");
// remove old element from dom
if( page.hasClass("cloned-pages") ) page.remove();
// reflow uploader
uploader.reflow();
}
});
}
uploader.complete = function()
{
var layout = {};
for (i = 1; i <= uploader.settings["pages"]; i++){
var $page = $("[data-page-id=page"+ i +"]");
//console.log($page);
var page = parseInt($page.attr("data-page"));
var angle = parseInt($page.attr("data-angle"));
var fill = parseInt($page.attr("data-fill"));
var flip = parseInt($page.attr("data-flip"));
layout["page"+i] = {
"page": page,
"angle": angle,
"fill": fill,
"flip" : flip
}
//console.log(i);
}
alert(JSON.stringify(layout, null, "\t"));
}
uploader.upload = function()
{
//console.log(button_upload);
button_upload.fileupload({
url: '/upload/file',
dataType: 'json',
method: "post",
change: function(e, data){
var file_name = data.files[0].name;
var file_size = data.files[0].size;
// set name
$name.text( file_name );
$size.text( uploader.bytesToSize(file_size) );
//update button
button_label.html( uploader.getSetting('labelUploading') );
// disable confirm
//$confirm.prop("disabled",true);*/
},
done: function(e, data){
// restore button label
button_label.html( uploader.getSetting('labelDefault') );
var data = data.result.files[0].preview;
for(var key in data)
{
var $page = uploader.createPage(key,data[key]);
$(".page-selector").append( $page );
$page.fadeIn();
}
// reflow drag & drop
uploader.reflow();
},
progressall: function(e, data){
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
$progress.html(progress+"%");
}
}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
}
uploader.createPage = function(key,data)
{
// insert pages
var page = $('<div class="cell small-3 medium-6 preview-page" data-drag-pages>');
var link = $('<a>').append( $("<img>").attr("src",data.name) );
page.append(link).hide();
page.attr({
"id" : "p"+key,
"data-page-id" : "p"+key,
"data-upload-width" : data.width,
"data-upload-height" : data.height,
"data-product-width" : uploader.productWidth(),
"data-product-height" : uploader.productHeight(),
"data-scale-x" : Math.round(data.width / uploader.productWidth() * 10000) / 10000,
"data-scale-y" : Math.round(data.height / uploader.productHeight() * 10000) / 10000,
"data-resolution" : data.resolution
});
return page;
}
uploader.cloneImage = function(page)
{
var id = page.attr("data-page-id");
var clone = page.find("img").clone();
// clone
var image = $('<a class="cloned-pages" data-drag-pages data-is-dropped="true" data-page-id="'+ id +'">').addClass("clone");
// set data attributes
image.attr("data-file-width", page.attr("data-upload-width"));
image.attr("data-file-height", page.attr("data-upload-height"));
image.attr("data-scale-x", page.attr("data-scale-x"));
image.attr("data-product-width", page.attr("data-product-width"));
image.attr("data-product-height", page.attr("data-product-height"));
image.attr("data-scale-y", page.attr("data-scale-y"));
image.attr("data-resolution", page.attr("data-resolution"));
// add image actions
image.prepend( clone ).prepend( uploader.pageActions(id,image) );
return image;
}
uploader.pageActions = function(page_id,image)
{
var $wrap = $('<div class="page-actions">');
for(var key in uploader.settings.icons)
{
var icon_name = uploader.settings.icons[key];
var $icon = $('<span data-page-id="'+ page_id +'"></span>').addClass(icon_name);
switch(icon_name)
{
case "dpi":
var res_x = image.attr("data-resolution");
// product large than upload
if(parseInt(image.attr("data-product-width")) < parseInt( image.attr("data-file-width")) )
{
res_x = image.attr("data-resolution") / (image.attr("data-product-width") / image.attr("data-file-width") ) ;
}
$icon.html(Math.round(res_x));
break;
case "remove":
$icon.on("click",function(){
$(this).closest(".cloned-pages").remove();
var page = uploader.find('[data-page-id="'+ page_id +'"]');
page.removeClass("done");
});
break;
case "flip":
$icon.on("click",function(){
var $page = $(this).closest(".cloned-pages").toggleClass("flip");
var $img = $page.find("img");
if($page.hasClass("flip"))
{
//var dimensions = {width: "100%", height: "100%"};
$page.parent().attr("data-flip",1);
$img.css({transform: "scaleX(-1)" })
}
else{
//var dimensions = {width: $img.attr("data-width-percent"), height: $img.attr("data-height-percent")};
$page.parent().attr("data-flip",0);
$img.css({transform: "scaleX(1)" })
}
//$img.css(dimensions);
});
break;
case "fill":
$icon.on("click",function(){
var $page = $(this).closest(".cloned-pages").toggleClass("fill");
var $img = $page.find("img");
if($page.hasClass("fill"))
{
var dimensions = {width: "100%", height: "100%"};
$page.parent().attr("data-fill",1);
var res_x = image.attr("data-resolution") / (image.attr("data-product-width") / image.attr("data-file-width") ) ;
$icon.html(Math.round(res_x));
}
else{
var dimensions = {width: $img.attr("data-width-percent"), height: $img.attr("data-height-percent")};
$page.parent().attr("data-fill",0);
var res_x = image.attr("data-resolution");
// product large than upload
if(parseInt(image.attr("data-product-width")) > parseInt( image.attr("data-file-width")) )
{
res_x = image.attr("data-resolution") / (image.attr("data-product-width") / image.attr("data-file-width") ) ;
}
$icon.html(Math.round(res_x));
}
$img.css(dimensions);
});
break;
case "rotate":
$icon.on("click",function(){
var $page = $(this).closest(".cloned-pages");
var scale_x = $page.attr("data-scale-x");
var scale_y = $page.attr("data-scale-y");
var $img = $page.find("img");
var w_px = $img.attr("data-width-px");
var h_px = $img.attr("data-height-px");
var w_pct = $img.attr("data-width-percent");
var h_pct = $img.attr("data-height-percent");
var diff_px = (w_px-h_px)/2;
var rotation = $(this).attr("data-rotate") ? $(this).attr("data-rotate") : 0; // 270
var angle = parseInt(rotation) + 90; // 360
if(angle == 360) angle = 0;
$page.parent().attr("data-angle",angle);
// set angle
$(this).attr("data-rotate",angle);
// old rotation
var old = "rotate-"+ (angle != 0 ? angle - 90 : 270);
$page.removeClass( old );
// new rotation
var nwe = "rotate-"+ angle ;
$page.addClass( nwe );
// check if page has ben flipped
var flip = $page.hasClass("flip") ? " scaleX(-1)" : " scaleX(1)";
// set width and height if streched
if( !$page.hasClass("fill") ){
// rotate image
switch(angle){
case 0:
$img.css({
width: w_pct,
height: h_pct,
transform: "rotate("+ angle +"deg)" + flip
});
break;
case 90:
$img.css({
width: "auto",
height: h_pct,
transform: "rotate("+ angle +"deg)" + flip
});
break;
case 180:
$img.css({
width: w_pct,
height: h_pct,
transform: "rotate("+ angle +"deg)" + flip
});
break;
case 270:
$img.css({
width: "auto",
height: h_pct+"px",
transform: "rotate("+ angle +"deg)" + flip
});
break;
}
}
// stretch to fit
else{
switch(angle){
case 0:
$img.css({
width: w_px +"px",
height: h_px +"px",
transform: "translate(0, 0) rotate(0deg)"+flip
});
break;
case 90:
$img.css({
width: h_px +"px",
height: w_px +"px",
transform: "translate("+ diff_px +"px, 0) rotate(90deg)"+flip
});
break;
case 180:
$img.css({
width: w_px +"px",
height: h_px +"px",
transform: "translate(0) rotate(180deg)"+flip
});
break
case 270:
$img.css({
width:h_px +"px",
height: w_px +"px",
transform: "translate("+ diff_px +"px, 0) rotate(270deg)"+flip
});
break
}
}
});
break;
}
$wrap.append($icon);
}
return $wrap;
}
// reflow uploader
uploader.reflow = function()
{
pages = uploader.find("[data-drag-pages]");
layout = uploader.find("[data-accept-pages]");
uploader.start();
}
// convert bytes to size
uploader.bytesToSize = function(bytes)
{
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Byte';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}
// get label
uploader.getSetting = function(type)
{
return uploader.settings[type];
}
// product height
uploader.productWidth = function()
{
return uploader.getSetting("width");
}
// product width
uploader.productHeight = function()
{
return uploader.getSetting("height");
}
// get uploader defaults
uploader.getDataOptions = function(options){
var settings = {};
// Create a key/value pair for each setting
if ( options ) {
options = options.split(';');
options.forEach( function(option) {
option = option.trim();
if ( option !== '' ) {
option = option.split(':');
uploader.settings[option[0]] = (option[1].trim());
}
});
}
};
uploader.init();
});
}
/*
* Fit an uploaded image in fileprocessor
*/
$.fn.fitImage = function(){
return this.each(function(){
var image = $(this);//.find("img");
var img;
var actions = $(this).attr("data-actions");//.find(".switch-input");
var properties = $(actions).find(".switch-input");
var $dpi = $("#upload-dpi");
var $scale = $("#upload-scale");
var orgwidth = $(this).attr('data-file-width'); // 174 = 87
var orgheight = $(this).attr('data-file-height'); // 404 = 202
var width = $(this).attr('data-product-width'); // 174 = 87
var height = $(this).attr('data-product-height'); // 404 = 202
var scale_x = $(this).attr('data-scale-x');
var scale_y = $(this).attr('data-scale-y');
var current_w = orgwidth;
var current_h = orgheight;
var stretch = false;
var rotate = false;
var dpi_mm = 25.4;
image.init = function()
{
// set image element
image.setImageElement();
// set pertage to scale
image.setImageScale();
}
image.setImageElement = function()
{
img = image.find("img");
}
image.setImageScale = function()
{
var w = image.widthScale();
var h = image.heightScale();
// upload larger than needed
if(scale_x > 1 || scale_y > 1)
{
if(scale_x > scale_y)
{
img.attr("style", "width:100%;height:auto;");
img.attr({
"data-width-percent": "100%",
"data-height-percent": "auto"
});
}
else{
img.attr("style", "width:auto;height:100%;");
img.attr({
"data-width-percent": "auto",
"data-height-percent": "100%"
});
}
}
// upload smaller than needed
else{
img.attr("style", "width:"+ w + "%;height:"+ h + "%");
img.attr({
"data-width-percent": w+"%",
"data-height-percent": h+"%"
});
}
}
image.widthScale = function()
{
var w = ((orgwidth - width) / width) * 100;
var v = 100 - (w * -1)
return Math.round(v * 100) / 100 ;
}
image.heightScale = function()
{
var h = ((orgheight - height) / height) * 100;
var v = 100 - (h * -1)
return Math.round(v * 100) / 100 ;
}
image.setDpi = function(new_width,old_width)
{
var res_x = $dpi.attr("data-resolution-x") * dpi_mm / new_width;
$dpi.html( Math.floor(res_x) );
}
image.setScale = function(old_width,new_width)
{
var scale = Math.floor( ((old_width - new_width) / old_width) * 100 + 100 );
$scale.html(scale+"%");
}
// init
image.init();
});
}
/*
* Select Product
*/
$.fn.selectProduct = function(){
return this.each(function(){
var plugin = $(this);
var tp = $('<div class="reveal tiny" data-reveal data-animation-in="scale-in-up" data-animation-out="scale-out-down"><button class="close-button" data-close aria-label="Close modal" type="button"><span aria-hidden="true">×</span></button></div>');
plugin.settings = {
postUrl : "/calculate/",
basketUrl : "/winkelwagen",
custom : []
}
var rows = plugin.find(".options-row:not(#product_quantity_options)");
var quantities = plugin.find("#product_quantity_options");
var pid = plugin.attr("data-product");
var product_name= plugin.attr("data-name");
var user_input = plugin.find(".custom-input");
var togglers = plugin.find(".toggle-element");
var order = $(".product-sidebar").find("button[data-order]");
var reveal;
/*
* init plugin
*/
plugin.init = function(){
// property rows
rows.on('click', 'a.button', function (){
event.preventDefault();
var row = $(this).closest(".options-row");
var fn = $(this).attr("data-function");
// custom function
plugin.doFunction(fn,$(this));
// toggle
plugin.toggleSelection(row, $(this));
// calculate
plugin.calculateSelection( $(this) );
});
// pricing
quantities.on('click', 'a.button', function (){
event.preventDefault();
// make old inactive
plugin.deactivateActive(quantities);
$(this).addClass("selected");
// load default labels
plugin.setPreview( $(this) );
});
// load default selection
plugin.setPreview( quantities.find("a").first() );
// user input
plugin.userInput();
// toggle details on hidden elements
plugin.toggleDetails();
// order button
order.on("click",function(){
plugin.orderSelection($(this));
});
// set default options to selection
plugin.setOptions();
}
/*
* Set default options
*/
plugin.setOptions = function()
{
var options = JSON.parse($("#product_options").val());
plugin.settings.options = options
}
/*
* Calculate selection
*/
plugin.calculateSelection = function(click_el)
{
// get selected items
var selection = plugin.getSelection(click_el,true);
// post data
$.ajax({
type: "POST",
url: plugin.getPostUrl() + pid,
data: selection,
dataType: "json",
success: function(data){
if(data){
// insert id element
var insert_response = click_el.closest(".options-row").attr("data-update-target");
// remove current items
plugin.removeOptions(insert_response, "> .cell:not(\".custom-input\")");
//return;
var inserted = false;
var last = 0;
var inserted_hidden = false;
var last_hidden = 0;
// insert new calculations
$.each( data.pricing, function( i, product ) {
var active = product.active == true ? " selected" : "";
var tp = $('<div class="cell medium-3 small-6" id="calc'+ i +'"><a href="#" class="button'+ active +'"\
data-custom-values="{\
\'weight\':\''+ product.weight +'\',\
\'delivery_price\':\''+ product.delivery[0].price +'\',\
\'delivery_options\': '+ plugin.deliveryOptions( product.delivery ) +',\
\'premium_production\' : '+ plugin.premiumOptions( product.premium ) +'\
}"\
data-group-type="'+ product.property +'" \
data-name="'+ product.name +'" \
data-label="'+ product.label +'" \
data-value="'+ product.value +'" \
data-iscustom="'+ product.custom +'" \
data-amount="'+ product.amount +'" \
data-id="'+ product.id +'">'+ product.label +'<br />'+ product.total +'</a>\
</div>');
// first elements are visible
if(i < 4){
if(inserted == false)
{
$("#"+ insert_response).prepend(tp);
last = '#calc'+ i;
inserted = true;
}
else{
$(last).after(tp);
last = '#calc'+ i;
}
}
else{
if(inserted_hidden == false)
{
$("#"+insert_response).find(".property-options-hidden > .grid-x").prepend(tp);
last_hidden = '#calc'+ i;
inserted_hidden = true;
// console.log("a");
}
else{
$(last_hidden).after(tp);
last_hidden = '#calc'+ i;
}
}
});
// set sidebar selection
plugin.setPreview( quantities.find("a.selected").first());
}
}
});
}
/*
* User input
*/
plugin.userInput = function()
{
var button = user_input.find(".button");
button.on("click",function(){
var clicked = $(this);
// option row
var row = $(this).closest(".options-row");
// custom inputs
var input = row.find('input[type="text"]');
// custom input names
var names = row.find('input[type="hidden"]');
// group name
var group = row.attr("data-group-name");
// target elements
var insert_response = row.attr("data-update-target");
// insert copy
var insert_copy = row.attr("data-insert-custom");
// current selection
var use_custom = input.attr("name") == "custom_quantity" ? false : true;
//console.log(input.attr("name"));
//console.log(use_custom);
//console.log(plugin.settings.custom);
var selection = plugin.getSelection(button,use_custom,true);
// set amount to input
selection.custom_names.push(group);
// set names & values
selection[group + "_names"] = [];
selection[group + "_values"] = [];
selection[group + "_active"] = null;
// set custom input
var is_null = false;
input.each(function()
{
if( !$(this).val() || $(this).val() == 0 ) is_null = true;
selection[group + "_names"].push( $(this).parent().find("input[type='hidden']").val() );
selection[group + "_values"].push( $(this).val() );
// set custom history
if($(this).attr("name") == "custom_quantity"){
plugin.settings.custom.push( $(this).val() );
selection[group + "_active"] = $(this).val();
}
});
// return error if is_null
if(is_null == true) return alert("Invoer kan niet leeg zijn");
// max with
var max_width = row.attr("data-max-width");
var max_height = row.attr("data-max-height");
if(max_width)
{
var data = {
max_width : max_width,
max_height : max_height,
values: selection[group + "_values"]
}
if(plugin.validateSize(data) === false) return alert("Maximaal formaat kleiner dan "+ data.max_width +" en "+ data.max_height);
}
// post data
$.ajax({
type: "POST",
url: plugin.getPostUrl() + pid,
data: selection,
dataType: "json",
success: function(data){
if(data){
// reset form
input.val('');
// insert id element
var insert_response = button.closest(".options-row").attr("data-update-target");
// insert element in dom as option
if(insert_copy == 1)
{
// remove current items
plugin.removeOptions(insert_response, "> .cell:not(\".custom-input\")");
var $custom = {};
for (i = 0; i < selection[group + "_names"].length; i++) {
$custom[selection[group + "_names"][i]] = selection[group + "_values"][i];
}
// show input from user
var custom_attributes = JSON.stringify($custom).replace(/"/g, "'");
// template
var tp = $('<div class="cell medium-3 small-6">\
<a href="#" class="button" \
data-required="1" \
data-custom="'+ selection[group + "_names"].join("||") +'" \
data-values="'+ selection[group + "_values"].join("||") +'" \
data-name="'+ group +'" \
data-label="'+ data.labels[group] +'" \
data-value="'+ selection[group + "_values"].join("||") +'" \
data-custom-values="'+ custom_attributes +'"\
>'+ data.labels[group] +'</a>\
</div>');
var link = tp.find("a");
var before = row.find(".custom-input");
tp.insertBefore(before);
// deactivate
plugin.deactivateActive(row);
// make active
tp.find("a").addClass("selected");
// insert tooltip if error has been found
if(data.errors[group].length > 0){
var err = data.errors[group].join("<br />");
var options = {
tipText : err,
position : "bottom",
alignment : "center"
}
//console.log(button);
var tooltip = new Foundation.Tooltip( clicked ,options);
tooltip.show();
setTimeout(function(){
tooltip.destroy();
},4000);
}
}
// update response
var inserted = false;
var last = 0;
var inserted_hidden = false;
var last_hidden = 0;
$("#"+ insert_response).find("a.button").removeClass("selected");
$.each( data.pricing, function( i, product ) {
// template
var active = product.active == true ? " selected" : "";
var tp = $('<div class="cell medium-3 small-6" id="calc'+ i +'">\
<a href="#" class="button'+ active +'" \
data-custom-values="{\
\'weight\':\''+ product.weight +'\',\
\'delivery_price\':\''+ product.delivery[0].price +'\',\
\'delivery_options\': '+ plugin.deliveryOptions( product.delivery ) +',\
\'premium_production\' : '+ plugin.premiumOptions( product.premium ) +'\
}" \
data-group-type="'+ product.property +'" \
data-name="'+ product.name +'" \
data-label="'+ product.label +'" \
data-value="'+ product.value +'" \
data-iscustom="'+ product.custom +'" \
data-amount="'+ product.amount +'">'+ product.label +'<br />'+ product.total +'</a>\
</div>');
// insert response
if(insert_copy == 0)
{
$("#"+ insert_response ).find(".cell.custom-input").before(tp);
}
else{
if(i < 4)
{
if(inserted == false)
{
$("#"+ insert_response).prepend(tp);
last = '#calc'+ i;
inserted = true;
}
else{
$(last).after(tp);
last = '#calc'+ i;
}
}
else{
if(inserted_hidden == false)
{
$("#"+insert_response).find(".property-options-hidden > .grid-x").prepend(tp);
last_hidden = '#calc'+ i;
inserted_hidden = true;
}
else{
$(last_hidden).after(tp);
last_hidden = '#calc'+ i;
}
}
}
});
// update preview
plugin.setPreview( $("#"+insert_response).find("a.selected") );
}
}
});
});
}
/*
* Delivery options
*/
plugin.deliveryOptions = function(object)
{
var names = [];
for (i = 0; i < object.length; i++)
{
names.push( "'"+object[i].name+"'" );
}
return "["+ names.join(",") +"]";
}
/*
* Premium production prices
*/
plugin.premiumOptions = function(array)
{
var names = [];
for (i = 0; i < array.length; i++)
{
var option = {
id : array[i].id,
date : array[i].date,
label : array[i].label,
price : array[i].price
};
names.push(option);
}
return JSON.stringify(names).replace(/"/g, "'") ;
}
/*
* Order selection
*/
plugin.orderSelection = function(clicked_el)
{
var selection = plugin.getSelection(false,true,true);
var post_url = clicked_el.attr("data-action");
var properties = {};
plugin.find("a.selected").each(function(){
var property = $(this).attr("data-name");
var label = $(this).attr("data-label");
// custom attributes (size)
if( $(this).attr("data-custom-values") )
{
var custom = JSON.parse( $(this).attr("data-custom-values").replace(/'/g, '"') );
for(var key in custom)
{
if(key == "premium_production")
{
var days = custom[key];
var data = [];
$.each(days, function( i, day ){
data.push(day.id)
});
selection[key] = data;
}
else{
var value = custom[key];
selection[key] = value;
}
}
}
properties[property] = label;
});
//console.log(selection);
selection["properties"] = JSON.stringify(properties),
// post data
$.ajax({
type: "POST",
url: post_url,
data: selection,
dataType: "json",
success: function(data){
var $clone = $("<div class=\"to-cart\">");
$clone.offset({
top: clicked_el.offset().top,
left: clicked_el.offset().left
});
$clone.css({
'height': '48px',
'width': '48px',
});
$clone.animate({
'top': $(".top-bar .winkelwagen").offset().top + 10,
'left': $(".top-bar .winkelwagen").offset().left + 30,
'width': 0,
'height': 0
}, 500, 'swing');
$clone.appendTo( $('body') )
// update basket total
plugin.updateCart(data);
}
});
}
/*
* Update cart
*/
plugin.updateCart = function(data)
{
var $li = $(".winkelwagen");
var $h4 = $li.find(".euro");
var $counter= $li.find(".counter");
$counter.addClass("added-to-cart");//.delay(1500).removeClass("added-to-cart");
$h4.html(data.total);
$counter.html(data.counter);
if(data.item){
var $html = $('<li class="grid-x grid-padding-x item">\
<div class="cell small-3">'+ data.item.count +'</div>\
<div class="cell small-6"><strong>'+ data.item.name +'</strong></div>\
<div class="cell small-3 text-right">'+ data.item.price +'</div>\
<div class="cell small-7 small-offset-3 properties">'+ data.item.properties +'</div>\
<div class="small-2 cell text-right delete"><a data-id="'+ data.item.uid +'" data-action="'+ data.item.url +'"><i class="fal fa-trash-alt"></i></a></div>\
</li>');
// insert
$("#shopping-cart-details").find("ul .winkelwagen").before($html);
// new item in cart
$html.shoppingProduct();
}
}
/*
* Selection of all active properties
*/
plugin.getSelection = function(click_el,use_custom,select_names) // element_clicked, true
{
var options = plugin.find("a.selected[data-optiontype='options']");
var selected = plugin.find("a.selected");
//var custom_amounts = plugin.find("a[data-iscustom='true']");
// Custom data v2
var custom_names = [];
// selected options
var arr = [];
options.each(function(){
var value = $(this).attr("data-id");
arr.push(value);
});
var data = {
id: pid,
options: arr,
custom_names :[]
};
// convert elements to object
selected.each(function()
{
var att_name = $(this).attr("data-name").toLowerCase();
var value = $(this).attr("data-id");
data[att_name] = value;
// cart amount label
data[att_name+"_lbl"] = $(this).attr("data-label")
if($(this).attr("data-value") )
{
data.price = $(this).attr("data-value");
}
if( $(this).attr("data-custom") )
{
data[att_name] = $(this).attr("data-label");
data.custom_names.push( $(this).closest(".options-row").attr("data-group-name") );
data[att_name + "_names"] = $(this).attr("data-custom").split("||");
data[att_name + "_values"] = $(this).attr("data-values").split("||");
}
});
// custom amounts
/*var amounts = [];
custom_amounts.each(function(){
if($(this).attr("data-iscustom") == "true"){
var value = $(this).attr("data-amount");
amounts.push(value);
}
});*/
if(use_custom == true){
data["custom_amounts"] = plugin.settings.custom;//amounts;
//data["custom_amounts"] =
}
for(var key in plugin.settings.options)
{
var obj = plugin.settings.options[key];
data[key] = obj;
}
return data;
}
/*
* Remove options from selector
*/
plugin.removeOptions = function(insert_response,find_element)
{
$("#"+ insert_response ).find(find_element).each(function(){
if( $(this).hasClass("property-options-hidden") ){
var $subs = $(this).find("> div").find(find_element);
$subs.remove();
}
else $(this).remove();
});
}
/*
* Toggle row details and hidden elements
*/
plugin.toggleDetails = function()
{
togglers.on("click",function(){
var $target = $(this).closest(".product-property-select").find(".property-options-hidden");// attr("data-target");
if(!$(this).hasClass("open"))
{
$($target).hide().removeClass("hide");
$($target).slideDown("fast");
$(this).addClass("open").find("i").addClass("fa-rotate-90");
}
else
{
$($target).slideUp("fast");
$(this).removeClass("open").find("i").removeClass("fa-rotate-90");
}
});
}
// element specific function
plugin.doFunction = function(function_name,element)
{
switch(function_name)
{
case "select-material":
// hide all in group
var group = element.attr("data-groupid");
// show column
var column = element.attr("data-columnid");
// hide all group except header
$("a[data-groupid="+ group +"]:not([data-header=\"true\"])").removeClass("selected").parent().hide();
// show clicked
$("a[data-columnid="+ column +"]").parent().show();
// active first subitem of child
$("a[data-columnid="+ column +"]").eq(1).addClass("selected");
break;
}
}
// selecting properties
plugin.toggleSelection = function(row, clicked_el)
{
// single select
if(clicked_el.attr("data-required") == 1 || clicked_el.attr("data-multiple") == 2)
{
// make old inactive
plugin.deactivateActive(row);
clicked_el.addClass("selected");
}
// multi select
else if(clicked_el.attr("data-multiple") == 1)
{
if(clicked_el.hasClass("selected"))
{
clicked_el.removeClass("selected");
}
else if(row.find("a.selected").length > 0)
{
// deactivated others
plugin.deactivateActive(row);
// make active
clicked_el.toggleClass("selected");
}
else
{
clicked_el.addClass("selected");
}
}
// toggle element
else{
clicked_el.toggleClass("selected");
}
}
// update preview sidebar
plugin.setPreview = function(clicked_element)
{
//console.log(clicked_element);
// clear preview list
$("#product-preview").html("");
$("#product-preview").append("<li><strong>Product</strong><span>"+ plugin.getProductName() +"</span></li>")
// loop selected properties
plugin.find("a.selected").each(function(){
$("#product-preview").append("<li><strong>"+ $(this).attr("data-name") +"</strong><span>"+ $(this).attr("data-label") +"</span></li>");
});
var price = plugin.euro( clicked_element.attr("data-value"),1);
var price_tax = plugin.euro( clicked_element.attr("data-value"),1.21);
var custom = plugin.getJSON( clicked_element.attr("data-custom-values") );
// price
$("#product-preview-price").find(".amount-no-tax").text( price );
$("#product-preview-price").find(".amount-with-tax").text( price_tax );
$("#product-preview-price").find(".delivery-amount").text( custom.delivery_price );
// production dates
$("#product-preview-premium").find("li[date-timestamp]").remove();
$.each( custom.premium_production, function( i, option ) {
// show date
if(i == 0) $("#product-preview").append("<li><strong>Levering</strong><span>"+ option.label +"</span></li>")
// pricing
$("#product-preview-premium").append('<li date-timestamp="'+ option.label +'"><span>'+ option.label +'</span><span class="price text-right">+ €'+ plugin.euro(option.price, 1) +'</span></li>');
});
}
// get reveal template
plugin.getTemplate = function()
{
return tp.clone();
}
// return post url
plugin.getPostUrl = function()
{
return plugin.settings.postUrl;
}
// return post url
plugin.getOrderUrl = function()
{
return plugin.settings.orderUrl;
}
// format price
plugin.euro = function(price,factor)
{
return (parseFloat(price) * factor).toFixed(2);
}
// deactivate row
plugin.deactivateActive = function(row)
{
row.find("a.selected").removeClass("selected");
}
// validate size
plugin.validateSize = function(data)
{
var a = parseInt(data.max_width);
var b = parseInt(data.max_height);
var c = parseInt(data.values[0]);
var d = parseInt(data.values[1]);
return plugin.sizeInRange(a,b,c,d);
}
// check if size fits
plugin.sizeInRange = function(max_width, max_height,width, height)
{
if (!((width <= max_width && height <= max_height) || (height <= max_width && width <= max_height))) {
//console.log("te groot");
return false;
}
return true;
}
// return product name
plugin.getProductName = function()
{
return product_name;
}
// debug json
plugin.d = function(str)
{
function replacer(key, value) {
// Filtering out properties
if (typeof value === 'string') {
return value + "<br/>";
}
return value;
}
$("#debug").html("<code>"+ JSON.stringify( str,null,'\t') +"</code>");
}
// parse str to json
plugin.getJSON = function(str)
{
return JSON.parse(str.replace(/'/g, '"'));
}
// init the plugin
plugin.init();
});
}
/*
* Set linked form input values after click
*/
$.fn.setInputValue = function(){
return this.each(function(){
var element = $(this);
var $target = element.attr("data-input-target");
var $value = element.attr("data-input-value");
element.init = function()
{
element.on("click",function(){
// set form input
$( $target ).val( $value );
//console.log($target);
});
}
element.init();
});
}
/*
* Shopping cart select
*/
$.fn.shoppingCart = function()
{
return this.each(function(){
var cart = $(this);
var $options = cart.find(".select-option");
var $adressbook = cart.find(".addressbook");
var $customdate = cart.find("input.datepicker");
var $formsetters = cart.find(".form-setter");
var $next = cart.find(".product-sidebar .button");
var $products = cart.find(".cart-item");
cart.settings = {
url: "/cart/delivery",
validate: [],
}
cart.init = function()
{
// adrssess book in cart
$adressbook.addressBook();
// observe changed elements and set inputs
$formsetters.setInputValue();
// change options for delivery
cart.click();
// pick other date
$customdate.datepicker({
minDate: $customdate.attr("data-mindate"),
beforeShowDay: $.datepicker.noWeekends,
onSelect: function() {
$customdate.closest(".cart-item").find("a.selected").removeClass("selected");
$customdate.prev().addClass("selected");
var date = $.datepicker.formatDate( "DD d MM" , $(this).datepicker('getDate') );
$customdate.find(".date").text( date );
$("#cart-delivery-date ").html( date )
$("#delivery_date").val( $.datepicker.formatDate( "dd-mm-yy" , $(this).datepicker('getDate') ));
$("#cart-delivery-premium").html( cart.euro( 0,1) );
// post types
event.preventDefault();
// post types
cart.post();
// $target = $(this).attr("data-target");
// $amount_attr = $(this).attr("data-amount");
//$( $target ).html( cart.euro( $(this).attr($amount_attr),1) );
}
});
cart.find(".cart-item .item").shoppingProduct();
$next.on("click",cart.complete);
}
cart.complete = function()
{
// remove old valition
for (i = 0; i < cart.settings.validate.length; i++){
// destroy tooltip
cart.settings.validate[i].destroy();
// unset key
cart.settings.validate.splice(i, 1);
}
// no delivery
var delivery_addr = !$("#delivery_id").val() ? false : true;
if(delivery_addr === false){
var el = $(".addressbook").find(".product-header");
$(".addressbook").addClass("invalid");
var options = {
tipText : "Kies een ontvanger",
position : "right",
alignment : "center"
}
var tooltip = new Foundation.Tooltip(el,options);
tooltip.show();
cart.settings.validate.push(tooltip);
}
var invalid_products = $products.find(".file-uploader[data-hasupload='false']");
invalid_products.each(function(){
var options = {
tipText : "Voeg bestand toe",
position : "right",
alignment : "center"
}
var wrapper = $(this).closest(".product-header");
var tooltip = new Foundation.Tooltip(wrapper,options);
tooltip.show();
cart.settings.validate.push(tooltip);
});
}
cart.click = function()
{
// change options
$options.find("a:not(.datepicker)").on("click",function(){
if( $(this).closest(".product-option").hasClass("disabled") ) return;
$(this).closest(".cart-item").find("a.selected").removeClass("selected");
$(this).addClass("selected");
$target = $(this).attr("data-target");
$amount_attr = $(this).attr("data-amount");
$( $target ).html( cart.euro( $(this).attr($amount_attr),1) );
if( $(this).attr("data-target") == "#cart-delivery-premium" ){
$("#cart-delivery-date").html( $(this).attr("data-delivery-label") )
}
// post types
cart.post();
});
/*
$formsetters.on("click",function(){
var $target = $(this).attr("data-input-target");
var $value = $(this).attr("data-input-value");
// set form input
$( $target ).val( $value );
})*/
}
cart.post = function()
{
var selection = cart.selection();
$.ajax({
type: 'POST',
url: cart.settings.url,
data: selection,
success: function(data){
if(data){
var $cart = $(".winkelwagen");
var $total = $cart.find("[order-total]");
var $tax = $cart.find("[order-tax]");
$total.html( cart.euro(data.total,1) );
$tax.html( cart.euro(data.total_tax,1) );
}
}
});
}
cart.selection = function()
{
var data = {};
var selected = cart.find(".product-option a.selected");
selected.each(function(){
// check attibutes
$names = $(this).attr("data-names").split("||");
for (i = 0; i < $names.length; i++){
var $name = $names[i];
var $attr = "data-"+$name
var $value = $(this).attr($attr);
data[$name] = $value;
}
});
return data;
}
cart.euro = function(price,factor)
{
return (parseFloat(price) * factor).toFixed(2).replace(".",",");
}
cart.init();
});
}
/*
* Select an address from user adressbook
*/
$.fn.addressBook = function()
{
return this.each(function(){
var plugin = $(this);
var sidebar = $(".product-sidebar");
var $search = plugin.find(".search-input");
var $ul = plugin.find(".adrress-list");
var $header = plugin.find("a[data-toggle] span");
var $form = plugin.find("form");
var $post = $form.find("button");
plugin.settings = {
searchUrl : "/customer/address/search",
minLength : 2
}
plugin.init = function()
{
plugin.search();
plugin.post();
}
plugin.post = function()
{
$form.on("submit",function(){
event.preventDefault();
});
$form.on("formvalid.zf.abide", function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: $form.serialize(),
success: function(data){
if(data){
plugin.selectAddress($(this), data);
$form.find("input").val("");
$("#form-post-address").hide();
$("#delivery_id").val( data.addr_id )
}
}
});
});
}
plugin.search = function(){
$search.on("keyup",function(){
if($(this).val().length < plugin.settings.minLength) return;
$.ajax({
url: plugin.settings.searchUrl,
method: "GET",
data: {
q: $(this).val()
},
success: function(data){
if(data){
$ul.empty().show().removeClass("hide");
$.each( data, function( i, item ) {
var $addr = item.address +' '+ item.number +', '+ item.zip +' '+ item.city +','+ item.country;
var $name = item.company +', '+ item.firstname+' '+ item.lastname;
var $a = $('<a data-input-target="#delivery_id" data-input-value="'+ item.addr_id +'" data-id="'+ item.addr_id +'" data-name="'+ $name +'">').append('<i class="fal fa-angle-right"></i><strong>'+ $name +'</strong>').append( $addr );
var $li = $('<li>').append( $a );
$ul.append($li);
$a.on("click",function(){
plugin.selectAddress($(this), item);
});
$a.setInputValue();
});
}
}
});
});
}
plugin.selectAddress = function($el, json)
{
// select
$header.text( json.company +', '+ json.firstname+' '+ json.lastname );
//reset
$search.val("");
// hide
$ul.slideUp("fast");
//sidebar
$addrFull = json.company+'<br />'+json.address+' '+json.number+'<br />'+json.zip+' '+json.city+'<br />'+json.country+'<br />';
sidebar.find(".selected-full-address").html($addrFull);
}
plugin.init();
});
}
/*
* Shopping cart details
*/
$.fn.shoppingCartDetails = function()
{
return this.each(function(){
var plugin = $(this);
var items = plugin.find("li.item");
plugin.init = function()
{
items.shoppingProduct();
}
plugin.updateCart = function(data)
{
var $li = $(".winkelwagen");
var $h4 = $li.find(".h4");
var $counter= $li.find(".counter");
$h4.html(data.total);
$counter.html(data.counter);
}
plugin.init();
});
}
/*
* Products in shopping cart
*/
$.fn.shoppingProduct = function(){
return this.each(function(){
var plugin = $(this);
plugin.init = function(){
// property rows
plugin.find("a").on('click',function (){
// get all clicks
var data = plugin.delete( $(this) );
});
}
plugin.updateCart = function(data)
{
var $cart = $(".winkelwagen");
var $total = $cart.find("[order-total]");
var $counter= $cart.find("[order-counter]");
$total.html(data.total);
$counter.html(data.counter);
}
plugin.delete = function(element){
// post data
$.ajax({
type: "DELETE",
url: element.attr("data-action"),
success: function(data){
// update dom
element.closest(".wrapper").slideUp("fast");
plugin.updateCart(data);
}
});
}
plugin.init();
});
}
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
$.fn.deleteElement = function()
{
return this.each(function(){
var plugin = $(this);
var selector = plugin.attr("data-find");
var el = plugin.closest(selector);
plugin.init = function(){
plugin.on("click",function(){
el.remove();
})
}
plugin.init();
});
}
$.fn.changeListPosition = function()
{
return this.each(function()
{
var plugin = $(this);
plugin.init = function()
{
// make group sortable
plugin.sortable({
handle: ".handle-draggable",
placeholder: "ghost",
axis: "y",
update: function(event,ui){
//var order = $(this).sortable('toArray').toString();
var sorted = $(this).sortable( "toArray" );//, { key: "sort" } );
$("#element_order").val(sorted);
console.log(sorted);
// var groups = plugin.find(".item");
// groups.each(function(i){
//console.log(i);
// $(this).find(".group-position").val( i );
// });
}
});
}
// init the plugin
plugin.init();
});
}
$.fn.changePosition = function()
{
return this.each(function(){
var plugin = $(this);
var checks = plugin.find("input");
var sort_options = plugin.find("[data-sort-vertical]");
var value_el,options_el;
plugin.init = function()
{
//console.log(options);
sort_options.sortable({
handle: ".handle-draggable",
//placeholder: "cell auto ghost",
axis: "y",
update: function(){
var $input = $(this).find(".selected-group-ids");
var $selected = $(this).find("input:checked");
var data = [];
$selected.each(function(i){
//console.log(i);
var val = $(this).attr("data-current-selection");
data.push(val);
});
$input.val( data.join("||") );
//console.log( data );
}
});
// make group sortable
plugin.sortable({
handle: ".handle-draggable",
placeholder: "cell auto ghost",
axis: "x",
update: function(){
var groups = plugin.find(".item");
groups.each(function(i){
//console.log(i);
$(this).find(".group-position").val( i );
});
}
});
// insert checkbox values in property field
checks.on("click",function(){
// unchecked
if( !$(this).prop('checked') ) return
// find input element to store ids
value_el = $(this).closest(".grid-x").find('.selected-group-ids');
// find input element to store ids
options_el = $(this).closest(".grid-x").find('.selected-option-ids');
// is selected
var is_selected = $(this).is(':checked');
// get options and selection from db
plugin.getOptions($(this).attr("data-product-id"), $(this).val(),$(this));
})
}
// get property options
plugin.getOptions = function(product_id, group_id, clicked_element)
{
var url = '/admin/product/'+ product_id +'/selected-options/'+ group_id;
$.ajax({
url: url,
method: "GET",
data: {
},
success: function(data){
if(data){
var template = $('<div class="reveal" data-reveal data-animation-in="scale-in-up" data-animation-out="scale-out-down"><button class="close-button" data-close aria-label="Close modal" type="button"><span aria-hidden="true">×</span></button></div>');
var button = $('<button class="button primary">Opslaan</button>');
var check_all = $('<li class="last">Selecteer: <a class="select-all" data-check="true">alles</a> | <a class="select-all" data-check="false">geen</a></li>');
template.append('<h3>'+ data.name +'</h3><ul class="top-level no-bullet"></ul>');
// insert options
$.each(data.options, function(i, item) {
var li = $('<li><input type="checkbox" class="group" value="'+ item.id +'" id="reveal.'+ data.name + item.id +'" '+ (item.selectable == true ? "checked" : "") +'><label for="reveal.'+ data.name + item.id +'">'+ item.name +'</label></li>');
template.find("ul.top-level").append(li);
// sub options
if(item.sub.length > 0)
{
var ul = $("<ul class='no-bullet sub-list'></ul>");
li.append(ul);
$.each(item.sub, function(i, option){
ul.append('<li><input type="checkbox" class="option" value="'+ option.id +'" id="reveal.'+ option.name + option.id +'" '+ (option.selectable == true ? "checked" : "") +'><label for="reveal.'+ option.name + option.id +'">'+ option.name +'</label></li>');
});
}
});
template.find("ul.top-level").append(check_all);
check_all.find("a").on("click",function(){
template.find('input[type="checkbox"]').prop('checked', eval($(this).attr("data-check")));
});
template.append(button);
// close
button.on("click",function(){
// close reveal
reveal.close();
// current selection of ids
var current_selection = clicked_element.closest(".item").find('input[type="checkbox"]:checked').not(clicked_element);
var current_ids = []; // ["5:5,6,7","5:5,6,7"];
current_selection.each(function(){
current_ids.push( $(this).attr("data-current-selection") );
});
// new ids selection
var ids = [];
var checked = template.find('input[type="checkbox"].group:checked');
checked.each(function(){
ids.push( $(this).val() );
});
var id_str = group_id +":"+ ids.join(",");
// set selection in clicked el
clicked_element.attr("data-current-selection",id_str)
// news ids
current_ids.push( id_str );
// set in input
value_el.val( current_ids.join("||") );
// sub items
var options = [];
var checked = template.find('input[type="checkbox"].option:checked');
checked.each(function(){
options.push( $(this).val() );
});
// current values
//var currunt_ids = options_el.val();
var new_ids = group_id +":"+ options.join(",");
options_el.val( new_ids );
});
// open
var reveal = new Foundation.Reveal(template,{"speed":500});
reveal.open();
}
}
});
}
// init the plugin
plugin.init();
});
}
$.fn.showConfirmCallout = function()
{
var link_to_page = $(this).attr("href");
var msg = $(this).attr("data-msg");
var tp = $('<div class="confirm-callout">\
<div class="grid-container">\
<div class="grid-x">\
<div class="small-12 medium-6 medium-offset-3 columns text-center">\<div class="callout" 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 secondary">Bevestig</a> <button class="button primary" data-close>Annuleren</button></div></div>\
</div>\
</div>\
</div>');
var panel = tp.find(".callout");
var close_btn = tp.find("button.primary");
$(this).on("click",function(event){
event.preventDefault();
if( $(this).hasClass("inited") )
{
// toggle panel
panel.toggle();
// toggle shadeout
showShadeOut();
return;
}
// create mask element if not exists
if( $(".mask-overlay").length == 0 ) createShadeOut();
$("footer").before(tp);
$(this).addClass("inited").addClass("open");
});
// close
close_btn.on("click",function(event){
hideShadeOut();
});
// create shadeout
var createShadeOut = function()
{
shadeout = $('<div class="mask-overlay"></div>').hide();
shadeout.insertAfter("footer");
shadeout.on("click",function(event)
{
hideShadeOut();
panel.hide();
}).fadeIn()
}
// hide shade-out
var hideShadeOut = function()
{
shadeout.removeClass("is-open").fadeOut("fast");
}
// hide shade-out
var showShadeOut = function()
{
shadeout.addClass("is-open").fadeIn("fast");
}
}
/*
* validate url input
*/
$.fn.validateUrl = function(){
return this.each(function(){
var plugin = $(this);
var form = plugin.closest("form");
var firstfield = form.find('input[type=text]');
plugin.init = function(){
// no url copy if data
if($(this).val()) return;
firstfield.on("keyup",function(){
plugin.validate()
});
}
plugin.validate = function()
{
var str = firstfield.val().replace(/^\s+|\s+$/g, '').toLowerCase();
var from = "ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:;";
var to = "aaaaaeeeeeiiiiooooouuuunc------";
for (var i=0, l= from.length ; i<l ; i++) {
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
}
str = str.replace(/[^a-z0-9 -]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-');
plugin.set(str);
}
plugin.set = function(str)
{
plugin.val(str);
plugin.attr('value',str);
}
// init the plugin
plugin.init();
});
}
/*
* Delete row
*/
$.fn.deleteRow = function(){
return this.each(function(){
var plugin = $(this);
var row = plugin.closest(".property-row");
plugin.init = function(){
plugin.on("click",function(){
row.slideUp("fast",function() { $(this).remove()} );
});
}
// init the plugin
plugin.init();
});
}
/*
* Duplicate options row
*/
$.fn.duplicateRow = function(){
return this.each(function(){
var plugin = $(this);
var row = plugin.closest(".property-row");
var icon = '<i class="fal fa-plus-square"></i>';
var type = row.attr("data-type");
plugin.init = function(){
plugin.on("click",function(){
var clone = row.clone().hide();
row.after( clone );
clone.slideDown("fast");
clone.find("a").html(icon).duplicateRow();
clone.find("input").val("");
clone.find("input[type=\"hidden\"]").val("0");
if(type == "file")
{
var input = clone.find("input[type=file]");
var label = input.prev();
var txt = label.attr("data-label");
label.text(txt);
}
// toggle remove
$(this).html('<i class="fal fa-minus-square"></i>').unbind("click").deleteRow();
});
}
// init the plugin
plugin.init();
});
}
/*
* Section dropdown
*/
$.fn.toggleDropDown = function(){
return this.each(function(){
var dropdown = $(this);
var header = $("#header");
var target = dropdown.attr("data-target");
var close_dd = $(target).find(".close-dropdown");
var element = $('<div class="mask-overlay"></div>');
var fadeDelay = 250;
//var shadeout = dropdown.shadeOut();
dropdown.init = function()
{
dropdown.on("click",function(event){
// if no target return;
if($(target).length == 0 ) return;
// stop click
event.preventDefault();
// show shade out
dropdown.showShadeOut();
// hide open dropdowns
$('.product-dropdown:not(.hide)').addClass("hide");
// slide down dropdown
$(target).hide().delay(fadeDelay).removeClass("hide").slideToggle("");
// nav is open
header.addClass("navigation-open");
});
close_dd.on("click",function(event){
event.preventDefault();
dropdown.hideShadeOut();
//element.removeClass("is-clicked").addClass("hidden").fadeOut("fast");
});
// create mask
dropdown.createMask();
}
dropdown.createMask = function()
{
if( $(".mask-overlay").length == 0 ) element.hide().insertAfter("header");
else element = $(".mask-overlay").hide();
element.on("click",function(event)
{
dropdown.hideShadeOut();
});
}
dropdown.hideShadeOut = function()
{
// slide up dropdown
$(target).slideUp();
// hide dropdown
element.removeClass("is-open").delay(fadeDelay).fadeOut("fast");
// mark as closed
header.delay(fadeDelay).removeClass("navigation-open");
}
dropdown.showShadeOut = function()
{
element.addClass("is-open").delay().fadeIn("fast");
}
// init the plugin
dropdown.init();
});
}
/*
* Toolip on an elemnet
*/
$.fn.tooltipOnElement = function(){
return this.each(function(){
var element = $(this);
element.init = function()
{
//alert("TEst")
//var elem = new Foundation.Tooltip(element, options);
}
// init the plugin
element.init();
});
}
/*
* Fullscreen an item
*/
$.fn.toggleOptions = function(){
return this.each(function(){
var plugin = $(this);
plugin.init = function(){
plugin.on("click",function(){
plugin.toggleClass("open");
});
}
// init the plugin
plugin.init();
});
}
/*
* Load Ckeditors
*/
var allEditors = document.querySelectorAll('textarea.has-editor');
for (var i = 0; i < allEditors.length; ++i) {
ClassicEditor.create(allEditors[i],{
toolbar: [ 'heading', '|', 'bold', 'italic', 'link','bulletedList','numberedList']
});
}
/*
* Date Picker localization
*/
( function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define( [ "../widgets/datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}( function( datepicker ) {
datepicker.regional.nl = {
closeText: "Sluiten",
prevText: "Vorige",
nextText: "Volgende",
currentText: "Vandaag",
monthNames: ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni','Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'],
monthNamesShort: ['jan', 'feb', 'mrt', 'apr', 'mei', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
dayNames: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'],
dayNamesShort: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
dayNamesMin: ['zo','ma','di','wo','do','vr','za'],
weekHeader: 'Week',
dateFormat: 'dd-mm-yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: "" };
datepicker.setDefaults( datepicker.regional.nl );
return datepicker.regional.fr;
} ) );