feature:2718 Add batch manager filters for photo dimensions, redesign with sliders

git-svn-id: http://piwigo.org/svn/trunk@18988 68402e56-0260-453c-a942-63ccdbb3a9ee
2026-07-20 08:33:03 +02:00 · 2012-11-10 20:10:01 +00:00
parent 36d1745710
commit c81093b0e9
4 changed files with 122 additions and 48 deletions
@@ -100,15 +100,11 @@ if (isset($_POST['submitFilter']))
        $_SESSION['bulk_manager_filter']['dimension'][$type] = $_POST['filter_dimension_'. $type ];
      }
    }
-  }
-  
-  if (isset($_POST['filter_ratio_use']))
-  {
-    foreach (array('min','max') as $type)
+    foreach (array('min_ratio','max_ratio') as $type)
    {
-      if ( preg_match('#^[0-9\.,]+$#', $_POST['filter_ratio_'. $type ]) )
+      if ( preg_match('#^[0-9\.]+$#', $_POST['filter_dimension_'. $type ]) )
      {
-        $_SESSION['bulk_manager_filter']['ratio'][$type] = str_replace(',','.',$_POST['filter_ratio_'. $type ]);
+        $_SESSION['bulk_manager_filter']['dimension'][$type] = $_POST['filter_dimension_'. $type ];
      }
    }
  }
@@ -349,7 +345,7 @@ if (!empty($_SESSION['bulk_manager_filter']['tags']))
    );
 }

-if (isset($_SESSION['bulk_manager_filter']['dimension']) or isset($_SESSION['bulk_manager_filter']['ratio']))
+if (isset($_SESSION['bulk_manager_filter']['dimension']))
 {
  $where_clauses = array();
  if (isset($_SESSION['bulk_manager_filter']['dimension']['min_width']))
@@ -368,13 +364,13 @@ if (isset($_SESSION['bulk_manager_filter']['dimension']) or isset($_SESSION['bul
  {
    $where_clause[] = 'height <= '.$_SESSION['bulk_manager_filter']['dimension']['max_height'];
  }
-  if (isset($_SESSION['bulk_manager_filter']['ratio']['min']))
+  if (isset($_SESSION['bulk_manager_filter']['dimension']['min_ratio']))
  {
-    $where_clause[] = 'width/height >= '.$_SESSION['bulk_manager_filter']['ratio']['min'];
+    $where_clause[] = 'width/height >= '.$_SESSION['bulk_manager_filter']['dimension']['min_ratio'];
  }
-  if (isset($_SESSION['bulk_manager_filter']['ratio']['max']))
+  if (isset($_SESSION['bulk_manager_filter']['dimension']['max_ratio']))
  {
-    $where_clause[] = 'width/height <= '.$_SESSION['bulk_manager_filter']['ratio']['max'];
+    $where_clause[] = 'width/height <= '.$_SESSION['bulk_manager_filter']['dimension']['max_ratio'];
  }
  
  $query = '
@@ -442,6 +438,30 @@ SELECT id, name
 ;';
 $template->assign('tags', get_taglist($query, false));

+// +-----------------------------------------------------------------------+
+// |                              dimensions                               |
+// +-----------------------------------------------------------------------+
+$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
+  FROM '.IMAGES_TABLE.'
+;';
+$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;
+
+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];
+}
+$template->assign('dimensions', $dimensions);
+
+
 // +-----------------------------------------------------------------------+
 // |                         open specific mode                            |
 // +-----------------------------------------------------------------------+
@@ -2,6 +2,8 @@
 {include file='include/datepicker.inc.tpl'}
 {include file='include/colorbox.inc.tpl'}
 {include file='include/add_album.inc.tpl'}
+{combine_script id='jquery.ui.slider' require='jquery.ui' load='footer' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
+{combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"}

 {footer_script}{literal}
  pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
@@ -387,16 +389,6 @@ $(document).ready(function() {
    filter_enable(filter);
    $(this).attr("value", -1);
  });
-  
-  $("select[name='filter_dimension']").change(function () {
-    $("span[id^='filter_dimension_']").hide();
-    $("span#filter_dimension_"+ $(this).attr("value")).show();
-  });
-  
-  $("a.ratio-choice").click(function() {
-    $("input[name='filter_ratio_min']").val($(this).data("min"));
-    $("input[name='filter_ratio_max']").val($(this).data("max"));
-  });

  function filter_disable(filter) {
    /* hide the filter line */
@@ -493,11 +485,67 @@ $(document).ready(function() {
 		} );
 	}

-  checkPermitAction()
+  checkPermitAction();
+{/literal}
+  
+  /* dimensions sliders */
+  $("#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}],
+    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]));
+    },
+    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]));
+    }
+  });
+  $("#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}],
+    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]));
+    },
+    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]));
+    }
+  });
+  $("#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}],
+    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]));
+    },
+    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]));
+    }
+  });
+  
+  $("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"));
+  });
 });

-
-{/literal}{/footer_script}
+{/footer_script}

 <div id="batchManagerGlobal">

@@ -558,22 +606,31 @@ $(document).ready(function() {
        <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} :
-        <label>{'Minimum width'|@translate} <input type="text" name="filter_dimension_min_width" value="{$filter.dimension.min_width}" size="4"></label> —
-        <label>{'Maximum width'|@translate} <input type="text" name="filter_dimension_max_width" value="{$filter.dimension.max_width}" size="4"></label> —
-        <label>{'Minimum height'|@translate} <input type="text" name="filter_dimension_min_height" value="{$filter.dimension.min_height}" size="4"></label>	—
-        <label>{'Maximum height'|@translate} <input type="text" name="filter_dimension_max_height" value="{$filter.dimension.max_height}" size="4"></label>
-      </li>
-      
-      <li id="filter_ratio" {if !isset($filter.ratio)}style="display:none"{/if}>
-        <a href="#" class="removeFilter" title="remove this filter"><span>[x]</span></a>
-        <input type="checkbox" name="filter_ratio_use" class="useFilterCheckbox" {if isset($filter.ratio)}checked="checked"{/if}>
-        {'Ratio'|@translate} :
-        <label>{'Minimum'|@translate} <input type="text" name="filter_ratio_min" value="{$filter.ratio.min}" size="4"></label> —
-        <label>{'Maximum'|@translate} <input type="text" name="filter_ratio_max" value="{$filter.ratio.max}" size="4"></label> —
-        <a class="ratio-choice" data-min="" data-max="0.95">{'Portrait'|@translate}</a> |
-        <a class="ratio-choice" data-min="0.95" data-max="1.05">{'square'|@translate}</a> |
-        <a class="ratio-choice" data-min="1.05" data-max="2.5">{'Landscape'|@translate}</a> |
-        <a class="ratio-choice" data-min="2.5" data-max="">{'Panorama'|@translate}</a>
+        
+        <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>
+          | <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>
+          | <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>
+          | <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>
+        
+        <input type="hidden" name="filter_dimension_min_width" value="{$dimensions.selected.min_width}">
+        <input type="hidden" name="filter_dimension_max_width" value="{$dimensions.selected.max_width}">
+        <input type="hidden" name="filter_dimension_min_height" value="{$dimensions.selected.min_height}">
+        <input type="hidden" name="filter_dimension_max_height" value="{$dimensions.selected.max_height}">
+        <input type="hidden" name="filter_dimension_min_ratio" value="{$dimensions.selected.min_ratio}">
+        <input type="hidden" name="filter_dimension_max_ratio" value="{$dimensions.selected.max_ratio}">
      </li>
    </ul>

@@ -586,7 +643,6 @@ $(document).ready(function() {
        <option value="filter_tags" {if isset($filter.tags)}disabled="disabled"{/if}>{'Tags'|@translate}</option>
        <option value="filter_level" {if isset($filter.level)}disabled="disabled"{/if}>{'Privacy level'|@translate}</option>
        <option value="filter_dimension" {if isset($filter.dimension)}disabled="disabled"{/if}>{'Dimensions'|@translate}</option>
-        <option value="filter_ratio" {if isset($filter.ratio)}disabled="disabled"{/if}>{'Ratio'|@translate}</option>
      </select>
      <a id="removeFilters" href="">{'Remove all filters'|@translate}</a>
    </p>
@@ -207,6 +207,8 @@ $lang['Average rate'] = "Average rate";
 $lang['average time'] = "average time";
 $lang['Batch Manager'] = 'Batch Manager';
 $lang['between'] = "between";
+$lang['between %d and %d pixels'] = 'between %d and %d pixels';
+$lang['between %.2f and %.2f'] = 'between %.2f and %.2f';
 $lang['bottom left corner'] = 'bottom left corner';
 $lang['bottom right corner'] = 'bottom right corner';
 $lang['Bound Theme'] = 'Bound Theme';
@@ -357,7 +359,6 @@ $lang['Forbid this language to users'] = 'Forbid this language to users';
 $lang['Forbid this theme to users'] = "Forbid this theme to users";
 $lang['Forbidden'] = "Forbidden";
 $lang['Form'] = "Form";
-$lang['Format'] = 'Format';
 $lang['FTP + Synchronization'] = 'FTP + Synchronization';
 $lang['Gallery title'] = "Gallery title";
 $lang['Gallery unlocked'] = 'Gallery unlocked';
@@ -484,7 +485,6 @@ $lang['Manage this set of %d photos'] = 'Manage this set of %d photos';
 $lang['Manage'] = "Manage";
 $lang['manual order'] = 'manual order';
 $lang['Manual order'] = 'Manual order';
-$lang['Maximum'] = 'Maximum';
 $lang['Maximum file size: %sB.'] = 'Maximum file size: %sB.';
 $lang['Maximum height'] = 'Maximum height';
 $lang['Maximum width'] = 'Maximum width';
@@ -495,7 +495,6 @@ $lang['Merge tags'] = 'Merge tags';
 $lang['Metadata synchronization results'] = "Metadata synchronization results";
 $lang['Metadata synchronized from file'] = "Metadata synchronized from file";
 $lang['middle'] = 'middle';
-$lang['Minimum'] = 'Minimum';
 $lang['Minimum width'] = 'Minimum width';
 $lang['Minimum height'] = 'Minimum height';
 $lang['Minimum privacy level'] = "Minimum privacy level";
@@ -930,14 +930,13 @@ $lang['Duplicate selected tags'] = 'Dupliquer les tags sélectionnés';
 $lang['Invalid dimension'] = 'Dimension invalide';
 $lang['Minimum width'] = 'Largeur minimale';
 $lang['Minimum height'] = 'Hauteur minimale';
-$lang['Format'] = 'Format';
 $lang['Portrait'] = 'Portrait';
 $lang['Landscape'] = 'Paysage';
 $lang['Panorama'] = 'Panorama';
 $lang['Manage photos'] = 'Gérer les photos';
 $lang['View in gallery'] = 'Voir dans la galerie';
 $lang['Number of albums per page'] = 'Nombre d\'albums par page';
-$lang['Maximum'] = 'Maximum';
-$lang['Minimum'] = 'Minimum';
 $lang['Ratio'] = 'Ratio';
+$lang['between %d and %d pixels'] = 'entre %d et %d pixels';
+$lang['between %.2f and %.2f'] = 'entre %.2f et %.2f';
 ?>