267 lines
7.1 KiB
JavaScript
267 lines
7.1 KiB
JavaScript
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, },
|
|
};
|
|
|
|
var color1 = 'anis';
|
|
var colorRGB =
|
|
{
|
|
anis: '#B5DC10',
|
|
argent: '#C2C2C2',
|
|
blanc: '#FFFFFF',
|
|
bleuf: '#10147E',
|
|
bordeaux: 'bordeaux',
|
|
framboise: '#C42B68',
|
|
fuschia: '#F0037F',
|
|
grisf: '#766546',
|
|
ivoire: '#FFFAD7',
|
|
marron: '#3C1503',
|
|
noir: '#000000',
|
|
or: '#FFC211',
|
|
orange: '#E37222',
|
|
parme: '#D198CA',
|
|
rose: '#F88CC4',
|
|
rouge: '#F50003',
|
|
taupe: '#CCC6AB',
|
|
turquoise: '#7FCDD0',
|
|
vert: '#159033',
|
|
violet: '#6B1687',
|
|
}
|
|
|
|
// Start when DOM is ready
|
|
$(function() {
|
|
initInfos();
|
|
initFaces();
|
|
initDrag();
|
|
});
|
|
|
|
function initFaces()
|
|
{
|
|
// reset faces
|
|
$('.container-db').find('.noms-holder').remove();
|
|
$('.container-db').find('.date-holder').remove();
|
|
$('.chocos-holder').find('.noms-holder').remove();
|
|
$('.chocos-holder').find('.date-holder').remove();
|
|
$('.face-custom-txt').removeClass('face-custom-txt');
|
|
$('.face-custom-img').removeClass('face-custom-img');
|
|
|
|
$(".container-db").empty()
|
|
$(".chocos-holder").empty()
|
|
|
|
$(".container-db").html($('#temp-base .doublecube').contents().clone());
|
|
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
|
|
|
|
$('.container-db .cubeface').html($('#temp-exclu .excluface').contents().clone()).css({'background' : 'url('+themeImg+'face.jpg)'})
|
|
$('.chocos-holder .flipper .front').html($('#temp-exclu .excluface').contents().clone()).css({'background' : 'url('+themeImg+'face.jpg)'})
|
|
$('.chocos-holder .flipper .back').html($('#temp-exclu .excluface').contents().clone()).css({'background' : 'url('+themeImg+'face.jpg)'})
|
|
|
|
$('.exclu .container-db .cubeface').eq(3).click()
|
|
$('.chocos-holder .flip-container').eq(4).show();
|
|
}
|
|
|
|
//=== Events
|
|
$('.container-db').on('click', '.cubeface', function(e){
|
|
$('.imgface').removeClass('actif');
|
|
$(this).find('.imgface').addClass('actif');
|
|
if ($(this).parent('.cube').hasClass('db-cube1')){
|
|
$('input[name=cube]').val('1');
|
|
} else {
|
|
$('input[name=cube]').val('2');
|
|
}
|
|
console.log($(this).data('id'));
|
|
$('input[name=face]').val($(this).data('id'));
|
|
});
|
|
|
|
$('#NOM1').on('keyup click', function(){
|
|
defNOM1($(this));
|
|
rotateDC(0,45);
|
|
});
|
|
|
|
$('#NOM2').on('keyup click', function(){
|
|
defNOM2($(this));
|
|
rotateDC(0,45);
|
|
});
|
|
|
|
$('#DATEMARIAGE').on('change click', function(e) {
|
|
defDATEMARIAGE($(this));
|
|
rotateDC(0,90);
|
|
});
|
|
|
|
$('#EMBALLAGE').on('change', function(e) {
|
|
defEMBALLAGE($(this));
|
|
});
|
|
|
|
$('#PELLICULAGE').on('change', function(e) {
|
|
defPELLICULAGE($(this));
|
|
});
|
|
|
|
$('#colorpicker1').simplecolorpicker({picker: true, theme: 'glyphicons'})
|
|
.on('change', function() {
|
|
color1 = $('#colorpicker1 option:selected').attr('data-id');
|
|
$('.color1text').html($('#colorpicker1 option:selected').text());
|
|
console.log($('.imgface.actif'));
|
|
console.log($('.imgface .actif').parent().data('id'));
|
|
//initFaces();
|
|
});
|
|
|
|
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'));
|
|
$('#colorpicker1').simplecolorpicker('selectColor', colorRGB[color1]);
|
|
$('.color1text').html($('#colorpicker1 option:selected').text());
|
|
console.log($('.db-cube1 .cubeface.front'));
|
|
$('.db-cube1 .cubeface.front').addClass('actif');
|
|
}
|
|
|
|
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, "<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") {
|
|
$('#custom_elmts .initiales-holder').clone().appendTo(".face-custom-txt");
|
|
}
|
|
}
|
|
|
|
function defPELLICULAGE(obj){
|
|
$('.matface').remove();
|
|
if(obj.find('option:selected').text() == "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 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}
|
|
}
|
|
|