// Refactoring images.tpl
git-svn-id: http://dev.prestashop.com/svn/v1/branches/1.5.x@10392 b9a71923-0436-4b27-9f14-aed3839534dd
This commit is contained in:
rMontagne
@@ -6,103 +6,150 @@
|
||||
</tr>
|
||||
</table>
|
||||
<div class="separation"></div><br />
|
||||
<table cellpadding="5" style="width:100%">
|
||||
<tr>
|
||||
<td class="col-left"><label>{l s='File:'}</label></td>
|
||||
<td style="padding-bottom:5px;">
|
||||
<div id="file-uploader">
|
||||
<noscript>
|
||||
<p>{l s='Please enable JavaScript to use file uploader:'}</p>
|
||||
</noscript>
|
||||
</div>
|
||||
<div id="progressBarImage" class="progressBarImage"></div>
|
||||
<div id="showCounter" style="display:none;"><span id="imageUpload">0</span><span id="imageTotal">0</span></div>
|
||||
<ul id="listImage"></ul>
|
||||
<script type="text/javascript">var upbutton = "{l s='Upload a file'}"; </script>
|
||||
<script type="text/javascript">
|
||||
<table cellpadding="5" style="width:100%">
|
||||
<tr>
|
||||
<td class="col-left"><label>{l s='File:'}</label></td>
|
||||
<td style="padding-bottom:5px;">
|
||||
<div id="file-uploader">
|
||||
<noscript>
|
||||
<p>{l s='Please enable JavaScript to use file uploader:'}</p>
|
||||
</noscript>
|
||||
</div>
|
||||
<div id="progressBarImage" class="progressBarImage"></div>
|
||||
<div id="showCounter" style="display:none;"><span id="imageUpload">0</span><span id="imageTotal">0</span></div>
|
||||
<p class="float" style="clear: both;">
|
||||
{l s='Format:'} JPG, GIF, PNG. {l s='Filesize:'} {$max_image_size / 1000}{l s='Kb max.'}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:center;">
|
||||
<input type="hidden" name="resizer" value="auto" />
|
||||
{if Tools::getValue('id_image')}<input type="hidden" name="id_image" value="{Tools::getValue('id_image')}" />{/if}
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td colspan="2" style="padding-bottom:10px;"><div class="separation"></div></td></tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<table cellspacing="0" cellpadding="0" class="table tableDnD" id="imageTable">
|
||||
<thead>
|
||||
<tr class="nodrag nodrop">
|
||||
<th style="width: 100px;">{l s='Image'}</th>
|
||||
<th>{l s='Position'}</th>
|
||||
{if $shops}
|
||||
{foreach from=$shops item=shop}
|
||||
<th>{$shop.name}</th>
|
||||
{/foreach}
|
||||
{/if}
|
||||
<th>{l s='Cover'}</th>
|
||||
<th>{l s='Action'}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="imageList">
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<table id="lineType" style="display:none;">
|
||||
<tr id="image_id">
|
||||
<td style="padding: 4px;">
|
||||
<a href="image_path.jpg" target="_blank">
|
||||
<img src="{$smarty.const._THEME_PROD_DIR_}en-default-small.jpg" alt="image_id" title="image_id" />
|
||||
</a>
|
||||
</td>
|
||||
<td id="td_image_id" class="pointer dragHandle center positionImage">
|
||||
image_position
|
||||
</td>
|
||||
{if $shops}
|
||||
{foreach from=$shops item=shop}
|
||||
<td class="center">
|
||||
<input type="checkbox" class="image_shop" name="id_image" id="{$shop.id_shop}image_id" value="{$shop.id_shop}" />
|
||||
</td>
|
||||
{/foreach}
|
||||
{/if}
|
||||
<td class="center cover"><a href="#">
|
||||
<img class="covered" src="../img/admin/blank.gif" alt="e" /></a>
|
||||
</td>
|
||||
<td class="center">
|
||||
<a href="#" class="delete_product_image" >
|
||||
<img src="../img/admin/delete.gif" alt="{l s='Delete this image'}" title="{l s='Delete this image'}" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<script type="text/javascript" src="../js/jquery/plugins/jquery.tablednd.js"></script>
|
||||
<script type="text/javascript">
|
||||
var upbutton = '{l s='Upload a file'}';
|
||||
var token = '{$token}';
|
||||
var come_from = '{$table}';
|
||||
var id_tmp = 0;
|
||||
{literal}
|
||||
//Ready Function
|
||||
$(document).ready(function(){
|
||||
$('.delete_product_image').die().live('click', function(e)
|
||||
{/literal}
|
||||
{foreach from=$images item=image}
|
||||
assoc = {literal}"{"{/literal};
|
||||
{if $shops}
|
||||
{foreach from=$shops item=shop}
|
||||
assoc += '"{$shop.id_shop}" : {if $image->isAssociatedToShop($shop.id_shop)}1{else}0{/if},';
|
||||
{/foreach}
|
||||
{/if}
|
||||
assoc = assoc.slice(0, -1);
|
||||
assoc += {literal}"}"{/literal};
|
||||
imageLine({$image->id}, "{$image->getExistingImgPath()}", {$image->position}, "{if $image->cover}enabled{else}forbbiden{/if}", assoc);
|
||||
{/foreach}
|
||||
{literal}
|
||||
$("#imageTable").tableDnD(
|
||||
{
|
||||
e.preventDefault();
|
||||
id = $(this).parent().parent().attr('id').substr(3);
|
||||
|
||||
if (confirm("{l s='Are you sure?'}"))
|
||||
$.post("ajax-tab.php",
|
||||
{
|
||||
action: "deleteProductImage",
|
||||
id_image:id,
|
||||
id_product : "{$product->id}",
|
||||
id_category : "{$id_category_default}",
|
||||
token : "{$token}",
|
||||
tab : "AdminProducts",
|
||||
ajax : 1,
|
||||
},
|
||||
function (data)
|
||||
{
|
||||
try{
|
||||
data = $.parseJSON(data);
|
||||
if (data)
|
||||
{
|
||||
cover = 0;
|
||||
if(data.status == 'ok')
|
||||
{
|
||||
if ($("#tr_" + id).find(".covered").attr("src") == "../img/admin/enabled.gif")
|
||||
cover = 1;
|
||||
$("#tr_" + id).remove();
|
||||
}
|
||||
if (cover)
|
||||
$("#imageTable tr").eq(1).find(".covered").attr("src", "../img/admin/enabled.gif");
|
||||
|
||||
$("#countImage").html(parseInt($("#countImage").html()) - 1);
|
||||
|
||||
refreshImagePositions($("#imageTable"));
|
||||
}
|
||||
}
|
||||
catch(e){
|
||||
alert("TECHNICAL ERROR");
|
||||
}
|
||||
onDrop: function(table, row) {
|
||||
current = $(row).attr("id");
|
||||
stop = false;
|
||||
image_up = "{";
|
||||
$("#imageList").find("tr").each(function(i) {
|
||||
$("#td_" + $(this).attr("id")).html(i + 1);
|
||||
if ($(this).attr("id") == current)
|
||||
{
|
||||
image_up += '"' + $(this).attr("id") + '" : ' + (i + 1) + ',';
|
||||
stop = true;
|
||||
}
|
||||
);
|
||||
if (!stop || (i + 1) == 2)
|
||||
image_up += '"' + $(this).attr("id") + '" : ' + (i + 1) + ',';
|
||||
});
|
||||
image_up = image_up.slice(0, -1);
|
||||
image_up += "}";
|
||||
updateImagePositon(image_up);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function delQueue(id)
|
||||
{
|
||||
$("#img" + id).fadeOut("slow");
|
||||
$("#img" + id).remove();
|
||||
}
|
||||
$(document).ready(function () {
|
||||
var filecheck = 1;
|
||||
var uploader = new qq.FileUploader({
|
||||
var uploader = new qq.FileUploader(
|
||||
{
|
||||
element: document.getElementById("file-uploader"),
|
||||
action: "ajax-tab.php",
|
||||
debug: false,
|
||||
params: {
|
||||
id_product : "{$id_product}",
|
||||
id_category : "{$id_category_default}",
|
||||
token : "{$token}",
|
||||
tab : "AdminProducts",
|
||||
updateproduct : 1,
|
||||
action : 'addImage',
|
||||
ajax: 1,
|
||||
},
|
||||
onComplete: function(id, fileName, responseJSON){
|
||||
params: {
|
||||
id_product : {/literal}{$id_product}{literal},
|
||||
id_category : {/literal}{$id_category_default}{literal},
|
||||
token : "{/literal}{$token}{literal}",
|
||||
tab : "AdminProducts",
|
||||
action : 'addImage',
|
||||
ajax: 1,
|
||||
},
|
||||
onComplete: function(id, fileName, responseJSON)
|
||||
{
|
||||
var percent = ((filecheck * 100) / nbfile);
|
||||
$("#progressBarImage").progressbar({
|
||||
value: percent
|
||||
});
|
||||
$("#progressBarImage").progressbar({value: percent});
|
||||
if (percent != 100)
|
||||
{
|
||||
$("#imageUpload").html(parseInt(filecheck));
|
||||
$("#imageTotal").html(" / " + parseInt(nbfile) + " {l s='Images'}");
|
||||
$("#imageTotal").html(" / " + parseInt(nbfile) + " {/literal}{l s='Images'}{literal}");
|
||||
$("#progressBarImage").show();
|
||||
$("#showCounter").show();
|
||||
}
|
||||
else
|
||||
{
|
||||
$("#progressBarImage").progressbar({
|
||||
value: 0
|
||||
});
|
||||
$("#progressBarImage").progressbar({value: 0});
|
||||
$("#progressBarImage").hide();
|
||||
$("#showCounter").hide();
|
||||
nbfile = 0;
|
||||
@@ -110,123 +157,147 @@
|
||||
}
|
||||
if (responseJSON.status == 'ok')
|
||||
{
|
||||
cover = "forbbiden"
|
||||
if (responseJSON.cover == "1")
|
||||
cover = "enabled"
|
||||
imageLine(responseJSON.id, responseJSON.path, responseJSON.position, cover)
|
||||
$("#imageTable tr:last").after(responseJSON.html);
|
||||
$("#countImage").html(parseInt($("#countImage").html()) + 1);
|
||||
$("#img" + id).remove();
|
||||
$("#imageTable").tableDnDUpdate();
|
||||
}
|
||||
else
|
||||
{
|
||||
$("#img" + id).addClass("red");
|
||||
$("#img" + id + " .errorImg").html(responseJSON.error);
|
||||
$("#img" + id + " .errorImg").show();
|
||||
|
||||
}
|
||||
if (percent >= 100)
|
||||
}
|
||||
/*if (percent >= 100)
|
||||
refreshImagePositions($("#imageTable"));*/
|
||||
filecheck++;
|
||||
},
|
||||
onSubmit: function(id, filename)
|
||||
{
|
||||
refreshImagePositions($("#imageTable"));
|
||||
}
|
||||
filecheck++;
|
||||
},
|
||||
onSubmit: function(id, filename){
|
||||
$("#imageTable").show();
|
||||
$("#listImage").append("<li id='img"+id+"'><div class=\"float\" >" + filename + "</div></div><a style=\"margin-left:10px;\" href=\"javascript:delQueue(" + id +");\"><img src=\"../img/admin/disabled.gif\" alt=\"\" border=\"0\"></a><p class=\"errorImg\"></p></li>");
|
||||
},
|
||||
|
||||
$("#imageTable").show();
|
||||
$("#listImage").append("<li id='img"+id+"'><div class=\"float\" >" + filename + "</div></div><a style=\"margin-left:10px\"href=\"javascript:delQueue(" + id +");\"><img src=\"../img/admin/disabled.gif\" alt=\"\" border=\"0\"></a><p class=\"errorImg\"></p></li>");
|
||||
},
|
||||
});
|
||||
|
||||
$('.delete_product_image').die().live('click', function(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
id = $(this).parent().parent().attr('id');
|
||||
if (confirm("{/literal}{l s='Are you sure?'}{literal}"))
|
||||
$.ajax(
|
||||
{
|
||||
url : "ajax-tab.php",
|
||||
data : {"action":"deleteProductImage",
|
||||
"id_image":id,
|
||||
"id_product" : {/literal}{$id_product}{literal},
|
||||
"id_category" : {/literal}{$id_category_default}{literal},
|
||||
"token" : "{/literal}{$token}{literal}",
|
||||
"tab" : "AdminProducts",
|
||||
"ajax" : 1 },
|
||||
success : function (data)
|
||||
{
|
||||
data = jQuery.parseJSON(data);
|
||||
if (data)
|
||||
{
|
||||
cover = 0;
|
||||
if(data.status == 'ok')
|
||||
{
|
||||
if ($("#" + id).find(".covered").attr("src") == "../img/admin/enabled.gif")
|
||||
cover = 1;
|
||||
$("#" + id).remove();
|
||||
}
|
||||
if (cover)
|
||||
$("#imageTable tr").eq(1).find(".covered").attr("src", "../img/admin/enabled.gif");
|
||||
$("#countImage").html(parseInt($("#countImage").html()) - 1);
|
||||
refreshImagePositions($("#imageTable"));
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$('.covered').die().live('click', function(data)
|
||||
{
|
||||
id = $(this).parent().parent().parent().attr('id');
|
||||
$("#imageList .cover img").each( function(i){
|
||||
$(this).attr("src", $(this).attr("src").replace("enabled", "forbbiden"));
|
||||
});
|
||||
$(this).attr("src", $(this).attr("src").replace("forbbiden", "enabled"));
|
||||
$.ajax(
|
||||
{
|
||||
url : "ajax-tab.php",
|
||||
data : {
|
||||
"action":"UpdateCover",
|
||||
"id_image":id,
|
||||
"id_product" : {/literal}{$id_product}{literal},
|
||||
"token" : "{/literal}{$token}{literal}",
|
||||
"tab" : "AdminProducts",
|
||||
"ajax" : 1 },
|
||||
});
|
||||
});
|
||||
|
||||
$('.image_shop').die().live('click', function()
|
||||
{
|
||||
active = false;
|
||||
if ($(this).attr("checked") == "checked")
|
||||
active = true;
|
||||
sid = $(this).parent().parent().attr('id');
|
||||
id_shop = $(this).attr("id").replace(id, "");
|
||||
$.ajax(
|
||||
{
|
||||
url : "ajax-tab.php",
|
||||
data : {
|
||||
"action":"UpdateProductImageShopAsso",
|
||||
"id_image":id,
|
||||
"id_shop": id_shop,
|
||||
"active":active,
|
||||
"token" : "{/literal}{$token}{literal}",
|
||||
"tab" : "AdminProducts",
|
||||
"ajax" : 1 },
|
||||
});
|
||||
});
|
||||
|
||||
//function
|
||||
function updateImagePositon(json)
|
||||
{
|
||||
$.ajax(
|
||||
{
|
||||
url : "ajax-tab.php",
|
||||
data : {
|
||||
"action":"updateImagePosition",
|
||||
"json":json,
|
||||
"token" : "{/literal}{$token}{literal}",
|
||||
"tab" : "AdminProducts",
|
||||
"ajax" : 1 },
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function delQueue(id)
|
||||
{
|
||||
$("#img" + id).fadeOut("slow");
|
||||
$("#img" + id).remove();
|
||||
}
|
||||
|
||||
function imageLine(id, path, position, cover, shops)
|
||||
{
|
||||
line = $("#lineType").html();
|
||||
line = line.replace(/image_id/g, id);
|
||||
line = line.replace(/en-default/g, path);
|
||||
line = line.replace(/image_position/g, position);
|
||||
line = line.replace(/blank/g, cover);
|
||||
line = line.replace("<tbody>", "");
|
||||
line = line.replace("</tbody>", "");
|
||||
tmp = jQuery.parseJSON(shops);
|
||||
$.each(tmp, function(key, value){
|
||||
if (value == 1)
|
||||
line = line.replace('id="' + key + '' + id + '"','id="' + key + '' + id + '" checked=checked');
|
||||
});
|
||||
$("#imageList").append(line);
|
||||
}
|
||||
});
|
||||
{/literal}
|
||||
</script>
|
||||
|
||||
<p class="float" style="clear: both;">
|
||||
{l s='Format:'} JPG, GIF, PNG. {l s='Filesize:'} {$max_image_size / 1000}{l s='Kb max.'}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" style="text-align:center;">
|
||||
<input type="hidden" name="resizer" value="auto" />
|
||||
{if Tools::getValue('id_image')}<input type="hidden" name="id_image" value="{Tools::getValue('id_image')}" />{/if}
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td colspan="2" style="padding-bottom:10px;"><div class="separation"></div></td></tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<script type="text/javascript">
|
||||
var token = '{$token}';
|
||||
var come_from = '{$table}';
|
||||
var alternate = '{if $_orderWay == 'DESC'}1{else}0{/if};
|
||||
</script>
|
||||
<table cellspacing="0" cellpadding="0" class="table tableDnD" id="imageTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">{l s='Image'}</th>
|
||||
<th> </th>
|
||||
<th>{l s='Position'}</th>
|
||||
{foreach from=$shops item=shop}
|
||||
<th>{$shop.name}</th>
|
||||
{/foreach}
|
||||
|
||||
<th>{l s='Cover'}</th>
|
||||
<th>{l s='Action'}</th>
|
||||
</tr></thead>
|
||||
{foreach from=$images item=image}
|
||||
<tr id="tr_{$image->id}">
|
||||
<td style="padding: 4px;">
|
||||
<a href="{$smarty.const._THEME_PROD_DIR_}{$image->getExistingImgPath()}.jpg" target="_blank">
|
||||
<img src="{$smarty.const._THEME_PROD_DIR_}{$image->getExistingImgPath()}-small.jpg{if isset($smarty.post.image_updated) && $smarty.post.image_updated == $image->id}?date={time()}{/if}"
|
||||
alt="{$image->id} - {$image->legend|htmlentitiesUTF8}" title="{$image->id} - {$image->legend|htmlentitiesUTF8}" />
|
||||
</a>
|
||||
</td>
|
||||
<td class="center positionImage">{$image->position}</td>
|
||||
<td id="td_{$image->id}" class="pointer dragHandle center">
|
||||
<a {if $image->position == 1}style="display: none;"{/if} href="{$currentIndex}&id_image={$image->id_image}&imgPosition={$image->position -1}&imgDirection=0&token={$token}">
|
||||
<img src="../img/admin/up.gif" alt="" border="0">
|
||||
</a>
|
||||
<a {if $image->position == count($images)} style="display: none;"{/if} href="{$currentIndex}&id_image={$image->id_image}&imgPosition={$image->position+1}&imgDirection=1&token={$token}">
|
||||
<img src="../img/admin/down.gif" alt="" border="0">
|
||||
</a>
|
||||
</td>
|
||||
|
||||
{if $shops}
|
||||
{foreach from=$shops item=shop}
|
||||
<td class="center">
|
||||
<input type="checkbox" class="image_shop" name="{$image->id_image}" value="{$shop.id_shop}" {if $image->isAssociatedToShop($shop.id_shop)}checked="checked"{/if} />
|
||||
</td>
|
||||
{/foreach}
|
||||
{/if}
|
||||
<td class="center"><a href="{$currentIndex}&id_image={$image->id_image}&coverImage&token={$token}">
|
||||
<img class="covered" src="../img/admin/{if $image->cover}enabled.gif{else}forbbiden.gif{/if}" alt="e" /></a>
|
||||
</td>
|
||||
<td class="center">
|
||||
<a href="#" class="delete_product_image" >
|
||||
<img src="../img/admin/delete.gif" alt="{l s='Delete this image'}" title="{l s='Delete this image'}" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/foreach}
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{if $shops}
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('.image_shop').change(function() {
|
||||
$.post("ajax-tab.php",
|
||||
{
|
||||
updateProductImageShopAsso: 1,
|
||||
id_image:$(this).attr("name"),
|
||||
id_shop: $(this).val(),
|
||||
active:$(this).attr("checked"),
|
||||
id_product : "{$product->id}",
|
||||
id_category : "{$product->id_category_default}",
|
||||
token : "{$token}",
|
||||
tab : "AdminProducts",
|
||||
updateproduct : 1,
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user