Changeset 10570 for trunk/admin/themes


Ignore:
Timestamp:
Apr 22, 2011, 3:19:36 PM (13 years ago)
Author:
patdenice
Message:

feature:2274
Create thumbnail through ajax.
Remove $conftn_width, $conftn_height and $conftn_compression_level parameters.

Location:
trunk/admin/themes/default
Files:
1 added
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/admin/themes/default/template/thumbnail.tpl

    r8727 r10570  
     1{combine_script id='jquery.ajaxmanager' load='footer' path='themes/default/js/plugins/jquery.ajaxmanager.js'}
     2
     3{footer_script}
     4var width_str = '{'Width'|@translate}';
     5var height_str = '{'Height'|@translate}';
     6var max_width_str = '{'Maximum Width'|@translate}';
     7var max_height_str = '{'Maximum Height'|@translate}';
     8var remaining = '{'photos without thumbnail (jpeg and png only)'|@translate}';
     9var todo = {$TOTAL_NB_REMAINING};
     10var done = 0;
     11
     12{literal}
     13var queuedManager = $.manageAjax.create('queued', {
     14        queue: true, 
     15        cacheResponse: false,
     16        maxRequests: 3,
     17  complete: function() {
     18    jQuery("#thumb_remaining").text(todo-(++done) + ' ' + remaining);
     19    if (todo == done) {
     20      jQuery('.waiting_bar, #thumb_remaining, .properties').hide();
     21    }
     22  }
     23});
     24
     25function processThumbs(width,height,crop,follow_orientation) {
     26        jQuery('tr.nothumb').each(function() {
     27                var image_path = jQuery(this).find('td.filepath').text();
     28                var td=this;
     29                queuedManager.add({
     30                        type: 'GET',
     31                        url: 'ws.php',
     32                        data: {
     33        method: 'pwg.images.resize',
     34        image_path: image_path,
     35        type: 'thumbnail',
     36        maxwidth: width,
     37        maxheight: height,
     38        crop: crop,
     39        follow_orientation: follow_orientation,
     40        format:'json'
     41      },
     42                        dataType: 'json',
     43                        success: (function(row) { return function(data) {
     44                                        if (data.stat =='ok') {
     45            if (todo < 200)
     46              jQuery(row).find('td.thumbpic').html('<img src="'+data.result.destination+'"/>');
     47            jQuery(row).find('td.thumbdim').html(""+data.result.width+" x "+data.result.height);
     48            jQuery(row).find('td.thumbgentime').html(""+data.result.time);
     49            jQuery(row).find('td.thumbsize').html(""+data.result.size);
     50            jQuery(row).removeClass("nothumb");
     51                                        } else {
     52            jQuery(row).find('td.thumbpic').html('#ERR#'+data.err+"# : "+data.message);
     53            jQuery(row).removeClass("nothumb");
     54            jQuery(row).addClass("error");
     55                                        }
     56                                }
     57      })(td)
     58                });
     59        });
     60}
     61
     62function toggleCropFields() {
     63  if (jQuery("#thumb_crop").is(':checked')) {
     64    jQuery("label[for='thumb_maxwidth']").text(width_str);
     65    jQuery("label[for='thumb_maxheight']").text(height_str);
     66    jQuery("#thumb_follow_orientation_li").show();
     67  }
     68  else {
     69    jQuery("label[for='thumb_maxwidth']").text(max_width_str);
     70    jQuery("label[for='thumb_maxheight']").text(max_height_str);
     71    jQuery("#thumb_follow_orientation_li").hide();
     72  }
     73}
     74
     75jQuery(document).ready(function(){
     76  jQuery('input#proceed').click (function () {
     77    var width = jQuery('input[name="thumb_maxwidth"]').val();
     78    var height = jQuery('input[name="thumb_maxheight"]').val();
     79    var crop = jQuery('#crop').is(':checked');
     80    var follow_orientation = jQuery('#follow_orientation').is(':checked');
     81    jQuery(".waiting_bar").toggle();
     82    if (todo < 200)
     83      jQuery('.thumbpic').show();
     84    jQuery('.thumbgentime, .thumbsize, .thumbdim').show();
     85    processThumbs(width,height,crop,follow_orientation);
     86  });
     87
     88  jQuery('input#cancel').click (function () {
     89    queuedManager.clear();
     90    queuedManager.abort();
     91    jQuery("input:not(.nodisable)").attr("disabled",false);
     92    jQuery('tr.nothumb td.thumbpic').html("&nbsp;");
     93   
     94  });
     95
     96  toggleCropFields();
     97  jQuery("#thumb_crop").click(function () {toggleCropFields()});
     98
     99  jQuery('.thumbpic, .thumbgentime, .thumbsize, .thumbdim').hide();
     100});
     101{/literal}{/footer_script}
     102
    1103<div class="titrePage">
    2104  <h2>{'Thumbnail creation'|@translate}</h2>
    3105</div>
    4106
    5 {if isset($results) }
    6 <div class="admin">{'Results of miniaturization'|@translate}</div>
    7 <table style="width:100%;">
    8   <tr class="throw">
    9     <td>{'Path'|@translate}</td>
    10     <td>{'Thumbnail'|@translate}</td>
    11     <td>{'generated in'|@translate}</td>
    12     <td>{'Filesize'|@translate}</td>
    13     <td>{'Dimensions'|@translate}</td>
    14   </tr>
    15   {foreach from=$results.elements item=elt}
    16   <tr>
    17     <td>{$elt.PATH}</td>
    18     <td><img src="{$elt.TN_FILE_IMG}"></td>
    19     <td style="text-align:right;">{$elt.GEN_TIME}</td>
    20     <td style="text-align:right;">{$elt.TN_FILESIZE_IMG}</td>
    21     <td style="text-align:right;">{$elt.TN_WIDTH_IMG} x {$elt.TN_HEIGHT_IMG}</td>
    22   </tr>
    23   {/foreach}
    24 </table>
    25 
    26 <table class="table2">
    27   <tr class="throw">
    28     <td colspan="2">{'General statistics'|@translate}</td>
    29   </tr>
    30   <tr>
    31     <td>{'number of miniaturized photos'|@translate}</td>
    32     <td style="text-align:center;">{$results.TN_NB}</td>
    33   </tr>
    34   <tr>
    35     <td>{'total time'|@translate}</td>
    36     <td style="text-align:right;">{$results.TN_TOTAL}</td>
    37   </tr>
    38   <tr>
    39     <td>{'max time'|@translate}</td>
    40     <td style="text-align:right;">{$results.TN_MAX}</td>
    41   </tr>
    42   <tr>
    43     <td>{'min time'|@translate}</td>
    44     <td style="text-align:right;">{$results.TN_MIN}</td>
    45   </tr>
    46   <tr>
    47     <td>{'average time'|@translate}</td>
    48     <td style="text-align:right;">{$results.TN_AVERAGE}</td>
    49   </tr>
    50 </table>
    51 <br>
    52 {/if}
    53 
    54 {if isset($params) }
     107{if !empty($remainings) }
    55108<form method="post" action="{$params.F_ACTION}" class="properties">
    56109
    57110  <fieldset>
    58     <legend>{'Miniaturization parameters'|@translate}</legend>
     111    <legend>{'Thumbnail creation'|@translate}</legend>
    59112
    60113    <ul>
    61114      <li>
    62         <span class="property">{'GD version'|@translate}</span>
    63         <label>
    64           <input type="radio" name="gd" value="2" {if $params.GD_SELECTED==2}checked="checked"{/if}>2.x
    65         </label>
    66         <label>
    67           <input type="radio" name="gd" value="1" {if $params.GD_SELECTED==1}checked="checked"{/if}>1.x
    68         </label>
     115        <span class="property"><label for="thumb_crop">{'Crop'|@translate}</label></span>
     116              <input type="checkbox" name="thumb_crop" id="thumb_crop" {$values.thumb_crop}>
    69117      </li>
    70 
     118      <li id="thumb_follow_orientation_li">
     119        <span class="property"><label for="thumb_follow_orientation">{'Follow Orientation'|@translate}</label></span>
     120              <input type="checkbox" name="thumb_follow_orientation" id="thumb_follow_orientation" {$values.thumb_follow_orientation}>
     121      </li>
    71122      <li>
    72         <span class="property">
    73           <label for="width">{'maximum width'|@translate}</label>
    74         </span>
    75         <input type="text" id="width" name="width" value="{$params.WIDTH_TN}">
     123        <span class="property"><label for="thumb_maxwidth">{'Maximum Width'|@translate}</label></span>
     124              <input type="text" name="thumb_maxwidth" id="thumb_maxwidth" value="{$values.thumb_maxwidth}" size="4" maxlength="4"> {'pixels'|@translate}
    76125      </li>
    77 
    78126      <li>
    79         <span class="property">
    80           <label for="height">{'maximum height'|@translate}</label>
    81         </span>
    82         <input type="text" id="height" name="height" value="{$params.HEIGHT_TN}">
     127        <span class="property"><label for="thumb_maxheight">{'Maximum Height'|@translate}</label></span>
     128              <input type="text" name="thumb_maxheight" id="thumb_maxheight" value="{$values.thumb_maxheight}" size="4" maxlength="4"> {'pixels'|@translate}
    83129      </li>
    84 
    85130      <li>
    86         <span class="property">{'Number of thumbnails to create'|@translate}</span>
    87         <label><input type="radio" name="n" value="5"   {if $params.N_SELECTED==5}checked="checked"{/if}> 5</label>
    88         <label><input type="radio" name="n" value="10"  {if $params.N_SELECTED==10}checked="checked"{/if}> 10</label>
    89         <label><input type="radio" name="n" value="20"  {if $params.N_SELECTED==20}checked="checked"{/if}> 20</label>
    90         <label><input type="radio" name="n" value="all" {if $params.N_SELECTED=='all'}checked="checked"{/if}> {'all'|@translate}</label>
     131        <span class="property"><label for="thumb_quality">{'Image Quality'|@translate}</label></span>
     132              <input type="text" name="thumb_quality" id="thumb_quality" value="{$values.thumb_quality}" size="3" maxlength="3"> %
    91133      </li>
    92134    </ul>
    93135  </fieldset>
    94136
    95   <p><input class="submit" type="submit" name="submit" value="{'Submit'|@translate}"></p>
     137  <p class="waiting_bar"><input type="button" name="submit" id="proceed" value="{'Submit'|@translate}"></p>
     138  <p class="waiting_bar" style="display:none;">{'Please wait...'|@translate}<br><img src="admin/themes/default/images/ajax-loader-bar.gif"></p>
    96139</form>
    97 {/if} {*isset params*}
    98140
    99 {if !empty($remainings) }
    100 <div class="admin">{$TOTAL_NB_REMAINING} {'photos without thumbnail (jpeg and png only)'|@translate}</div>
     141<div class="admin"><span id="thumb_remaining">{$TOTAL_NB_REMAINING} {'photos without thumbnail (jpeg and png only)'|@translate}</span></div>
    101142<table style="width:100%;">
    102143  <tr class="throw">
    103     <td>&nbsp;</td>
    104     <td style="width:60%;">{'Path'|@translate}</td>
    105     <td>{'Filesize'|@translate}</td>
    106     <td>{'Dimensions'|@translate}</td>
     144    <th>&nbsp;</th>
     145    <th style="width:60%;">{'Path'|@translate}</th>
     146    <th>{'Filesize'|@translate}</th>
     147    <th>{'Dimensions'|@translate}</th>
     148    <th class="thumbpic">{'Thumbnail'|@translate}</th>
     149    <th class="thumbgentime">{'generated in'|@translate}</th>
     150    <th class="thumbsize">{'Filesize'|@translate}</th>
     151    <th class="thumbdim">{'Dimensions'|@translate}</th>
    107152  </tr>
    108153  {foreach from=$remainings item=elt name=remain_loop}
    109   <tr class="{if $smarty.foreach.remain_loop.index is odd}row1{else}row2{/if}">
     154  <tr class="{if $smarty.foreach.remain_loop.index is odd}row1{else}row2{/if} nothumb item" id="th_{$smarty.foreach.remain_loop.iteration}">
    110155    <td>{$smarty.foreach.remain_loop.iteration}</td>
    111     <td><div style="margin-left:10px;">{$elt.PATH}</div></td>
    112     <td><div style="margin-left:10px;">{$elt.FILESIZE_IMG}</div></td>
    113     <td><div style="margin-left:10px;">{$elt.WIDTH_IMG} x {$elt.HEIGHT_IMG}</div></td>
     156    <td class="filepath">{$elt.PATH}</td>
     157    <td>{$elt.FILESIZE_IMG}</td>
     158    <td>{$elt.WIDTH_IMG} x {$elt.HEIGHT_IMG}</td>
     159        <td class="thumbpic"><img src="admin/themes/default/images/ajax-loader.gif"></td>
     160        <td class="thumbgentime">&nbsp;</td>
     161        <td class="thumbsize">&nbsp;</td>
     162        <td class="thumbdim">&nbsp;</td>
    114163  </tr>
    115164  {/foreach}
Note: See TracChangeset for help on using the changeset viewer.