251 lines
7.1 KiB
JavaScript
251 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 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
|
||
$('.chocos-holder').find('.noms-holder').remove();
|
||
$('.chocos-holder').find('.date-holder').remove();
|
||
$('.chocos-holder').empty();
|
||
$('.chocos-holder').html($('#temp-base .chocos').contents().clone());
|
||
$('.chocos-holder .flipper .front').html($('#temp-exclu .excluface').contents().clone());
|
||
$('.chocos-holder .flipper .back').html($('#temp-exclu .excluface').contents().clone());
|
||
$.each(['1', '2', '3', '4', '5'], function(i, v){
|
||
img = ''; color = ''; txt = ''; font = '';
|
||
type = $('#CHOCO'+v+'-TYPE').val();
|
||
if (type == 'IMAGE') {
|
||
var request = new XMLHttpRequest();
|
||
request.open('GET', $('#CHOCO'+v+'-IMG').val());
|
||
request.responseType = 'blob';
|
||
request.onload = function() {
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(request.response);
|
||
reader.onload = function(e){
|
||
$('.db-cube'+cube+' .cubeface.'+i+' .imgface').css('background-image', 'url('+e.target.result+')');
|
||
};
|
||
};
|
||
request.send();
|
||
} else {
|
||
if (type == 'TEXT') {
|
||
color = $('#CHOCO'+v+'-COLOR').val();
|
||
font = $('#CHOCO'+v+'-FONT').val();
|
||
txt = $('#CHOCO'+v+'-TEXT').val();
|
||
$('.choco'+v+' .txtface').html('<div class="freetext-holder">'+txt+'</div>');
|
||
$('.choco'+v+' .txtface .freetext-holder').css({'margin-top':-$('.choco'+v+' .txtface .freetext-holder').height()*0.5});
|
||
} else if (type == 'INITIALE') {
|
||
color = $('#CHOCO'+v+'-COLOR').val();
|
||
font = $('#CHOCO'+v+'-FONT').val();
|
||
$('.choco'+v+' .txtface').html($('#custom_elmts .initiales-holder').clone());
|
||
}
|
||
$('.choco'+v+' .txtface').addClass(font);
|
||
if (color == '' || typeof(color) == 'undefined') {
|
||
$('.choco'+v+' .imgface').css('background', 'url('+themeImg+'face.jpg)');
|
||
} else {
|
||
$('.choco'+v+' .imgface').css('background', '').addClass('b-'+color);
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
// Init
|
||
var itemSelected = $('input[name=item]').val();
|
||
$('.chocos-holder .choco'+itemSelected+' .imgface').addClass('actif');
|
||
}
|
||
|
||
//=== Events
|
||
$('.chocos-holder').on('click', '.flip-container', function(e){
|
||
$('.imgface').removeClass('actif');
|
||
$(this).find('.imgface').addClass('actif');
|
||
var itemSelected = $(this).find('.front').data('id');
|
||
$('input[name=item]').val(itemSelected);
|
||
|
||
if ($('#CHOCO'+itemSelected+'-TYPE').length && $('#CHOCO'+itemSelected+'-TYPE').val() != '') {
|
||
$('select[name=select-custom]').val($('#CHOCO'+itemSelected+'-TYPE').val());
|
||
$('textarea[name=select-txt]').val($('#CHOCO'+itemSelected+'-TEXT').val());
|
||
$('select[name=select-font]').val($('#CHOCO'+itemSelected+'-FONT').val());
|
||
$('#colorpicker1').simplecolorpicker('selectColor', colorRGB[$('#CHOCO'+itemSelected+'-COLOR').val()]);
|
||
}
|
||
|
||
// Form Init
|
||
defCUSTOM($(this));
|
||
$('.color1text').html($('#colorpicker1 option:selected').text());
|
||
});
|
||
|
||
$('#NOM1').on('keyup click', function(){
|
||
defNOM1($(this));
|
||
});
|
||
|
||
$('#NOM2').on('keyup click', function(){
|
||
defNOM2($(this));
|
||
});
|
||
|
||
$('#DATEMARIAGE').on('change click', function(e) {
|
||
defDATEMARIAGE($(this));
|
||
});
|
||
|
||
$('#EMBALLAGE').on('change', function(e) {
|
||
defEMBALLAGE($(this));
|
||
});
|
||
|
||
$('#colorpicker1').simplecolorpicker({picker: true, theme: 'glyphicons'})
|
||
.on('change', function() {
|
||
color1 = $('#colorpicker1 option:selected').data('id');
|
||
$('.color1text').html($('#colorpicker1 option:selected').text());
|
||
defCUSTOM($('.imgface.actif'));
|
||
initFaces();
|
||
});
|
||
|
||
$('select[name=select-custom]').on('change', function(e){
|
||
e.preventDefault();
|
||
defCUSTOM($('.imgface.actif'));
|
||
initFaces();
|
||
});
|
||
|
||
$('select[name=select-font]').on('change', function(e){
|
||
e.preventDefault();
|
||
defCUSTOM($('.imgface.actif'));
|
||
initFaces();
|
||
});
|
||
|
||
$('textarea[name=select-txt]').on('keyup click', function(e){
|
||
e.preventDefault();
|
||
defCUSTOM($('.imgface.actif'));
|
||
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'));
|
||
defEMBALLAGE($('#EMBALLAGE'));
|
||
}
|
||
|
||
function defCUSTOM(obj){
|
||
item = obj.closest('.front').data('id');
|
||
$('#CHOCO'+item+'-TYPE').val($('select[name=select-custom]').val());
|
||
$('#CHOCO'+item+'-TEXT').val($('textarea[name=select-txt]').val());
|
||
$('#CHOCO'+item+'-COLOR').val($('#colorpicker1 option:selected').data('id'));
|
||
$('#CHOCO'+item+'-FONT').val($('select[name=select-font]').val());
|
||
}
|
||
|
||
|
||
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 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 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}
|
||
}
|