677 lines
29 KiB
Smarty
677 lines
29 KiB
Smarty
<div id="product-pricemargin" class="panel form-horizontal">
|
|
<h3 class="tab"><i class="icon-info"></i> {l s='Konfiguracja produktu' mod='configurator'}</h3>
|
|
<fieldset>
|
|
<div class="form-group">
|
|
<label class="control-label col-lg-3">
|
|
{l s='Włącz konfigurator dla tego produktu' mod='configurator'}
|
|
</label>
|
|
<div class="col-lg-9">
|
|
<span class="switch prestashop-switch fixed-width-lg">
|
|
<input type="radio" name="configurator_active" id="configurator_active_on" value="1" {if isset($config->active) && $config->active}checked="checked"{/if}>
|
|
<label for="configurator_active_on">{l s='Tak' mod='configurator'}</label>
|
|
<input type="radio" name="configurator_active" id="configurator_active_off" value="0" {if !isset($config->active) || !$config->active}checked="checked"{/if}>
|
|
<label for="configurator_active_off">{l s='Nie' mod='configurator'}</label>
|
|
<a class="slide-button btn"></a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="hidden"
|
|
id="product_id"
|
|
name="product_id"
|
|
class="form-control"
|
|
value="{if isset($product_id)}{$product_id}{/if}"
|
|
/>
|
|
<input type="hidden"
|
|
id="config_id"
|
|
name="config_id"
|
|
class="form-control"
|
|
value="{if isset($config->id)}{$config->id}{/if}"
|
|
/>
|
|
<input type="hidden"
|
|
id="configurator_fields"
|
|
name="configurator_fields"
|
|
class="form-control"
|
|
value='{$configurator_fields}'
|
|
/>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-md-12" id="pagesList">
|
|
<button class="btn btn-primary configurator_first_page configurator_page" page-id="0" type="button">Wzór 1</button>
|
|
<button class="btn btn-primary" style="margin-left: 10px;" id="addPage" type="button">Dodaj wzór</button>
|
|
<button class="btn btn-danger" style="display: none; margin-left: 10px;" id="deletePage" type="button">Usuń wzór</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-lg-9">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Nazwa' mod='configurator'}</label>
|
|
<div>
|
|
<input type="text"
|
|
id="configurator_name"
|
|
name="configurator_name"
|
|
class="form-control"
|
|
value="{if isset($config->name)}{$config->name}{/if}"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-lg-9">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label" id="id_configurator_group_label">{l s='Nazwa grupy' mod='configurator'}</label>
|
|
<div>
|
|
<select
|
|
id="id_configurator_group"
|
|
name="id_configurator_group"
|
|
class="form-control">
|
|
<option value="0"></option>
|
|
{foreach $configurator_groups as $configurator_group}
|
|
<option {if isset($config->id_configurator_group) && $configurator_group.id_configurator_group == $config->id_configurator_group}selected="selected"{/if} value="{$configurator_group.id_configurator_group}">{$configurator_group.name}</option>
|
|
{/foreach}
|
|
</select>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-lg-9">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Szerokość wydruku w milimetrach' mod='configurator'}</label>
|
|
<div>
|
|
<input type="text"
|
|
id="configurator_print_width"
|
|
name="configurator_print_width"
|
|
class="form-control"
|
|
value="{if isset($config->print_width)}{$config->print_width}{/if}"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-lg-9">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Wysokość wydruku w milimetrach' mod='configurator'}</label>
|
|
<div>
|
|
<input type="text"
|
|
id="configurator_print_height"
|
|
name="configurator_print_height"
|
|
class="form-control"
|
|
value="{if isset($config->print_height)}{$config->print_height}{/if}"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-lg-9">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Szerokość pola konfiguracji w pikselach' mod='configurator'}</label>
|
|
<div>
|
|
<input type="text"
|
|
id="configurator_width"
|
|
name="configurator_width"
|
|
class="form-control"
|
|
value="{if isset($config->width)}{$config->width}{/if}"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-lg-9">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Wysokość pola konfiguracji w pikselach' mod='configurator'}</label>
|
|
<div>
|
|
<input type="text"
|
|
id="configurator_height"
|
|
name="configurator_height"
|
|
class="form-control"
|
|
value="{if isset($config->height)}{$config->height}{/if}"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-lg-9">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Zdjęcie w tle' mod='configurator'}</label>
|
|
<div>
|
|
<input type="file"
|
|
id="configurator_image"
|
|
name="configurator_image"
|
|
class="form-control"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
{if isset($config->level) && $config->level >= 1}
|
|
<div class="form-group">
|
|
<div id="configurator_main_image_container" style="display: inline-block; position: relative;max-width: 1200px;">
|
|
<img id="configurator_main_image" style="object-fit: cover;max-width: 100%;width: {$config->width}px;height: {$config->height}px;" attr-width="{$config->width}" attr-height="{$config->height}" data-lazyload-ignore src="https://wyczarujprezent.pl/img/configurator/test.jpg"/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" id="configurator_panel_field" style="display: none;">
|
|
<div class="col-md-12">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Typ elementu' mod='configurator'}</label>
|
|
<div>
|
|
<select
|
|
id="configurator_type"
|
|
name="configurator_type"
|
|
class="form-control">
|
|
<option value="1">{l s='Tekst' mod='configurator'}</option>
|
|
<option value="2">{l s='Zdjęcie' mod='configurator'}</option>
|
|
</select>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-md-12 typeFile" style="display: none;">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Zdjęcie' mod='configurator'}</label>
|
|
<div>
|
|
<input type="file"
|
|
id="configurator_file"
|
|
name="configurator_file"
|
|
class="form-control"
|
|
/>
|
|
<img id="configurator_file_img" style="display: inline-block;object-fit: cover;width: 400px;height: auto;"/>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-md-12 typeText">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Tekst domyślny' mod='configurator'}</label>
|
|
<div>
|
|
<textarea
|
|
id="configurator_text"
|
|
name="configurator_text"
|
|
class="form-control"></textarea>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Kąt nachylenia w stopniach' mod='configurator'}</label>
|
|
<div>
|
|
<input type="number"
|
|
id="configurator_rotation"
|
|
name="configurator_rotation"
|
|
class="form-control"
|
|
min="0"
|
|
max="360"
|
|
value="0"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-md-12 typeText">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Rodzaj czcionki' mod='configurator'}</label>
|
|
<div>
|
|
<select id="configurator_font" name="configurator_font" class="form-control">
|
|
{foreach $fonts as $font}
|
|
<option style="font-family: '{$font}'" value="{$font}">{$font}</option>
|
|
{/foreach}
|
|
</select>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-md-12 typeText">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Wielkość czcionki w px' mod='configurator'}</label>
|
|
<div>
|
|
<input type="text"
|
|
id="configurator_fontsize"
|
|
name="configurator_fontsize"
|
|
class="form-control"
|
|
value=""
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-md-12 typeText">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Limit znaków' mod='configurator'}</label>
|
|
<div>
|
|
<input type="text"
|
|
id="configurator_characters_limit"
|
|
name="configurator_characters_limit"
|
|
class="form-control"
|
|
value=""
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-md-12 typeText">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Kolor czcionki' mod='configurator'}</label>
|
|
<div>
|
|
<input type="text"
|
|
id="configurator_color"
|
|
name="configurator_color"
|
|
class="form-control"
|
|
value="#fe9810"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-md-12 typeText">
|
|
<fieldset class="form-group">
|
|
<label class="form-control-label">{l s='Wyrównanie tekstu' mod='configurator'}</label>
|
|
<div>
|
|
<select id="configurator_textalign" name="configurator_textalign" class="form-control">
|
|
<option value="left">{l s='Do lewej' mod='configurator'}</option>
|
|
<option value="center">{l s='Wyśrodkuj' mod='configurator'}</option>
|
|
<option value="right">{l s='Do prawej' mod='configurator'}</option>
|
|
</select>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-md-12" style="padding-bottom: 100px;">
|
|
<button class="btn btn-primary" id="saveField" type="button">Zapisz pole</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</fieldset>
|
|
</div>
|
|
{literal}
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
var id_page = 0;
|
|
var configurator_fields = JSON.parse($("#configurator_fields").val());
|
|
console.log(configurator_fields);
|
|
var id_field = configurator_fields[id_page].fields.length;
|
|
var id_edit_field = -1;
|
|
var x = 0;
|
|
var y = 0;
|
|
var width = 0;
|
|
var height = 0;
|
|
var current_width = 0;
|
|
var current_height = 0;
|
|
$('#configurator_color').minicolors();
|
|
refeshConfiguratorFields();
|
|
refreshPages();
|
|
$("#configurator_main_image").attr('src', configurator_fields[id_page].image);
|
|
var img_area_select = $('img#configurator_main_image').imgAreaSelect({
|
|
instance: true,
|
|
onSelectEnd: function (img, selection) {
|
|
if(selection.width > 0 && selection.height > 0)
|
|
{
|
|
$("#configurator_panel_field").show();
|
|
id_field = configurator_fields[id_page].fields.length;
|
|
x = Number(Math.round(((selection.x1 / img.width)*100)+'e2')+'e-2');
|
|
y = Number(Math.round(((selection.y1 / img.height)*100)+'e2')+'e-2');
|
|
width = Number(Math.round(((selection.width / img.width)*100)+'e2')+'e-2');
|
|
height = Number(Math.round(((selection.height / img.height)*100)+'e2')+'e-2');
|
|
if(id_edit_field >= 0 && typeof configurator_fields[id_page].fields[id_edit_field] !== 'undefined')
|
|
{
|
|
configurator_fields[id_page].fields[id_edit_field].x = x;
|
|
configurator_fields[id_page].fields[id_edit_field].y = y;
|
|
configurator_fields[id_page].fields[id_edit_field].width = width;
|
|
configurator_fields[id_page].fields[id_edit_field].height = height;
|
|
refeshConfiguratorFields();
|
|
}
|
|
$("#saveField").click();
|
|
}
|
|
}
|
|
});
|
|
function refreshPages() {
|
|
$('.configurator_page_additional').remove();
|
|
if(configurator_fields && configurator_fields.length > 1) {
|
|
for(var i = 1; i < configurator_fields.length; i++) {
|
|
$( '#addPage' ).before( '<button class="btn btn-primary configurator_page configurator_page_additional" style="margin-left: 10px;" page-id="'+i+'" type="button">Wzór '+(i+1)+'</button>' );
|
|
}
|
|
}
|
|
}
|
|
$(document).on("change", "#configurator_width, #configurator_height", function (){
|
|
$('#configurator_main_image').attr("width", parseInt($("#configurator_width").val())+"px");
|
|
$('#configurator_main_image').attr("height", parseInt($("#configurator_height").val())+"px");
|
|
});
|
|
$(document).on("click", ".configurator_page", function (){
|
|
img_area_select.cancelSelection();
|
|
id_page = parseInt($(this).attr('page-id'));
|
|
$("#configurator_name").val(configurator_fields[id_page].name);
|
|
$("#id_configurator_group").val(configurator_fields[id_page].id_configurator_group);
|
|
$("#configurator_width").val(configurator_fields[id_page].width);
|
|
$("#configurator_height").val(configurator_fields[id_page].height);
|
|
$("#configurator_print_width").val(configurator_fields[id_page].print_width);
|
|
$("#configurator_print_height").val(configurator_fields[id_page].print_height);
|
|
$("#configurator_main_image").attr('src', configurator_fields[id_page].image);
|
|
$("#configurator_main_image").attr('width', configurator_fields[id_page].width);
|
|
$("#configurator_main_image").attr('height', configurator_fields[id_page].height);
|
|
$("#configurator_main_image").attr('attr-width', configurator_fields[id_page].width);
|
|
$("#configurator_main_image").attr('attr-height', configurator_fields[id_page].height);
|
|
current_width = 0;
|
|
current_height = 0;
|
|
$("#configurator_panel_field").hide();
|
|
if(id_page > 0) {
|
|
$("#deletePage").show();
|
|
}
|
|
else {
|
|
$("#deletePage").hide();
|
|
}
|
|
id_edit_field = -1;
|
|
x = 0;
|
|
y = 0;
|
|
width = 0;
|
|
height = 0;
|
|
refeshConfiguratorFields();
|
|
refreshGroup();
|
|
});
|
|
$("#addPage").click(function (){
|
|
var formData = new FormData();
|
|
formData.append('page_id', configurator_fields.length);
|
|
formData.append('product_id', $('#product_id').val());
|
|
$.ajax({
|
|
url : 'https://wyczarujprezent.pl/modules/configurator/newPage.php',
|
|
type : 'POST',
|
|
data : formData,
|
|
processData: false, // tell jQuery not to process the data
|
|
contentType: false, // tell jQuery not to set contentType
|
|
success : function(data) {
|
|
if(typeof data !== 'undefined') {
|
|
configurator_fields.push({
|
|
id_config: data,
|
|
image: '',
|
|
width: 0,
|
|
height: 0,
|
|
print_width: 0,
|
|
print_height: 0,
|
|
id_configurator_group: 0,
|
|
fields: []
|
|
});
|
|
refreshPages();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
$("#deletePage").click(function (){
|
|
if(id_page > 0) {
|
|
var formData = new FormData();
|
|
formData.append('config_id', configurator_fields[id_page].id_config);
|
|
$.ajax({
|
|
url : 'https://wyczarujprezent.pl/modules/configurator/deletePage.php',
|
|
type : 'POST',
|
|
data : formData,
|
|
processData: false, // tell jQuery not to process the data
|
|
contentType: false, // tell jQuery not to set contentType
|
|
success : function(data) {
|
|
if(typeof data !== 'undefined') {
|
|
for(var i = id_page+1; i <= configurator_fields.length; i++) {
|
|
configurator_fields[i-1] = configurator_fields[i];
|
|
}
|
|
configurator_fields.pop();
|
|
$('.configurator_page[page-id="'+id_page+'"]').remove();
|
|
$('.configurator_first_page').click();
|
|
refreshPages();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
$("#saveField").click(function (){
|
|
if(id_edit_field >= 0) {
|
|
if(x > 0)
|
|
configurator_fields[id_page].fields[id_edit_field].x = x;
|
|
if(y > 0)
|
|
configurator_fields[id_page].fields[id_edit_field].y = y;
|
|
if(width > 0)
|
|
configurator_fields[id_page].fields[id_edit_field].width = width;
|
|
if(height > 0)
|
|
configurator_fields[id_page].fields[id_edit_field].height = height;
|
|
configurator_fields[id_page].fields[id_edit_field].type = $("#configurator_type").val();
|
|
if(parseInt(configurator_fields[id_page].fields[id_edit_field].type) == 1)
|
|
configurator_fields[id_page].fields[id_edit_field].text = $("#configurator_text").val();
|
|
configurator_fields[id_page].fields[id_edit_field].fontsize = $("#configurator_fontsize").val();
|
|
configurator_fields[id_page].fields[id_edit_field].font = $("#configurator_font").val();
|
|
configurator_fields[id_page].fields[id_edit_field].color = $("#configurator_color").val();
|
|
configurator_fields[id_page].fields[id_edit_field].rotation = $("#configurator_rotation").val();
|
|
configurator_fields[id_page].fields[id_edit_field].textalign = $("#configurator_textalign").val();
|
|
configurator_fields[id_page].fields[id_edit_field].characters_limit = $("#configurator_characters_limit").val();
|
|
}
|
|
else {
|
|
configurator_fields[id_page].fields.push({
|
|
x: x,
|
|
y: y,
|
|
width: width,
|
|
height: height,
|
|
text: $("#configurator_text").val(),
|
|
fontsize: $("#configurator_fontsize").val(),
|
|
font: $("#configurator_font").val(),
|
|
color: $("#configurator_color").val(),
|
|
rotation: $("#configurator_rotation").val(),
|
|
textalign: $("#configurator_textalign").val(),
|
|
characters_limit: $("#configurator_characters_limit").val(),
|
|
type: 1,
|
|
});
|
|
}
|
|
$("#configurator_text").val('');
|
|
$("#configurator_fontsize").val('');
|
|
$("#configurator_font").val('');
|
|
$("#configurator_color").val('#000000');
|
|
$("#configurator_rotation").val('0');
|
|
$("#configurator_textalign").val('left');
|
|
$("#configurator_characters_limit").val('0');
|
|
id_edit_field = -1;
|
|
img_area_select.setOptions({ hide: true });
|
|
$("#configurator_panel_field").hide();
|
|
refeshConfiguratorFields();
|
|
});
|
|
function refeshConfiguratorFields() {
|
|
$('#configurator_main_image_container .configurator_field').remove();
|
|
for(var i = 0; i < configurator_fields[id_page].fields.length; i++)
|
|
{
|
|
var characters_limit = parseInt(configurator_fields[id_page].fields[i].characters_limit);
|
|
if(parseInt(configurator_fields[id_page].fields[i].type) == 1 && configurator_fields[id_page].fields[i].text.length > characters_limit) {
|
|
configurator_fields[id_page].fields[i].text = configurator_fields[id_page].fields[i].text.substring(0, characters_limit);
|
|
}
|
|
var temp_content = configurator_fields[id_page].fields[i].text;
|
|
var left = parseFloat(configurator_fields[id_page].fields[i].x);
|
|
var top = parseFloat(configurator_fields[id_page].fields[i].y);
|
|
var width = parseFloat(configurator_fields[id_page].fields[i].width);
|
|
var height = parseFloat(configurator_fields[id_page].fields[i].height);
|
|
var fontsize = parseFloat(configurator_fields[id_page].fields[i].fontsize);
|
|
var font = configurator_fields[id_page].fields[i].font;
|
|
var color = configurator_fields[id_page].fields[i].color;
|
|
var rotation = configurator_fields[id_page].fields[i].rotation;
|
|
var type = configurator_fields[id_page].fields[i].type;
|
|
var textalign = configurator_fields[id_page].fields[i].textalign;
|
|
var additional_css = "";
|
|
if(parseInt(type) == 2) {
|
|
additional_css = "background: url('"+temp_content+"');background-size: 100% 100%;";
|
|
}
|
|
$('#configurator_main_image_container').append('<div class="configurator_field" field-id="'+i+'" style="'+additional_css+'transform: rotate('+rotation+'deg); text-align: '+textalign+'; color: '+color+'; border: 1px dashed #000; overflow: hidden; position: absolute; font-family: '+"'"+font+"'"+'; font-size: '+fontsize+'px; left: '+left+'%; top: '+top+'%; width: '+width+'%; height: '+height+'%;"><div class="overlayField"><i style="position: absolute;right: 17px;cursor: pointer;" class="material-icons editConfiguratorField">edit</i><i style="position: absolute;right: 0px;cursor: pointer;" class="material-icons deleteConfiguratorField">delete</i><div style="line-height: normal;font-family: '+"'"+font+"'"+';">'+(parseInt(type) == 1 ? temp_content : '')+'</div></div></div>');
|
|
}
|
|
$("#configurator_fields").val(JSON.stringify(configurator_fields));
|
|
scaleConfigurator();
|
|
}
|
|
$(document).on('click', ".deleteConfiguratorField", function (){
|
|
if (confirm("Czy na pewno chcesz usunąć to pole?") == true) {
|
|
var id = $(this).parent().parent().attr("field-id");
|
|
configurator_fields[id_page].fields.splice(id, 1);
|
|
refeshConfiguratorFields();
|
|
}
|
|
});
|
|
$(document).on('click', ".editConfiguratorField", function (){
|
|
id_edit_field = $(this).parent().parent().attr("field-id");
|
|
if(parseInt(configurator_fields[id_page].fields[id_edit_field].type) == 1) {
|
|
$("#configurator_text").val(configurator_fields[id_page].fields[id_edit_field].text);
|
|
}
|
|
else {
|
|
$("#configurator_file_img").attr('src', configurator_fields[id_page].fields[id_edit_field].text);
|
|
}
|
|
$("#configurator_fontsize").val(configurator_fields[id_page].fields[id_edit_field].fontsize);
|
|
$("#configurator_font").val(configurator_fields[id_page].fields[id_edit_field].font);
|
|
$("#configurator_color").val(configurator_fields[id_page].fields[id_edit_field].color);
|
|
$("#configurator_rotation").val(configurator_fields[id_page].fields[id_edit_field].rotation);
|
|
$("#configurator_type").val(configurator_fields[id_page].fields[id_edit_field].type);
|
|
$("#configurator_textalign").val(configurator_fields[id_page].fields[id_edit_field].textalign);
|
|
$("#configurator_characters_limit").val(configurator_fields[id_page].fields[id_edit_field].characters_limit);
|
|
var x1 = (parseFloat(configurator_fields[id_page].fields[id_edit_field].x)/100)*$(this).parent().parent().parent().width();
|
|
var y1 = (parseFloat(configurator_fields[id_page].fields[id_edit_field].y)/100)*$(this).parent().parent().parent().height();
|
|
var x2 = ((parseFloat(configurator_fields[id_page].fields[id_edit_field].x)/100)+(parseFloat(configurator_fields[id_page].fields[id_edit_field].width)/100))*$(this).parent().parent().parent().width();
|
|
var y2 = ((parseFloat(configurator_fields[id_page].fields[id_edit_field].y)/100)+(parseFloat(configurator_fields[id_page].fields[id_edit_field].height)/100))*$(this).parent().parent().parent().height();
|
|
|
|
x = configurator_fields[id_page].fields[id_edit_field].x;
|
|
y = configurator_fields[id_page].fields[id_edit_field].y;
|
|
width = configurator_fields[id_page].fields[id_edit_field].width;
|
|
height = configurator_fields[id_page].fields[id_edit_field].height;
|
|
img_area_select.setOptions({
|
|
show: true,
|
|
x1: parseInt(x1),
|
|
y1: parseInt(y1),
|
|
x2: parseInt(x2),
|
|
y2: parseInt(y2)
|
|
});
|
|
img_area_select.update();
|
|
$("#configurator_panel_field").show();
|
|
refreshType();
|
|
});
|
|
function refreshType() {
|
|
if(parseInt($("#configurator_type").val()) == 1) {
|
|
$(".typeFile").hide();
|
|
$(".typeText").show();
|
|
}
|
|
else {
|
|
$(".typeFile").show();
|
|
$(".typeText").hide();
|
|
}
|
|
}
|
|
$("#configurator_width").change(function (event){
|
|
configurator_fields[id_page].width = $(this).val();
|
|
$("#configurator_fields").val(JSON.stringify(configurator_fields));
|
|
current_width = 0;
|
|
current_height = 0;
|
|
scaleConfigurator();
|
|
});
|
|
$("#configurator_height").change(function (event){
|
|
configurator_fields[id_page].height = $(this).val();
|
|
$("#configurator_fields").val(JSON.stringify(configurator_fields));
|
|
current_width = 0;
|
|
current_height = 0;
|
|
scaleConfigurator();
|
|
});
|
|
$("#configurator_name").change(function (event){
|
|
configurator_fields[id_page].name = $(this).val();
|
|
$("#configurator_fields").val(JSON.stringify(configurator_fields));
|
|
});
|
|
$("#configurator_print_width").change(function (event){
|
|
configurator_fields[id_page].print_width = $(this).val();
|
|
$("#configurator_fields").val(JSON.stringify(configurator_fields));
|
|
});
|
|
$("#configurator_print_height").change(function (event){
|
|
configurator_fields[id_page].print_height = $(this).val();
|
|
$("#configurator_fields").val(JSON.stringify(configurator_fields));
|
|
});
|
|
$("#id_configurator_group").change(function (event){
|
|
configurator_fields[id_page].id_configurator_group = $(this).val();
|
|
$("#configurator_fields").val(JSON.stringify(configurator_fields));
|
|
refreshGroup();
|
|
});
|
|
function refreshGroup() {
|
|
if($("#id_configurator_group").val() && parseInt($("#id_configurator_group").val()) > 0) {
|
|
$("#id_configurator_group_label").css('color', '#363a41');
|
|
$("#id_configurator_group").css('color', '#363a41');
|
|
$("#id_configurator_group").css('border', '1px solid #bbcdd2');
|
|
}
|
|
else {
|
|
$("#id_configurator_group_label").css('color', '#FF0000');
|
|
$("#id_configurator_group").css('color', '#FF0000');
|
|
$("#id_configurator_group").css('border', '1px solid #FF0000');
|
|
}
|
|
}
|
|
$("#configurator_type").change(function (event){
|
|
refreshType();
|
|
});
|
|
$("#configurator_image").change(function (event){
|
|
var formData = new FormData();
|
|
formData.append('file', event.target.files[0]);
|
|
formData.append('config_id', configurator_fields[id_page].id_config);
|
|
$.ajax({
|
|
url : 'https://wyczarujprezent.pl/modules/configurator/upload.php',
|
|
type : 'POST',
|
|
data : formData,
|
|
processData: false, // tell jQuery not to process the data
|
|
contentType: false, // tell jQuery not to set contentType
|
|
success : function(data) {
|
|
if(typeof data !== 'undefined') {
|
|
configurator_fields[id_page].image = data;
|
|
var date = new Date().getTime();
|
|
setTimeout(function() {
|
|
$("#configurator_main_image").attr('src', configurator_fields[id_page].image+"?"+date);
|
|
}, 1000);
|
|
current_width = 0;
|
|
current_height = 0;
|
|
scaleConfigurator();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
$("#configurator_file").change(function (event){
|
|
var formData = new FormData();
|
|
formData.append('file', event.target.files[0]);
|
|
if(id_edit_field > -1)
|
|
formData.append('prev', configurator_fields[id_page].fields[id_edit_field].text);
|
|
else
|
|
formData.append('prev', '');
|
|
formData.append('type', 'default');
|
|
$.ajax({
|
|
url : 'https://wyczarujprezent.pl/modules/configurator/uploadFieldImg.php',
|
|
type : 'POST',
|
|
data : formData,
|
|
processData: false, // tell jQuery not to process the data
|
|
contentType: false, // tell jQuery not to set contentType
|
|
success : function(data) {
|
|
if(typeof data !== 'undefined') {
|
|
configurator_fields[id_page].fields[id_edit_field].text = data;
|
|
$("#configurator_fields").val(JSON.stringify(configurator_fields));
|
|
var date = new Date().getTime();
|
|
setTimeout(function() {
|
|
$("#configurator_file_img").attr('src', configurator_fields[id_page].fields[id_edit_field].text+"?"+date);
|
|
}, 1000);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
function scalelistener() {
|
|
if ($("#configurator_main_image").is(':visible')){
|
|
scaleConfigurator();
|
|
}
|
|
else {
|
|
setTimeout(function(){
|
|
scalelistener();
|
|
}, 1000);
|
|
}
|
|
}
|
|
scalelistener();
|
|
refreshGroup();
|
|
function scaleConfigurator() {
|
|
var original_width = parseInt($("#configurator_main_image").attr("attr-width"));
|
|
var original_height = parseInt($("#configurator_main_image").attr("attr-height"));
|
|
if(current_width == 0 || original_width === current_width) {
|
|
current_width = parseInt($("#configurator_main_image").width());
|
|
current_height = parseInt($("#configurator_main_image").height());
|
|
}
|
|
var ratio = parseInt((current_width*100)/original_width);
|
|
$("#configurator_main_image").height(original_height *(ratio/100));
|
|
$(".configurator_field").each(function() {
|
|
var font_size = parseInt($(this).css("font-size").replace('px', ''));
|
|
$(this).css("font-size", (font_size*(ratio/100))+"px");
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{/literal} |