Encadrement sur mesure
étape 1 – Choisissez votre type de sujet à encadrer
Encadrer un sujet papier
J’importe une image de mon appareil
J’ai déjà mon sujet
Je choisis une affiche / une photo dans le catalogue
x
cm
1 – Dimensions du sujet :
x
cm
2 – Style de passe-partout :
Couleur:
Découpe:
Sans
Standard
Large
Asymétrique
Haut: 6cm
Bas: 6cm
Gauche: 6cm
Droite: 6cm
Modèle:
Nuance:
3 – Choix du cadre :
Couleur:
4 – Choix du verre :
Verre classique
Verre invisible
5 – Choix du papier d’impression :
Papier classique
15€/M
Papier qualité
25€/M
6 – Quantité
const colorThief = new ColorThief();
var colorTranslate = [ {"Argent" : "Silver", "Beige" : "Beige", "Blanc" : "White", "Bleu" : "Blue", "Bois" : "Burlywood", "Brun" : "Brown", "Gris" : "Grey", "Jaune" : "Yellow", "Noir" : "Black", "Or" : "Gold", "Orange" : "Orange", "Rose" : "Pink", "Rouge" : "Red", "Vert" : "Green"} ];
var colorOrder = { "Noir" : 0, "Bois" : 1, "Blanc" : 2, "Argent" : 3, "Beige" : 4, "Brun" : 5, "Or" : 6, "Gris" : 7, "Jaune" : 8, "Orange" : 9, "Rouge" : 10, "Rose" : 11, "Vert" : 12, "Bleu" : 13 };
var searchPP = []; var searchBaguette = [];
var dataAffiches = [];
var dataPPEnabledList = []; var dataPPFinal = [];
var dataBaguettes; var dataBaguettesEnabledList = []; var dataBaguetteFinal = []; var dataImgBaguettes = []; var dataImgBaguettesChest = [];
var styles = []; var profils = []; var matieres = []; var colors = []; var ppColors = [];
var cropper; var cropperDim;
var widthCropStart; var heightCropStart;
function setMobileView() {
if (window.innerWidth <= 700) { $('.render-container').width(window.innerWidth); $('.render-container').height(window.innerWidth); $('.profil-container').css("padding", 0); $('.profil-container').width(window.innerWidth); $('.profil-container').height(window.innerWidth); $('.csm-substep-container').width(window.innerWidth-50); // $('.render-option-container').first().css('margin-top', '-65px'); // $('.face-option').css('margin-top', '7px'); $('.render-option-container').first().css('margin-top', '20px'); $('.render-option-container').first().css('margin-bottom', '15px'); // $('.face-option').hide(); $('.view-interface').css('height', '50px'); $('.view-interface').css('width', '50px'); // $('.view-interface-sub').css('height', '40px'); // $('.view-interface-sub').css('width', '40px'); $('.reset-filters').css('font-size', '9px'); $('.reset-filters').css('margin-left', '3px'); $('.csm-substep[data-order="1"] .substep-title').html('Sujet'); $('.csm-substep[data-order="2"] .substep-title').html('Passe-partout'); $('.csm-substep[data-order="3"] .substep-title').html('Cadre'); $('.csm-substep[data-order="4"] .substep-title').html('Verre'); $('.csm-substep[data-order="5"]').hide(); $('.csm-substep[data-order="6"]').remove(); $('.csm-validate').hide(); $('.csm-summary-price').hide(); $('.csm-substep.active').find('.csm-substep-container').hide(); if ($('.mobile-sum').length == 0) { $('.csm-summary').clone(true, true).appendTo('.mobile-summary').addClass('mobile-sum').show(); $('.csm-validate').clone(true, true).appendTo('.mobile-summary').show(); $('.mobile-sum .csm-infos').show(); } $('.csm-validate:eq(1)').show(); // $('.view-interface-sub').hide(); // $('.view-interface-sub.mobile-display').show(); } } function translateColor(color) { var result; $.each(colorTranslate[0], function(i, v){ if(i == color) result = v; }); return result; } function togglePro(){ var code = prompt("Mot de passe mode professionnel", "1234"); var proChecked = $('#toggle-pro').prop('checked'); if (code === "1234") { if (proChecked) { localStorage.setItem('pro', true); $('.ui-widget').show(); $('.pp-btob').show(); $('.pp-sum-model').show(); $('#pp-btoc').hide(); }else { localStorage.setItem('pro', false); $('.ui-widget').hide(); $('.pp-btob').hide(); $('.pp-sum-model').hide(); $('#pp-btoc').show(); } setItemFiltered(); } } function goToChooseImg(makechoice){ $('#csm-container h2').html('étape 2 - Choisissez votre type de sujet à encadrer'); $('.csm-step:visible').hide('slide', {direction: 'right'}, 300); if(cropperDim) { cropperDim.destroy(); } if(makechoice) { $('.csm-step[data-order="2"]').show('slide', {direction: 'left'}, 300); $('.csm-previousstep').attr('onClick', 'previousStep();'); }else { $('.chooseimg').show('slide', {direction: 'left'}, 300); $('.csm-previousstep').attr('onClick', 'goToChooseImg(true);'); } if (window.innerWidth <= 700) { document.getElementById("anchor").scrollIntoView(); } } function nextStep(){ var order = $('.csm-step:visible').data('order'); var next = order+1; if (order < 4) { $('.csm-step:visible').hide('slide', {direction: 'left'}, 300); $('.csm-step[data-order="'+next+'"]').show('slide', {direction: 'right'}, 300); } switch (next) { case 1: $('#csm-container h2').html('étape 1 - Choisissez votre type de sujet à encadrer'); $('.csm-previousstep').hide(); break; case 2: $('#csm-container h2').html('étape 2 - Choisissez votre type de sujet à encadrer'); $('.csm-previousstep').show(); $('.csm-previousstep').attr('onClick', 'previousStep();'); break; case 3: $('#csm-container h2').html('étape 3 - Choisissez les dimensions de votre sujet'); $('.csm-previousstep').attr('onClick', 'goToChooseImg();'); initCropperDim(); break; case 4: $('#csm-container h2').html('étape 4 - Configurez votre cadre'); $('.csm-previousstep').attr('onClick', 'previousStep();'); break; default : break; } if (next === 4){ $('.subject-width').val($('.crop-l').val()); $('.subject-height').val($('.crop-h').val()); setMobileView(); $('.pp-carousel').slick({ infinite: false, speed: 300, slidesToShow: 8, slidesToScroll: 3, prevArrow:"", nextArrow:"", variableWidth: true, adaptiveHeight: true, });
$('.baguette-carousel').slick({ infinite: false, speed: 300, slidesToShow: 8, slidesToScroll: 3, prevArrow:"", nextArrow:"", variableWidth: true, adaptiveHeight: true, });
$( "#search-pp" ).autocomplete({ source: searchPP, select: function( event , ui ) { var texte = ui.item.label; var splited = texte.split(':');
var ref = splited[0].trim();
$('.item[data-ref="'+ref+'"]').click(); } });
$( "#search-baguette" ).autocomplete({ source: searchBaguette, select: function( event , ui ) { var texte = ui.item.label; var splited = texte.split(':');
var ref = splited[0].trim();
$('.item[data-ref="'+ref+'"]').click(); } });
// Setup initial PP var largeur = $('.crop-l').val(); var hauteur = $('.crop-h').val();
if (largeur <= 18 && hauteur <= 24) { var taille = 3; $('.csm-substep-pp-container .item').removeClass("active"); $('input[name=pp-top]').val(taille); $('input[name=pp-bot]').val(taille); $('input[name=pp-left]').val(taille); $('input[name=pp-right]').val(taille); $('.pp-val-txt-top').html('Haut: '+$('input[name=pp-top]').val()+' cm'); $('.pp-val-txt-bot').html('Bas: '+$('input[name=pp-bot]').val()+'cm'); $('.pp-val-txt-left').html('Gauche: '+$('input[name=pp-left]').val()+'cm'); $('.pp-val-txt-right').html('Droite: '+$('input[name=pp-right]').val()+'cm'); $('input[name=pp-right]').val(taille).change(); }else if (largeur <= 40 && hauteur <= 60) { $('.item[data-sizetop="5"]').click(); }else if (largeur > 40 && hauteur > 60) { $('.item[data-sizetop="10"]').click(); }
$('.item[data-ref="WC16003"]').click(); $('.item[data-ref="BP4061"]').click();
setSubject(cropperDim.getCroppedCanvas().toDataURL(), true);
render(); initSubsteps(); setMobileView(); }
if (next < 3){ if(cropperDim) { cropperDim.destroy(); } } } function previousStep(){ var order = $('.csm-step:visible').data('order'); var previous = order-1; switch (previous) { case 1: $('#csm-container h2').html('étape 1 - Choisissez votre type de sujet à encadrer'); $('.csm-previousstep').hide(); break; case 2: $('#csm-container h2').html('étape 2 - Choisissez votre type de sujet à encadrer'); $('.csm-previousstep').show(); $('.csm-previousstep').attr('onClick', 'previousStep();'); break; case 3: $('#csm-container h2').html('étape 3 - Choisissez les dimensions de votre sujet'); $('.csm-previousstep').attr('onClick', 'goToChooseImg();'); initCropperDim(); break; case 4: $('#csm-container h2').html('étape 4 - Configurez votre cadre'); $('.csm-previousstep').attr('onClick', 'previousStep();'); break; default : break; } if (previous < 3){ if(cropperDim) { cropperDim.destroy(); } } if (order > 1) { $('.csm-step:visible').hide('slide', {direction: 'right'}, 300);
$('.csm-step[data-order="'+previous+'"]').show('slide', {direction: 'left'}, 300); }
}
function initStepsManager() {
$('.csm-step[data-order="1"] .csm-step-card').on("click", function(e){
localStorage.setItem("support-choice", $(this).data('choice'));
nextStep(); initBaguettesView(); });
$('.csm-step[data-order="2"] .csm-step-card').on("click", function(e){
localStorage.setItem("subject-choice", $(this).data('choice'));
if($(this).data('choice') === "upload") { $('#subject-holder-input').click();
}else if ($(this).data('choice') === "model") { $('.csm-previousstep').attr('onClick', 'goToChooseImg(true);');
$('.csm-step:visible').hide('slide', {direction: 'left'}, 300); $('.csm-step.chooseimg').show('slide', {direction: 'right'}, 300);
$('.csm-substep[data-order="5"]').hide(); $('.sum-paper').hide(); $('.csm-substep[data-order="6"] h5').html('5 - Quantité');
setChooseImg($(this).data('choice'));
}else if ($(this).data('choice') === "shop") { $('.csm-previousstep').attr('onClick', 'goToChooseImg(true);');
$('.csm-step:visible').hide('slide', {direction: 'left'}, 300); $('.csm-step.chooseimg').show('slide', {direction: 'right'}, 300);
$('.csm-substep[data-order="5"]').hide(); $('.sum-paper').hide(); $('.csm-substep[data-order="6"] h5').html('5 - Quantité');
setChooseImg($(this).data('choice')); }
});
$('#subject-holder-input').on('change', function(){
if ($('.csm-step[data-order="2"]').is(':visible')) { $('.csm-previousstep').attr('onClick', 'goToChooseImg();'); $('#csm-container h2').html('étape 3 - Choisissez les dimensions de votre sujet');
$('.csm-step:visible').hide('slide', {direction: 'left'}, 300); $('.csm-step[data-order="3"]').show('slide', {direction: 'right'}, 300);
initCropperDim(); }
});
}
function setChooseImg(from) {
$('.chooseimg .csm-step-container .fullimg').remove();
if (from === "model") { $('.chooseimg .csm-step-container').append('
'); $('.chooseimg .csm-step-container').append('
'); $('.chooseimg .csm-step-container').append('
'); $('.chooseimg .csm-step-container').append('
'); $('.chooseimg .csm-step-container').append('
');
}else if (from === "shop") { $.each(dataAffiches, function(i, v){
$('.chooseimg .csm-step-container').append('
'); }); }
$('.fullimg').on('click', function(e){
setSubject($(this).find('img').attr('src'));
$('.csm-previousstep').attr('onClick', 'goToChooseImg();'); $('#csm-container h2').html('étape 3 - Choisissez les dimensions de votre sujet');
$('.csm-step:visible').hide('slide', {direction: 'left'}, 300); $('.csm-step[data-order="3"]').show('slide', {direction: 'right'}, 300);
initCropperDim(); });
if (window.innerWidth <= 700) { document.getElementById("anchor").scrollIntoView(); } } function setSubject(src, opt = false) { // set source de toute les images $('#subject-holder').attr('src', src); if (opt) { $('.csm-step-img-preview img:not(.notcropped)').attr('src', src); }else { $('.csm-step-img-preview img').attr('src', src); } $('#subject').attr('src', src); $('.csm-thumbnail').attr('src', src); if (src.substr(0, 4) === "blob") { //set largeur hauter (ratio) var reader = new FileReader(); reader.onload = function (e) { var img = new Image(); img.src = src; img.onload = function () { var ratioHelper = this.width / this.height; localStorage.setItem('ratio', ratioHelper); var largeur = 30.0; var hauteur = 30/ratioHelper; localStorage.setItem('origin-width', largeur); localStorage.setItem('origin-height', hauteur); $('.crop-l').val(largeur); $('.crop-h').val(hauteur.toFixed(1)); if (ratioHelper > 1) { $('#sampleImg').css('max-width', '400px'); }else { $('#sampleImg').css('max-height', '400px'); }
} }
reader.readAsDataURL($('#subject-holder-input')[0].files[0]); }else { var img = new Image();
img.onload = function() { var ratioHelper = this.width / this.height; localStorage.setItem('ratio', ratioHelper);
var largeur = 30.0; var hauteur = 30/ratioHelper;
localStorage.setItem('origin-width', largeur); localStorage.setItem('origin-height', hauteur);
$('.crop-l').val(largeur); $('.crop-h').val(hauteur.toFixed(1));
// $('.subject-width').val(largeur); // $('.subject-height').val(hauteur.toFixed(1));
if (ratioHelper > 1) { $('#sampleImg').css('max-width', '400px'); }else { $('#sampleImg').css('max-height', '400px'); } }
img.src = src; }
render(); }
function setPPFiltered() {
$('.passepartout-container .item').hide();
var colorData = "";
var color = $('.pp-color.active').data('color');
if(color) { colorData = '[data-color="'+color+'"]'; }
$('.passepartout-container .item'+colorData).show(); }
function setItemFiltered() {
$('.baguette-container .item').hide();
var colorData = ""; var color = ""; var matiere = ""; var style = ""; var profil = "";
var glass = "";
var pro = ""; var pro = '[data-pro="show"]';
if(localStorage.getItem('pro') === 'false') pro = '[data-pro="show"]';
$('.glass-container .item').first().hasClass('active') ? glass = '[data-refglass="C"]' : glass ='[data-refglass="R"]';
var color = $('.baguette-color.active').data('color');
if(color) { colorData = '[data-color="'+color+'"]'; }
if($('#matiere').val() != "all") { matiere = '[data-matiere="'+$('#matiere').val()+'"]'; $('#matiere').css({'color': '#ba4129', 'border': '2px solid #ba4129'}); }else { $('#matiere').css({'color': '#666', 'border': '1px solid #666'}); }
if($('#style').val() != "all") { style = '[data-style="'+$('#style').val()+'"]'; $('#style').css({'color': '#ba4129', 'border': '2px solid #ba4129'}); }else { $('#style').css({'color': '#666', 'border': '1px solid #666'}); }
if($('#profil').val() != "all") { profil = '[data-profil="'+$('#profil').val()+'"]'; $('#profil').css({'color': '#ba4129', 'border': '2px solid #ba4129'}); }else { $('#profil').css({'color': '#666', 'border': '1px solid #666'}); }
$('.baguette-container .item'+colorData+matiere+style+profil+glass+pro).show();
}
function setPrice() {
var quantity = $('#quantity').val();
//récupération des couts var coutPP = 12.5; var coutPaper = $('#paper-price-holder').val(); var coutBaguette = $('#baguette-price-holder').val();
//longueur en mètre if ($('input[name=pp-top]').val()+$('input[name=pp-right]').val()+$('input[name=pp-bot]').val()+$('input[name=pp-left]').val() === 0) { var perimetrePP = 0; }else { var perimetrePP = (($('#total-width').val()*2+$('#total-height').val()*2)-($('#baguette-height-holder').val()/10)*8)/100; }
var paper = ($('.subject-width').val()*2+$('.subject-height').val()*2)/100; var perimetreBaguette = (($('#total-width').val()*2)+($('#total-height').val()*2))/100;
//calcul du prix var prixPP = perimetrePP * coutPP; var prixBaguette = perimetreBaguette * coutBaguette;
if (!$('.paper-container item').hasClass("active")) { var prixPaper = 0; }else { var prixPaper = paper * coutPaper; }
var total = (prixPP+prixPaper+prixBaguette)*quantity;
$('.pp-value').append(" ("+prixPP.toFixed(2)+"€)"); $('.cadre-value').append(" (baguette: "+prixBaguette.toFixed(2)+"€)"); $('.paper-value').append(" ("+prixPaper+"€)");
$('.csm-summary-price-object').html(total.toFixed(2)+'€'); $('#cart-price').val(total.toFixed(2)); }
function setSummary() {
var glass = "Verre invisible";
if ($('.main-glass').is(':visible')) { glass = "Verre classique"; }
if ($('.fullsetup').is(':visible')) { var subject_height = $('.laststep-height').val(); var subject_width = $('.laststep-width').val(); }else { var subject_height = $('.subject-height').val(); var subject_width = $('.subject-width').val(); }
$('.sujet-value').html("Image imprimée"); $('.dimension-value').html($('.subject-width').val()+'(largeur) x '+$('.subject-height').val()+'(hauteur) cm'); $('.pp-value').html($('input[name=pp-top]').val()+'(haut) x '+$('input[name=pp-right]').val()+'(droite) x '+$('input[name=pp-bot]').val()+'(bas) x '+$('input[name=pp-left]').val()+'(gauche) cm'); $('.cadre-value').html($('#total-width').val()+' x '+$('#total-height').val()+' cm'); $('.verre-value').html(glass); $('.paper-value').html("Papier "+$('.paper-container .item.active').data('paper'));
// $('.csm-substep[data-order="1"] .substep-data').html(subject_width+'(largeur) x '+subject_height+'(hauteur) cm'); $('.pp-sum-largeur').html('Largeur: '+subject_width+'cm'); $('.pp-sum-hauteur').html('Hauteur: '+subject_height+'cm');
// $('.csm-substep[data-order="2"] .substep-data').html($('input[name=pp-top]').val()+'(haut) x '+$('input[name=pp-right]').val()+'(droite) x '+$('input[name=pp-bot]').val()+'(bas) x '+$('input[name=pp-left]').val()+'(gauche) cm'); $('.pp-sum-model').html($('.passepartout-container .item.active .baguette-name').html()); $('.pp-sum-top').html('Haut: '+$('input[name=pp-top]').val()+'cm'); $('.pp-sum-bot').html('Bas: '+$('input[name=pp-top]').val()+'cm'); $('.pp-sum-left').html('Gauche: '+$('input[name=pp-top]').val()+'cm'); $('.pp-sum-right').html('Droite: '+$('input[name=pp-top]').val()+'cm');
$('.csm-substep[data-order="3"] .substep-data').html($('.baguette-container .item.active .baguette-name').html()); $('.csm-substep[data-order="4"] .substep-data').html($('.glass-container .item.active .glass-name').html()); $('.csm-substep[data-order="5"] .substep-data').html($('.paper-container .item.active .paper-name').html());
$('#cart-dim').val($('#total-width').val()+'x'+$('#total-height').val()); $('#cart-glass').val($('.glass-container .item.active .glass-name').html()); $('#cart-pp').val($('.passepartout-container .item.active').data('ref')+': '+$('input[name=pp-top]').val()+'x'+$('input[name=pp-right]').val()+'x'+$('input[name=pp-bot]').val()+'x'+$('input[name=pp-left]').val()); $('#cart-baguette').val($('.baguette-container .item.active .baguette-name').html()+' ('+$('.baguette-container .item.active').data('ref')+')'); }
function initSteps() {
$('.csm-step').hide(); $('.csm-step[data-order="1"]').show();
}
function initSubsteps() {
$('.csm-substep').removeClass('active'); $('.csm-substep .csm-substep-container').hide();
$('.csm-substep[data-order="2"] .csm-substep-container').show(); $('.csm-substep[data-order="2"]').addClass('active');
$('.ui-widget').hide(); $('.pp-btob').hide(); $('#pp-btoc').show(); $('.pp-sum-model').hide(); }
function initFilters() {
// colors.sort(function (p1, p2) { // return colorOrder[p1] - colorOrder[p2]; // });
$.each(colors, function(k,v) { var color = translateColor(v); $('.baguette-color-container').append('
'); });
// ppColors.sort(function (p1, p2) { // return colorOrder[p1] - colorOrder[p2]; // });
$.each(ppColors, function(k,v) { var color = translateColor(v); $('.pp-color-container').append('
'); });
$.each(styles, function(k,v) { $('#style').append(''); });
$.each(matieres, function(k,v) { $('#matiere').append(''); });
$.each(profils, function(k,v) { $('#profil').append(''); }); }
function initCadreValues() {
localStorage.setItem('pro', false);
$('.subject-width').val(30.0); $('.subject-height').val(20);
$('input[name=pp-top]').val(6); $('input[name=pp-bot]').val(6); $('input[name=pp-left]').val(6); $('input[name=pp-right]').val(6);
$('#color option[value="Noir"]').attr("selected", "selected");
$('.baguette-container .item').hide();
var color = ""; var matiere = ""; var style = ""; var profil = "";
if($('#color').val() != "all") { color = '[data-color="'+$('#color').val()+'"]'; }
if($('#matiere').val() != "all") { matiere = '[data-matiere="'+$('#matiere').val()+'"]'; }
if($('#style').val() != "all") { style = '[data-style="'+$('#style').val()+'"]'; }
if($('#profil').val() != "all") { profil = '[data-profil="'+$('#profil').val()+'"]'; }
$('.baguette-container .item'+color+matiere+style+profil).show();
$('#baguette-height-holder').val(20); $('#baguette-img-holder-img').attr('src', "http://local.wordpress.com/wp-content/uploads/2021/10/W16903.jpg"); $('#baguette-img-holder').val("http://local.wordpress.com/wp-content/uploads/2021/10/W16903.jpg").change();
$('#paper-price-holder').val(15);
//selectors $('.item[data-paper="classique"]').addClass('active'); $('.item[data-glass="show"]').addClass('active'); $('.item[data-sizetop="6"][data-sizebot="6"][data-sizeleft="6"][data-sizeright="6"]').addClass('active');
$('.baguette-container .item[data-color="Noir"]').first().click(); }
function initEvents() {
$('.view-interface').on('click', function(){
pre_active = $('.view-interface.active').attr('id');
if (pre_active == "3D") { TogglePerspective(); }
if (pre_active == "view-zoom") { ToggleZoom(); }
if (pre_active == "view-ambiance") { ToggleAmbiance(); }
if (pre_active != "view-profil") { $('.render-container').show(); $('.profil-container').hide(); }
$('.view-interface').removeClass('active');
$(this).addClass('active');
post_active = $(this).attr('id');
if (post_active == "3D") { $('.render-container').show(); $('.profil-container').hide(); TogglePerspective(); }
if (post_active == "view-zoom") { $('.render-container').show(); $('.profil-container').hide(); ToggleZoom(); }
if (post_active == "view-ambiance") { $('.render-container').show(); $('.profil-container').hide(); ToggleAmbiance(); }
if (post_active == "view-face") { $('.render-container').show(); $('.profil-container').hide(); }
if (post_active == "view-profil") { $('.render-container').hide(); $('.profil-container').show(); }
});
$('.ui-menu-item').on('click', function(){
console.log($(this)); console.log($(this).first().html());
});
$('.reset-filters').on('click', function(){
$('.baguette-color').removeClass("active");
$('#matiere option').attr('selected', false); $('#style option').attr('selected', false); $('#profil option').attr('selected', false);
$('#matiere option[value=all]').attr('selected', true); $('#style option[value=all]').attr('selected', true); $('#profil option[value=all]').attr('selected', true);
setItemFiltered(); });
$('.wand-frame, .baguette_hl').on('click', function(){ if (!$('.csm-substep[data-order="3"]').hasClass('active')) { $('.csm-substep').removeClass('active'); $('.csm-substep .csm-substep-container').hide(200);
$('.csm-substep[data-order="3"]').addClass('active'); $('.csm-substep[data-order="3"]').find('.csm-substep-container').show(200); } });
$('.img-clickable').on('click', function(){
if (!$('.csm-substep[data-order="1"]').hasClass('active')) { $('.csm-substep').removeClass('active'); $('.csm-substep .csm-substep-container').hide(200);
$('.csm-substep[data-order="1"]').addClass('active'); $('.csm-substep[data-order="1"]').find('.csm-substep-container').show(200); } });
$('.main-glass').on('click', function(){
if (!$('.csm-substep[data-order="2"]').hasClass('active')) { $('.csm-substep').removeClass('active'); $('.csm-substep .csm-substep-container').hide(200);
$('.csm-substep[data-order="2"]').addClass('active'); $('.csm-substep[data-order="2"]').find('.csm-substep-container').show(200); } });
$('.crop-btn').on('click', function(e){
if ($(this).html() === "Valider"){
var cropboxdata = cropperDim.getCropBoxData();
var widthCM = $('.crop-l').val(); var heightCM = $('.crop-h').val(); var widthCropEnd = cropboxdata["width"]; var heightCropEnd = cropboxdata["height"];
if (widthCropEnd != widthCropStart || heightCropEnd != heightCropStart) { if (widthCropEnd > widthCropStart) { var ratioWidth = widthCropStart/widthCropEnd; var newVall = widthCM/ratioWidth; }else { var ratioWidth = widthCropEnd/widthCropStart; var newVall = widthCM*ratioWidth; }
if (heightCropEnd > heightCropStart) { var ratioHeight = heightCropStart/heightCropEnd; var newValh = heightCM/ratioHeight; }else { var ratioHeight = heightCropEnd/heightCropStart; var newValh = heightCM*ratioHeight; }
$('.crop-l').val(newVall.toFixed(1)); $('.crop-h').val(newValh.toFixed(1));
}
$('.cropper-container').hide(); $('.csm-step-card-select').prop('disabled', false); $(this).html("Recadrer l'image"); }else{
var cropboxdata = cropperDim.getCropBoxData();
widthCropStart = cropboxdata["width"]; heightCropStart = cropboxdata["height"];
$('.cropper-container').show(); $('.csm-step-card-select').prop('disabled', 'disabled'); $(this).html('Valider'); }
});
// $('.crop-btn-done').on('click', function(e){
// setSubject(cropper.getCroppedCanvas().toDataURL(), true); // cropper.destroy();
// $(this).hide(); // $('.notcropped').hide(); // $('.crop-preview').hide(); // $('.step3-crop-interface').css('display', 'none'); // $('.slidersizecontainer').show();
// $('.crop-btn').show(); // $('.cropped').show(); // $('.submit-step3').show(); // $('.hxl').show();
// $('.csm-step-card-select').prop('disabled', false); // });
$('.paper-container .item').on('click', function(elem){
$('.paper-container .item').removeClass("active"); $(this).addClass("active");
$('#paper-price-holder').val($(this).data('paperprice'));
render(); });
$('.csm-substep').on("click", function(elem){
console.log("csm-substep click");
if (window.innerWidth <= 700) { $('.csm-substep').removeClass('active'); $('.mobile-data').empty(); $(this).find('.csm-substep-container').clone(true, true).appendTo('.mobile-data').show(); $(this).addClass('active'); document.getElementById("anchor-mobile").scrollIntoView(); switch($(this).data('order')) { case 1: newHeight = 1420; break; case 2: newHeight = 2000; break; case 3: newHeight = 1700; break; case 4: newHeight = 1450; break; case 5: newHeight = 1450; break; case 6: newHeight = 1450; break; } }else { if (!$(this).hasClass('active') && $('.csm-step:visible').data('order') === 4) { $('.csm-substep').removeClass('active'); $('.csm-substep .csm-substep-container').hide(200); $(this).addClass('active'); $(this).find('.csm-substep-container').show(200); document.getElementById("anchor").scrollIntoView(); switch($(this).data('order')) { case 1: newHeight = 1120; break; case 2: newHeight = 1600; break; case 3: newHeight = 1400; break; case 4: newHeight = 1150; break; case 5: newHeight = 1150; break; case 6: newHeight = 1150; break; } } } if ($('.csm-step:visible').data('order') === 4) { $('#csm-container').height(newHeight); } }); $('.baguette-container .item').on('click', function(elem){ $('.baguette-container .item').removeClass("active"); $(this).addClass("active"); $('#baguette-height-holder').val($(this).data('size')); $('#baguette-profondeur-holder').val($(this).data('profondeur')); $('#baguette-img-holder-img').attr('src', $(this).data('imgurl')); $('#baguette-price-holder').val($(this).data('price')); $('.profil-container img').first().attr('src', $(this).data('urlprofil')); $('.profil').attr('src', $(this).data('urlprofil')); $('#baguette-img-holder').val($(this).data('imgurl')).change(); }); $('.passepartout-container .item').on('click', function(elem){ $('.passepartout-container .item').removeClass("active"); $(this).addClass("active"); $('.inside-frame').css('background-image', "url("+$(this).data('imgurl')+")"); // var color = translateColor($(this).data('color')); // $('#subject').css('border-color', color); setSummary(); }); $('#baguette-img-holder-img').on('load', function(){ $('.wand-frame.wand-perspective').css('background-color', "rgb("+colorThief.getColor($('#baguette-img-holder-img')[0])+")"); $('.small-render').css('border', "4px solid rgb("+colorThief.getColor($('#baguette-img-holder-img')[0])+")"); }); // $('.subject-width').on('change', function(elem){ // localStorage.setItem('ratio', $(this).val()/$('.subject-height').val()); // $('.subject-width').val($(this).val()); // }); // $('.subject-height').on('change', function(elem){ // localStorage.setItem('ratio', $('.subject-width').val()/$(this).val()); // $('.subject-height').val($(this).val()); // }); $('.csm-substep-pp-container .item').on('click', function(elem){ $('.csm-substep-pp-container .item').removeClass("active"); $(this).addClass("active"); $('input[name=pp-top]').val($(this).data('sizetop')); $('input[name=pp-bot]').val($(this).data('sizebot')); $('input[name=pp-left]').val($(this).data('sizeleft')); $('input[name=pp-right]').val($(this).data('sizeright')); $('.pp-val-txt-top').html('Haut: '+$('input[name=pp-top]').val()+' cm'); $('.pp-val-txt-bot').html('Bas: '+$('input[name=pp-bot]').val()+'cm'); $('.pp-val-txt-left').html('Gauche: '+$('input[name=pp-left]').val()+'cm'); $('.pp-val-txt-right').html('Droite: '+$('input[name=pp-right]').val()+'cm'); if($('input[name=pp-top]').val() == 0) { setMinPP(0); }else { setMinPP(2); } $('input[name=pp-right]').val($(this).data('sizeright')).change(); }); // Render cadre $('.subject-width, .subject-height, #baguette-img-holder, #baguette-height-holder, input[name=pp-top], input[name=pp-bot], input[name=pp-left], input[name=pp-right]').on('change', function(e){ if ($('.fullsetup').is(':visible')) { render(); } }); $('.csm-glass-choice .item').on('click', function(elem){ var $baguetteSelected = $('.baguette-container .item.active'); $baguetteSelected.removeClass("active"); $('.csm-glass-choice .item').removeClass("active"); $(this).addClass("active"); if($(this).data('glass') === "show") { $('.main-glass').css('opacity' ,0.3); $('.baguette-container .item[data-rawref="'+$baguetteSelected.data("rawref")+'"][data-refglass=C]').addClass('active'); $('#baguette-price-holder').val($('.baguette-container .item.active').data('price')); }else { $('.main-glass').css('opacity' ,0.1); $('.baguette-container .item[data-rawref="'+$baguetteSelected.data("rawref")+'"][data-refglass=R]').addClass('active'); $('#baguette-price-holder').val($('.baguette-container .item.active').data('price')); } render(); }); $('.baguette-filters select').on('change', setItemFiltered); $('.pp-color').on('click', function(){ if ($(this).hasClass("active")) { var add = false; }else { var add = true; } $('.pp-color').removeClass("active"); if (add) { $(this).addClass("active"); } setPPFiltered(); }); $('.pp-color-btoc').on('click', function(){ if ($(this).hasClass("active")) { var add = false; }else { var add = true; } $('.pp-color-btoc').removeClass("active"); if (add) { $(this).addClass("active"); } var data = $(this).data('color'); switch (data){ case 'white': $('div[data-ref="BP4061"]').click(); break; case 'beige': $('div[data-ref="BP8560"]').click(); break; case 'grey': $('div[data-ref="BP428749"]').click(); break; case 'black': $('div[data-ref="BP4089"]').click(); break; } }); $('.baguette-color').on('click', function(){ if ($(this).hasClass("active")) { var add = false; }else { var add = true; } $('.baguette-color').removeClass("active"); if (add) { $(this).addClass("active"); } setItemFiltered(); }); $('#change-subject').on('click', function(){ choice = localStorage.getItem('subject-choice'); switch (choice){ case "upload": $('#subject-holder-input').click(); break; case "model": $('.csm-previousstep').attr('onClick', 'goToChooseImg(true);'); $('.csm-step:visible').hide('slide', {direction: 'left'}, 300); $('.csm-step.chooseimg').show('slide', {direction: 'right'}, 300); setChooseImg("model"); break; case "shop": $('.csm-previousstep').attr('onClick', 'goToChooseImg(true);'); $('.csm-step:visible').hide('slide', {direction: 'left'}, 300); $('.csm-step.chooseimg').show('slide', {direction: 'right'}, 300); setChooseImg("shop"); break; } }); $('#toggle-pro').on('change', togglePro); $('#image').on('load', function(){ $('.img-previewdim').width($(this).width()); $('.img-previewdim').height($(this).height()); $('.previewdim-container').width($(this).width()); $('.previewdim-container').height($(this).height()); $('.csm-step-img-preview').width($(this).width()); $('.csm-step-img-preview').height($(this).height()); }); $('.crop-l, .crop-h').on('change', function(){ ratio = localStorage.getItem('ratio'); var largeur = $('.crop-l').val(); var hauteur = $('.crop-h').val(); if ($('#keep_proportion').is(':checked')) { if($(this).hasClass('crop-l')) { newVal = $('.crop-l').val()/ratio; $('.crop-h').val(newVal.toFixed(1)); }else { newVal = $('.crop-h').val()*ratio; $('.crop-l').val(newVal.toFixed(1)); } }else { var ratio = hauteur/largeur; var canvas_data = cropperDim.getCanvasData(); var new_hauteur = canvas_data["width"]*ratio; var new_top = canvas_data["height"]-new_hauteur; if (new_top < 0) { var new_largeur = canvas_data["height"]/ratio; var new_left = canvas_data["width"]-new_largeur; canvas_data["width"] = new_largeur; canvas_data["left"] = new_left/2; }else { canvas_data["height"] = new_hauteur; canvas_data["top"] = new_top/2; } cropperDim.setCropBoxData(canvas_data); } }); } function TogglePerspective() { var $frameRender = $('.frame-render'); if ($frameRender.hasClass('perspective')) { $frameRender.removeClass('perspective'); $('#3D').removeClass('active'); $('.wand-shadow').show(); }else { $frameRender.addClass('perspective'); $('#3D').addClass('active'); $('.wand-shadow').hide(); } } function ToggleZoom(){ if($('.frame-render').css('transform') == "scale(3)") { $('.frame-render').css({'transform-origin': '', 'transform': ''}); }else { $('.frame-render').css({'transform-origin': 'top left', 'transform': 'scale(3)'}); } } function ToggleAmbiance(){ var $container = $('.handle-ambiance'); if ($container.hasClass('ambiance')) { $container.removeClass('ambiance'); $('#view-ambiance').removeClass('active'); $('.render-container').css('background-image', 'url()'); $container.css('transform', ''); $('.frame-render').css('transform', 'scale(1)'); }else { $container.addClass('ambiance'); $('#view-ambiance').addClass('active'); setAmbiance(); } } function setAmbiance(){ if ($('.handle-ambiance').hasClass('ambiance')) { var $container = $('.handle-ambiance'); var $frameRender = $('.frame-render'); var largeur = $('.laststep-width').val(); var hauteur = $('.laststep-height').val(); var input_pp_top = $('input[name=pp-top]').val(); var input_pp_right = $('input[name=pp-right]').val(); var total = parseInt(largeur) + parseInt(hauteur) + parseInt(input_pp_top) + parseInt(input_pp_right); if (total <= 60) { var ratioScale = total/60; $('.render-container').css('background-image', 'url(https://oxyz.studio/bucket/nielsen/ambiance1.jpg)'); $container.css('transform', 'scale(0.3) translateX(-355px) translateY(-100px)'); $frameRender.css('transform', 'scale('+ratioScale+')'); }else { var ratioScale = total/150; $('.render-container').css('background-image', 'url(https://oxyz.studio/bucket/nielsen/ambiance2.jpg)'); $container.css('transform', 'scale(0.4) translateX(270px) translateY(-245px)'); $frameRender.css('transform', 'scale('+ratioScale+')'); } } } function render() { var $frameRender = $('.frameRender'); var imgSrc = $('#baguette-img-holder').val(); if ($('.fullsetup').is(':visible')) { var subject_height = $('.laststep-height').val()*10; var subject_width = $('.laststep-width').val()*10; }else { var subject_height = $('.subject-height').val()*10; var subject_width = $('.subject-width').val()*10; } var baguette_height = $('#baguette-height-holder').val(); var baguette_profondeur = $('#baguette-profondeur-holder').val(); var input_pp_top = $('input[name=pp-top]').val()*10; var input_pp_bot = $('input[name=pp-bot]').val()*10; var input_pp_right = $('input[name=pp-right]').val()*10; var input_pp_left = $('input[name=pp-left]').val()*10; var total_height = subject_height+(baguette_height*2)+input_pp_top+input_pp_bot; var total_width = subject_width+(baguette_height*2)+input_pp_left+input_pp_right; $('#total-height').val(total_height/10); $('#total-width').val(total_width/10); var baguette_vertical = (baguette_height/total_height)*100; var baguette_prof_tmp = (baguette_profondeur/total_height)*100; var pp_top = (input_pp_top/(total_height+input_pp_bot))*100; var pp_bot = (input_pp_bot/(total_height+input_pp_top))*100; var pp_left = (input_pp_left/(total_width+input_pp_right))*100; var pp_right = (input_pp_right/(total_width+input_pp_left))*100; var img_vertical = (subject_height/total_height)*100; var img_horizontal = (subject_width/total_width)*100; var true_pp_padding_top = (pp_top * $('.render-container').height()) / 100; var true_pp_padding_bot = (pp_bot * $('.render-container').height()) / 100; var true_pp_padding_left = (pp_left * $('.render-container').height()) / 100; var true_pp_padding_right = (pp_right * $('.render-container').height()) / 100; if (total_height > total_width) { var reste = total_width / total_height; var final_container = $('.render-container').width()*reste; var true_baguette_height = (baguette_vertical * final_container) / 100;
var true_baguette_profondeur = (baguette_prof_tmp * final_container) / 100;
var true_img_height = (img_vertical * $('.render-container').height()) / 100; var true_img_width = (img_horizontal * final_container) / 100;
var wandFrameHeight = true_baguette_height*2 + true_img_height + true_pp_padding_top + true_pp_padding_bot; var wandFrameWidth = true_baguette_height*2 + true_img_width + true_pp_padding_left + true_pp_padding_right;
}else if (total_height < total_width) { var reste = total_height / total_width; var final_container = $('.render-container').height()*reste; var true_baguette_height = (baguette_vertical * final_container) / 100; var true_baguette_profondeur = (baguette_prof_tmp * final_container) / 100; var true_img_height = (img_vertical * final_container) / 100; var true_img_width = (img_horizontal * $('.render-container').height()) / 100; var wandFrameHeight = true_baguette_height*2 + true_img_height + true_pp_padding_top + true_pp_padding_bot; var wandFrameWidth = true_baguette_height*2 + true_img_width + true_pp_padding_left + true_pp_padding_right; }else { var final_container = $('.render-container').height(); var true_baguette_height = (baguette_vertical * final_container) / 100; var true_baguette_profondeur = (baguette_prof_tmp * final_container) / 100; var true_img_height = (img_vertical * $('.render-container').height()) / 100; var true_img_width = (img_horizontal * $('.render-container').width()) / 100; var wandFrameHeight = true_baguette_height*2 + true_img_width + true_pp_padding_left + true_pp_padding_right; var wandFrameWidth = true_baguette_height*2 + true_img_width + true_pp_padding_left + true_pp_padding_right; } //largeur des baguettes $('.wand-frame').css('height', true_baguette_height+"px"); $('.wand-frame.wand-perspective').css('height', true_baguette_profondeur+"px"); $('.frame-render').css('padding', true_baguette_height+"px"); //longueur des baguettes $('.wand-frame.left').css('width', wandFrameHeight-1+"px"); $('.wand-frame.right').css('width', wandFrameHeight-1+"px"); $('.wand-frame.wand-perspective').css('width', wandFrameHeight+"px"); //largeur pp $('.inside-frame').css('padding-top', true_pp_padding_top+"px"); $('.inside-frame').css('padding-bottom', true_pp_padding_bot+"px"); $('.inside-frame').css('padding-left', true_pp_padding_left+"px"); $('.inside-frame').css('padding-right', true_pp_padding_right+"px"); //dimmension img $('#subject').css('height', true_img_height+"px"); $('#subject').css('width', true_img_width+"px"); //image baguettes $('.wand-frame.top').css('background-image', 'linear-gradient(to right, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0) 75%), url('+imgSrc+')'); $('.wand-frame.top').css('clip-path', 'polygon(0px -1px, 100% -1px, calc(100% - '+true_baguette_height+'px) 100%, '+true_baguette_height+'px 100%)'); $('.wand-frame.bottom').css('background-image', 'linear-gradient(to right, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0) 40%), url('+imgSrc+')'); $('.wand-frame.bottom').css('clip-path', 'polygon(0px 0px, 100% 0px, calc(100% - '+true_baguette_height+'px) 100%, '+true_baguette_height+'px 100%)'); $('.wand-frame.right').css('background-image', 'url('+imgSrc+')'); $('.wand-frame.left').css('background-image', 'url('+imgSrc+')'); //ombres baguettes $('.wand-shadow.left').css('left', '-'+true_baguette_height+"px"); $('.wand-shadow.left').css('height', wandFrameHeight+true_baguette_height+"px"); $('.wand-shadow.left').css('width', true_baguette_height+"px"); $('.wand-shadow.bot').css('bottom', '-'+true_baguette_height+"px"); $('.wand-shadow.bot').css('height', true_baguette_height+"px"); $('.wand-shadow.bot').css('width', wandFrameWidth+true_baguette_height+"px"); $('.wand-shadow.left').css('clip-path', 'polygon(0px '+true_baguette_height+'px, 100% 0px, 100% '+wandFrameHeight+'px, 0% 100%)'); $('.wand-shadow.bot').css('clip-path', 'polygon('+true_baguette_height+'px 0px, 100% 0px, calc(100% - '+true_baguette_height+'px) 100%, 0% 100%)'); //img clickable $('.img-clickable').css('top', true_pp_padding_top+"px"); $('.img-clickable').css('height', 'calc(100% - '+true_pp_padding_top*2+'px)'); $('.img-clickable').css('width', 'calc(100% - '+true_pp_padding_right*2+'px)'); //highlight image $('.img_hl').css('top', true_pp_padding_top+30+"px"); $('.img_hl').css('right', true_pp_padding_right+30+"px"); //small render $('.small-render'); setSummary(); setPrice(); setAmbiance(); } function initBaguettesView() { $.each(dataBaguetteFinal, function(i,v){ if (localStorage.getItem('support-choice') === "canvas") { if (v["__EMPTY_19"] === "NON") { return true; } } //Gestion min/max des baguettes sélectionnées l_min = localStorage.getItem('l_min'); h_min = localStorage.getItem('h_min'); l_max = localStorage.getItem('l_max'); h_max = localStorage.getItem('h_max'); v_lxh_min = v["__EMPTY_10"].split('x'); v_lxh_max = v["__EMPTY_11"].split('x'); v_l_min = v_lxh_min[0]; v_h_min = v_lxh_min[1]; v_l_max = v_lxh_max[0]; v_h_max = v_lxh_max[1]; if (i === 0) { localStorage.setItem('l_min', v_l_min); localStorage.setItem('h_min', v_h_min); localStorage.setItem('l_max', v_l_max); localStorage.setItem('h_max', v_h_max); }else { if (v_l_min < l_min) { localStorage.setItem('l_min', v_l_min); } if (v_h_min < h_min) { localStorage.setItem('h_min', v_h_min); } if (v_l_max < l_max) { localStorage.setItem('l_max', v_l_max); } if (v_h_max < h_max) { localStorage.setItem('h_max', v_h_max); } } //fill filters arrays if (!colors.includes(v["__EMPTY_6"])) { colors.push(v["__EMPTY_6"]); } if (!matieres.includes(v["__EMPTY_2"].substr(11))) { matieres.push(v["__EMPTY_2"].substr(11)); } if (!styles.includes(v["__EMPTY_12"])) { styles.push(v["__EMPTY_12"]); } if (!profils.includes(v["__EMPTY_13"])) { profils.push(v["__EMPTY_13"]); } var btoc = ""; var canvas = ""; // v["__EMPTY_19"] === "NON" ? btoc = "hide" : btoc = "show"; v["__EMPTY_19"] === "NON" ? btoc = "show" : btoc = "show"; v["__EMPTY_21"] === "NON" ? canvas = "hide" : canvas = "show"; var url_menu = 'https://oxyz.studio/bucket/nielsen/baguette-menu/'+v["__EMPTY_16"]; var url_profil = 'https://oxyz.studio/bucket/nielsen/profils/'+v["__EMPTY_17"]; var url_menu_row = dataImgBaguettes.find(x => x.id === parseInt(v["__EMPTY_14"]));
// Url WP // var url_render = url_menu_row["url"]; var url_render = 'https://oxyz.studio/bucket/nielsen/baguette-cadre/'+v["__EMPTY_16"];
$('.baguette-container').append('
'+v["__EMPTY_5"]+'
'+v["__EMPTY_18"]+'€/M
'+v["__EMPTY_2"].substr(11)+'
');
});
colors.sort(function (p1, p2) { return colorOrder[p1] - colorOrder[p2]; });
//init module initFilters(); initEvents(); initCadreValues(); initSubsteps();
setItemFiltered();
$('#sliderSizeOne').attr('min', localStorage.getItem('l_min')/10); $('#sliderSizeOne').attr('max', localStorage.getItem('l_max')/10);
$('#sliderSizeTwo').attr('min', localStorage.getItem('l_min')/10); $('#sliderSizeTwo').attr('max', localStorage.getItem('l_max')/10);
$('.subject-width').attr('min', localStorage.getItem('l_min')/10); $('.subject-width').attr('max', localStorage.getItem('l_max')/10);
$('.subject-height').attr('min', localStorage.getItem('h_min')/10); $('.subject-height').attr('max', localStorage.getItem('h_max')/10); }
function initPP() { fetch("https://oxyz.studio/bucket/nielsen/liste-passepartout.xlsx").then(function (res) { /* get the data as a Blob */ if (!res.ok) throw new Error("fetch failed"); return res.arrayBuffer();
}).then(function (ab) { /* parse the data when it is received */ var data = new Uint8Array(ab); var workbook = XLSX.read(data, { type: "array" });
/* ***************************************************************** * DO SOMETHING WITH workbook: Converting Excel value to Json * ********************************************************************/ var first_sheet_name = workbook.SheetNames[0]; /* Get worksheet */ var worksheet = workbook.Sheets[first_sheet_name];
var _JsonData = XLSX.utils.sheet_to_json(worksheet, { raw: true }); /************************ End of conversion ************************/
dataPPEnabledList = _JsonData;
$.each(dataPPEnabledList, function(i,v){
if (!ppColors.includes(v["__EMPTY_6"])) { ppColors.push(v["__EMPTY_6"]); }
var url_img = 'https://oxyz.studio/bucket/nielsen/baguette-menu/'+v["__EMPTY_16"];
$('.passepartout-container').append('
'+v["__EMPTY_5"]+'
'+v["__EMPTY_18"]+'€/M
'); searchPP.push(v['__EMPTY']+" : "+v['__EMPTY_5']); });
ppColors.sort(function (p1, p2) { return colorOrder[p1] - colorOrder[p2]; });
}); }
function initBaguettesEnabled() {
fetch("https://oxyz.studio/bucket/nielsen/data-produits.xlsx").then(function (res) { /* get the data as a Blob */ if (!res.ok) throw new Error("fetch failed"); return res.arrayBuffer();
}).then(function (ab) { /* parse the data when it is received */ var data = new Uint8Array(ab); var workbook = XLSX.read(data, { type: "array" });
/* ***************************************************************** * DO SOMETHING WITH workbook: Converting Excel value to Json * ********************************************************************/ var first_sheet_name = workbook.SheetNames[0]; /* Get worksheet */ var worksheet = workbook.Sheets[first_sheet_name];
var _JsonData = XLSX.utils.sheet_to_json(worksheet, { raw: true }); /************************ End of conversion ************************/
dataBaguettes = _JsonData;
$.each(dataBaguettes, function(i,v) { $.each(dataBaguettesEnabledList, function(ii, vv) { if (v["__EMPTY"].substr(2) === vv) { if (!dataBaguetteFinal.find(x => x.__EMPTY === v["__EMPTY"])) { dataBaguetteFinal.push(v); searchBaguette.push(v['__EMPTY']+" : "+v['__EMPTY_5']); } } }); });
array('cadre-sur-mesure'), 'posts_per_page' => '-1', ));
foreach($products as $k=>$v) {
$args = array( 'post_type' => 'attachment', 'name' => sanitize_title('A'.$v->get_name()), 'posts_per_page' => 1, 'post_status' => 'inherit', );
$_header = get_posts( $args );
if (empty($_header)) {
$args = array( 'post_type' => 'attachment', 'name' => sanitize_title('W'.$v->get_name()), 'posts_per_page' => 1, 'post_status' => 'inherit', ); }
$_header = get_posts( $args ); $header = $_header ? array_pop($_header) : null; $url = $header ? wp_get_attachment_url($header->ID) : ''; ?>
if (!dataImgBaguettes.find(x => x.id === = $v->get_name() ?>)) { dataImgBaguettes.push({id: = $v->get_name() ?>, url: "= $url ?>"}); }
}); }
function initCropperDim(){
const image = document.getElementById('image');
var options = { viewMode: 3, preview: '.img-previewdim', ready: function (e) { // console.log(e.type);
$('.cropper-container').hide(); cropperDim.setCropBoxData(cropperDim.getCanvasData());
var cropboxdata = cropperDim.getCropBoxData();
widthCropStart = cropboxdata["width"]; heightCropStart = cropboxdata["height"]; }, cropstart: function (e) { // console.log(e.type, e.detail.action); }, cropmove: function (e) { // console.log(e.type, e.detail.action); }, cropend: function (e) { // console.log(e.type, e.detail.action); }, crop: function (e) { var data = e.detail; // console.log(e.type); }, zoom: function (e) { // console.log(e.type, e.detail.ratio); } };
cropperDim = new Cropper(image, options); }
function initCropper(){
const image = document.getElementById('image');
var options = { viewMode: 3, preview: '.img-preview', ready: function (e) { // console.log(e.type); }, cropstart: function (e) { // console.log(e.type, e.detail.action); }, cropmove: function (e) { // console.log(e.type, e.detail.action); }, cropend: function (e) { // console.log(e.type, e.detail.action); }, crop: function (e) { var data = e.detail; // console.log(e.type); }, zoom: function (e) { // console.log(e.type, e.detail.ratio); } };
cropper = new Cropper(image, options); }
function setMinPP(min) {
var pp_top = $('#sliderPPtop'); var pp_bot = $('#sliderPPbot'); var pp_left = $('#sliderPPleft'); var pp_right = $('#sliderPPright');
if (min == 0) { pp_top.val(0); pp_bot.val(0); pp_left.val(0); pp_right.val(0);
$('.pp-val-txt-top').html('Haut: 0cm'); $('.pp-val-txt-bot').html('Bas: 0cm'); $('.pp-val-txt-left').html('Gauche: 0cm'); $('.pp-val-txt-right').html('Droite: 0cm');
$('.pp_hl').hide(); $('#subject').css('border-width', "0px");
render(); }else { if (pp_top.val() == 0) { pp_top.val(2); $('.pp-val-txt-top').html('Haut: 2cm'); }
if (pp_bot.val() == 0) { pp_bot.val(2); $('.pp-val-txt-bot').html('Haut: 2cm'); }
if (pp_left.val() == 0) { pp_left.val(2); $('.pp-val-txt-left').html('Haut: 2cm'); }
if (pp_right.val() == 0) { pp_right.val(2); $('.pp-val-txt-right').html('Haut: 2cm'); }
$('#subject').css('border-width', '3.9px'); $('.pp_hl').show(); }
}
function submitCSM() {
var dim = 'Dimension: '+$('#cart-dim').val(); var price = $('#cart-price').val(); var baguette = $('#cart-baguette').val(); var pp = 'Passe-partout '+$('#cart-pp').val(); var glass = $('#cart-glass').val();
$('
').appendTo('body').submit().remove(); }
$(document).ready(function(){
// var sliderOne = document.getElementById("sliderSizeOne"); var sliderTwo = document.getElementById("sliderSizeTwo");
var sliderPPtop = document.getElementById("sliderPPtop"); var sliderPPbot = document.getElementById("sliderPPbot"); var sliderPPleft = document.getElementById("sliderPPleft"); var sliderPPright = document.getElementById("sliderPPright");
// sliderOne.oninput = function() {
// $('.subject-width').val(this.value);
// // var new_ratio = this.value/$('.subject-height').val();
// roundHeight = this.value/localStorage.getItem('ratio'); // // roundHeight = this.value/new_ratio;
// console.log(localStorage.getItem('ratio')); // console.log(this.value); // console.log(roundHeight);
// $('.subject-height').val(roundHeight.toFixed(1));
// render(); // };
sliderTwo.oninput = function() {
$('.subject-width').val(this.value);
roundHeight = this.value/localStorage.getItem('ratio'); $('.subject-height').val(roundHeight.toFixed(1));
render(); };
sliderPPtop.oninput = function() {
$('.pp-val-txt-top').html('Haut: '+sliderPPtop.value+'cm'); // sliderPPtop.nextElementSibling.value = sliderPPtop.value;
if (sliderPPtop.value == 0) { setMinPP(0); }else { setMinPP(2); }
render(); };
sliderPPbot.oninput = function() {
$('.pp-val-txt-bot').html('Bas: '+sliderPPbot.value+'cm'); // sliderPPbot.nextElementSibling.value = sliderPPbot.value;
if (sliderPPbot.value == 0) { setMinPP(0); }else { setMinPP(2); }
render(); };
sliderPPleft.oninput = function() {
$('.pp-val-txt-left').html('Gauche: '+sliderPPleft.value+'cm'); // sliderPPleft.nextElementSibling.value = sliderPPleft.value;
if (sliderPPleft.value == 0) { setMinPP(0); }else { setMinPP(2); }
render(); };
sliderPPright.oninput = function() {
$('.pp-val-txt-right').html('Droite: '+sliderPPright.value+'cm'); // sliderPPright.nextElementSibling.value = sliderPPright.value;
if (sliderPPright.value == 0) { setMinPP(0); }else { setMinPP(2); }
render(); };
array('cadre-sur-mesure'), 'posts_per_page' => '-1', ));
foreach($products as $k=>$v) {
?>
dataBaguettesEnabledList.push("= $v->get_name()?>");
array('csm-affiche'), 'posts_per_page' => '-1', ));
foreach($affiches as $k=>$v) {
?>
dataAffiches.push( [{"id" : "= $v->get_id();?>", "imgurl" : "= wp_get_attachment_url( $v->get_image_id() );?>", "name" : "= $v->get_name();?>"}] );
initPP(); initBaguettesEnabled(); initSteps(); initStepsManager(); });