Files
kupshop/admin/templates/window/photos.tpl
2025-08-02 16:30:27 +02:00

346 lines
17 KiB
Smarty

{extends "../window.tpl"}
{block css append}
<style>
.center-point-wrapper {
position: relative;
display: inline-block;
cursor: crosshair;
max-width: 400px;
}
.center-point {
z-index: 100;
position: absolute;
width: 14px;
height: 14px;
border-radius: 15px;
border: white 2px solid;
background-color: rgba(0, 0, 0, 0.4);
left: calc({$body.data.data.center_point.x|default:50}% - 7px);
top: calc({$body.data.data.center_point.y|default:50}% - 7px);
}
</style>
{/block}
{block "js-onready" append}
<script src="/admin/static/fineuploader/jquery.fine-uploader.min.js"></script>
<script type="text/template" id="qq-simple-thumbnails-template">
<div class="qq-uploader-selector qq-uploader">
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<div>
<span></span>Přesuňte soubory sem
</div>
</div>
<div class="qq-upload-button-selector">
<p>
<strong>Nahrát obrázek</strong>
podporované formáty jsou .jpg, .jpeg a .png
</p>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Zpracovávám soubory...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list">
<li>
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<div class="qq-thumb-img">
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
</div>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Zrušit</a>
<a class="qq-upload-retry-selector qq-upload-retry" href="#">Opakovat</a>
<a class="qq-upload-delete-selector qq-upload-delete" href="#">Smazat</a>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
</div>
</script>
{/block}
{block tabs}
{windowTab id='flapPhoto'}
{windowTab id='flapResponsive'}
{if $body.acn=="edit"}
{windowTab id='2' label="Zařazení"}
{/if}
{/block}
{block tabsContent}
<div id="flapPhoto" class="tab-pane fade active in boxStatic box">
<h1 class="h4 main-panel-title">{'sectionPhotoData'|translate}</h1>
<div class="form-group">
<div class="col-md-2 control-label"><label>{'description'|translate}</label>{insert_llm_button type='image_description' target="data[descr]"}</div>
<div class="col-md-10">
<input name="data[descr]" class="form-control input-sm" value="{$body.data.descr}">
</div>
</div>
{if $body.acn=="add"}
<h1 class="h4 main-panel-title">{'sectionNewPhoto'|translate}</h1>
<div class="form-group">
<div class="col-md-2 control-label">
<label>{'photoInput'|translate:"producers"}</label>
</div>
<div class="col-md-4">
<input type="file" class="filestyle" name="picture" data-iconName="glyphicon-folder-open" data-buttonText="Nahrát obrázek">
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-block btn-primary btn-sm" value="{'submitNewPhoto'|translate:"producers"}" name="Submit">
</div>
</div>
{else}
<div class="form-group">
<div class="col-md-2 control-label"><label>{'dateAdded'|translate}</label></div>
<div class="col-md-3">
<input type="text" class="form-control input-sm" name="data[date]" id="date_reg" value="{$body.data.date}"
readonly="readonly">
</div>
<div class="col-md-2 col-md-offset-1 control-label"><label>{'dateUpdated'|translate}</label></div>
<div class="col-md-3">
<input type="text" class="form-control input-sm" name="data[date_update]" id="date_reg" value="{$body.data.date_update}"
readonly="readonly">
</div>
</div>
<div class="form-group">
<div class="col-md-2 control-label">
<label>{'changePhoto'|translate}</label>
</div>
<div class="col-md-4">
<input type="file" class="filestyle" name="picture" data-iconName="glyphicon-folder-open" data-buttonText="Nahrát obrázek">
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-block btn-primary btn-sm" value="{'submitNewPhoto'|translate:"producers"}" name="Submit">
</div>
</div>
<div class="form-group">
<div class="col-md-2 control-label">
<label>{'bigPhoto'|translate}</label>
</div>
<div class="col-md-4">
{if $body.data.id_video}
<div><a href="launch.php?s=photos.php&acn=refreshVideoThumbnail&ID={$body.data.id}"><span
class="glyphicon glyphicon-film"></span></a></div>
{/if}
<div class="center-point-wrapper">
<div class="center-point"></div>
<img src="{get_photo photo=$body.data.photo size='product_large'}" alt="{$body.data.name}" class="img-rounded img-responsive center-point-img">
</div>
<input type="number" name="data[data][center_point][x]" hidden="">
<input type="number" name="data[data][center_point][y]" hidden="">
</div>
<div class="col-md-3">
<a href="/{$cfg.Path.photos}{$body.data.source}{$body.data.image_2}?{$body.data.date_update|date_format:"%s"}"
class="btn btn-sm btn-block">{'originalPhoto'|translate}</a>
</div>
<div class="col-md-2">
<a href="javascript:nw('imageEditor', '{$smarty.get.ID}', 'language=admin&refresh=true');" class="btn btn-sm"><span
class="fc icons_paintbrush m-r-1"></span> Upravit</a>
</div>
</div>
{/if}
</div>
<div id="flapResponsive" class="tab-pane fade active in boxStatic box">
<h1 class="h4 main-panel-title">{'responsiveTablet'|translate}</h1>
<div class="form-group row-flex">
{if $body.data.image_tablet}
<div class="col-md-2">
<a href="{get_photo photo=$body.data.photo version='tablet' size=0}" data-rel="bigphoto">
<img src="{get_photo photo=$body.data.photo version='tablet' size=4}" alt="{$body.data.name}" class="img-rounded">
</a>
</div>
<div class="col-md-4">
<a href="/{$cfg.Path.photos}{$body.data.source}{$body.data.image_tablet}?{$body.data.date_update|date_format:"%s"}"
class="btn btn-sm m-r-2">{'originalPhoto'|translate}</a>
<a href="javascript:nw('imageEditor', '{$smarty.get.ID}', 'version=tablet&refresh=true');" class="btn btn-sm"><span
class="fc icons_paintbrush m-r-1"></span> Upravit</a>
</div>
{/if}
<label class="col-md-2 control-label">{'changePhoto'|translate}</label>
<div class="col-md-3">
<input type="file" class="filestyle" name="pictureTablet" data-iconName="glyphicon-folder-open"
data-buttonText="Nahrát obrázek">
</div>
{if $body.data.image_tablet}
<div class="col-md-1">
<a href="launch.php?s=photos.php&acn=deleteVersion&version=tablet&ID={$body.data.id}" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash" title="Smazat"></span>
</a>
</div>
{/if}
</div>
<h1 class="h4 main-panel-title">{'responsiveMobile'|translate}</h1>
<div class="form-group row-flex">
{if $body.data.image_mobile}
<div class="col-md-2">
<a href="{get_photo photo=$body.data.photo version='mobile' size=0}" data-rel="bigphoto">
<img src="{get_photo photo=$body.data.photo version='mobile' size=4}" alt="{$body.data.name}"
class="img-rounded img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="/{$cfg.Path.photos}{$body.data.source}{$body.data.image_mobile}?{$body.data.date_update|date_format:"%s"}"
class="btn btn-sm m-r-2">{'originalPhoto'|translate}</a>
<a href="javascript:nw('imageEditor', '{$smarty.get.ID}', 'version=mobile&refresh=true');" class="btn btn-sm"><span
class="fc icons_paintbrush m-r-1"></span> Upravit</a>
</div>
{/if}
<label class="col-md-2 control-label">{'changePhoto'|translate}</label>
<div class="col-md-3">
<input type="file" class="filestyle" name="pictureMobile" data-iconName="glyphicon-folder-open"
data-buttonText="Nahrát obrázek">
</div>
{if $body.data.image_mobile}
<div class="col-md-1">
<a href="launch.php?s=photos.php&acn=deleteVersion&version=mobile&ID={$body.data.id}" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash" title="Smazat"></span>
</a>
</div>
{/if}
</div>
</div>
{if $body.acn=="edit"}
<div id="2" class="tab-pane fade active in boxStatic box">
{ifmodule PRODUCTS}
<h1 class="h4 main-panel-title">{'productTitle'|translate}</h1>
{foreach $body.photos_products as $prod}
<div class="row">
<div class="col-md-8"><a href="javascript:nw('product', '{$prod.id}');">{$prod.title}</a></div>
<div class="col-md-2">
<a class="btn btn-danger confirm btn-sm" title="Smazat"
href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&amp;relationType=products&amp;ID={$body.data.id}&amp;IDpr={$prod.id}">
<span class="glyphicon glyphicon-remove"></span>
</a>
</div>
</div>
{/foreach}
{foreach $body.photos_products_blocks as $prod}
<div class="row">
<div class="col-md-8"><a href="javascript:nw('product', '{$prod.id}');">{$prod.title}</a></div>
<div class="col-md-2">
<a class="btn btn-danger confirm btn-sm" title="Smazat"
href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&amp;relationType=products&amp;ID={$body.data.id}&amp;IDpr={$prod.id}">
<span class="glyphicon glyphicon-remove"></span>
</a>
</div>
</div>
{/foreach}
{if !$body.photos_products}
<p>{'usageNowhereProduct'|translate}</p>
{/if}
{/ifmodule}
{ifmodule ARTICLES}
<h1 class="h4 main-panel-title">{'articleTitle'|translate}</h1>
{foreach $body.photos_articles as $art}
<div class="form-group">
<div class="col-md-8"><a href="javascript:nw('article', '{$art.id}');">{$art.title}</a></div>
<div class="col-md-2">
<a class="btn btn-danger confirm btn-sm" title="Smazat"
href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&&amp;relationType=articles&amp;ID={$body.data.id}&amp;IDpr={$art.id}">
<span class="glyphicon glyphicon-remove"></span>
</a>
</div>
</div>
{/foreach}
{if !$body.photos_articles}
<p>{'usageNowhereArticle'|translate}</p>
{/if}
{/ifmodule}
{ifmodule PAGES}
<h1 class="h4 main-panel-title">{'pageTitle'|translate}</h1>
{foreach $body.photos_pages as $page}
<div class="form-group">
<div class="col-md-8"><a href="javascript:nw('page', '{$page.id}');">{$page.name}</a></div>
<div class="col-md-2">
<a class="btn btn-danger confirm btn-sm" title="Smazat"
href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&amp;relationType=pages&amp;ID={$body.data.id}&amp;IDpr={$page.id}">
<span class="glyphicon glyphicon-remove"></span>
</a>
</div>
</div>
{/foreach}
{if !$body.photos_pages}
<p>{'usageNowherePage'|translate}</p>
{/if}
{/ifmodule}
{ifmodule PRODUCERS}
<h1 class="h4 main-panel-title">{'producers'|translate}</h1>
{foreach $body.photos_producers as $producers}
<div class="form-group">
<div class="col-md-8"><a href="javascript:nw('producers', '{$producers.id}');">{$producers.name}</a></div>
<div class="col-md-2">
<a class="btn btn-danger confirm btn-sm" title="Smazat"
href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&&amp;relationType=producers&amp;ID={$body.data.id}&amp;IDpr={$producers.id}">
<span class="glyphicon glyphicon-remove"></span>
</a>
</div>
</div>
{/foreach}
{if !$body.photos_producers}
<p>{'usageNowhereProducer'|translate}</p>
{/if}
{/ifmodule}
{ifmodule SLIDERS}
<h1 class="h4 main-panel-title">{'sliders'|translate}</h1>
{foreach $body.photos_sliders as $sliders}
<div class="form-group">
<div class="col-md-8"><a href="javascript:nw('sliders', '{$sliders.id_slider}');">{$sliders.name}</a></div>
<div class="col-md-2">
<a class="btn btn-danger confirm btn-sm" title="Smazat"
href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&&amp;relationType=sliders&amp;ID={$body.data.id}&amp;IDpr={$sliders.id}">
<span class="glyphicon glyphicon-remove"></span>
</a>
</div>
</div>
{/foreach}
{if !$body.photos_sliders}
<p>{'usageNowhereSlider'|translate}</p>
{/if}
{/ifmodule}
{ifmodule PRODUCTS_SECTIONS}
<h1 class="h4 main-panel-title">{'sections'|translate}</h1>
{foreach $body.photos_sections as $sections}
<div class="form-group">
<div class="col-md-8"><a href="javascript:nw('sections', '{$sections.id_section}');">{$sections.name}</a></div>
<div class="col-md-2">
<a class="btn btn-danger confirm btn-sm" title="Smazat"
href="launch.php?s=photos.php&amp;acn=deletePhotoRelation&&amp;relationType=sections&amp;ID={$body.data.id}&amp;IDpr={$sections.id}">
<span class="glyphicon glyphicon-remove"></span>
</a>
</div>
</div>
{/foreach}
{if !$body.photos_sections}
<p>{'usageNowhereSection'|translate}</p>
{/if}
{/ifmodule}
</div>
{/if}
<script>
$('.center-point-img').on('click', (event) => {
const position = event.target.getBoundingClientRect();
const rx = Math.round(100 * (event.clientX - position.left) / position.width);
const ry = Math.round(100 * (event.clientY - position.top) / position.height);
$('.center-point').css("left", "calc(" + rx + "% - 7px)").css("top", "calc(" + ry + "% - 7px)");
$("[name='data[data][center_point][x]']").val(rx);
$("[name='data[data][center_point][y]']").val(ry);
});
</script>
{/block}