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

3 files changed, 127 insertions, 42 deletions

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;}