var _factor = 1, _max_amount = 460, _unit = 360/_max_amount , _flag = false, _angle = {'x': 0, 'y': 0}; _anglelast = {'x': 0, 'y': 0}; ; var monthR = ["","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"]; var faceDeg = { 'top': { 'x': 0, 'y': 0, }, 'bottom': { 'x': 0, 'y': 0, }, 'back': { 'x': 0, 'y': 0, }, 'front': { 'x': 0, 'y': 45, }, 'left': { 'x': 0, 'y': 0, }, 'right': { 'x': 0, 'y': 0, }, }; // Start when DOM is ready $(function() { initInfos(); initFaces(); initDrag(); }); function initFaces() { // Reset faces $(".container-db .db-cube1 .back").addClass('face-custom-txt'); $(".container-db .db-cube1 .back").addClass('face-custom-img'); $('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front"); $('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom"); // Doublecube holder if (theme == "ivoire" || theme == "tendance" || theme == "champetre" || theme == "uv") { $('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube1 .left"); } if (theme == "oriental") { $('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .top"); } if(theme == "chocolate" || theme == "cinema" || theme == "oriental" || theme == "fleurs" || theme == "vintage" || theme == "voyage" || theme == "gourmandise") { console.log('date'); $('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .right"); } $('.container-db .db-cube1 .top').css({'background-image':'url('+themeImg+'/box/1-TOP.png)'}); $('.container-db .db-cube1 .bottom').css({'background-image':'url('+themeImg+'/box/1-BOTTOM.png)'}); $('.container-db .db-cube1 .back').css({'background-image':'url('+themeImg+'/box/1-BACK.png)'}); $('.container-db .db-cube1 .front').css({'background-image':'url('+themeImg+'/box/1-FRONT.png)'}); $('.container-db .db-cube1 .left').css({'background-image':'url('+themeImg+'/box/1-LEFT.png)'}); $('.container-db .db-cube1 .right').css({'background-image':'url('+themeImg+'/box/1-RIGHT.png)'}); $('.container-db .db-cube2 .top').css({'background-image':'url('+themeImg+'/box/2-TOP.png)'}); $('.container-db .db-cube2 .bottom').css({'background-image':'url('+themeImg+'/box/2-BOTTOM.png)'}); $('.container-db .db-cube2 .back').css({'background-image':'url('+themeImg+'/box/2-BACK.png)'}); $('.container-db .db-cube2 .front').css({'background-image':'url('+themeImg+'/box/2-FRONT.png)'}); $('.container-db .db-cube2 .left').css({'background-image':'url('+themeImg+'/box/2-LEFT.png)'}); $('.container-db .db-cube2 .right').css({'background-image':'url('+themeImg+'/box/2-RIGHT.png)'}); $('.container-db').addClass(theme); // Chocos holder $('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco1 .front"); $('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco4 .front"); $('#custom_elmts .date-holder').clone().appendTo(".chocos-holder .choco2 .front"); // Chocos background image $('.chocos-holder .choco1 .front').css({'background-image':'url('+themeImg+'/chocos/1F.png)'}); $('.chocos-holder .choco1 .back').css({'background-image':'url('+themeImg+'/chocos/1B.png)'}); $('.chocos-holder .choco2 .front').css({'background-image':'url('+themeImg+'/chocos/2F.png)'}); $('.chocos-holder .choco2 .back').css({'background-image':'url('+themeImg+'/chocos/2B.png)'}); $('.chocos-holder .choco3 .front').css({'background-image':'url('+themeImg+'/chocos/3F.png)'}); $('.chocos-holder .choco3 .back').css({'background-image':'url('+themeImg+'/chocos/3B.png)'}); $('.chocos-holder .choco4 .front').css({'background-image':'url('+themeImg+'/chocos/4F.png)'}); $('.chocos-holder .choco4 .back').css({'background-image':'url('+themeImg+'/chocos/4B.png)'}); $('.chocos-holder .choco5 .front').css({'background-image':'url('+themeImg+'/chocos/5F.png)'}); $('.chocos-holder .choco5 .back').css({'background-image':'url('+themeImg+'/chocos/5B.png)'}); $('.chocos-holder').addClass(theme); $('.chocos-holder .flip-container').eq(4).show(); } //=== Events $('#NOM1').on('keyup click', function(){ defNOM1($(this)); console.log($('.noms-holder').parent('figure').attr('class')); rotateDC(0,45); }); $('#NOM2').on('keyup click', function(){ defNOM2($(this)); rotateDC(0,45); }); $('#PERSOTXT').on('keyup click', function(){ var txt = $(this).val().replace(/\n/g, "
"); $('.face-custom-img').empty(); $('.face-custom-txt').html('
'); $('.freetext-holder').html(txt).css({'margin-top':-$('.freetext-holder').height()*0.5}); rotateDC(0,180); }); $('#DATEMARIAGE').on('change click', function(e) { defDATEMARIAGE($(this)); rotateDC(0,90); }); $('.FACELIBRE').on('change', function(e) { defFACELIBRE($(this)); rotateDC(0,180); }); $('#EMBALLAGE').on('change', function(e) { defEMBALLAGE($(this)); }); $('#PELLICULAGE').on('change', function(e) { defPELLICULAGE($(this)); }); function initDrag() { $('#simu-box').on(events.start, function(e) { if (hasTouchSupport) { var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; p0 = { 'x': touch.pageX, 'y': touch.pageY }; } else { p0 = { 'x': e.clientX, 'y': e.clientY }; } _flag = true; $(document).on(events.move, drag); $('.simu-container').removeClass('animated'); e.preventDefault(); }); $(document).on(events.end, function(e) { var p1; if (hasTouchSupport) { var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; p1 = { 'x': touch.pageX, 'y': touch.pageY }; } else { p1 = { 'x': e.clientX, 'y': e.clientY }; } _flag = false; $(document).off(events.move, drag); _angle = {'x': _anglelast.x, 'y': _anglelast.y} }); } function drag(e) { /* distance and angle values since starting to drag */ var p1; if(hasTouchSupport) { var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; p1 = { 'x': touch.pageX - p0.x, 'y': touch.pageY - p0.y } } else { p1 = { 'x': e.clientX - p0.x, 'y': e.clientY - p0.y } } var angle = {'x': -p1.y*_unit, 'y': p1.x*_unit}; tmp = 'rotateX(' + (_angle.x + angle.x) + 'deg)' + 'rotateY(' + (_angle.y + angle.y) + 'deg) scale(.92)'; $('.simu-container').css({'-webkit-transform' : tmp , 'transform' : tmp}); _anglelast = {'x': (_angle.x + angle.x), 'y': (_angle.y + angle.y)} }; // === Functions function initInfos() { defNOM1($('#NOM1')); defNOM2($('#NOM2')); defDATEMARIAGE($('#DATEMARIAGE')); defFACELIBRE($('.FACELIBRE')); defPELLICULAGE($('#PELLICULAGE')); defEMBALLAGE($('#EMBALLAGE')); } function defDATEMARIAGE(obj){ var day = obj.val().substring(0,2); var month = obj.val().substring(3,5); var year = obj.val().substring(6,10); $('.day').html(day); $('.month').html(monthR[parseInt(month)]); $('.year').html(year); } function defNOM1(obj){ $('.nom_1').html(obj.val()) $('.initiale_1').html(obj.val().substring(0,1)); } function defNOM2(obj){ $('.nom_2').html(obj.val()) $('.initiale_2').html(obj.val().substring(0,1)); } function defFACELIBRE(obj){ var choice = obj.find('option:selected').text(); $(".face-custom-txt").empty(); $('.face-custom-img').empty(); if (choice == "Aucune") { //Nothing } else if(choice == "Image") { } else if(choice == "Texte") { var txt = $('#PERSOTXT').val().replace(/\n/g, "
"); $('.face-custom-txt').html('
'); $('.freetext-holder').html(txt).css({'margin-top':-$('.freetext-holder').height()*0.5}); } else if(choice == "Initiales") { $('#custom_elmts .initiales-holder').clone().appendTo(".face-custom-txt"); } } function defPELLICULAGE(obj){ $('.matface').remove(); if(obj.find('option:selected').text() == "Mat") { $('.cubeface').append('
') } } function defEMBALLAGE(obj){ var choice = obj.find('option:selected').text(); $('.flip-container').removeClass('argent'); $('.flip-container').removeClass('or'); if (choice == "Argenté") { $('.flip-container').addClass('argent'); } else if (choice == "Doré") { $('.flip-container').addClass('or'); } } function formatDateInput(date) { var day = date.substring(6,8); var month = date.substring(4,6) var year = date.substring(0,4) return year+'-'+month+'-'+day; } function todaySimu() { var today = new Date(); var dd = (today.getDate()).toString(); var mm = (today.getMonth()+1).toString(); //January is 0! var yyyy = (today.getFullYear()).toString(); if(dd<10) dd='0'+dd; if(mm<10) mm='0'+mm; return yyyy+mm+dd; } function rotateDC(rX,rY) { $('.simu-container').addClass('animated'); tmp = 'rotateX(' + rX + 'deg)' + 'rotateY(' + rY + 'deg)'; $('.simu-container').css({'transform' : tmp}); _angle = {'x': rX, 'y': rY} _anglelast = {'x': rX, 'y': rY} }