Gestion des images des elements exclusifs

This commit is contained in:
Michael RICOIS 2017-09-13 17:33:41 +02:00
parent 2af0984df1
commit 2f51d65168
7 changed files with 88 additions and 55 deletions

View File

@ -18,7 +18,7 @@ class AntadisConfiguratorModulesRoutesController
'param' => 'id_product' 'param' => 'id_product'
), ),
'reference' => array( 'reference' => array(
'regexp' => '[\w]+', 'regexp' => '[a-z0-9A-Z\-_]+',
'param' => 'reference' 'param' => 'reference'
), ),
), ),

View File

@ -77,11 +77,12 @@ function initFaces()
type = $('#CUBE'+cube+'-'+i.toUpperCase()+'TYPE').val(); type = $('#CUBE'+cube+'-'+i.toUpperCase()+'TYPE').val();
if (type == 'IMAGE') { if (type == 'IMAGE') {
var url = $('#DOUBLECUBEIMAGE').data('dl'); var url = $('#DOUBLECUBEIMAGE').data('dl');
var img = $('#CUBE'+cube+'-'+i.toUpperCase()+'IMG').val(); var ref = 'CUBE'+cube+'-'+i.toUpperCase()+'IMG';
console.log(url+'/'+img); var img = $('#'+ref).val();
console.log(url+'/'+ref+'/'+img);
if (img.length > 0) { if (img.length > 0) {
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.open('GET', url+'/'+img, true); request.open('GET', url+'/'+ref+'/'+img, true);
request.responseType = 'blob'; request.responseType = 'blob';
request.onload = function() { request.onload = function() {
var reader = new FileReader(); var reader = new FileReader();
@ -125,6 +126,8 @@ function initFaces()
// Init // Init
var cubeSelected = $('input[name=item]').val(); var cubeSelected = $('input[name=item]').val();
var faceSelected = $('input[name=face]').val().toLowerCase(); var faceSelected = $('input[name=face]').val().toLowerCase();
var url = $('.configurator-opt-file').data('url')+'CUBE'+cubeSelected+'-'+faceSelected+'IMG';
$('.configurator-opt-file').data('url', url);
$('.db-cube'+cubeSelected+' .'+faceSelected+' .imgface').addClass('actif'); $('.db-cube'+cubeSelected+' .'+faceSelected+' .imgface').addClass('actif');
} }

View File

@ -54,17 +54,23 @@ function initFaces()
img = ''; color = ''; txt = ''; font = ''; img = ''; color = ''; txt = ''; font = '';
type = $('#CHOCO'+v+'-TYPE').val(); type = $('#CHOCO'+v+'-TYPE').val();
if (type == 'IMAGE') { if (type == 'IMAGE') {
var request = new XMLHttpRequest(); var url = $('#DOUBLECUBEIMAGE').data('dl');
request.open('GET', $('#CHOCO'+v+'-IMG').val()); var ref = 'CHOCO'+v+'-IMG';
request.responseType = 'blob'; var img = $('#'+ref).val();
request.onload = function() { console.log(url+'/'+ref+'/'+img);
var reader = new FileReader(); if (img.length > 0) {
reader.readAsDataURL(request.response); var request = new XMLHttpRequest();
reader.onload = function(e){ request.open('GET', url+'/'+ref+'/'+img, true);
$('.db-cube'+cube+' .cubeface.'+i+' .imgface').css('background-image', 'url('+e.target.result+')'); request.responseType = 'blob';
}; request.onload = function() {
}; var reader = new FileReader();
request.send(); reader.onload = function(e){
$('.choco'+v+' .imgface').css('background-image', 'url('+e.target.result+')');
};
reader.readAsDataURL(request.response);
};
request.send();
}
} else { } else {
if (type == 'TEXT') { if (type == 'TEXT') {
color = $('#CHOCO'+v+'-COLOR').val(); color = $('#CHOCO'+v+'-COLOR').val();
@ -86,9 +92,10 @@ function initFaces()
} }
}); });
// Init // Init
var itemSelected = $('input[name=item]').val(); var itemSelected = $('input[name=item]').val();
var url = $('.configurator-opt-file').data('url')+'/CHOCO'+itemSelected+'-IMG';
$('.configurator-opt-file').data('url', url);
$('.chocos-holder .choco'+itemSelected+' .imgface').addClass('actif'); $('.chocos-holder .choco'+itemSelected+' .imgface').addClass('actif');
} }
@ -107,7 +114,7 @@ $('.chocos-holder').on('click', '.flip-container', function(e){
} }
// Form Init // Form Init
defCUSTOM($(this)); defCUSTOM($(this).find('.imgface'));
$('.color1text').html($('#colorpicker1 option:selected').text()); $('.color1text').html($('#colorpicker1 option:selected').text());
}); });
@ -136,6 +143,7 @@ $('#colorpicker1').simplecolorpicker({picker: true, theme: 'glyphicons'})
}); });
$('select[name=select-custom]').on('change', function(e){ $('select[name=select-custom]').on('change', function(e){
console.log($(this).val());
e.preventDefault(); e.preventDefault();
defCUSTOM($('.imgface.actif')); defCUSTOM($('.imgface.actif'));
initFaces(); initFaces();
@ -153,6 +161,13 @@ $('textarea[name=select-txt]').on('keyup click', function(e){
initFaces(); initFaces();
}); });
$('span#response-optgroup-exclusif').on('change', function(e){
e.preventDefault();
$('select[name=select-custom]').val('IMAGE').trigger('change');
defCUSTOM($('.imgface.actif'));
initFaces();
});
function initDrag() function initDrag()
{ {
$('#simu-box').on(events.start, function(e) { $('#simu-box').on(events.start, function(e) {
@ -211,14 +226,15 @@ function initInfos()
} }
function defCUSTOM(obj){ function defCUSTOM(obj){
item = obj.closest('.front').data('id'); item = obj.parent('.front').data('id');
console.log(item+' - '+$('select[name=select-custom]').val());
$('#CHOCO'+item+'-TYPE').val($('select[name=select-custom]').val()); $('#CHOCO'+item+'-TYPE').val($('select[name=select-custom]').val());
$('#CHOCO'+item+'-TEXT').val($('textarea[name=select-txt]').val()); $('#CHOCO'+item+'-TEXT').val($('textarea[name=select-txt]').val());
$('#CHOCO'+item+'-COLOR').val($('#colorpicker1 option:selected').data('id')); $('#CHOCO'+item+'-COLOR').val($('#colorpicker1 option:selected').data('id'));
$('#CHOCO'+item+'-FONT').val($('select[name=select-font]').val()); $('#CHOCO'+item+'-FONT').val($('select[name=select-font]').val());
$('#CHOCO'+item+'-IMG').val($('input[name=optgroup-exclusif]').val());
} }
function defNOM1(obj){ function defNOM1(obj){
$('.nom_1').html(obj.val()) $('.nom_1').html(obj.val())
$('.initiale_1').html(obj.val().substring(0,1)); $('.initiale_1').html(obj.val().substring(0,1));

View File

@ -54,17 +54,23 @@ function initFaces()
img = ''; color = ''; txt = ''; font = ''; img = ''; color = ''; txt = ''; font = '';
type = $('#CHOCO'+v+'-TYPE').val(); type = $('#CHOCO'+v+'-TYPE').val();
if (type == 'IMAGE') { if (type == 'IMAGE') {
var request = new XMLHttpRequest(); var url = $('#DOUBLECUBEIMAGE').data('dl');
request.open('GET', $('#CHOCO'+v+'-IMG').val()); var ref = 'CHOCO'+v+'-IMG';
request.responseType = 'blob'; var img = $('#'+ref).val();
request.onload = function() { console.log(url+'/'+ref+'/'+img);
var reader = new FileReader(); if (img.length > 0) {
reader.readAsDataURL(request.response); var request = new XMLHttpRequest();
reader.onload = function(e){ request.open('GET', url+'/'+ref+'/'+img, true);
$('.db-cube'+cube+' .cubeface.'+i+' .imgface').css('background-image', 'url('+e.target.result+')'); request.responseType = 'blob';
}; request.onload = function() {
}; var reader = new FileReader();
request.send(); reader.onload = function(e){
$('.choco'+v+' .imgface').css('background-image', 'url('+e.target.result+')');
};
reader.readAsDataURL(request.response);
};
request.send();
}
} else { } else {
if (type == 'TEXT') { if (type == 'TEXT') {
color = $('#CHOCO'+v+'-COLOR').val(); color = $('#CHOCO'+v+'-COLOR').val();
@ -86,9 +92,10 @@ function initFaces()
} }
}); });
// Init // Init
var itemSelected = $('input[name=item]').val(); var itemSelected = $('input[name=item]').val();
var url = $('.configurator-opt-file').data('url')+'/CHOCO'+itemSelected+'-IMG';
$('.configurator-opt-file').data('url', url);
$('.chocos-holder .choco'+itemSelected+' .imgface').addClass('actif'); $('.chocos-holder .choco'+itemSelected+' .imgface').addClass('actif');
} }
@ -107,7 +114,7 @@ $('.chocos-holder').on('click', '.flip-container', function(e){
} }
// Form Init // Form Init
defCUSTOM($(this)); defCUSTOM($(this).find('.imgface'));
$('.color1text').html($('#colorpicker1 option:selected').text()); $('.color1text').html($('#colorpicker1 option:selected').text());
}); });
@ -136,6 +143,7 @@ $('#colorpicker1').simplecolorpicker({picker: true, theme: 'glyphicons'})
}); });
$('select[name=select-custom]').on('change', function(e){ $('select[name=select-custom]').on('change', function(e){
console.log($(this).val());
e.preventDefault(); e.preventDefault();
defCUSTOM($('.imgface.actif')); defCUSTOM($('.imgface.actif'));
initFaces(); initFaces();
@ -153,6 +161,13 @@ $('textarea[name=select-txt]').on('keyup click', function(e){
initFaces(); initFaces();
}); });
$('span#response-optgroup-exclusif').on('change', function(e){
e.preventDefault();
$('select[name=select-custom]').val('IMAGE').trigger('change');
defCUSTOM($('.imgface.actif'));
initFaces();
});
function initDrag() function initDrag()
{ {
$('#simu-box').on(events.start, function(e) { $('#simu-box').on(events.start, function(e) {
@ -211,14 +226,15 @@ function initInfos()
} }
function defCUSTOM(obj){ function defCUSTOM(obj){
item = obj.closest('.front').data('id'); item = obj.parent('.front').data('id');
console.log(item+' - '+$('select[name=select-custom]').val());
$('#CHOCO'+item+'-TYPE').val($('select[name=select-custom]').val()); $('#CHOCO'+item+'-TYPE').val($('select[name=select-custom]').val());
$('#CHOCO'+item+'-TEXT').val($('textarea[name=select-txt]').val()); $('#CHOCO'+item+'-TEXT').val($('textarea[name=select-txt]').val());
$('#CHOCO'+item+'-COLOR').val($('#colorpicker1 option:selected').data('id')); $('#CHOCO'+item+'-COLOR').val($('#colorpicker1 option:selected').data('id'));
$('#CHOCO'+item+'-FONT').val($('select[name=select-font]').val()); $('#CHOCO'+item+'-FONT').val($('select[name=select-font]').val());
$('#CHOCO'+item+'-IMG').val($('input[name=optgroup-exclusif]').val());
} }
function defNOM1(obj){ function defNOM1(obj){
$('.nom_1').html(obj.val()) $('.nom_1').html(obj.val())
$('.initiale_1').html(obj.val().substring(0,1)); $('.initiale_1').html(obj.val().substring(0,1));

View File

@ -135,8 +135,8 @@
<div class="ctn-input"> <div class="ctn-input">
<div class="custom-file"> <div class="custom-file">
<input id="DOUBLECUBEIMAGE" class="configurator-opt-file" name="files" data-field="optgroup-exclusif" <input id="DOUBLECUBEIMAGE" class="configurator-opt-file" name="files" data-field="optgroup-exclusif"
data-url="/configurator/upload/{$id_product}/EXCLUSIFIMAGE" data-url="/configurator/upload/{$id_product}"
data-dl="{$base_dir}/upload/simu/{$id_product}/EXCLUSIFIMAGE" type="file"> data-dl="{$base_dir}upload/simu/{$id_product}" type="file">
<span class="filename">{l s='No file selected' mod='antadissimulator'}</span> <span class="filename">{l s='No file selected' mod='antadissimulator'}</span>
<span class="action">{l s='Choose File' mod='antadissimulator'}</span></div></div> <span class="action">{l s='Choose File' mod='antadissimulator'}</span></div></div>
<span id="response-optgroup-exclusif"></span> <span id="response-optgroup-exclusif"></span>

View File

@ -98,18 +98,17 @@
</div> </div>
</div> </div>
<div class="clearfix form-group type-file"> <div class="clearfix form-group type-file">
<label class="label DOUBLECUBEIMAGE">{l s='Télécharger votre image (max 2Mo)' mod='antadissimulator'}</label> <label class="label DOUBLECUBEIMAGE">{l s='Télécharger votre image (max 8Mo)' mod='antadissimulator'}</label>
<div class="ctn-input"> <div class="ctn-input">
<div class="custom-file"> <div class="custom-file">
<input id="DOUBLECUBEIMAGE" class="configurator-opt-file" name="files" data-field="optgroup-9-19" data-url="/configurator/upload/16/DOUBLECUBEIMAGE" type="file"> <input id="DOUBLECUBEIMAGE" class="configurator-opt-file" name="files" data-field="optgroup-exclusif"
data-url="/configurator/upload/{$id_product}"
data-dl="{$base_dir}upload/simu/{$id_product}" type="file">
<span class="filename">{l s='No file selected' mod='antadissimulator'}</span> <span class="filename">{l s='No file selected' mod='antadissimulator'}</span>
<span class="action">{l s='Choose File' mod='antadissimulator'}</span> <span class="action">{l s='Choose File' mod='antadissimulator'}</span></div></div>
</div> <span id="response-optgroup-exclusif"></span>
</div> <input name="optgroup-exclusif" value="" type="hidden" />
<span id="response-optgroup-9-19"></span>
<input name="optgroup-9-19" value="" type="hidden">
</div> </div>
<div class="clearfix form-group"> <div class="clearfix form-group">

View File

@ -95,18 +95,17 @@
</div> </div>
</div> </div>
<div class="clearfix form-group type-file"> <div class="clearfix form-group type-file">
<label class="label DOUBLECUBEIMAGE">{l s='Télécharger votre image (max 2Mo)' mod='antadissimulator'}</label> <label class="label DOUBLECUBEIMAGE">{l s='Télécharger votre image (max 8Mo)' mod='antadissimulator'}</label>
<div class="ctn-input"> <div class="ctn-input">
<div class="custom-file"> <div class="custom-file">
<input id="DOUBLECUBEIMAGE" class="configurator-opt-file" name="files" data-field="optgroup-9-19" data-url="/configurator/upload/16/DOUBLECUBEIMAGE" type="file"> <input id="DOUBLECUBEIMAGE" class="configurator-opt-file" name="files" data-field="optgroup-exclusif"
data-url="/configurator/upload/{$id_product}"
data-dl="{$base_dir}upload/simu/{$id_product}" type="file">
<span class="filename">{l s='No file selected' mod='antadissimulator'}</span> <span class="filename">{l s='No file selected' mod='antadissimulator'}</span>
<span class="action">{l s='Choose File' mod='antadissimulator'}</span> <span class="action">{l s='Choose File' mod='antadissimulator'}</span></div></div>
</div> <span id="response-optgroup-exclusif"></span>
</div> <input name="optgroup-exclusif" value="" type="hidden" />
<span id="response-optgroup-9-19"></span>
<input name="optgroup-9-19" value="" type="hidden">
</div> </div>
<div class="clearfix form-group"> <div class="clearfix form-group">