feature 2718: Batch Manager filter on dimensions, only display existing values
improved colors on ui-slider git-svn-id: http://piwigo.org/svn/trunk@19069 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
plegall
parent
938a263d09
commit
ae13fca74e
4 changed files with 212 additions and 52 deletions
|
|
@ -370,7 +370,7 @@ if (isset($_SESSION['bulk_manager_filter']['dimension']))
|
|||
}
|
||||
if (isset($_SESSION['bulk_manager_filter']['dimension']['max_ratio']))
|
||||
{
|
||||
$where_clause[] = 'width/height <= '.$_SESSION['bulk_manager_filter']['dimension']['max_ratio'];
|
||||
$where_clause[] = 'width/height <= '.sprintf('%.2f99', $_SESSION['bulk_manager_filter']['dimension']['max_ratio']);
|
||||
}
|
||||
|
||||
$query = '
|
||||
|
|
@ -441,24 +441,99 @@ $template->assign('tags', get_taglist($query, false));
|
|||
// +-----------------------------------------------------------------------+
|
||||
// | dimensions |
|
||||
// +-----------------------------------------------------------------------+
|
||||
|
||||
$widths = array();
|
||||
$heights = array();
|
||||
$ratios = array();
|
||||
|
||||
$query = '
|
||||
SELECT
|
||||
MIN(width) as min_width,
|
||||
MAX(width) as max_width,
|
||||
MIN(height) as min_height,
|
||||
MAX(height) as max_height,
|
||||
MIN(width/height) as min_ratio,
|
||||
MAX(width/height) as max_ratio
|
||||
DISTINCT width, height
|
||||
FROM '.IMAGES_TABLE.'
|
||||
WHERE width IS NOT NULL
|
||||
AND height IS NOT NULL
|
||||
;';
|
||||
$result = pwg_query($query);
|
||||
while ($row = pwg_db_fetch_assoc($result))
|
||||
{
|
||||
$widths[] = $row['width'];
|
||||
$heights[] = $row['height'];
|
||||
$ratios[] = floor($row['width'] * 100 / $row['height']) / 100;
|
||||
}
|
||||
|
||||
$widths = array_unique($widths);
|
||||
sort($widths);
|
||||
|
||||
$heights = array_unique($heights);
|
||||
sort($heights);
|
||||
|
||||
$ratios = array_unique($ratios);
|
||||
sort($ratios);
|
||||
|
||||
$dimensions['widths'] = implode(',', $widths);
|
||||
$dimensions['heights'] = implode(',', $heights);
|
||||
$dimensions['ratios'] = implode(',', $ratios);
|
||||
|
||||
$dimensions['bounds'] = pwg_db_fetch_assoc(pwg_query($query));
|
||||
$dimensions['bounds']['min_ratio'] = floor($dimensions['bounds']['min_ratio']*100)/100;
|
||||
$dimensions['bounds']['max_ratio'] = ceil($dimensions['bounds']['max_ratio']*100)/100;
|
||||
|
||||
$dimensions['bounds'] = array(
|
||||
'min_width' => $widths[0],
|
||||
'max_width' => $widths[count($widths)-1],
|
||||
'min_height' => $heights[0],
|
||||
'max_height' => $heights[count($heights)-1],
|
||||
'min_ratio' => $ratios[0],
|
||||
'max_ratio' => $ratios[count($ratios)-1],
|
||||
);
|
||||
|
||||
$ratio_categories = array(
|
||||
'portrait' => array(),
|
||||
'square' => array(),
|
||||
'landscape' => array(),
|
||||
'panorama' => array(),
|
||||
);
|
||||
|
||||
foreach ($ratios as $ratio)
|
||||
{
|
||||
if ($ratio < 0.95)
|
||||
{
|
||||
$ratio_categories['portrait'][] = $ratio;
|
||||
}
|
||||
|
||||
if ($ratio >= 0.95 and $ratio < 1.05)
|
||||
{
|
||||
$ratio_categories['square'][] = $ratio;
|
||||
}
|
||||
|
||||
if ($ratio > 1.05 and $ratio <= 2.5)
|
||||
{
|
||||
$ratio_categories['landscape'][] = $ratio;
|
||||
}
|
||||
|
||||
if ($ratio > 2.5)
|
||||
{
|
||||
$ratio_categories['panorama'][] = $ratio;
|
||||
}
|
||||
}
|
||||
|
||||
foreach (array_keys($ratio_categories) as $ratio_category)
|
||||
{
|
||||
if (count($ratio_categories[$ratio_category]) > 0)
|
||||
{
|
||||
$dimensions['ratio_'.$ratio_category] = array(
|
||||
'min' => $ratio_categories[$ratio_category][0],
|
||||
'max' => $ratio_categories[$ratio_category][count($ratio_categories[$ratio_category]) - 1]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
foreach (array_keys($dimensions['bounds']) as $type)
|
||||
{
|
||||
$dimensions['selected'][$type] = isset($_SESSION['bulk_manager_filter']['dimension'][$type]) ? $_SESSION['bulk_manager_filter']['dimension'][$type] : $dimensions['bounds'][$type];
|
||||
$dimensions['selected'][$type] = isset($_SESSION['bulk_manager_filter']['dimension'][$type])
|
||||
? $_SESSION['bulk_manager_filter']['dimension'][$type]
|
||||
: $dimensions['bounds'][$type]
|
||||
;
|
||||
}
|
||||
|
||||
$template->assign('dimensions', $dimensions);
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -229,9 +229,14 @@ body .ui-resizable-autohide .ui-resizable-handle { display: none; } /* use 'body
|
|||
#ui-datepicker-div .ui-datepicker-days-cell { background-color:#bbb; border:1px solid #ddd; border-top-color: #bbb; border-left-color: #bbb;}
|
||||
img.ui-datepicker-trigger{margin:-2px 10px 1px -2px;}
|
||||
|
||||
.ui-slider { background:#ddd;border-radius:2px;border:1px solid #999; }
|
||||
.ui-slider .ui-slider-handle { border:1px solid #005e89;background:#fff;border-radius:0.6em; }
|
||||
.ui-slider .ui-slider-range { background:#999;border-radius:2px; }
|
||||
.ui-slider { background:#fff;border-radius:2px;border:none; }
|
||||
.ui-slider .ui-slider-range { background:#aaa;border-radius:2px; }
|
||||
|
||||
.ui-slider .ui-slider-handle {
|
||||
background-color: #eee;
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
INPUT[type="text"].large { width: 317px; }
|
||||
|
||||
|
|
@ -282,6 +287,7 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;}
|
|||
|
||||
#batchManagerGlobal .thumbSelected {background-color:#C2F5C2 !important}
|
||||
#batchManagerGlobal #selectedMessage {background-color:#C2F5C2;}
|
||||
#filter_dimension_width_info, #filter_dimension_height_info, #filter_dimension_ratio_info {color:#ff7700;font-weight:bold;}
|
||||
|
||||
.selectedComment {background-color:#C2F5C2;}
|
||||
|
||||
|
|
|
|||
|
|
@ -486,62 +486,130 @@ $(document).ready(function() {
|
|||
}
|
||||
|
||||
checkPermitAction();
|
||||
{/literal}
|
||||
|
||||
/* dimensions sliders */
|
||||
/**
|
||||
* find the key from a value in the startStopValues array, for the hour slider
|
||||
*/
|
||||
function getSliderKeyFromValue(value, values) {
|
||||
for (var key in values) {
|
||||
if (values[key] == value) {
|
||||
return key;
|
||||
}
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
{/literal}
|
||||
var dimension_values = {ldelim}
|
||||
'width':[{$dimensions.widths}],
|
||||
'height':[{$dimensions.heights}],
|
||||
'ratio':[{$dimensions.ratios}]
|
||||
};
|
||||
|
||||
$("#filter_dimension_width_slider").slider({ldelim}
|
||||
range: true,
|
||||
min: {$dimensions.bounds.min_width},
|
||||
max: {$dimensions.bounds.max_width},
|
||||
values: [{$dimensions.selected.min_width}, {$dimensions.selected.max_width}],
|
||||
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) {ldelim}
|
||||
$("input[name='filter_dimension_min_width']").val(ui.values[0]);
|
||||
$("input[name='filter_dimension_max_width']").val(ui.values[1]);
|
||||
$("#filter_dimension_width_info").html(sprintf("{'between %d and %d pixels'|@translate}", ui.values[0], ui.values[1]));
|
||||
$("input[name='filter_dimension_min_width']").val(dimension_values['width'][ui.values[0]]);
|
||||
$("input[name='filter_dimension_max_width']").val(dimension_values['width'][ui.values[1]]);
|
||||
|
||||
$("#filter_dimension_width_info").html(sprintf(
|
||||
"{'between %d and %d pixels'|@translate}",
|
||||
dimension_values['width'][ui.values[0]],
|
||||
dimension_values['width'][ui.values[1]]
|
||||
));
|
||||
},
|
||||
change: function(event, ui) {ldelim}
|
||||
$("input[name='filter_dimension_min_width']").val(ui.values[0]);
|
||||
$("input[name='filter_dimension_max_width']").val(ui.values[1]);
|
||||
$("#filter_dimension_width_info").html(sprintf("{'between %d and %d pixels'|@translate}", ui.values[0], ui.values[1]));
|
||||
$("input[name='filter_dimension_min_width']").val(dimension_values['width'][ui.values[0]]);
|
||||
$("input[name='filter_dimension_max_width']").val(dimension_values['width'][ui.values[1]]);
|
||||
|
||||
$("#filter_dimension_width_info").html(sprintf(
|
||||
"{'between %d and %d pixels'|@translate}",
|
||||
dimension_values['width'][ui.values[0]],
|
||||
dimension_values['width'][ui.values[1]]
|
||||
));
|
||||
}
|
||||
});
|
||||
|
||||
$("#filter_dimension_height_slider").slider({ldelim}
|
||||
range: true,
|
||||
min: {$dimensions.bounds.min_height},
|
||||
max: {$dimensions.bounds.max_height},
|
||||
values: [{$dimensions.selected.min_height}, {$dimensions.selected.max_height}],
|
||||
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) {ldelim}
|
||||
$("input[name='filter_dimension_min_height']").val(ui.values[0]);
|
||||
$("input[name='filter_dimension_max_height']").val(ui.values[1]);
|
||||
$("#filter_dimension_height_info").html(sprintf("{'between %d and %d pixels'|@translate}", ui.values[0], ui.values[1]));
|
||||
$("input[name='filter_dimension_min_height']").val(dimension_values['height'][ui.values[0]]);
|
||||
$("input[name='filter_dimension_max_height']").val(dimension_values['height'][ui.values[1]]);
|
||||
|
||||
$("#filter_dimension_height_info").html(sprintf(
|
||||
"{'between %d and %d pixels'|@translate}",
|
||||
dimension_values['height'][ui.values[0]],
|
||||
dimension_values['height'][ui.values[1]]
|
||||
));
|
||||
},
|
||||
change: function(event, ui) {ldelim}
|
||||
$("input[name='filter_dimension_min_height']").val(ui.values[0]);
|
||||
$("input[name='filter_dimension_max_height']").val(ui.values[1]);
|
||||
$("#filter_dimension_height_info").html(sprintf("{'between %d and %d pixels'|@translate}", ui.values[0], ui.values[1]));
|
||||
$("input[name='filter_dimension_min_height']").val(dimension_values['height'][ui.values[0]]);
|
||||
$("input[name='filter_dimension_max_height']").val(dimension_values['height'][ui.values[1]]);
|
||||
|
||||
$("#filter_dimension_height_info").html(sprintf(
|
||||
"{'between %d and %d pixels'|@translate}",
|
||||
dimension_values['height'][ui.values[0]],
|
||||
dimension_values['height'][ui.values[1]]
|
||||
));
|
||||
}
|
||||
});
|
||||
|
||||
$("#filter_dimension_ratio_slider").slider({ldelim}
|
||||
range: true,
|
||||
step: 0.01,
|
||||
min: {$dimensions.bounds.min_ratio},
|
||||
max: {$dimensions.bounds.max_ratio},
|
||||
values: [{$dimensions.selected.min_ratio}, {$dimensions.selected.max_ratio}],
|
||||
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) {ldelim}
|
||||
$("input[name='filter_dimension_min_ratio']").val(ui.values[0]);
|
||||
$("input[name='filter_dimension_max_ratio']").val(ui.values[1]);
|
||||
$("#filter_dimension_ratio_info").html(sprintf("{'between %.2f and %.2f'|@translate}", ui.values[0], ui.values[1]));
|
||||
$("input[name='filter_dimension_min_ratio']").val(dimension_values['ratio'][ui.values[0]]);
|
||||
$("input[name='filter_dimension_max_ratio']").val(dimension_values['ratio'][ui.values[1]]);
|
||||
|
||||
$("#filter_dimension_ratio_info").html(sprintf(
|
||||
"{'between %.2f and %.2f'|@translate}",
|
||||
dimension_values['ratio'][ui.values[0]],
|
||||
dimension_values['ratio'][ui.values[1]]
|
||||
));
|
||||
},
|
||||
change: function(event, ui) {ldelim}
|
||||
$("input[name='filter_dimension_min_ratio']").val(ui.values[0]);
|
||||
$("input[name='filter_dimension_max_ratio']").val(ui.values[1]);
|
||||
$("#filter_dimension_ratio_info").html(sprintf("{'between %.2f and %.2f'|@translate}", ui.values[0], ui.values[1]));
|
||||
$("input[name='filter_dimension_min_ratio']").val(dimension_values['ratio'][ui.values[0]]);
|
||||
$("input[name='filter_dimension_max_ratio']").val(dimension_values['ratio'][ui.values[1]]);
|
||||
|
||||
$("#filter_dimension_ratio_info").html(sprintf(
|
||||
"{'between %.2f and %.2f'|@translate}",
|
||||
dimension_values['ratio'][ui.values[0]],
|
||||
dimension_values['ratio'][ui.values[1]]
|
||||
));
|
||||
}
|
||||
});
|
||||
|
||||
$("a.dimensions-choice").click(function() {ldelim}
|
||||
$("#filter_dimension_"+ $(this).data("type") +"_slider").slider("values", 0, $(this).data("min"));
|
||||
$("#filter_dimension_"+ $(this).data("type") +"_slider").slider("values", 1, $(this).data("max"));
|
||||
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])
|
||||
);
|
||||
|
||||
$("#filter_dimension_"+type+"_slider").slider("values", 1, getSliderKeyFromValue(max, dimension_values[type]));
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -605,22 +673,30 @@ $(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|sprintf:$dimensions.selected.min_width:$dimensions.selected.max_width}</span>
|
||||
{'Width'|@translate} <span id="filter_dimension_width_info">{'between %d and %d pixels'|@translate|sprintf:$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|sprintf:$dimensions.selected.min_height:$dimensions.selected.max_height}</span>
|
||||
{'Height'|@translate} <span id="filter_dimension_height_info">{'between %d and %d pixels'|@translate|sprintf:$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} : <span id="filter_dimension_ratio_info">{'between %.2f and %.2f'|@translate|sprintf:$dimensions.selected.min_ratio:$dimensions.selected.max_ratio}</span>
|
||||
| <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.bounds.min_ratio}" data-max="0.95">{'Portrait'|@translate}</a>
|
||||
| <a class="dimensions-choice" data-type="ratio" data-min="0.95" data-max="1.05">{'square'|@translate}</a>
|
||||
| <a class="dimensions-choice" data-type="ratio" data-min="1.05" data-max="2.5">{'Landscape'|@translate}</a>
|
||||
| <a class="dimensions-choice" data-type="ratio" data-min="2.5" data-max="{$dimensions.bounds.max_ratio}">{'Panorama'|@translate}</a>
|
||||
{'Ratio'|@translate} ({'Width'|@translate}/{'Height'|@translate}) <span id="filter_dimension_ratio_info">{'between %.2f and %.2f'|@translate|sprintf:$dimensions.selected.min_ratio:$dimensions.selected.max_ratio}</span>
|
||||
{if isset($dimensions.ratio_portrait.min)}
|
||||
| <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.min)}
|
||||
| <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.min)}
|
||||
| <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.min)}
|
||||
| <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>
|
||||
</blockquote>
|
||||
|
|
|
|||
|
|
@ -969,6 +969,9 @@ LEGEND {
|
|||
#batchManagerGlobal #applyFilterBlock {margin-top:20px;}
|
||||
#batchManagerGlobal .useFilterCheckbox {display:none;}
|
||||
|
||||
#batchManagerGlobal #filter_dimension blockquote {margin:5px 0 20px 15px;}
|
||||
#batchManagerGlobal #filter_dimension .ui-slider-horizontal {width:650px;margin:5px 0 10px 0;}
|
||||
|
||||
|
||||
/* TokenInput (with Facebook style) */
|
||||
ul.token-input-list {overflow: hidden; height: auto !important; height: 1%;width: 400px;border: 1px solid #8496ba;cursor: text;font-size: 12px;font-family: Verdana;min-height: 1px;z-index: 999;margin: 0;padding: 0;background-color: #fff;list-style-type: none;clear: left;}
|
||||
|
|
|
|||
Loading…
Reference in a new issue