353 lines
12 KiB
JavaScript
353 lines
12 KiB
JavaScript
var
|
||
_factor = 1,
|
||
_max_amount = 460,
|
||
_unit = 360/_max_amount ,
|
||
_flag = false,
|
||
_angle = {'x': 0, 'y': 0};
|
||
_anglelast = {'x': 0, 'y': 0};
|
||
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': 180, },
|
||
'front': { 'x': 0, 'y': 45, },
|
||
'left': { 'x': 0, 'y': 90, },
|
||
'right': { 'x': 0, 'y': -90, },
|
||
};
|
||
|
||
// Start when DOM is ready
|
||
$(function() {
|
||
initFaces();
|
||
initInfos();
|
||
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 == "enfantin" || theme == "liberty") {
|
||
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .front");
|
||
}
|
||
if(theme == "chocolate" || theme == "cinema" || theme == "oriental" || theme == "fleurs"
|
||
|| theme == "vintage" || theme == "voyage" || theme == "gourmandise" || theme == "dentellechic") {
|
||
$('#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);
|
||
|
||
// Faces chocos identiques
|
||
if(theme == "chocolate" || theme == "cinema" || theme == "oriental" || theme == "champetre") {
|
||
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .front");
|
||
$('#custom_elmts .date-holder-line').clone().appendTo(".chocos-holder .back");
|
||
}
|
||
// Faces chocos différentes
|
||
else {
|
||
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco1 .front");
|
||
$('#custom_elmts .date-holder').clone().appendTo(".chocos-holder .choco2 .front");
|
||
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco4 .front");
|
||
}
|
||
|
||
// Specific theme
|
||
if(theme == "fleurs" || theme == "tendance" || theme == "uv" || theme == "voyage" || theme == "vintage"
|
||
|| theme == "gourmandise" || theme == "dentellechic" || theme == "enfantin" || theme == "liberty") {
|
||
$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco5 .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));
|
||
rotateDC(faceDeg['front']['x'],faceDeg['front']['y']);
|
||
});
|
||
|
||
$('#NOM2').on('keyup click', function(){
|
||
defNOM2($(this));
|
||
rotateDC(faceDeg['front']['x'],faceDeg['front']['y']);
|
||
});
|
||
|
||
$('#PERSOTXT').on('keyup click', function(){
|
||
var txt = $(this).val().replace(/\n/g, "<br />");
|
||
$('.face-custom-img').empty();
|
||
$('.face-custom-txt').html('<div class="freetext-holder"></div>');
|
||
$('.freetext-holder').html(txt).css({'margin-top':-$('.freetext-holder').height()*0.5});
|
||
var face = facename($('.freetext-holder'));
|
||
// Set custom-select
|
||
options = $('.ref-FACELIBRE').find('.custom-select li');
|
||
options.each(function(i, el) {
|
||
el = $(el);
|
||
if (el.text() == 'Texte') {
|
||
el.trigger('click');
|
||
}
|
||
});
|
||
// Rotate
|
||
rotateDC(faceDeg[face]['x'],faceDeg[face]['y']);
|
||
});
|
||
|
||
$('#DATEMARIAGE').on('change click', function(e) {
|
||
defDATEMARIAGE($(this));
|
||
var face = facename($('.date-holder'));
|
||
rotateDC(faceDeg[face]['x'],faceDeg[face]['y']);
|
||
});
|
||
|
||
$('#FACELIBRE').on('change', function(e) {
|
||
defFACELIBRE($(this));
|
||
rotateDC(0,180);
|
||
});
|
||
|
||
$('#EMBALLAGE').on('change', function(e) {
|
||
defEMBALLAGE($(this));
|
||
});
|
||
|
||
$('#PELLICULAGE').on('change', function(e) {
|
||
defPELLICULAGE($(this));
|
||
});
|
||
|
||
$('#DOUBLECUBEIMAGE').on('change', function(e) {
|
||
// Set custom-select
|
||
options = $('.ref-FACELIBRE').find('.custom-select li');
|
||
options.each(function(i, el) {
|
||
el = $(el);
|
||
if (el.text() == 'Image' && el.hasClass('selected') != true) {
|
||
el.trigger('click');
|
||
}
|
||
});
|
||
defDOUBLECUBEIMAGE(this);
|
||
rotateDC(0,135);
|
||
});
|
||
|
||
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'));
|
||
defDOUBLECUBEIMAGE($('#DOUBLECUBEIMAGE'));
|
||
}
|
||
|
||
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 == "Image") {
|
||
$('#PERSOTXT').val('');
|
||
defDOUBLECUBEIMAGE($('#DOUBLECUBEIMAGE'));
|
||
} else if(choice == "Texte") {
|
||
$('#response-'+$('#DOUBLECUBEIMAGE').data('field')).html('');
|
||
$('input[name='+$('#DOUBLECUBEIMAGE').data('field')+']').val('');
|
||
var txt = $('#PERSOTXT').val().replace(/\n/g, "<br/>");
|
||
$('.face-custom-txt').html('<div class="freetext-holder"></div>');
|
||
$('.freetext-holder').html(txt).css({'margin-top':-$('.freetext-holder').height()*0.5});
|
||
} else if(choice == "Initiales") {
|
||
$('#PERSOTXT').val('');
|
||
$('#response-'+$('#DOUBLECUBEIMAGE').data('field')).html('');
|
||
$('input[name='+$('#DOUBLECUBEIMAGE').data('field')+']').val('');
|
||
$('#custom_elmts .initiales-holder').clone().appendTo(".face-custom-txt");
|
||
}
|
||
}
|
||
|
||
function defPELLICULAGE(obj){
|
||
$('.matface').remove();
|
||
var choice = obj.find('option:selected').text();
|
||
if(choice == "Mat") {
|
||
$('.cubeface').append('<div class="matface"></div>')
|
||
}
|
||
}
|
||
|
||
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 defDOUBLECUBEIMAGE(obj){
|
||
$('.face-custom-txt').empty();
|
||
$('.face-custom-img').empty();
|
||
if (obj.files && obj.files[0]) {
|
||
$('.face-custom-img').html('<div class="image-holder"></div>');
|
||
var reader = new FileReader();
|
||
reader.onload = function (e) {
|
||
$('.image-holder').css('background-image', 'url('+e.target.result+')');
|
||
}
|
||
reader.readAsDataURL(obj.files[0]);
|
||
} else {
|
||
var url = $('input[name='+obj.data('field')+']').data('dl');
|
||
var img = $('input[name='+obj.data('field')+']').val();
|
||
if (img.length > 0) {
|
||
$('.face-custom-img').html('<div class="image-holder"></div>');
|
||
var request = new XMLHttpRequest();
|
||
request.open('GET', url+'/'+img, true);
|
||
request.responseType = 'blob';
|
||
request.onload = function() {
|
||
var reader = new FileReader();
|
||
reader.onload = function(e){
|
||
$('.image-holder').css('background-image', 'url('+e.target.result+')');
|
||
};
|
||
reader.readAsDataURL(request.response);
|
||
};
|
||
request.send();
|
||
}
|
||
}
|
||
}
|
||
|
||
function facename(obj){
|
||
var face = obj.parent('.cubeface');
|
||
if(face.hasClass('top')){
|
||
return 'top';
|
||
} else if(face.hasClass('bottom')){
|
||
return 'bottom';
|
||
} else if(face.hasClass('back')){
|
||
return 'back';
|
||
} else if(face.hasClass('front')){
|
||
return 'front';
|
||
} else if(face.hasClass('left')){
|
||
return 'left';
|
||
} else if(face.hasClass('right')){
|
||
return 'right';
|
||
}
|
||
}
|
||
|
||
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}
|
||
}
|
||
|