Navigation Menu

Skip to content

Commit

Permalink
feature 2718: Batch Manager filter on dimensions, only display existi…
Browse files Browse the repository at this point in the history 
…ng values

improved colors on ui-slider


git-svn-id: http://piwigo.org/svn/trunk@19069 68402e56-0260-453c-a942-63ccdbb3a9ee
  • Loading branch information
@plegall
plegall committed Nov 19, 2012
1 parent 938a263 commit ae13fca
Show file tree
Hide file tree
Showing 4 changed files with 212 additions and 52 deletions.
95 changes: 85 additions & 10 deletions admin/batch_manager.php
View file
Expand Up @@ -370,7 +370,7 @@
}
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 = '
Expand Down Expand Up @@ -441,24 +441,99 @@
// +-----------------------------------------------------------------------+
// | 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);


Expand Down
12 changes: 9 additions & 3 deletions admin/themes/clear/theme.css
View file
Expand Up @@ -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; }

Expand Down Expand Up @@ -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;}

Expand Down
154 changes: 115 additions & 39 deletions admin/themes/default/template/batch_manager_global.tpl
View file
Expand Up @@ -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]));
});
});

Expand Down Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions admin/themes/default/theme.css
View file
Expand Up @@ -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;}
Expand Down

0 comments on commit ae13fca

Please sign in to comment.