Changeset 26725


Ignore:
Timestamp:
Jan 14, 2014, 11:11:06 PM (11 years ago)
Author:
mistic100
Message:

use external JS with template feature

Location:
extensions/SmartAlbums
Files:
2 added
2 edited

Legend:

Unmodified
Added
Removed

  • extensions/SmartAlbums/admin.php

    r26442 r26725  
    2222}
    2323
    24 $template->assign('SMART_PATH', SMART_PATH);
     24$template->assign(array(
     25  'SMART_PATH' => SMART_PATH,
     26  'SMART_ABS_PATH' => realpath(SMART_PATH) . '/',
     27  ));
    2528
    2629$template->assign_var_from_handle('ADMIN_CONTENT', 'SmartAlbums_content');

  • extensions/SmartAlbums/admin/template/album.tpl

    r26442 r26725  
    1212{combine_script id='jquery.ui.slider' require='jquery.ui' load='footer' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
    1313
    14 {*combine_script id='smartalbums.filters' require='common,datepicker.js,jquery.tokeninput,jquery.chosen,jquery.ui.slider'
    15   path=$SMART_PATH|cat:'admin/template/filters.js' load='footer' template=true*}
     14{combine_script id='smartalbums.filters' load='footer' template=true path=$SMART_PATH|cat:'admin/template/addFilters.js'}
    1615
     16{if isset($new_smart)}
    1717{footer_script require='jquery'}
    18 var addFilter = (function($){
    19   var count=0,
    20       limit_count=0,
    21       level_count=0;
     18function doBlink(obj,start,finish) {
     19  jQuery(obj).fadeOut(400).fadeIn(400);
     20  if(start!=finish) {
     21    doBlink(obj,start+1,finish);
     22  }
     23  else {
     24    jQuery(obj).fadeOut(400);
     25  }
     26}
    2227
    23   // MAIN EVENT HANDLERS
    24   $('#addFilter').change(function() {
    25     if ($(this).val() != -1) {
    26       add_filter($(this).val());
    27       $(this).val(-1);
    28     }
    29   });
    30 
    31   $('#removeFilters').click(function() {
    32     $('#filtersList li').each(function() {
    33       $(this).remove();
    34     });
    35 
    36     limit_level=0;
    37     level_count=0;
    38     return false;
    39   });
    40 
    41   $('input[name="is_smart"]').change(function() {
    42     $('#SmartAlbum_options').toggle();
    43     $('input[name="countImages"]').toggle();
    44     $('.count_images_wrapper').toggle();
    45   });
    46 
    47   $('input[name="countImages"]').click(function() {
    48     countImages($("#smart"));
    49     return false;
    50   });
    51 
    52 
    53   // ADD FILTER FUNCTIONS
    54   function add_filter(type, cond, value) {
    55     count++;
    56 
    57     var content = $("#filtersRepo #filter_"+type).html().replace(/iiii/g, count);
    58     $block = $($.parseHTML(content)).appendTo("#filtersList");
    59 
    60     if (cond) {
    61       select_cond($block, type, cond);
    62     }
    63 
    64     if (value) {
    65       if (type == "tags") {
    66         $block.find(".filter-value .tagSelect").html(value);
    67       }
    68       else if (type == "album") {
    69         select_options($block, value);
    70       }
    71       else if (type == "level") {
    72         select_options($block, value);
    73       }
    74       else if (type != "dimensions") {
    75         $block.find(".filter-value input").val(value);
    76       }
    77     }
    78 
    79     init_jquery_handlers($block);
    80 
    81     if (type == "dimensions") {
    82       select_dimensions($block, cond, value);
    83     }
    84 
    85     if (type == 'limit') {
    86       limit_count=1;
    87       $("#addFilter option[value='limit']").attr('disabled','disabled');
    88     }
    89     else if (type == 'level') {
    90       level_count=1;
    91       $("#addFilter option[value='level']").attr('disabled','disabled');
    92     }
    93   }
    94 
    95   function select_cond($block, type, cond) {
    96     $block.find(".filter-cond option").removeAttr('selected');
    97     $block.find(".filter-cond option[value='"+cond+"']").attr('selected', 'selected');
    98   }
    99 
    100   function select_dimensions($block, cond, value) {
    101     console.log($block, cond, value);
    102     cond = cond || 'width';
    103 
    104     $block.find(">.filter-value>span").hide();
    105     $block.find(".dimension_"+cond).show();
    106 
    107     if (value) {
    108       values = value.split(',');
    109     }
    110     else {
    111       values = $block.find(".filter_dimension_"+cond+"_slider").slider("values");
    112     }
    113     $block.find(".filter_dimension_"+cond+"_slider").slider("values", values);
    114   }
    115 
    116   function select_options($block, value) {
    117     values = value.split(',');
    118     for (j in values) {
    119       $block.find(".filter-value option[value='"+ values[j] +"']").attr('selected', 'selected');
    120     }
    121   }
    122 
    123 
    124   // DECLARE JQUERY PLUGINS AND VERSATILE HANDLERS
    125   function init_jquery_handlers($block) {
    126     // remove filter
    127     $block.find(".removeFilter").click(function() {
    128       type = $(this).next("input").val();
    129       if (type == 'limit') {
    130         limit_count=1;
    131         $("#addFilter option[value='limit']").removeAttr('disabled');
    132       }
    133       else if (type == 'level') {
    134         level_count=1;
    135         $("#addFilter option[value='level']").removeAttr('disabled');
    136       }
    137 
    138       $(this).parents('li').remove();
    139       return false;
    140     });
    141 
    142     // date filter
    143     if ($block.hasClass('filter_date')) {
    144       $block.find("input[type='text']").each(function() {
    145         $(this).datepicker({
    146           dateFormat:'yy-mm-dd',
    147           firstDay:1
    148         });
    149       });
    150     }
    151 
    152     // tags filter
    153     if ($block.hasClass('filter_tags')) {
    154       $block.find(".tagSelect").tokenInput(
    155         [{foreach from=$all_tags item=tag name=tags}{ name:"{$tag.name|escape:javascript}", id:"{$tag.id}" }{if !$smarty.foreach.tags.last},{/if}{/foreach}],
    156         {
    157           hintText: '{'Type in a search term'|translate}',
    158           noResultsText: '{'No results'|translate}',
    159           searchingText: '{'Searching...'|translate}',
    160           animateDropdown: false,
    161           preventDuplicates: true,
    162           allowFreeTagging: false
    163         }
    164       );
    165     }
    166 
    167     // album filter
    168     if ($block.hasClass('filter_album')) {
    169       $block.find(".albumSelect").chosen();
    170     }
    171 
    172     // dimension filter
    173     if ($block.hasClass('filter_dimensions')) {
    174       $block.find(".filter-cond select").change(function() {
    175         select_dimensions($block, $(this).val());
    176       });
    177 
    178       $block.find(".filter_dimension_width_slider").slider({
    179         range: true,
    180         min: {$dimensions.bounds.min_width},
    181         max: {$dimensions.bounds.max_width},
    182         values: [{$dimensions.bounds.min_width}, {$dimensions.bounds.max_width}],
    183         slide: function(event, ui) {
    184           change_dimension_info($block, ui.values, "{'between %d and %d pixels'|translate}");
    185         },
    186         change: function(event, ui) {
    187           change_dimension_info($block, ui.values, "{'between %d and %d pixels'|translate}");
    188         }
    189       });
    190 
    191       $block.find(".filter_dimension_height_slider").slider({
    192         range: true,
    193         min: {$dimensions.bounds.min_height},
    194         max: {$dimensions.bounds.max_height},
    195         values: [{$dimensions.bounds.min_height}, {$dimensions.bounds.max_height}],
    196         slide: function(event, ui) {
    197           change_dimension_info($block, ui.values, "{'between %d and %d pixels'|translate}");
    198         },
    199         change: function(event, ui) {
    200           change_dimension_info($block, ui.values, "{'between %d and %d pixels'|translate}");
    201         }
    202       });
    203 
    204       $block.find(".filter_dimension_ratio_slider").slider({
    205         range: true,
    206         step: 0.01,
    207         min: {$dimensions.bounds.min_ratio},
    208         max: {$dimensions.bounds.max_ratio},
    209         values: [{$dimensions.bounds.min_ratio}, {$dimensions.bounds.max_ratio}],
    210         slide: function(event, ui) {
    211           change_dimension_info($block, ui.values, "{'between %.2f and %.2f'|translate}");
    212         },
    213         change: function(event, ui) {
    214           change_dimension_info($block, ui.values, "{'between %.2f and %.2f'|translate}");
    215         }
    216       });
    217 
    218       $block.find("a.dimensions-choice").click(function() {
    219         $block.find(".filter_dimension_"+ $(this).data("type") +"_slider").slider("values",
    220           [$(this).data("min"), $(this).data("max")]
    221         );
    222       });
    223     }
    224   }
    225 
    226 
    227   // GENERAL FUNCTIONS
    228   function change_dimension_info($block, values, text) {
    229     $block.find("input[name$='[value][min]']").val(values[0]);
    230     $block.find("input[name$='[value][max]']").val(values[1]);
    231     $block.find(".filter_dimension_info").html(sprintf(text, values[0], values[1]));
    232   }
    233 
    234   function countImages(form) {
    235     jQuery.post("{$COUNT_SCRIPT_URL}", 'cat_id={$CAT_ID}&'+form.serialize(),
    236       function success(data) {
    237         jQuery('.count_images_wrapper').html(data);
    238       }
    239     );
    240   }
    241 
    242 
    243   {if isset($new_smart)}
    244   function doBlink(obj,start,finish) {
    245     jQuery(obj).fadeOut(400).fadeIn(400);
    246     if(start!=finish) {
    247       doBlink(obj,start+1,finish);
    248     }
    249     else {
    250       jQuery(obj).fadeOut(400);
    251     }
    252   }
    253 
    254   doBlink('.new_smart', 0, 3);
    255   {/if}
    256 
    257   return add_filter; // expose add_filter method
    258 }(jQuery));
     28doBlink('.new_smart', 0, 3);
    25929{/footer_script}
     30{/if}
    26031
    26132
    … …  
    337108
    338109<div id="filtersRepo" style="display:none;">
    339   <!-- tags -->
    340   <div id="filter_tags">
    341   <li id="filter_iiii" class="filter_tags">
    342     <span class="filter-title">
    343       <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
    344       <input type="hidden" name="filters[iiii][type]" value="tags"/>
    345       {$options.tags.name}
    346     </span>
    347 
    348     <span class="filter-cond">
    349       <select name="filters[iiii][cond]">
    350         {html_options options=$options.tags.options}
    351       </select>
    352     </span>
    353 
    354     <span class="filter-value">
    355       <select name="filters[iiii][value]" class="tagSelect">
    356       </select>
    357     </span>
    358   </li>
    359   </div>
    360 
    361   <!-- date -->
    362   <div id="filter_date">
    363   <li id="filter_iiii" class="filter_date">
    364     <span class="filter-title">
    365       <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
    366       <input type="hidden" name="filters[iiii][type]" value="date"/>
    367       {$options.date.name}
    368     </span>
    369 
    370     <span class="filter-cond">
    371       <select name="filters[iiii][cond]">
    372         {html_options options=$options.date.options}
    373       </select>
    374     </span>
    375 
    376     <span class="filter-value">
    377       <input type="text" name="filters[iiii][value]" size="30"/>
    378     </span>
    379   </li>
    380   </div>
    381 
    382   <!-- name -->
    383   <div id="filter_name">
    384   <li id="filter_iiii" class="filter_name">
    385     <span class="filter-title">
    386       <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
    387       <input type="hidden" name="filters[iiii][type]" value="name"/>
    388       {$options.name.name}
    389     </span>
    390 
    391     <span class="filter-cond">
    392       <select name="filters[iiii][cond]">
    393         {html_options options=$options.name.options}
    394       </select>
    395     </span>
    396 
    397     <span class="filter-value">
    398       <input type="text" name="filters[iiii][value]" size="30"/>
    399     </span>
    400   </li>
    401   </div>
    402 
    403   <!-- album -->
    404   <div id="filter_album">
    405   <li id="filter_iiii" class="filter_album">
    406     <span class="filter-title">
    407       <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
    408       <input type="hidden" name="filters[iiii][type]" value="album"/>
    409       {$options.album.name}
    410     </span>
    411 
    412     <span class="filter-cond">
    413       <select name="filters[iiii][cond]">
    414         {html_options options=$options.album.options}
    415       </select>
    416     </span>
    417 
    418     <span class="filter-value">
    419       <select name="filters[iiii][value][]" class="albumSelect" multiple="multiple" data-placeholder="{'Select albums...'|translate}">
    420         {html_options options=$all_albums}
    421       </select>
    422     </span>
    423   </li>
    424   </div>
    425 
    426   <!-- dimensions -->
    427   <div id="filter_dimensions">
    428   <li id="filter_iiii" class="filter_dimensions">
    429     <span class="filter-title">
    430       <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
    431       <input type="hidden" name="filters[iiii][type]" value="dimensions"/>
    432       {$options.dimensions.name}
    433     </span>
    434 
    435     <span class="filter-cond">
    436       <select name="filters[iiii][cond]">
    437         {html_options options=$options.dimensions.options}
    438       </select>
    439     </span>
    440 
    441     <span class="filter-value">
    442       <span class="dimension_width">
    443         <span class="filter_dimension_info"></span>
    444           | <a class="dimensions-choice" data-type="width" data-min="{$dimensions.bounds.min_width}" data-max="{$dimensions.bounds.max_width}">{'Reset'|translate}</a>
    445           <div class="filter_dimension_width_slider"></div>
    446       </span>
    447 
    448       <span class="dimension_height">
    449         <span class="filter_dimension_info"></span>
    450           | <a class="dimensions-choice" data-type="height" data-min="{$dimensions.bounds.min_height}" data-max="{$dimensions.bounds.max_height}">{'Reset'|translate}</a>
    451           <div class="filter_dimension_height_slider"></div>
    452       </span>
    453 
    454       <span class="dimension_ratio">
    455         <span class="filter_dimension_info"></span>
    456         {if isset($dimensions.ratio_portrait)}
    457           | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_portrait.min}" data-max="{$dimensions.ratio_portrait.max}">{'Portrait'|translate}</a>
    458         {/if}
    459         {if isset($dimensions.ratio_square)}
    460           | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_square.min}" data-max="{$dimensions.ratio_square.max}">{'square'|translate}</a>
    461         {/if}
    462         {if isset($dimensions.ratio_landscape)}
    463           | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_landscape.min}" data-max="{$dimensions.ratio_landscape.max}">{'Landscape'|translate}</a>
    464         {/if}
    465         {if isset($dimensions.ratio_panorama)}
    466           | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_panorama.min}" data-max="{$dimensions.ratio_panorama.max}">{'Panorama'|translate}</a>
    467         {/if}
    468           | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.bounds.min_ratio}" data-max="{$dimensions.bounds.max_ratio}">{'Reset'|translate}</a>
    469           <div class="filter_dimension_ratio_slider"></div>
    470       </span>
    471     </span>
    472 
    473     <input type="hidden" name="filters[iiii][value][min]" value="">
    474     <input type="hidden" name="filters[iiii][value][max]" value="">
    475   </li>
    476   </div>
    477 
    478   <!-- author -->
    479   <div id="filter_author">
    480   <li id="filter_iiii" class="filter_author">
    481     <span class="filter-title">
    482       <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
    483       <input type="hidden" name="filters[iiii][type]" value="author"/>
    484       {$options.author.name}
    485     </span>
    486 
    487     <span class="filter-cond">
    488       <select name="filters[iiii][cond]">
    489         {html_options options=$options.author.options}
    490       </select>
    491     </span>
    492 
    493     <span class="filter-value">
    494       <input type="text" name="filters[iiii][value]" size="30"/>
    495       <i>{'For "Is (not) in", separate each author by a comma'|translate}</i>
    496     </span>
    497   </li>
    498   </div>
    499 
    500   <!-- hit -->
    501   <div id="filter_hit">
    502   <li id="filter_iiii" class="filter_hit">
    503     <span class="filter-title">
    504       <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
    505       <input type="hidden" name="filters[iiii][type]" value="hit"/>
    506       {$options.hit.name}
    507     </span>
    508 
    509     <span class="filter-cond">
    510       <select name="filters[iiii][cond]">
    511         {html_options options=$options.hit.options}
    512       </select>
    513     </span>
    514 
    515     <span class="filter-value">
    516       <input type="text" name="filters[iiii][value]" size="5"/>
    517     </span>
    518   </li>
    519   </div>
    520 
    521   <!-- rating_score -->
    522   <div id="filter_rating_score">
    523   <li id="filter_iiii" class="filter_rating_score">
    524     <span class="filter-title">
    525       <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
    526       <input type="hidden" name="filters[iiii][type]" value="rating_score"/>
    527       {$options.rating_score.name}
    528     </span>
    529 
    530     <span class="filter-cond">
    531       <select name="filters[iiii][cond]">
    532         {html_options options=$options.rating_score.options}
    533       </select>
    534     </span>
    535 
    536     <span class="filter-value">
    537       <input type="text" name="filters[iiii][value]" size="5"/>
    538     </span>
    539   </li>
    540   </div>
    541 
    542   <!-- level -->
    543   <div id="filter_level">
    544   <li id="filter_iiii" class="filter_level">
    545     <span class="filter-title">
    546       <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
    547       <input type="hidden" name="filters[iiii][type]" value="level"/>
    548       {$options.level.name}
    549     </span>
    550 
    551     <input type="hidden" name="filters[iiii][cond]" value="level"/>
    552 
    553     <span class="filter-value">
    554       <select name="filters[iiii][value]">
    555         {html_options options=$level_options}
    556       </select>
    557     </span>
    558   </li>
    559   </div>
    560 
    561   <!-- limit -->
    562   <div id="filter_limit">
    563   <li id="filter_iiii" class="filter_limit">
    564     <span class="filter-title">
    565       <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
    566       <input type="hidden" name="filters[iiii][type]" value="limit"/>
    567       {$options.limit.name}
    568     </span>
    569 
    570     <input type="hidden" name="filters[iiii][cond]" value="limit"/>
    571 
    572     <span class="filter-value">
    573       <input type="text" name="filters[iiii][value]" size="5"/>
    574     </span>
    575   </li>
    576   </div>
     110  {include file=$SMART_ABS_PATH|cat:'admin/template/filters.inc.tpl'}
    577111</div>
Note: See TracChangeset for help on using the changeset viewer.