diff options
Diffstat (limited to '')
| -rw-r--r-- | admin/themes/default/js/batchManagerGlobal.js | 4 | ||||
| -rw-r--r-- | admin/themes/default/js/doubleSlider.js | 43 | ||||
| -rw-r--r-- | admin/themes/default/template/batch_manager_global.tpl | 250 |
3 files changed, 130 insertions, 167 deletions
diff --git a/admin/themes/default/js/batchManagerGlobal.js b/admin/themes/default/js/batchManagerGlobal.js index 12d5987ac..8ebf7295d 100644 --- a/admin/themes/default/js/batchManagerGlobal.js +++ b/admin/themes/default/js/batchManagerGlobal.js @@ -43,6 +43,10 @@ $("#removeFilters").click(function() { return false; }); +$('[data-slider=widths]').pwgDoubleSlider(sliders.widths); +$('[data-slider=heights]').pwgDoubleSlider(sliders.heights); +$('[data-slider=ratios]').pwgDoubleSlider(sliders.ratios); +$('[data-slider=filesizes]').pwgDoubleSlider(sliders.filesizes); /* ********** Thumbs */ diff --git a/admin/themes/default/js/doubleSlider.js b/admin/themes/default/js/doubleSlider.js new file mode 100644 index 000000000..490331feb --- /dev/null +++ b/admin/themes/default/js/doubleSlider.js @@ -0,0 +1,43 @@ +(function($){ + +/** + * OPTIONS: + * values {mixed[]} + * selected {object} min and max + * text {string} + */ +$.fn.pwgDoubleSlider = function(options) { + var that = this; + + function onChange(e, ui) { + that.find('[data-input=min]').val(options.values[ui.values[0]]); + that.find('[data-input=max]').val(options.values[ui.values[1]]); + + that.find('.slider-info').html(sprintf( + options.text, + options.values[ui.values[0]], + options.values[ui.values[1]] + )); + } + + var slider = this.find('.slider-slider').slider({ + range: true, + min: 0, + max: options.values.length - 1, + values: [ + options.values.indexOf(options.selected.min), + options.values.indexOf(options.selected.max) + ], + slide: onChange, + change: onChange + }); + + this.find('.slider-choice').on('click', function(){ + slider.slider('values', 0, options.values.indexOf($(this).data('min'))); + slider.slider('values', 1, options.values.indexOf($(this).data('max'))); + }); + + return this; +}; + +}(jQuery));
\ No newline at end of file diff --git a/admin/themes/default/template/batch_manager_global.tpl b/admin/themes/default/template/batch_manager_global.tpl index 575929674..9223b4094 100644 --- a/admin/themes/default/template/batch_manager_global.tpl +++ b/admin/themes/default/template/batch_manager_global.tpl @@ -4,8 +4,9 @@ {combine_script id='common' load='footer' path='admin/themes/default/js/common.js'} -{combine_script id='jquery.ui.slider' require='jquery.ui' load='footer' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'} +{combine_script id='jquery.ui.slider' require='jquery.ui' load='async' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'} {combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"} +{combine_script id='doubleSlider' load='async' require='jquery.ui.slider' path='admin/themes/default/js/doubleSlider.js'} {combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'} @@ -16,7 +17,7 @@ {combine_script id='jquery.progressBar' load='async' path='themes/default/js/plugins/jquery.progressbar.min.js'} {combine_script id='jquery.ajaxmanager' load='async' path='themes/default/js/plugins/jquery.ajaxmanager.js'} -{combine_script id='batchManagerGlobal' load='async' require='jquery,datepicker,jquery.colorbox,addAlbum' path='admin/themes/default/js/batchManagerGlobal.js'} +{combine_script id='batchManagerGlobal' load='async' require='jquery,datepicker,jquery.colorbox,addAlbum,doubleSlider' path='admin/themes/default/js/batchManagerGlobal.js'} {footer_script} var lang = { @@ -264,138 +265,51 @@ $(document).ready(function() { checkPermitAction(); - {* /* dimensions sliders */ - /** - * find the key from a value in the startStopValues array - */ *} - function getSliderKeyFromValue(value, values) { - for (var key in values) { - if (values[key] == value) { - return key; - } - } - - return 0; - } - - var dimension_values = { - width:[{$dimensions.widths}], - height:[{$dimensions.heights}], - ratio:[{$dimensions.ratios}] - }; - - function onSliderChange(type, ui, pattern) { - $("input[name='filter_dimension_min_"+type+"']").val(dimension_values[type][ui.values[0]]); - $("input[name='filter_dimension_max_"+type+"']").val(dimension_values[type][ui.values[1]]); - - $("#filter_dimension_"+type+"_info").html(sprintf( - pattern, - dimension_values[type][ui.values[0]], - dimension_values[type][ui.values[1]] - )); - } - - $("#filter_dimension_width_slider").slider({ - range: true, - min: 0, - max: dimension_values['width'].length - 1, - values: [ - getSliderKeyFromValue({$dimensions.selected.min_width}, dimension_values['width']), - getSliderKeyFromValue({$dimensions.selected.max_width}, dimension_values['width']) - ], - slide: function(event, ui) { - onSliderChange('width', ui, "{'between %d and %d pixels'|translate|escape:'javascript'}"); - }, - change: function(event, ui) { - onSliderChange('width', ui, "{'between %d and %d pixels'|translate|escape:'javascript'}"); - } - }); - - $("#filter_dimension_height_slider").slider({ - range: true, - min: 0, - max: dimension_values['height'].length - 1, - values: [ - getSliderKeyFromValue({$dimensions.selected.min_height}, dimension_values['height']), - getSliderKeyFromValue({$dimensions.selected.max_height}, dimension_values['height']) - ], - slide: function(event, ui) { - onSliderChange('height', ui, "{'between %d and %d pixels'|translate|escape:'javascript'}"); - }, - change: function(event, ui) { - onSliderChange('height', ui, "{'between %d and %d pixels'|translate|escape:'javascript'}"); - } - }); - - $("#filter_dimension_ratio_slider").slider({ - range: true, - min: 0, - max: dimension_values['ratio'].length - 1, - values: [ - getSliderKeyFromValue({$dimensions.selected.min_ratio}, dimension_values['ratio']), - getSliderKeyFromValue({$dimensions.selected.max_ratio}, dimension_values['ratio']) - ], - slide: function(event, ui) { - onSliderChange('ratio', ui, "{'between %.2f and %.2f'|translate|escape:'javascript'}"); - }, - change: function(event, ui) { - onSliderChange('ratio', ui, "{'between %.2f and %.2f'|translate|escape:'javascript'}"); - } - }); - - $("a.dimensions-choice").click(function() { - var type = jQuery(this).data("type"); - var min = jQuery(this).data("min"); - var max = jQuery(this).data("max"); - - $("#filter_dimension_"+ type +"_slider") - .slider("values", 0, getSliderKeyFromValue(min, dimension_values[type]) ) - .slider("values", 1, getSliderKeyFromValue(max, dimension_values[type]) ); - }); - - {* filesize, copied from dimensions filter and modified, to be moved in a plugin later *} - var filesize_values = [{$filesize.list}]; - - function filesize_onSliderChange(ui, pattern) { - $("input[name='filter_filesize_min']").val(filesize_values[ui.values[0]]); - $("input[name='filter_filesize_max']").val(filesize_values[ui.values[1]]); - - $("#filter_filesize_info").html(sprintf( - pattern, - filesize_values[ui.values[0]], - filesize_values[ui.values[1]] - )); - } - - $("#filter_filesize_slider").slider({ - range: true, - min: 0, - max: filesize_values.length - 1, - values: [ - getSliderKeyFromValue({$filesize.selected.min}, filesize_values), - getSliderKeyFromValue({$filesize.selected.max}, filesize_values) - ], - slide: function(event, ui) { - filesize_onSliderChange(ui, "{'between %s and %s MB'|translate|escape:'javascript'}"); - }, - change: function(event, ui) { - filesize_onSliderChange(ui, "{'between %s and %s MB'|translate|escape:'javascript'}"); - } - }); - - $("a.filesize-choice").click(function() { - $("#filter_filesize_slider") - .slider("values", 0, 0) - .slider("values", 1, filesize_values.length - 1); - }); - - jQuery("select[name=filter_prefilter]").change(function() { jQuery("#empty_caddie").toggle(jQuery(this).val() == "caddie"); jQuery("#duplicates_options").toggle(jQuery(this).val() == "duplicates"); }); }); +{*<!-- sliders config -->*} +var sliders = { + widths: { + values: [{$dimensions.widths}], + selected: { + min: {$dimensions.selected.min_width}, + max: {$dimensions.selected.max_width}, + }, + text: '{'between %d and %d pixels'|translate|escape:'javascript'}' + }, + + heights: { + values: [{$dimensions.heights}], + selected: { + min: {$dimensions.selected.min_height}, + max: {$dimensions.selected.max_height}, + }, + text: '{'between %d and %d pixels'|translate|escape:'javascript'}' + }, + + ratios: { + values: [{$dimensions.ratios}], + selected: { + min: {$dimensions.selected.min_ratio}, + max: {$dimensions.selected.max_ratio}, + }, + text: '{'between %.2f and %.2f'|translate|escape:'javascript'}' + }, + + filesizes: { + values: [{$filesize.list}], + selected: { + min: {$filesize.selected.min}, + max: {$filesize.selected.max}, + }, + text: '{'between %s and %s MB'|translate|escape:'javascript'}' + } +}; + {/footer_script} <div id="batchManagerGlobal"> @@ -403,7 +317,7 @@ $(document).ready(function() { <h2>{'Batch Manager'|@translate}</h2> <form action="{$F_ACTION}" method="post"> - <input type="hidden" name="start" value="{$START}"> + <input type="hidden" name="start" value="{$START}"> <fieldset> <legend>{'Filter'|@translate}</legend> @@ -461,40 +375,40 @@ $(document).ready(function() { <li id="filter_dimension" {if !isset($filter.dimension)}style="display:none"{/if}> <a href="#" class="removeFilter" title="remove this filter"><span>[x]</span></a> <input type="checkbox" name="filter_dimension_use" class="useFilterCheckbox" {if isset($filter.dimension)}checked="checked"{/if}> - {'Dimensions'|@translate} + {'Dimensions'|translate} <blockquote> - {'Width'|@translate} <span id="filter_dimension_width_info">{'between %d and %d pixels'|@translate:$dimensions.selected.min_width:$dimensions.selected.max_width}</span> - | <a class="dimensions-choice" data-type="width" data-min="{$dimensions.bounds.min_width}" data-max="{$dimensions.bounds.max_width}">{'Reset'|@translate}</a> - <div id="filter_dimension_width_slider"></div> - - {'Height'|@translate} <span id="filter_dimension_height_info">{'between %d and %d pixels'|@translate:$dimensions.selected.min_height:$dimensions.selected.max_height}</span> - | <a class="dimensions-choice" data-type="height" data-min="{$dimensions.bounds.min_height}" data-max="{$dimensions.bounds.max_height}">{'Reset'|@translate}</a> - <div id="filter_dimension_height_slider"></div> - - {'Ratio'|@translate} ({'Width'|@translate}/{'Height'|@translate}) <span id="filter_dimension_ratio_info">{'between %.2f and %.2f'|@translate:$dimensions.selected.min_ratio:$dimensions.selected.max_ratio}</span> -{if isset($dimensions.ratio_portrait)} - | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_portrait.min}" data-max="{$dimensions.ratio_portrait.max}">{'Portrait'|@translate}</a> -{/if} -{if isset($dimensions.ratio_square)} - | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_square.min}" data-max="{$dimensions.ratio_square.max}">{'square'|@translate}</a> -{/if} -{if isset($dimensions.ratio_landscape)} - | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_landscape.min}" data-max="{$dimensions.ratio_landscape.max}">{'Landscape'|@translate}</a> -{/if} -{if isset($dimensions.ratio_panorama)} - | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_panorama.min}" data-max="{$dimensions.ratio_panorama.max}">{'Panorama'|@translate}</a> -{/if} - | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.bounds.min_ratio}" data-max="{$dimensions.bounds.max_ratio}">{'Reset'|@translate}</a> - <div id="filter_dimension_ratio_slider"></div> + <div data-slider="widths"> + {'Width'|translate} <span class="slider-info">{'between %d and %d pixels'|translate:$dimensions.selected.min_width:$dimensions.selected.max_width}</span> + | <a class="slider-choice" data-min="{$dimensions.bounds.min_width}" data-max="{$dimensions.bounds.max_width}">{'Reset'|translate}</a> + <div class="slider-slider"></div> + + <input type="hidden" data-input="min" name="filter_dimension_min_width" value="{$dimensions.selected.min_width}"> + <input type="hidden" data-input="max" name="filter_dimension_max_width" value="{$dimensions.selected.max_width}"> + </div> + + <div data-slider="heights"> + {'Height'|translate} <span class="slider-info">{'between %d and %d pixels'|translate:$dimensions.selected.min_height:$dimensions.selected.max_height}</span> + | <a class="slider-choice" data-min="{$dimensions.bounds.min_height}" data-max="{$dimensions.bounds.max_height}">{'Reset'|translate}</a> + <div class="slider-slider"></div> + + <input type="hidden" data-input="min" name="filter_dimension_min_height" value="{$dimensions.selected.min_height}"> + <input type="hidden" data-input="max" name="filter_dimension_max_height" value="{$dimensions.selected.max_height}"> + </div> + + <div data-slider="ratios"> + {'Ratio'|translate} ({'Width'|@translate}/{'Height'|@translate}) <span class="slider-info">{'between %.2f and %.2f'|translate:$dimensions.selected.min_ratio:$dimensions.selected.max_ratio}</span> + {if isset($dimensions.ratio_portrait)}| <a class="slider-choice" data-min="{$dimensions.ratio_portrait.min}" data-max="{$dimensions.ratio_portrait.max}">{'Portrait'|translate}</a>{/if} + {if isset($dimensions.ratio_square)}| <a class="slider-choice" data-min="{$dimensions.ratio_square.min}" data-max="{$dimensions.ratio_square.max}">{'square'|translate}</a>{/if} + {if isset($dimensions.ratio_landscape)}| <a class="slider-choice" data-min="{$dimensions.ratio_landscape.min}" data-max="{$dimensions.ratio_landscape.max}">{'Landscape'|translate}</a>{/if} + {if isset($dimensions.ratio_panorama)}| <a class="slider-choice" data-min="{$dimensions.ratio_panorama.min}" data-max="{$dimensions.ratio_panorama.max}">{'Panorama'|translate}</a>{/if} + | <a class="slider-choice" data-min="{$dimensions.bounds.min_ratio}" data-max="{$dimensions.bounds.max_ratio}">{'Reset'|translate}</a> + <div class="slider-slider"></div> + + <input type="hidden" data-input="min" name="filter_dimension_min_ratio" value="{$dimensions.selected.min_ratio}"> + <input type="hidden" data-input="max" name="filter_dimension_max_ratio" value="{$dimensions.selected.max_ratio}"> + </div> </blockquote> - - <input type="hidden" name="filter_dimension_min_width" value="{$dimensions.selected.min_width}"> - <input type="hidden" name="filter_dimension_max_width" value="{$dimensions.selected.max_width}"> - <input type="hidden" name="filter_dimension_min_height" value="{$dimensions.selected.min_height}"> - <input type="hidden" name="filter_dimension_max_height" value="{$dimensions.selected.max_height}"> - <input type="hidden" name="filter_dimension_min_ratio" value="{$dimensions.selected.min_ratio}"> - <input type="hidden" name="filter_dimension_max_ratio" value="{$dimensions.selected.max_ratio}"> </li> <li id="filter_search"{if !isset($filter.search)} style="display:none"{/if}> @@ -509,16 +423,18 @@ $(document).ready(function() { <li id="filter_filesize" {if !isset($filter.filesize)}style="display:none"{/if}> <a href="#" class="removeFilter" title="remove this filter"><span>[x]</span></a> <input type="checkbox" name="filter_filesize_use" class="useFilterCheckbox" {if isset($filter.filesize)}checked="checked"{/if}> - {'Filesize'|@translate} + {'Filesize'|translate} <blockquote> - <span id="filter_filesize_info">{'between %s and %s MB'|@translate:$filesize.selected.min:$filesize.selected.max}</span> - | <a class="filesize-choice">{'Reset'|@translate}</a> - <div id="filter_filesize_slider"></div> + <div data-slider="filesizes"> + <span class="slider-info">{'between %s and %s MB'|translate:$filesize.selected.min:$filesize.selected.max}</span> + | <a class="slider-choice" data-min="{$filesize.bounds.min}" data-max="{$filesize.bounds.max}">{'Reset'|translate}</a> + <div class="slider-slider"></div> + + <input type="hidden" data-input="min" name="filter_filesize_min" value="{$filesize.selected.min}"> + <input type="hidden" data-input="max" name="filter_filesize_max" value="{$filesize.selected.max}"> + </div> </blockquote> - - <input type="hidden" name="filter_filesize_min" value="{$filesize.selected.min}"> - <input type="hidden" name="filter_filesize_max" value="{$filesize.selected.max}"> </li> </ul> |