From ae13fca74ea36b79158891cd5b4a1b1bb74fefae Mon Sep 17 00:00:00 2001
From: plegall <plg@piwigo.org>
Date: Mon, 19 Nov 2012 18:26:37 +0000
Subject: 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
---
 admin/batch_manager.php                            |  95 +++++++++++--
 admin/themes/clear/theme.css                       |  12 +-
 .../default/template/batch_manager_global.tpl      | 154 +++++++++++++++------
 admin/themes/default/theme.css                     |   3 +
 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;}
-- 
cgit v1.2.3