189 lines
6.4 KiB
JavaScript
189 lines
6.4 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 _custom =
|
|
{
|
|
'face_custom' :
|
|
{
|
|
'image' : null,
|
|
'text' : '',
|
|
'is_initials' : false
|
|
},
|
|
'faces_dc_exclu' :
|
|
{
|
|
|
|
},
|
|
'faces_chocos_exclu' :
|
|
{
|
|
|
|
}
|
|
}
|
|
|
|
var face_exclu =
|
|
{
|
|
'index' : 0,
|
|
'image' : null,
|
|
'color' : '',
|
|
'color_text' : '',
|
|
'text' : '',
|
|
'font' : '',
|
|
'is_initials' : false,
|
|
'is_custom' : false
|
|
}
|
|
|
|
|
|
var rotateR =
|
|
[
|
|
null,
|
|
[-90,0],
|
|
[90,0],
|
|
[0,180],
|
|
[0,0],
|
|
[0,100],
|
|
[0,-20],
|
|
[-90,0],
|
|
[90,0],
|
|
[0,180],
|
|
[0,0],
|
|
[0,20],
|
|
[0,-100]
|
|
]
|
|
|
|
// Start when DOM is ready
|
|
$(function() {
|
|
console.log('INIT DOUBLE CUBE');
|
|
updateFaces();
|
|
initDrag();
|
|
});
|
|
|
|
|
|
function updateFaces()
|
|
{
|
|
// 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 .db-cube1 .back").addClass('face-custom-txt');
|
|
$(".container-db .db-cube1 .back").addClass('face-custom-img');
|
|
|
|
//DOUBLECUBE
|
|
|
|
// 4 8 5
|
|
if(theme == "ivoire" || theme == "tendance" || theme == "champetre" || theme == "uv")
|
|
{
|
|
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
|
|
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
|
|
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube1 .left")
|
|
}
|
|
// 4 8 7
|
|
if(theme == "oriental")
|
|
{
|
|
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
|
|
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
|
|
$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .top")
|
|
}
|
|
// 4 8 12
|
|
else if(theme == "chocolate" || theme == "cinema" || theme == "oriental" || theme == "fleurs"
|
|
|| theme == "vintage" || theme == "voyage" || theme == "gourmandise")
|
|
{
|
|
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
|
|
$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
|
|
$('#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
|
|
$('#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-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();
|
|
}
|
|
|
|
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)}
|
|
};
|
|
|