aboutsummaryrefslogtreecommitdiffstats
path: root/admin/themes/default/template/thumbnail.tpl
diff options
context:
space:
mode:
authorpatdenice <patdenice@piwigo.org>2011-04-22 13:19:36 +0000
committerpatdenice <patdenice@piwigo.org>2011-04-22 13:19:36 +0000
commita3963aedefad0eaefe0ba9aed463de35ee144d24 (patch)
tree7fc11b4a2be8348bc6fcf6458c7ee378741e55a8 /admin/themes/default/template/thumbnail.tpl
parent041fc62aa12cbde0c073cbc4167137d84ea71706 (diff)
feature:2274
Create thumbnail through ajax. Remove $conf['tn_width'], $conf['tn_height'] and $conf['tn_compression_level'] parameters. git-svn-id: http://piwigo.org/svn/trunk@10570 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to '')
-rw-r--r--admin/themes/default/template/thumbnail.tpl223
1 files changed, 136 insertions, 87 deletions
diff --git a/admin/themes/default/template/thumbnail.tpl b/admin/themes/default/template/thumbnail.tpl
index 1981671ed..3c46b2c2e 100644
--- a/admin/themes/default/template/thumbnail.tpl
+++ b/admin/themes/default/template/thumbnail.tpl
@@ -1,119 +1,168 @@
+{combine_script id='jquery.ajaxmanager' load='footer' path='themes/default/js/plugins/jquery.ajaxmanager.js'}
+
+{footer_script}
+var width_str = '{'Width'|@translate}';
+var height_str = '{'Height'|@translate}';
+var max_width_str = '{'Maximum Width'|@translate}';
+var max_height_str = '{'Maximum Height'|@translate}';
+var remaining = '{'photos without thumbnail (jpeg and png only)'|@translate}';
+var todo = {$TOTAL_NB_REMAINING};
+var done = 0;
+
+{literal}
+var queuedManager = $.manageAjax.create('queued', {
+ queue: true,
+ cacheResponse: false,
+ maxRequests: 3,
+ complete: function() {
+ jQuery("#thumb_remaining").text(todo-(++done) + ' ' + remaining);
+ if (todo == done) {
+ jQuery('.waiting_bar, #thumb_remaining, .properties').hide();
+ }
+ }
+});
+
+function processThumbs(width,height,crop,follow_orientation) {
+ jQuery('tr.nothumb').each(function() {
+ var image_path = jQuery(this).find('td.filepath').text();
+ var td=this;
+ queuedManager.add({
+ type: 'GET',
+ url: 'ws.php',
+ data: {
+ method: 'pwg.images.resize',
+ image_path: image_path,
+ type: 'thumbnail',
+ maxwidth: width,
+ maxheight: height,
+ crop: crop,
+ follow_orientation: follow_orientation,
+ format:'json'
+ },
+ dataType: 'json',
+ success: (function(row) { return function(data) {
+ if (data.stat =='ok') {
+ if (todo < 200)
+ jQuery(row).find('td.thumbpic').html('<img src="'+data.result.destination+'"/>');
+ jQuery(row).find('td.thumbdim').html(""+data.result.width+" x "+data.result.height);
+ jQuery(row).find('td.thumbgentime').html(""+data.result.time);
+ jQuery(row).find('td.thumbsize').html(""+data.result.size);
+ jQuery(row).removeClass("nothumb");
+ } else {
+ jQuery(row).find('td.thumbpic').html('#ERR#'+data.err+"# : "+data.message);
+ jQuery(row).removeClass("nothumb");
+ jQuery(row).addClass("error");
+ }
+ }
+ })(td)
+ });
+ });
+}
+
+function toggleCropFields() {
+ if (jQuery("#thumb_crop").is(':checked')) {
+ jQuery("label[for='thumb_maxwidth']").text(width_str);
+ jQuery("label[for='thumb_maxheight']").text(height_str);
+ jQuery("#thumb_follow_orientation_li").show();
+ }
+ else {
+ jQuery("label[for='thumb_maxwidth']").text(max_width_str);
+ jQuery("label[for='thumb_maxheight']").text(max_height_str);
+ jQuery("#thumb_follow_orientation_li").hide();
+ }
+}
+
+jQuery(document).ready(function(){
+ jQuery('input#proceed').click (function () {
+ var width = jQuery('input[name="thumb_maxwidth"]').val();
+ var height = jQuery('input[name="thumb_maxheight"]').val();
+ var crop = jQuery('#crop').is(':checked');
+ var follow_orientation = jQuery('#follow_orientation').is(':checked');
+ jQuery(".waiting_bar").toggle();
+ if (todo < 200)
+ jQuery('.thumbpic').show();
+ jQuery('.thumbgentime, .thumbsize, .thumbdim').show();
+ processThumbs(width,height,crop,follow_orientation);
+ });
+
+ jQuery('input#cancel').click (function () {
+ queuedManager.clear();
+ queuedManager.abort();
+ jQuery("input:not(.nodisable)").attr("disabled",false);
+ jQuery('tr.nothumb td.thumbpic').html("&nbsp;");
+
+ });
+
+ toggleCropFields();
+ jQuery("#thumb_crop").click(function () {toggleCropFields()});
+
+ jQuery('.thumbpic, .thumbgentime, .thumbsize, .thumbdim').hide();
+});
+{/literal}{/footer_script}
+
<div class="titrePage">
<h2>{'Thumbnail creation'|@translate}</h2>
</div>
-{if isset($results) }
-<div class="admin">{'Results of miniaturization'|@translate}</div>
-<table style="width:100%;">
- <tr class="throw">
- <td>{'Path'|@translate}</td>
- <td>{'Thumbnail'|@translate}</td>
- <td>{'generated in'|@translate}</td>
- <td>{'Filesize'|@translate}</td>
- <td>{'Dimensions'|@translate}</td>
- </tr>
- {foreach from=$results.elements item=elt}
- <tr>
- <td>{$elt.PATH}</td>
- <td><img src="{$elt.TN_FILE_IMG}"></td>
- <td style="text-align:right;">{$elt.GEN_TIME}</td>
- <td style="text-align:right;">{$elt.TN_FILESIZE_IMG}</td>
- <td style="text-align:right;">{$elt.TN_WIDTH_IMG} x {$elt.TN_HEIGHT_IMG}</td>
- </tr>
- {/foreach}
-</table>
-
-<table class="table2">
- <tr class="throw">
- <td colspan="2">{'General statistics'|@translate}</td>
- </tr>
- <tr>
- <td>{'number of miniaturized photos'|@translate}</td>
- <td style="text-align:center;">{$results.TN_NB}</td>
- </tr>
- <tr>
- <td>{'total time'|@translate}</td>
- <td style="text-align:right;">{$results.TN_TOTAL}</td>
- </tr>
- <tr>
- <td>{'max time'|@translate}</td>
- <td style="text-align:right;">{$results.TN_MAX}</td>
- </tr>
- <tr>
- <td>{'min time'|@translate}</td>
- <td style="text-align:right;">{$results.TN_MIN}</td>
- </tr>
- <tr>
- <td>{'average time'|@translate}</td>
- <td style="text-align:right;">{$results.TN_AVERAGE}</td>
- </tr>
-</table>
-<br>
-{/if}
-
-{if isset($params) }
+{if !empty($remainings) }
<form method="post" action="{$params.F_ACTION}" class="properties">
<fieldset>
- <legend>{'Miniaturization parameters'|@translate}</legend>
+ <legend>{'Thumbnail creation'|@translate}</legend>
<ul>
<li>
- <span class="property">{'GD version'|@translate}</span>
- <label>
- <input type="radio" name="gd" value="2" {if $params.GD_SELECTED==2}checked="checked"{/if}>2.x
- </label>
- <label>
- <input type="radio" name="gd" value="1" {if $params.GD_SELECTED==1}checked="checked"{/if}>1.x
- </label>
+ <span class="property"><label for="thumb_crop">{'Crop'|@translate}</label></span>
+ <input type="checkbox" name="thumb_crop" id="thumb_crop" {$values.thumb_crop}>
+ </li>
+ <li id="thumb_follow_orientation_li">
+ <span class="property"><label for="thumb_follow_orientation">{'Follow Orientation'|@translate}</label></span>
+ <input type="checkbox" name="thumb_follow_orientation" id="thumb_follow_orientation" {$values.thumb_follow_orientation}>
</li>
-
<li>
- <span class="property">
- <label for="width">{'maximum width'|@translate}</label>
- </span>
- <input type="text" id="width" name="width" value="{$params.WIDTH_TN}">
+ <span class="property"><label for="thumb_maxwidth">{'Maximum Width'|@translate}</label></span>
+ <input type="text" name="thumb_maxwidth" id="thumb_maxwidth" value="{$values.thumb_maxwidth}" size="4" maxlength="4"> {'pixels'|@translate}
</li>
-
<li>
- <span class="property">
- <label for="height">{'maximum height'|@translate}</label>
- </span>
- <input type="text" id="height" name="height" value="{$params.HEIGHT_TN}">
+ <span class="property"><label for="thumb_maxheight">{'Maximum Height'|@translate}</label></span>
+ <input type="text" name="thumb_maxheight" id="thumb_maxheight" value="{$values.thumb_maxheight}" size="4" maxlength="4"> {'pixels'|@translate}
</li>
-
<li>
- <span class="property">{'Number of thumbnails to create'|@translate}</span>
- <label><input type="radio" name="n" value="5" {if $params.N_SELECTED==5}checked="checked"{/if}> 5</label>
- <label><input type="radio" name="n" value="10" {if $params.N_SELECTED==10}checked="checked"{/if}> 10</label>
- <label><input type="radio" name="n" value="20" {if $params.N_SELECTED==20}checked="checked"{/if}> 20</label>
- <label><input type="radio" name="n" value="all" {if $params.N_SELECTED=='all'}checked="checked"{/if}> {'all'|@translate}</label>
+ <span class="property"><label for="thumb_quality">{'Image Quality'|@translate}</label></span>
+ <input type="text" name="thumb_quality" id="thumb_quality" value="{$values.thumb_quality}" size="3" maxlength="3"> %
</li>
</ul>
</fieldset>
- <p><input class="submit" type="submit" name="submit" value="{'Submit'|@translate}"></p>
+ <p class="waiting_bar"><input type="button" name="submit" id="proceed" value="{'Submit'|@translate}"></p>
+ <p class="waiting_bar" style="display:none;">{'Please wait...'|@translate}<br><img src="admin/themes/default/images/ajax-loader-bar.gif"></p>
</form>
-{/if} {*isset params*}
-{if !empty($remainings) }
-<div class="admin">{$TOTAL_NB_REMAINING} {'photos without thumbnail (jpeg and png only)'|@translate}</div>
+<div class="admin"><span id="thumb_remaining">{$TOTAL_NB_REMAINING} {'photos without thumbnail (jpeg and png only)'|@translate}</span></div>
<table style="width:100%;">
<tr class="throw">
- <td>&nbsp;</td>
- <td style="width:60%;">{'Path'|@translate}</td>
- <td>{'Filesize'|@translate}</td>
- <td>{'Dimensions'|@translate}</td>
+ <th>&nbsp;</th>
+ <th style="width:60%;">{'Path'|@translate}</th>
+ <th>{'Filesize'|@translate}</th>
+ <th>{'Dimensions'|@translate}</th>
+ <th class="thumbpic">{'Thumbnail'|@translate}</th>
+ <th class="thumbgentime">{'generated in'|@translate}</th>
+ <th class="thumbsize">{'Filesize'|@translate}</th>
+ <th class="thumbdim">{'Dimensions'|@translate}</th>
</tr>
{foreach from=$remainings item=elt name=remain_loop}
- <tr class="{if $smarty.foreach.remain_loop.index is odd}row1{else}row2{/if}">
+ <tr class="{if $smarty.foreach.remain_loop.index is odd}row1{else}row2{/if} nothumb item" id="th_{$smarty.foreach.remain_loop.iteration}">
<td>{$smarty.foreach.remain_loop.iteration}</td>
- <td><div style="margin-left:10px;">{$elt.PATH}</div></td>
- <td><div style="margin-left:10px;">{$elt.FILESIZE_IMG}</div></td>
- <td><div style="margin-left:10px;">{$elt.WIDTH_IMG} x {$elt.HEIGHT_IMG}</div></td>
+ <td class="filepath">{$elt.PATH}</td>
+ <td>{$elt.FILESIZE_IMG}</td>
+ <td>{$elt.WIDTH_IMG} x {$elt.HEIGHT_IMG}</td>
+ <td class="thumbpic"><img src="admin/themes/default/images/ajax-loader.gif"></td>
+ <td class="thumbgentime">&nbsp;</td>
+ <td class="thumbsize">&nbsp;</td>
+ <td class="thumbdim">&nbsp;</td>
</tr>
{/foreach}
</table>
{else}
<div style="text-align:center;font-weight:bold;margin:10px;"> [ {'No missing thumbnail'|@translate} ]</div>
-{/if}
+{/if} \ No newline at end of file