Gestion des images des elements exclusifs
This commit is contained in:
parent
2af0984df1
commit
2f51d65168
@ -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'
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
@ -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');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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));
|
||||||
|
@ -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));
|
||||||
|
@ -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>
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user