aboutsummaryrefslogtreecommitdiffstats
path: root/admin
diff options
context:
space:
mode:
authorplegall <plg@piwigo.org>2012-11-19 18:26:37 +0000
committerplegall <plg@piwigo.org>2012-11-19 18:26:37 +0000
commitae13fca74ea36b79158891cd5b4a1b1bb74fefae (patch)
tree0bde16b6e15de9995249927d78999a26e028775b /admin
parent938a263d0904c630a7f126b43405c26c14a71113 (diff)
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
Diffstat (limited to '')
-rw-r--r--admin/batch_manager.php95
-rw-r--r--admin/themes/clear/theme.css12
-rw-r--r--admin/themes/default/template/batch_manager_global.tpl154
-rw-r--r--admin/themes/default/theme.css3
4 files changed, 212 insertions, 52 deletions
diff --git a/admin/batch_manager.php b/admin/batch_manager.php
index e38d52049..b431f6e8c 100644
--- a/admin/batch_manager.php
+++ b/admin/batch_manager.php
@@ -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);
diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css
index 6751bec14..e782a3a49 100644
--- a/admin/themes/clear/theme.css
+++ b/admin/themes/clear/theme.css
@@ -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;}
diff --git a/admin/themes/default/template/batch_manager_global.tpl b/admin/themes/default/template/batch_manager_global.tpl
index 7059c6e24..eb085e31f 100644
--- a/admin/themes/default/template/batch_manager_global.tpl
+++ b/admin/themes/default/template/batch_manager_global.tpl
@@ -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>
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index e9dec5740..aae9d4243 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -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;}