antadis/chocolatdemariage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Bicolor

Browse Source
This commit is contained in:
Michael RICOIS 2017-08-03 11:18:51 +02:00
parent 0171558587
commit a61a403826
4 changed files with 300 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

291
www/modules/antadissimulator/views/js/doublecube-bicolor.js
View File

@ -7,25 +7,19 @@ _angle = {'x': 0, 'y': 0};
_anglelast = {'x': 0, 'y': 0};
;
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]
]
var monthR = ["","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
var color1 = 'bleuf';
var color2 = 'blanc';
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 color2 = 'framboise';
var colorRGB =
{
@ -54,57 +48,11 @@ var colorRGB =
// Start when DOM is ready
$(function() {
initInfos();
initFaces();
initDrag();
});
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)}
};
function initFaces()
{
// reset faces
@ -134,6 +82,8 @@ function initFaces()
$('.container-pochette .pochette .front').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.container-pochette .pochette .back').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
console.log(color1); console.log(color2);
$(".color_1").addClass(color1)
$(".color_2").addClass(color2)
@ -192,7 +142,6 @@ function initFaces()
}
else if(theme == "ruban")
{
$(".container-db").html($('#temp-ruban .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-ruban .chocos').contents().clone());
$(".container-pochette").html($('#temp-ruban .pochettes').contents().clone());
@ -216,8 +165,7 @@ function initFaces()
}
else if(theme == "bayadere")
{
if(_simu.offre == "doublecube") $('#custom-freeface').show()
$('#custom-freeface').show()
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
@ -257,9 +205,8 @@ function initFaces()
checkfaceCustom()
}
else if(theme == "liseres")
{
if(_simu.offre == "doublecube") $('#custom-freeface').show()
{
$('#custom-freeface').show()
$(".container-db").html($('#temp-base .doublecube').contents().clone());
$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
@ -304,8 +251,6 @@ function initFaces()
$('.container-db .date-holder').addClass('c-'+color)
$('.container-db .face-custom-txt').addClass('c-'+color)
$('.container-db .db-cube1 .top .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_1.png)'})
$('.container-db .db-cube1 .bottom .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_2.png)'})
$('.container-db .db-cube1 .front .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_4.png)'})
@ -318,8 +263,6 @@ function initFaces()
$('.container-db .db-cube2 .left .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_11.png)'})
$('.container-db .db-cube2 .right .imgface.'+color).css({'background-image' : 'url(img/simulation/bicolore/liseres/db/'+file+'/face_12.png)'})
$('.chocos-holder.'+theme+' .back .bkgface').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+(color1 == "blanc" || color1 == "ivoire") ? 'noir' : color2+'/face_14.png)'})
$('.container-pochette.'+theme+' .back .bkgface').css({'background-image':'url(img/simulation/bicolore/liseres/chocos/'+(color1 == "blanc" || color1 == "ivoire") ? 'noir' : color2+'/face_14.png)'})
@ -334,3 +277,201 @@ function initFaces()
$('.chocos-holder .flip-container').eq(4).show();
}
//=== Events
$('#NOM1').on('keyup click', function(){
defNOM1($(this));
console.log($('.noms-holder').parent('figure').attr('class'));
rotateDC(0,45);
});
$('#NOM2').on('keyup click', function(){
defNOM2($(this));
rotateDC(0,45);
});
$('#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});
rotateDC(0,180);
});
$('#DATEMARIAGE').on('change click', function(e) {
defDATEMARIAGE($(this));
rotateDC(0,90);
});
$('.FACELIBRE').on('change', function(e) {
defFACELIBRE($(this));
rotateDC(0,180);
});
$('#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());
initFaces();
});
$('#colorpicker2').simplecolorpicker({picker: true, theme: 'glyphicons'})
.on('change', function() {
color2 = $('#colorpicker2 option:selected').attr('data-id');
$('.color2text').html($('#colorpicker2 option:selected').text());
initFaces();
});
//=== 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());
$('#colorpicker2').simplecolorpicker('selectColor', colorRGB[color2]);
$('.color2text').html($('#colorpicker2 option:selected').text());
}
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}
}
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)}
};

6
www/modules/antadissimulator/views/js/pochette-bicolor.js
View File

@ -1,5 +1,5 @@
var color1 = 'bleuf';
var color2 = 'blanc';
var color1 = 'anis';
var color2 = 'framboise';
var colorRGB =
{
@ -258,7 +258,7 @@ function initFaces()
$(".container-pochette .pochette2").addClass('switch')
$(".container-pochette .pochette4").addClass('switch')
$('.container-pochette').addClass(theme);
$('.container-pochette .color_1').css({ 'background-color':colorRGB[color1]})
$('.container-pochette .color_2').css({ 'color':colorRGB[color2]})

27
www/modules/antadissimulator/views/js/pochette6-bicolor.js
View File

@ -83,13 +83,14 @@ var rotateR =
]
// Start when DOM is ready
$(function() {
$(function() {
$('#colorpicker1').simplecolorpicker({picker: true, theme: 'glyphicons'})
.on('change', function() {
color1 = $('#colorpicker1 option:selected').attr('data-id');
$('.color1text').html($('#colorpicker1 option:selected').text());
});
$('#colorpicker1').simplecolorpicker('selectColor', colorRGB[color1]);
$('.color1text').html($('#colorpicker1 option:selected').text());
$('#colorpicker2').simplecolorpicker({picker: true, theme: 'glyphicons'})
.on('change', function() {
@ -97,10 +98,9 @@ $(function() {
$('.color2text').html($('#colorpicker2 option:selected').text());
});
$('#colorpicker2').simplecolorpicker('selectColor', colorRGB[color2]);
$('.color2text').html($('#colorpicker2 option:selected').text());
initFaces();
$('.flip-container').addClass('argent');
initDrag();
});
@ -113,18 +113,14 @@ function initFaces()
$('.container-pochette-eve').find('.nom-holder').remove();
$('.container-pochette-eve').find('.event-holder').remove();
$('.container-pochette-eve').find('.date-holder').remove();
$('.face-custom-txt').removeClass('face-custom-txt');
$('.face-custom-img').removeClass('face-custom-img');
$('#custom-freeface').hide()
$('.chocos-holder .choco1 .front').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.chocos-holder .choco1 .back').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.chocos-holder .choco2 .front').html('<div class="colorface color_1"></div><div class="colorface color_2 face-custom-img"></div>')
$('.chocos-holder .choco2 .back').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.container-pochette-eve .pochette .front').html('<div class="colorface color_1"></div><div class="face-custom-img"></div>')
$('.container-pochette-eve .pochette .back').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.container-pochette-eve .pochette .back').html('<div class="colorface color_1"></div><div class="face-custom-img"></div>')
$('.container-pochette-eve .pochette .front').html('<div class="colorface color_1"></div><div class="colorface color_2"></div>')
$('.pochette-holder-eve').css('display', 'block');
@ -147,10 +143,9 @@ function initFaces()
//pochette
$('.container-pochette-eve .pochette .pochetteface').not('.front,.back').addClass('switch').html('<div class="colorface color_2"></div>')
$('#custom_elmts .nom-holder').clone().appendTo(".container-pochette-eve .pochette-eve .back .color_2")
$('#custom_elmts .event-holder').clone().appendTo(".container-pochette-eve .pochette-eve .back .color_2")
$('#custom_elmts .date-holder-line').clone().appendTo(".container-pochette-eve .pochette-eve .back .color_2")
$('#custom_elmts .nom-holder').clone().appendTo(".container-pochette-eve .pochette-eve .front .color_2")
$('#custom_elmts .event-holder').clone().appendTo(".container-pochette-eve .pochette-eve .front .color_2")
$('#custom_elmts .date-holder-line').clone().appendTo(".container-pochette-eve .pochette-eve .front .color_2")
$('.container-pochette-eve').addClass('damier');
$('.container-pochette-eve .color_1').css({ 'background-color':colorRGB[color1]})
@ -163,9 +158,9 @@ function initFaces()
$('.chocos-holder .color_2').css({ 'color':colorRGB[color2]})
$('.chocos-holder .switch .color_1').css({ 'color':colorRGB[color1]})
$('.chocos-holder .switch .color_2').css({'background-color':colorRGB[color2]})
if(theme == "pochette") {
$('.chocos-holder .flip-container').eq(4).hide();
$('.chocos-holder .flip-container').eq(4).hide();
}
else {
$('.chocos-holder .flip-container').eq(4).show();

74
www/modules/antadissimulator/views/templates/hook/productbloc/doublecube-bicolor.tpl
View File

@ -239,8 +239,74 @@
<div class="simu-container container-db"></div>
</div>
</div>
<div id="simu-chocos" class="mgin-t-20">
<div id="simu-chocos" class="mgin-t-20">
<h2>Simulation chocolats</h2>
<div class="chocos-holder"></div>
</div>
<div class="chocos-holder">
</div>
</div>
<div>
<h2>Choix des 2 couleurs</h2>
<div class="pdin-lr-10">
<div class="mgin-b-5">
<span class="c-maroon" style="padding-right:8px">Couleur 1 : </span>
<select name="colorpicker" id="colorpicker1" style="display: none;">
<option value="#B5DC10" data-id="anis">Anis</option>
<option value="#F0037F" data-id="fuschia">Fuchsia</option>
<option value="#FFC211" data-id="or">Or/Jaune</option>
<option value="#7FCDD0" data-id="turquoise">Turquoise</option>
<option value="#766546" data-id="grisf">Gris foncé</option>
<option value="#159033" data-id="vert">Vert</option>
<option value="#6B1687" data-id="violet">Violet</option>
<option value="#E37222" data-id="orange">Orange</option>
<option value="#10147E" data-id="bleuf">Bleu foncé</option>
<option value="#7F0700" data-id="bordeaux">Bordeaux</option>
<option value="#F88CC4" data-id="rose">Rose</option>
<option value="#D198CA" data-id="parme">Parme</option>
<option value="#F50003" data-id="rouge">Rouge</option>
<option value="#C42B68" data-id="framboise">Framboise</option>
<option value="#3C1503" data-id="marron">Marron</option>
<option value="#FFFFFF" data-id="blanc">Blanc</option>
<option value="#FFFAD7" data-id="ivoire">Ivoire</option>
<option value="#CCC6AB" data-id="taupe">Taupe</option>
<option value="#C2C2C2" data-id="argent">Argent/Gris clair</option>
<option value="#000000" data-id="noir">Noir</option>
</select>
<span style="font-size:18px; padding-right:8px;">￬</span>
<span class="color1text">Bleu foncé</span>
</div>
<div>
<span class="c-maroon" style="padding-right:8px">Couleur 2 : </span>
<select name="colorpicker" id="colorpicker2" style="display: none;">
<option value="#B5DC10" data-id="anis">Anis</option>
<option value="#F0037F" data-id="fuschia">Fuchsia</option>
<option value="#FFC211" data-id="or">Or/Jaune</option>
<option value="#7FCDD0" data-id="turquoise">Turquoise</option>
<option value="#766546" data-id="grisf">Gris foncé</option>
<option value="#159033" data-id="vert">Vert</option>
<option value="#6B1687" data-id="violet">Violet</option>
<option value="#E37222" data-id="orange">Orange</option>
<option value="#10147E" data-id="bleuf">Bleu foncé</option>
<option value="#7F0700" data-id="bordeaux">Bordeaux</option>
<option value="#F88CC4" data-id="rose">Rose</option>
<option value="#D198CA" data-id="parme">Parme</option>
<option value="#F50003" data-id="rouge">Rouge</option>
<option value="#C42B68" data-id="framboise">Framboise</option>
<option value="#3C1503" data-id="marron">Marron</option>
<option value="#FFFFFF" data-id="blanc">Blanc</option>
<option value="#FFFAD7" data-id="ivoire">Ivoire</option>
<option value="#CCC6AB" data-id="taupe">Taupe</option>
<option value="#C2C2C2" data-id="argent">Argent/Gris clair</option>
<option value="#000000" data-id="noir">Noir</option>
</select>
<span style="font-size:18px; padding-right:8px;">￬</span>
<span class="color2text">Blanc</span>
</div>
</div>
</div>