source: extensions/SmartAlbums/admin/template/album.tpl @ 19446

Last change on this file since 19446 was 19446, checked in by mistic100, 11 years ago
  • add regex for phot name, author
  • add dimensions filter
  • rewrite javascript algorithms
  • add auto update on timeout (default 3 days)
  • display photos count on plugin albums list
File size: 18.7 KB
Line 
1{combine_css path=$SMART_PATH|@cat:"admin/template/style.css"}
2{combine_script id='sprintf' load='footer' path=$SMART_PATH|@cat:"admin/template/sprintf.js"}
3{include file='include/datepicker.inc.tpl'}
4{combine_script id='jquery.tokeninput' load='footer' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'}
5{combine_css path="themes/default/js/plugins/chosen.css"}
6{combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'}
7{combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"}
8{combine_script id='jquery.ui.slider' require='jquery.ui' load='footer' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
9
10{footer_script}{literal}
11var count=0;
12var limit_count=0;
13var level_count=0;
14
15// MAIN EVENT HANDLERS
16$('#addFilter').change(function() {
17  add_filter($(this).attr('value'));
18  $(this).attr('value', '-1');
19});
20 
21$('#removeFilters').click(function() {
22  $('#filtersList li').each(function() {
23    $(this).remove();
24  });
25 
26  limit_level=0;
27  level_count=0;
28  return false;
29});
30
31$('input[name="is_smart"]').change(function() {
32  $('#SmartAlbum_options').toggle();
33  $('input[name="countImages"]').toggle();
34  $('.count_images_wrapper').toggle();
35});
36
37$('input[name="countImages"]').click(function() {
38  countImages($("#smart"));
39  return false;
40});
41
42
43// ADD FILTER FUNCTIONS
44function add_filter(type, cond, value) {
45  count++;
46 
47  content = $("#filtersRepo #filter_"+type).html().replace(/iiii/g, count);
48  $block = $(content);
49  $("#filtersList").append($block);
50 
51  if (cond) {
52    select_cond($block, type, cond);
53  }
54 
55  if (value) {
56    if (type == "tags") {
57      $block.find(".filter-value .tagSelect").html(value);
58    }
59    else if (type == "album") {
60      select_options($block, value);
61    }
62    else if (type == "level") {
63      select_options($block, value);
64    }
65    else if (type != "dimensions") {
66      $block.find(".filter-value input").val(value);
67    }
68  }
69 
70  init_jquery_handlers($block);
71 
72  if (type == "dimensions") {
73    select_dimensions($block, cond, value);
74  }
75 
76  if (type == 'limit') {
77    limit_count=1;
78    $("#addFilter option[value='limit']").attr('disabled','disabled');
79  }
80  else if (type == 'level') {
81    level_count=1;
82    $("#addFilter option[value='level']").attr('disabled','disabled');
83  }
84}
85
86function select_cond($block, type, cond) {
87  $block.find(".filter-cond option").removeAttr('selected');
88  $block.find(".filter-cond option[value='"+cond+"']").attr('selected', 'selected');
89}
90
91function select_dimensions($block, cond, value) {
92  if (!cond) cond = 'width';
93 
94  $block.find(".filter-value span:not(.filter_dimension_info)").hide();
95  $block.find(".filter-value .dimension_"+cond).show();
96 
97  if (value) {
98    values = value.split(',');
99  }
100  else {
101    values = $block.find(".filter_dimension_"+cond+"_slider").slider("values");
102  }
103  $block.find(".filter_dimension_"+cond+"_slider").slider("values", values);
104}
105
106function select_options($block, value) { 
107  values = value.split(',');
108  for (j in values) {
109    $block.find(".filter-value option[value='"+ values[j] +"']").attr('selected', 'selected');
110  }
111}
112
113
114// DECLARE JQUERY PLUGINS AND VERSATILE HANDLERS
115function init_jquery_handlers($block) {
116  // remove filter
117  $block.find(".removeFilter").click(function() {
118    type = $(this).next("input").val();
119    if (type == 'limit') {
120      limit_count=1;
121      $("#addFilter option[value='limit']").removeAttr('disabled');
122    }
123    else if (type == 'level') {
124      level_count=1;
125      $("#addFilter option[value='level']").removeAttr('disabled');
126    }
127   
128    $(this).parents('li').remove();
129    return false;
130  });
131
132  // date filter
133  if ($block.hasClass('filter_date')) {
134    $block.find("input[type='text']").each(function() {
135      $(this).datepicker({dateFormat:'yy-mm-dd', firstDay:1});
136    });
137  }
138
139  // tags filter
140  if ($block.hasClass('filter_tags')) {
141    $block.find(".tagSelect").tokenInput(
142    {/literal}
143      [{foreach from=$all_tags item=tag name=tags}{ldelim}"name":"{$tag.name|@escape:'javascript'}","id":"{$tag.id}"{rdelim}{if !$smarty.foreach.tags.last},{/if}{/foreach}],
144      {ldelim}
145        hintText: '{'Type in a search term'|@translate}',
146        noResultsText: '{'No results'|@translate}',
147        searchingText: '{'Searching...'|@translate}',
148        animateDropdown: false,
149        preventDuplicates: true,
150        allowCreation: false
151    {literal}
152    });
153  }
154 
155  // album filter
156  if ($block.hasClass('filter_album')) {
157    $block.find(".albumSelect").chosen();
158  }
159 
160  // dimension filter
161  if ($block.hasClass('filter_dimensions')) {
162    $block.find(".filter-cond select").change(function() {
163      select_dimensions($block, $(this).attr("value"));
164    });
165    {/literal}
166   
167    $block.find(".filter_dimension_width_slider").slider({ldelim}
168      range: true,
169      min: {$dimensions.bounds.min_width},
170      max: {$dimensions.bounds.max_width},
171      values: [{$dimensions.bounds.min_width}, {$dimensions.bounds.max_width}],
172      slide: function(event, ui) {ldelim}
173        change_dimension_info($block, ui.values, "{'between %d and %d pixels'|@translate}");
174      },
175      change: function(event, ui) {ldelim}
176        change_dimension_info($block, ui.values, "{'between %d and %d pixels'|@translate}");
177      }
178    });
179   
180    $block.find(".filter_dimension_height_slider").slider({ldelim}
181      range: true,
182      min: {$dimensions.bounds.min_height},
183      max: {$dimensions.bounds.max_height},
184      values: [{$dimensions.bounds.min_height}, {$dimensions.bounds.max_height}],
185      slide: function(event, ui) {ldelim}
186        change_dimension_info($block, ui.values, "{'between %d and %d pixels'|@translate}");
187      },
188      change: function(event, ui) {ldelim}
189        change_dimension_info($block, ui.values, "{'between %d and %d pixels'|@translate}");
190      }
191    });
192   
193    $block.find(".filter_dimension_ratio_slider").slider({ldelim}
194      range: true,
195      step: 0.01,
196      min: {$dimensions.bounds.min_ratio},
197      max: {$dimensions.bounds.max_ratio},
198      values: [{$dimensions.bounds.min_ratio}, {$dimensions.bounds.max_ratio}],
199      slide: function(event, ui) {ldelim}
200        change_dimension_info($block, ui.values, "{'between %.2f and %.2f'|@translate}");
201      },
202      change: function(event, ui) {ldelim}
203        change_dimension_info($block, ui.values, "{'between %.2f and %.2f'|@translate}");
204      }
205    });
206    {literal}
207   
208    $block.find("a.dimensions-choice").click(function() {
209      $block.find(".filter_dimension_"+ $(this).data("type") +"_slider").slider("values",
210        [$(this).data("min"), $(this).data("max")]
211      );
212    });
213  }
214}
215
216
217// GENERAL FUNCTIONS
218function change_dimension_info($block, values, text) {
219  $block.find("input[name$='[value][min]']").val(values[0]);
220  $block.find("input[name$='[value][max]']").val(values[1]);
221  $block.find(".filter_dimension_info").html(sprintf(text, values[0], values[1]));
222}
223
224function countImages(form) {
225{/literal}
226  jQuery.post("{$COUNT_SCRIPT_URL}", 'cat_id={$CAT_ID}&'+form.serialize(),
227{literal}
228    function success(data) {
229      jQuery('.count_images_wrapper').html(data);
230    }
231  );
232}
233
234function doBlink(obj,start,finish) {
235  jQuery(obj).fadeOut(400).fadeIn(400);
236  if(start!=finish) {
237    doBlink(obj,start+1,finish);
238  } else {
239    jQuery(obj).fadeOut(400);
240  }
241}
242{/literal}
243
244{if isset($new_smart)}doBlink('.new_smart', 0, 3);{/if}
245{/footer_script}
246
247
248<div class="titrePage">
249  <h2><span style="letter-spacing:0">{$CATEGORIES_NAV}</span> &#8250; {'Edit album'|@translate} [SmartAlbum]</h2>
250</div>
251
252<div id="batchManagerGlobal">
253<form action="{$F_ACTION}" method="POST" id="smart">
254  <p style="text-align:left;"><label><input type="checkbox" name="is_smart" {if isset($filters) OR isset($new_smart)}checked="checked"{/if}/> {'This album is a SmartAlbum'|@translate}</label></p>
255
256  <fieldset id="SmartAlbum_options" style="margin-top:1em;{if !isset($filters) AND !isset($new_smart)}display:none;{/if}">
257    <legend>{'Filters'|@translate}</legend>
258     
259    <ul id="filtersList">
260    {foreach from=$filters item=filter}{strip}
261      {if $filter.type == 'tags'}
262        {capture assign='value'}{foreach from=$filter.value item=tag}<option value="{$tag.id}" class="selected">{$tag.name}</option>{/foreach}{/capture}
263      {else}
264        {assign var='value' value=$filter.value}
265      {/if}
266     
267      {if $filter.type == 'limit'}
268        {footer_script}
269        limit_count=1;
270        $("#addFilter option[value='limit']").attr('disabled','disabled');
271        {/footer_script}
272      {elseif $filter.type == 'level'}
273        {footer_script}
274        level_count=1;
275        $("#addFilter option[value='level']").attr('disabled','disabled');
276        {/footer_script}
277      {/if}
278     
279      {footer_script}add_filter('{$filter.type}', '{$filter.cond}', '{$value|escape:javascript}');{/footer_script}
280    {/strip}{/foreach}
281    </ul>
282   
283    <div>
284      <b>{'Mode'|@translate} :</b>
285      <label><input type="radio" name="filters[0][value]" value="and" {if $filter_mode=='and'}checked="checked"{/if}> AND</label>
286      <label><input type="radio" name="filters[0][value]" value="or" {if $filter_mode=='or'}checked="checked"{/if}> OR</label>
287      <input type="hidden" name="filters[0][type]" value="mode">
288      <input type="hidden" name="filters[0][cond]" value="mode">
289    </div>
290   
291    <p class="actionButtons">
292      <select id="addFilter">
293        <option value="-1">{'Add a filter'|@translate}</option>
294        <option disabled="disabled">------------------</option>
295        <option value="tags">{'Tags'|@translate}</option>
296        <option value="date">{'Date'|@translate}</option>
297        <option value="name">{'Photo name'|@translate}</option>
298        <option value="album">{'Album'|@translate}</option>
299        <option value="dimensions">{'Dimensions'|@translate}</option>
300        <option value="author">{'Author'|@translate}</option>
301        <option value="hit">{'Hits'|@translate}</option>
302        <option value="rating_score">{'Rating score'|@translate}</option>
303        <option value="level">{'Privacy level'|@translate}</option>
304        <option value="limit">{'Max. number of photos'|@translate}</option>
305      </select>
306      <a id="removeFilters">{'Remove all filters'|@translate}</a>
307      {if isset($new_smart)}<span class="new_smart">{'Add filters here'|@translate}</span>{/if}
308    </p>
309  </fieldset>
310 
311  <p class="actionButtons" id="applyFilterBlock">
312    <input class="submit" type="submit" value="{'Submit'|@translate}" name="submitFilters"/>
313    <input class="submit" type="submit" value="{'Count'|@translate}" name="countImages" {if !isset($filters) AND !isset($new_smart)}style="display:none;"{/if}/>
314    <span class="count_images_wrapper" {if !isset($filters) AND !isset($new_smart)}style="display:none;"{/if}><span class="count_image">{$IMAGE_COUNT}</span></span>
315  </p>
316
317</form>
318</div>
319
320<div id="filtersRepo" style="display:none;">
321  <!-- tags -->
322  <div id="filter_tags">
323  <li id="filter_iiii" class="filter_tags">
324    <span class="filter-title">
325      <a href="#" class="removeFilter" title="{'remove this filter'|@translate}"><span>[x]</span></a>
326      <input type="hidden" name="filters[iiii][type]" value="tags"/>
327      {$options.tags.name}
328    </span>
329   
330    <span class="filter-cond">
331      <select name="filters[iiii][cond]">
332        {html_options options=$options.tags.options}
333      </select>
334    </span>
335   
336    <span class="filter-value">
337      <select name="filters[iiii][value]" class="tagSelect">
338      </select>
339    </span>
340  </li>
341  </div>
342 
343  <!-- date -->
344  <div id="filter_date">
345  <li id="filter_iiii" class="filter_date">
346    <span class="filter-title">
347      <a href="#" class="removeFilter" title="{'remove this filter'|@translate}"><span>[x]</span></a>
348      <input type="hidden" name="filters[iiii][type]" value="date"/>
349      {$options.date.name}
350    </span>
351   
352    <span class="filter-cond">
353      <select name="filters[iiii][cond]">
354        {html_options options=$options.date.options}
355      </select>
356    </span>
357   
358    <span class="filter-value">
359      <input type="text" name="filters[iiii][value]" size="30"/>
360    </span>
361  </li>
362  </div>
363 
364  <!-- name -->
365  <div id="filter_name">
366  <li id="filter_iiii" class="filter_name">
367    <span class="filter-title">
368      <a href="#" class="removeFilter" title="{'remove this filter'|@translate}"><span>[x]</span></a>
369      <input type="hidden" name="filters[iiii][type]" value="name"/>
370      {$options.name.name}
371    </span>
372   
373    <span class="filter-cond">
374      <select name="filters[iiii][cond]">
375        {html_options options=$options.name.options}
376      </select>
377    </span>
378   
379    <span class="filter-value">
380      <input type="text" name="filters[iiii][value]" size="30"/>
381    </span>
382  </li>
383  </div>
384 
385  <!-- album -->
386  <div id="filter_album">
387  <li id="filter_iiii" class="filter_album">
388    <span class="filter-title">
389      <a href="#" class="removeFilter" title="{'remove this filter'|@translate}"><span>[x]</span></a>
390      <input type="hidden" name="filters[iiii][type]" value="album"/>
391      {$options.album.name}
392    </span>
393   
394    <span class="filter-cond">
395      <select name="filters[iiii][cond]">
396        {html_options options=$options.album.options}
397      </select>
398    </span>
399   
400    <span class="filter-value">
401      <select name="filters[iiii][value][]" class="albumSelect" multiple="multiple" data-placeholder="{'Select albums...'|@translate}">
402        {html_options options=$all_albums}
403      </select>
404    </span>
405  </li>
406  </div>
407 
408  <!-- dimensions -->
409  <div id="filter_dimensions">
410  <li id="filter_iiii" class="filter_dimensions">
411    <span class="filter-title">
412      <a href="#" class="removeFilter" title="{'remove this filter'|@translate}"><span>[x]</span></a>
413      <input type="hidden" name="filters[iiii][type]" value="dimensions"/>
414      {$options.dimensions.name}
415    </span>
416
417    <span class="filter-cond">
418      <select name="filters[iiii][cond]">
419        {html_options options=$options.dimensions.options}
420      </select>
421    </span>
422
423    <span class="filter-value">
424      <span class="filter_dimension_info"></span>
425      <span class="dimension_width">
426        | <a class="dimensions-choice" data-type="width" data-min="{$dimensions.bounds.min_width}" data-max="{$dimensions.bounds.max_width}">{'Reset'|@translate}</a>
427        <div class="filter_dimension_width_slider"></div>
428      </span>
429
430      <span class="filter-value dimension_height">
431        | <a class="dimensions-choice" data-type="height" data-min="{$dimensions.bounds.min_height}" data-max="{$dimensions.bounds.max_height}">{'Reset'|@translate}</a>
432        <div class="filter_dimension_height_slider"></div>
433      </span>
434
435      <span class="filter-value dimension_ratio">
436{if isset($dimensions.ratio_portrait)}
437        | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_portrait.min}" data-max="{$dimensions.ratio_portrait.max}">{'Portrait'|@translate}</a>
438{/if}
439{if isset($dimensions.ratio_square)}
440        | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_square.min}" data-max="{$dimensions.ratio_square.max}">{'square'|@translate}</a>
441{/if}
442{if isset($dimensions.ratio_landscape)}
443        | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_landscape.min}" data-max="{$dimensions.ratio_landscape.max}">{'Landscape'|@translate}</a>
444{/if}
445{if isset($dimensions.ratio_panorama)}
446        | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_panorama.min}" data-max="{$dimensions.ratio_panorama.max}">{'Panorama'|@translate}</a>
447{/if}
448        | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.bounds.min_ratio}" data-max="{$dimensions.bounds.max_ratio}">{'Reset'|@translate}</a>
449        <div class="filter_dimension_ratio_slider"></div>
450      </span>
451    </span>
452
453    <input type="hidden" name="filters[iiii][value][min]" value="">
454    <input type="hidden" name="filters[iiii][value][max]" value="">
455  </li>
456  </div>
457 
458  <!-- author -->
459  <div id="filter_author">
460  <li id="filter_iiii" class="filter_author">
461    <span class="filter-title">
462      <a href="#" class="removeFilter" title="{'remove this filter'|@translate}"><span>[x]</span></a>
463      <input type="hidden" name="filters[iiii][type]" value="author"/>
464      {$options.author.name}
465    </span>
466   
467    <span class="filter-cond">
468      <select name="filters[iiii][cond]">
469        {html_options options=$options.author.options}
470      </select>
471    </span>
472   
473    <span class="filter-value">
474      <input type="text" name="filters[iiii][value]" size="30"/>
475      <i>{'For "Is (not) in", separate each author by a comma'|@translate}</i>
476    </span>
477  </li>
478  </div>
479 
480  <!-- hit -->
481  <div id="filter_hit">
482  <li id="filter_iiii" class="filter_hit">
483    <span class="filter-title">
484      <a href="#" class="removeFilter" title="{'remove this filter'|@translate}"><span>[x]</span></a>
485      <input type="hidden" name="filters[iiii][type]" value="hit"/>
486      {$options.hit.name}
487    </span>
488   
489    <span class="filter-cond">
490      <select name="filters[iiii][cond]">
491        {html_options options=$options.hit.options}
492      </select>
493    </span>
494   
495    <span class="filter-value">
496      <input type="text" name="filters[iiii][value]" size="5"/>
497    </span>
498  </li>
499  </div>
500 
501  <!-- rating_score -->
502  <div id="filter_rating_score">
503  <li id="filter_iiii" class="filter_rating_score">
504    <span class="filter-title">
505      <a href="#" class="removeFilter" title="{'remove this filter'|@translate}"><span>[x]</span></a>
506      <input type="hidden" name="filters[iiii][type]" value="rating_score"/>
507      {$options.rating_score.name}
508    </span>
509   
510    <span class="filter-cond">
511      <select name="filters[iiii][cond]">
512        {html_options options=$options.rating_score.options}
513      </select>
514    </span>
515   
516    <span class="filter-value">
517      <input type="text" name="filters[iiii][value]" size="5"/>
518    </span>
519  </li>
520  </div>
521 
522  <!-- level -->
523  <div id="filter_level">
524  <li id="filter_iiii" class="filter_level">
525    <span class="filter-title">
526      <a href="#" class="removeFilter" title="{'remove this filter'|@translate}"><span>[x]</span></a>
527      <input type="hidden" name="filters[iiii][type]" value="level"/>
528      {$options.level.name}
529    </span>
530   
531    <input type="hidden" name="filters[iiii][cond]" value="level"/>
532   
533    <span class="filter-value">
534      <select name="filters[iiii][value]">
535        {html_options options=$level_options}
536      </select>
537    </span>
538  </li>
539  </div>
540 
541  <!-- limit -->
542  <div id="filter_limit">
543  <li id="filter_iiii" class="filter_limit">
544    <span class="filter-title">
545      <a href="#" class="removeFilter" title="{'remove this filter'|@translate}"><span>[x]</span></a>
546      <input type="hidden" name="filters[iiii][type]" value="limit"/>
547      {$options.limit.name}
548    </span>
549   
550    <input type="hidden" name="filters[iiii][cond]" value="limit"/>
551   
552    <span class="filter-value">
553      <input type="text" name="filters[iiii][value]" size="5"/>
554    </span>
555  </li>
556  </div>
557</div>
Note: See TracBrowser for help on using the repository browser.