<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>
//AOS init() for on scroll animation start here
AOS.init({
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver: false, // disables automatic mutations' detections (advanced)
debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 500, // values from 0 to 3000, with step 50ms
easing: 'linear', // default easing for AOS animations
once: true, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});
//script for make elements draggable
var elementsCount = 18;
var finalPrice = 0;
var randomnum = 1;
var addspace = '0';
var selectedproducts = {};
var prodcat = [];
var prodfin = [];
/* $(".elements-area .elem").click(function() {
var productCat = $("#productcategory").val();
var productCat = productCat.replace(/ /g, "")
if ($('.droppable-area .elem').length < elementsCount) {
$(this).css("top", addspace +'px');
$(this).css("left", addspace +'px');
var title = $(this).find(".title").text();
var model = $(this).find(".title").attr('data-model');
var price = $(this).find(".price-value").text();
var clasprice = price.split('.');
var elementclass = productCat + '_' + randomnum + '_' + clasprice[0];
$(this).addClass(elementclass);
var quantity = 1;
if(selectedproducts.hasOwnProperty(model)) {
var newvals = Object.values(selectedproducts);
newvals = selectedproducts[model];
newvals = newvals.split('---');
quantity = parseInt(newvals[3]) + parseInt(1);
}
selectedproducts[model] = title+'---'+price+'---'+model+'---'+quantity;
$(this).children('.remove-icon').attr('elementid', elementclass);
$(this).children('.remove-icon').attr('onmousedown', "removeItem('"+elementclass+"')");
$(this).clone().appendTo(".droppable-area");
$(this).children('.remove-icon').removeAttr('onclick');
$(this).removeClass(elementclass);
$(this).css("top", 'unset');
$(this).css("left", 'unset');
addspace = parseInt(addspace) + parseInt("10");
draggable();
zIndexplus();
finalPrice += parseInt(price);
$('#finalPrice').text(finalPrice);
randomnum++;
}
}); */
$(function(){
onclickevent();
})
function onclickevent(){
$(".elements-area .elem").click(function() {
// debugger;
if ($('.droppable-area .elem').length < elementsCount) {
$(this).css("top", addspace +'px');
$(this).css("left", addspace +'px');
var title = $(this).find(".title").text();
var model = $(this).find(".title").attr('data-model');
var price = $(this).find(".price-value").text();
//var productCat = $("#productcategory").val();
var productCat = $(this).find(".title").attr('data-category');
var productFin = $(this).find(".title").attr('data-finish');
var internalFinish = $('#internalFinish').val();
prodcat.push(productCat);
prodfin.push(productFin);
var productCat = productCat.replace(/[- )(]/g,'');
var clasprice = price.split('.');
var elementclass = productCat + '_' + randomnum + '_' + clasprice[0];
$(this).addClass(elementclass);
var quantity = 1;
if(selectedproducts.hasOwnProperty(model)) {
var newvals = Object.values(selectedproducts);
newvals = selectedproducts[model];
newvals = newvals.split('---');
quantity = parseInt(newvals[3]) + parseInt(1);
}
selectedproducts[model] = title+'---'+price+'---'+model+'---'+quantity+'---'+internalFinish+'---'+productFin+'---'+productCat ;
$(this).children('.remove-icon').attr('elementid', elementclass);
$(this).children('.remove-icon').attr('onmousedown', "removeItem('"+elementclass+"')");
$(this).clone().appendTo(".droppable-area");
$(this).children('.remove-icon').removeAttr('onclick');
$(this).removeClass(elementclass);
$(this).css("top", 'unset');
$(this).css("left", 'unset');
addspace = parseInt(addspace) + parseInt("10");
draggable();
zIndexplus();
finalPrice += parseInt(price);
$('#finalPrice').text(finalPrice.toFixed(2));
randomnum++;
}
});
}
function draggable() {
$(".droppable-area .draggable").draggable({
zIndex: 100,
containment: "parent"
}); //set containment to parent then elements work under parent div
};
function removeItem(id) {
// debugger;
var elemetId = id;
var model = $('.droppable-area .'+elemetId+'.ui-draggable .item-detail .title').attr('data-model');
var category = $('.droppable-area .'+elemetId+'.ui-draggable .item-detail .title').attr('data-category');
var title = $('.droppable-area .'+elemetId+'.ui-draggable .item-detail .title').text();
var price = $('.droppable-area .'+elemetId+'.ui-draggable .item-detail .price-value').text();
var productCat = $('.droppable-area .'+elemetId+'.ui-draggable .item-detail .title').attr('data-category');
var productFin = $('.droppable-area .'+elemetId+'.ui-draggable .item-detail .title').attr('data-finish');
var internalFinish = $('#internalFinish').val();
finalPrice = parseInt(finalPrice) - parseInt(price);
$('#finalPrice').text(parseInt(finalPrice).toFixed(2));
$('.droppable-area .' +elemetId).remove();
addspace = parseInt(addspace) - parseInt("10");
if(selectedproducts.hasOwnProperty(model)) {
var newvalsarr = Object.values(selectedproducts);
var elemIndx = selectedproducts[model];
newvals = elemIndx.split('---');
var quantity = parseInt(newvals[3]) - parseInt(1);
if(quantity == 0){
delete selectedproducts[model];
}else{
selectedproducts[model] = title+'---'+price+'---'+model+'---'+quantity+'---'+internalFinish+'---'+productFin+'---'+productCat;
}
}
}
Array.prototype.remove = function() {
var what, a = arguments, L = a.length, ax;
while (L && this.length) {
what = a[--L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
};
function zIndexplus() {
// $(".droppable-area .elem").click(function() {
$(".droppable-area .elem").on('click mousedown',function() {
$(this).css("z-index", "2");
$(".droppable-area .elem").not(this).css("z-index", "1");
/*$(this).css("z-index", "2").siblings().css("z-index", "1");*/
});
};
/*change background-color script*/
changebgColor();
function changebgColor() {
var defaultColor = '#fff';//$("#colorSelect").val();
$('.droppable-area').css("background-color", defaultColor);
$('.droppable-area').css("border", '1px solid #222');
$("#colorSelect").on('change', function() {
var currentColor = this.value;
$('.droppable-area').css("background-color", currentColor);
if ($("#colorSelect").val() == "white") {
$('.droppable-area').css("border", "1px solid #000000");
} else {
$('.droppable-area').css("border", "none");
}
});
};
/*change product script*/
changeProduct();
function changeProduct() {
var defaultProduct = $("#productSelect").val();
$('.' + defaultProduct).css("display", "block").siblings().css("display", "none");
$("#productSelect").on('change', function() {
var currentProduct = this.value;
$('.' + currentProduct).css("display", "block").siblings().css("display", "none");
if ($(this).val() == "allitems") {
$(".products > div").css("display", "block");
}
setScrollbar();
});
};
/*transparent scrollbar script for some reason*/
function setScrollbar() {
if ($("body").height() <= 1000) {
$("body").addClass("setscroll");
} else {
$("body").removeClass("setscroll");
}
};
// script for preloader
var preloader = document.getElementById("loading");
function myFunction(){
preloader.style.display = 'none';
};
// script for progressbar
setTimeout(function() {
$('.progressbar .ui-widget-header').css({
"width": "0",
"background-color": "#000000!important"
});
}, 100
);
$(function() {
var progressbar = $("#progressbar"),
progressLabel = $(".progress-label");
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text(progressbar.progressbar("value") + "%");
},
complete: function() {
progressLabel.text("100%");
}
});
function progress() {
var val = progressbar.progressbar("value") || 0;
progressbar.progressbar("value", val + 2);
if (val < 99) {
setTimeout(progress, 80);
}
}
setTimeout(progress, 1000);
function nextPage() {
if (progressLabel.text() == "100%") {
window.location.href = 'form.php';
}
}
setTimeout(nextPage, 5500);
});
