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

Last change on this file since 26442 was 26442, checked in by mistic100, 10 years ago

update for Piwigo 2.6
File size: 19.4 KB
Line 
1{combine_css path=$SMART_PATH|cat:'admin/template/style.css'}
2{include file='include/datepicker.inc.tpl'}
3{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
4
5{combine_css path='themes/default/js/plugins/jquery.tokeninput.css'}
6{combine_script id='jquery.tokeninput' load='footer' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'}
7
8{combine_css path='themes/default/js/plugins/chosen.css'}
9{combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'}
10
11{combine_css path='themes/default/js/ui/theme/jquery.ui.slider.css'}
12{combine_script id='jquery.ui.slider' require='jquery.ui' load='footer' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
13
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*}
16
17{footer_script require='jquery'}
18var addFilter = (function($){
19  var count=0,
20      limit_count=0,
21      level_count=0;
22
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));
259{/footer_script}
260
261
262<div class="titrePage">
263  <h2><span style="letter-spacing:0">{$CATEGORIES_NAV}</span> &#8250; {'Edit album'|translate} [SmartAlbum]</h2>
264</div>
265
266<noscript>
267  <div class="errors"><ul><li>JavaScript required!</li></ul></div>
268</noscript>
269
270<div id="batchManagerGlobal">
271<form action="{$F_ACTION}" method="POST" id="smart">
272  <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>
273
274  <fieldset id="SmartAlbum_options" style="margin-top:1em;{if !isset($filters) AND !isset($new_smart)}display:none;{/if}">
275    <legend>{'Filters'|translate}</legend>
276
277    <ul id="filtersList">
278    {foreach from=$filters item=filter}{strip}
279      {if $filter.type == 'tags'}
280        {capture assign='value'}{foreach from=$filter.value item=tag}<option value="{$tag.id}" class="selected">{$tag.name}</option>{/foreach}{/capture}
281      {else}
282        {assign var='value' value=$filter.value}
283      {/if}
284
285      {if $filter.type == 'limit'}
286        {footer_script}
287        limit_count=1;
288        $("#addFilter option[value='limit']").attr('disabled','disabled');
289        {/footer_script}
290      {elseif $filter.type == 'level'}
291        {footer_script}
292        level_count=1;
293        $("#addFilter option[value='level']").attr('disabled','disabled');
294        {/footer_script}
295      {/if}
296
297      {footer_script}addFilter('{$filter.type}', '{$filter.cond}', '{$value|escape:javascript}');{/footer_script}
298    {/strip}{/foreach}
299    </ul>
300
301    <div>
302      <b>{'Mode'|translate} :</b>
303      <label><input type="radio" name="filters[0][value]" value="and" {if $filter_mode=='and'}checked="checked"{/if}> AND</label>
304      <label><input type="radio" name="filters[0][value]" value="or" {if $filter_mode=='or'}checked="checked"{/if}> OR</label>
305      <input type="hidden" name="filters[0][type]" value="mode">
306      <input type="hidden" name="filters[0][cond]" value="mode">
307    </div>
308
309    <p class="actionButtons">
310      <select id="addFilter">
311        <option value="-1">{'Add a filter'|translate}</option>
312        <option disabled="disabled">------------------</option>
313        <option value="tags">{'Tags'|translate}</option>
314        <option value="date">{'Date'|translate}</option>
315        <option value="name">{'Photo name'|translate}</option>
316        <option value="album">{'Album'|translate}</option>
317        <option value="dimensions">{'Dimensions'|translate}</option>
318        <option value="author">{'Author'|translate}</option>
319        <option value="hit">{'Hits'|translate}</option>
320        <option value="rating_score">{'Rating score'|translate}</option>
321        <option value="level">{'Privacy level'|translate}</option>
322        <option value="limit">{'Max. number of photos'|translate}</option>
323      </select>
324      <a id="removeFilters">{'Remove all filters'|translate}</a>
325      {if isset($new_smart)}<span class="new_smart">{'Add filters here'|translate}</span>{/if}
326    </p>
327  </fieldset>
328
329  <p class="actionButtons" id="applyFilterBlock">
330    <input class="submit" type="submit" value="{'Submit'|translate}" name="submitFilters"/>
331    <input class="submit" type="submit" value="{'Count'|translate}" name="countImages" {if !isset($filters) AND !isset($new_smart)}style="display:none;"{/if}/>
332    <span class="count_images_wrapper" {if !isset($filters) AND !isset($new_smart)}style="display:none;"{/if}><span class="count_image">{$IMAGE_COUNT}</span></span>
333  </p>
334
335</form>
336</div>
337
338<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>
577</div>
Note: See TracBrowser for help on using the repository browser.