289 lines
8.8 KiB
JavaScript
289 lines
8.8 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: '#7F0700',
|
||
framboise: '#C42B68',
|
||
vieuxrose: '#DC5D66',
|
||
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();
|
||
$('.container-pochette').find('.noms-holder').remove();
|
||
$('.container-pochette').find('.date-holder').remove();
|
||
|
||
$('.container-pochette .pochette .front').html($('#temp-exclu .excluface').contents().clone());
|
||
$('.container-pochette .pochette .back').html($('#temp-exclu .excluface').contents().clone());
|
||
|
||
$('.chocos-holder .front').css({'background' : 'url('+themeImg+'face.jpg)'});
|
||
$('.chocos-holder .back').css({'background' : 'url('+themeImg+'face.jpg)'});
|
||
$('.container-pochette .front').css({'background' : 'url('+themeImg+'face.jpg)'});
|
||
$('.container-pochette .back').css({'background' : 'url('+themeImg+'face.jpg)'});
|
||
|
||
// Pochette
|
||
$.each(['1', '2', '3', '4'], function(i, v) {
|
||
img = ''; color = ''; txt = ''; font = '';
|
||
type = $('#POCHETTE'+v+'-TYPE').val();
|
||
if (type == 'IMAGE') {
|
||
var request = new XMLHttpRequest();
|
||
request.open('GET', $('#1-'+i.toUpperCase()+'IMG').val());
|
||
request.responseType = 'blob';
|
||
request.onload = function() {
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(request.response);
|
||
reader.onload = function(e){
|
||
$('.pochette'+v+' .pochetteface .imgface').css('background-image', 'url('+e.target.result+')');
|
||
};
|
||
};
|
||
request.send();
|
||
} else {
|
||
if (type == 'TEXT') {
|
||
color = $('#POCHETTE'+v+'-COLOR').val();
|
||
font = $('#POCHETTE'+v+'-FONT').val();
|
||
txt = $('#POCHETTE'+v+'-TEXT').val();
|
||
$('.pochette'+v+' .pochetteface .txtface').html('<div class="freetext-holder">'+txt+'</div>');
|
||
$('.pochette'+v+' .pochetteface .txtface .freetext-holder').css({'margin-top':-$('.pochette'+v+' .pochetteface .txtface .freetext-holder').height()*0.5});
|
||
} else if (type == 'INITIALE') {
|
||
color = $('#POCHETTE'+v+'-COLOR').val();
|
||
font = $('#POCHETTE'+v+'-FONT').val();
|
||
$('.pochette'+v+' .pochetteface .txtface').html($('#custom_elmts .initiales-holder').clone());
|
||
}
|
||
$('.pochette'+v+' .pochetteface .txtface').addClass(font);
|
||
if (color == '' || typeof(color) == 'undefined') {
|
||
$('.pochette'+v+' .pochetteface .imgface').css('background', 'url('+themeImg+'face.jpg)');
|
||
} else {
|
||
$('.pochette'+v+' .pochetteface .imgface').css('background', '').addClass('b-'+color);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Chocos
|
||
$('.choco1 .front').html($('.pochette1 .pochetteface.front').clone().contents());
|
||
$('.choco2 .front').html($('.pochette2 .pochetteface.front').clone().contents());
|
||
$('.choco3 .front').html($('.pochette3 .pochetteface.front').clone().contents());
|
||
$('.choco4 .front').html($('.pochette4 .pochetteface.front').clone().contents());
|
||
|
||
// Init
|
||
$('.chocos-holder .flip-container').eq(4).hide();
|
||
var itemSelected = $('input[name=item]').val();
|
||
$('.pochette'+itemSelected+' .pochetteface .imgface').addClass('actif');
|
||
}
|
||
|
||
//=== Events
|
||
$('.container-pochette').on('click', '.pochetteface', function(e){
|
||
if (!$(this).hasClass('front') && !$(this).hasClass('back')){
|
||
return;
|
||
}
|
||
|
||
$('.imgface').removeClass('actif');
|
||
$(this).parent().find('.imgface').addClass('actif');
|
||
var itemSelected = $(this).closest('.pochette').data('id');
|
||
$('input[name=item]').val(itemSelected);
|
||
|
||
if ($('#POCHETTE'+itemSelected+'-TYPE').length && $('#POCHETTE'+itemSelected+'-TYPE').val() != '') {
|
||
$('select[name=select-custom]').val($('#POCHETTE'+itemSelected+'-TYPE').val());
|
||
$('textarea[name=select-txt]').val($('#POCHETTE'+itemSelected+'-TEXT').val());
|
||
$('select[name=select-font]').val($('#POCHETTE'+itemSelected+'-FONT').val());
|
||
$('#colorpicker1').simplecolorpicker('selectColor', colorRGB[$('#POCHETTE'+itemSelected+'-COLOR').val()]);
|
||
}
|
||
|
||
// Form Init
|
||
defCUSTOM($(this));
|
||
$('.color1text').html($('#colorpicker1 option:selected').text());
|
||
|
||
options = $('.ref-CUSTOM').find('li');
|
||
options.each(function(i, el) {
|
||
el = $(el);
|
||
if (el.text() == $('select[name=select-custom] option:selected').text()) {
|
||
el.trigger('click');
|
||
}
|
||
});
|
||
options = $('.ref-FONT').find('li');
|
||
options.each(function(i, el) {
|
||
el = $(el);
|
||
if (el.text() == $('select[name=select-font] option:selected').text()) {
|
||
el.trigger('click');
|
||
}
|
||
});
|
||
});
|
||
|
||
$('#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('.pochette').data('id');
|
||
$('#POCHETTE'+item+'-TYPE').val($('select[name=select-custom]').val());
|
||
$('#POCHETTE'+item+'-TEXT').val($('textarea[name=select-txt]').val());
|
||
$('#POCHETTE'+item+'-COLOR').val($('#colorpicker1 option:selected').data('id'));
|
||
$('#POCHETTE'+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();
|
||
$('.pochetteface').not('.front,.back').removeClass('argent');
|
||
$('.pochetteface').not('.front,.back').removeClass('or');
|
||
$('.flip-container').removeClass('argent');
|
||
$('.flip-container').removeClass('or');
|
||
if (choice == "Argenté") {
|
||
$('.pochetteface').not('.front,.back').addClass('argent');
|
||
$('.flip-container').addClass('argent');
|
||
} else if (choice == "Doré") {
|
||
$('.pochetteface').not('.front,.back').addClass('or');
|
||
$('.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}
|
||
}
|