Changeset 19069


Ignore:
Timestamp:
Nov 19, 2012, 7:26:37 PM (11 years ago)
Author:
plg
Message:

feature 2718: Batch Manager filter on dimensions, only display existing values

improved colors on ui-slider

Location:
trunk/admin
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/admin/batch_manager.php

    r18988 r19069  
    371371  if (isset($_SESSION['bulk_manager_filter']['dimension']['max_ratio']))
    372372  {
    373     $where_clause[] = 'width/height <= '.$_SESSION['bulk_manager_filter']['dimension']['max_ratio'];
     373    $where_clause[] = 'width/height <= '.sprintf('%.2f99', $_SESSION['bulk_manager_filter']['dimension']['max_ratio']);
    374374  }
    375375 
    … …  
    442442// |                              dimensions                               |
    443443// +-----------------------------------------------------------------------+
     444
     445$widths = array();
     446$heights = array();
     447$ratios = array();
     448
    444449$query = '
    445450SELECT
    446     MIN(width) as min_width,
    447     MAX(width) as max_width,
    448     MIN(height) as min_height,
    449     MAX(height) as max_height,
    450     MIN(width/height) as min_ratio,
    451     MAX(width/height) as max_ratio
    452   FROM '.IMAGES_TABLE.'
    453 ;';
     451  DISTINCT width, height
     452  FROM '.IMAGES_TABLE.'
     453  WHERE width IS NOT NULL
     454    AND height IS NOT NULL
     455;';
     456$result = pwg_query($query);
     457while ($row = pwg_db_fetch_assoc($result))
     458{
     459  $widths[] = $row['width'];
     460  $heights[] = $row['height'];
     461  $ratios[] = floor($row['width'] * 100 / $row['height']) / 100;
     462}
     463
     464$widths = array_unique($widths);
     465sort($widths);
     466
     467$heights = array_unique($heights);
     468sort($heights);
     469
     470$ratios = array_unique($ratios);
     471sort($ratios);
     472
     473$dimensions['widths'] = implode(',', $widths);
     474$dimensions['heights'] = implode(',', $heights);
     475$dimensions['ratios'] = implode(',', $ratios);
     476
    454477$dimensions['bounds'] = pwg_db_fetch_assoc(pwg_query($query));
    455 $dimensions['bounds']['min_ratio'] = floor($dimensions['bounds']['min_ratio']*100)/100;
    456 $dimensions['bounds']['max_ratio'] = ceil($dimensions['bounds']['max_ratio']*100)/100;
     478
     479$dimensions['bounds'] = array(
     480  'min_width' => $widths[0],
     481  'max_width' => $widths[count($widths)-1],
     482  'min_height' => $heights[0],
     483  'max_height' => $heights[count($heights)-1],
     484  'min_ratio' => $ratios[0],
     485  'max_ratio' => $ratios[count($ratios)-1],
     486  );
     487
     488$ratio_categories = array(
     489  'portrait' => array(),
     490  'square' => array(),
     491  'landscape' => array(),
     492  'panorama' => array(),
     493  );
     494
     495foreach ($ratios as $ratio)
     496{
     497  if ($ratio < 0.95)
     498  {
     499    $ratio_categories['portrait'][] = $ratio;
     500  }
     501
     502  if ($ratio >= 0.95 and $ratio < 1.05)
     503  {
     504    $ratio_categories['square'][] = $ratio;
     505  }
     506
     507  if ($ratio > 1.05 and $ratio <= 2.5)
     508  {
     509    $ratio_categories['landscape'][] = $ratio;
     510  }
     511
     512  if ($ratio > 2.5)
     513  {
     514    $ratio_categories['panorama'][] = $ratio;
     515  }
     516}
     517
     518foreach (array_keys($ratio_categories) as $ratio_category)
     519{
     520  if (count($ratio_categories[$ratio_category]) > 0)
     521  {
     522    $dimensions['ratio_'.$ratio_category] = array(
     523      'min' => $ratio_categories[$ratio_category][0],
     524      'max' => $ratio_categories[$ratio_category][count($ratio_categories[$ratio_category]) - 1]
     525      );
     526  }
     527}
    457528
    458529foreach (array_keys($dimensions['bounds']) as $type)
    459530{
    460   $dimensions['selected'][$type] = isset($_SESSION['bulk_manager_filter']['dimension'][$type]) ? $_SESSION['bulk_manager_filter']['dimension'][$type] : $dimensions['bounds'][$type];
    461 }
     531  $dimensions['selected'][$type] = isset($_SESSION['bulk_manager_filter']['dimension'][$type])
     532    ? $_SESSION['bulk_manager_filter']['dimension'][$type]
     533    : $dimensions['bounds'][$type]
     534  ;
     535}
     536
    462537$template->assign('dimensions', $dimensions);
    463538

  • trunk/admin/themes/clear/theme.css

    r19066 r19069  
    230230img.ui-datepicker-trigger{margin:-2px 10px 1px -2px;}
    231231
    232 .ui-slider { background:#ddd;border-radius:2px;border:1px solid #999; }
    233 .ui-slider .ui-slider-handle { border:1px solid #005e89;background:#fff;border-radius:0.6em; }
    234 .ui-slider .ui-slider-range { background:#999;border-radius:2px; }
     232.ui-slider { background:#fff;border-radius:2px;border:none; }
     233.ui-slider .ui-slider-range { background:#aaa;border-radius:2px; }
     234
     235.ui-slider .ui-slider-handle {
     236    background-color: #eee;
     237    border: 1px solid #aaa;
     238    border-radius: 3px;
     239}
    235240
    236241INPUT[type="text"].large  { width: 317px; }
    … …  
    283288#batchManagerGlobal .thumbSelected {background-color:#C2F5C2 !important}
    284289#batchManagerGlobal #selectedMessage {background-color:#C2F5C2;}
     290#filter_dimension_width_info, #filter_dimension_height_info, #filter_dimension_ratio_info {color:#ff7700;font-weight:bold;}
    285291
    286292.selectedComment {background-color:#C2F5C2;}

  • trunk/admin/themes/default/template/batch_manager_global.tpl

    r18988 r19069  
    487487
    488488  checkPermitAction();
    489 {/literal}
    490489 
    491490  /* dimensions sliders */
     491  /**
     492   * find the key from a value in the startStopValues array, for the hour slider
     493   */
     494  function getSliderKeyFromValue(value, values) {
     495    for (var key in values) {
     496      if (values[key] == value) {
     497        return key;
     498      }
     499    }
     500 
     501    return 0;
     502  }
     503
     504{/literal}
     505  var dimension_values = {ldelim}
     506    'width':[{$dimensions.widths}],
     507    'height':[{$dimensions.heights}],
     508    'ratio':[{$dimensions.ratios}]
     509  };
     510
    492511  $("#filter_dimension_width_slider").slider({ldelim}
    493512    range: true,
    494     min: {$dimensions.bounds.min_width},
    495     max: {$dimensions.bounds.max_width},
    496     values: [{$dimensions.selected.min_width}, {$dimensions.selected.max_width}],
     513    min: 0,
     514    max: dimension_values['width'].length - 1,
     515    values: [
     516      getSliderKeyFromValue({$dimensions.selected.min_width}, dimension_values['width']),
     517      getSliderKeyFromValue({$dimensions.selected.max_width}, dimension_values['width'])
     518    ],
    497519    slide: function(event, ui) {ldelim}
    498       $("input[name='filter_dimension_min_width']").val(ui.values[0]);
    499       $("input[name='filter_dimension_max_width']").val(ui.values[1]);
    500       $("#filter_dimension_width_info").html(sprintf("{'between %d and %d pixels'|@translate}", ui.values[0], ui.values[1]));
     520      $("input[name='filter_dimension_min_width']").val(dimension_values['width'][ui.values[0]]);
     521      $("input[name='filter_dimension_max_width']").val(dimension_values['width'][ui.values[1]]);
     522
     523      $("#filter_dimension_width_info").html(sprintf(
     524        "{'between %d and %d pixels'|@translate}",
     525        dimension_values['width'][ui.values[0]],
     526        dimension_values['width'][ui.values[1]]
     527      ));
    501528    },
    502529    change: function(event, ui) {ldelim}
    503       $("input[name='filter_dimension_min_width']").val(ui.values[0]);
    504       $("input[name='filter_dimension_max_width']").val(ui.values[1]);
    505       $("#filter_dimension_width_info").html(sprintf("{'between %d and %d pixels'|@translate}", ui.values[0], ui.values[1]));
    506     }
    507   });
     530      $("input[name='filter_dimension_min_width']").val(dimension_values['width'][ui.values[0]]);
     531      $("input[name='filter_dimension_max_width']").val(dimension_values['width'][ui.values[1]]);
     532
     533      $("#filter_dimension_width_info").html(sprintf(
     534        "{'between %d and %d pixels'|@translate}",
     535        dimension_values['width'][ui.values[0]],
     536        dimension_values['width'][ui.values[1]]
     537      ));
     538    }
     539  });
     540
    508541  $("#filter_dimension_height_slider").slider({ldelim}
    509542    range: true,
    510     min: {$dimensions.bounds.min_height},
    511     max: {$dimensions.bounds.max_height},
    512     values: [{$dimensions.selected.min_height}, {$dimensions.selected.max_height}],
     543    min: 0,
     544    max: dimension_values['height'].length - 1,
     545    values: [
     546      getSliderKeyFromValue({$dimensions.selected.min_height}, dimension_values['height']),
     547      getSliderKeyFromValue({$dimensions.selected.max_height}, dimension_values['height'])
     548    ],
    513549    slide: function(event, ui) {ldelim}
    514       $("input[name='filter_dimension_min_height']").val(ui.values[0]);
    515       $("input[name='filter_dimension_max_height']").val(ui.values[1]);
    516       $("#filter_dimension_height_info").html(sprintf("{'between %d and %d pixels'|@translate}", ui.values[0], ui.values[1]));
     550      $("input[name='filter_dimension_min_height']").val(dimension_values['height'][ui.values[0]]);
     551      $("input[name='filter_dimension_max_height']").val(dimension_values['height'][ui.values[1]]);
     552
     553      $("#filter_dimension_height_info").html(sprintf(
     554        "{'between %d and %d pixels'|@translate}",
     555        dimension_values['height'][ui.values[0]],
     556        dimension_values['height'][ui.values[1]]
     557      ));
    517558    },
    518559    change: function(event, ui) {ldelim}
    519       $("input[name='filter_dimension_min_height']").val(ui.values[0]);
    520       $("input[name='filter_dimension_max_height']").val(ui.values[1]);
    521       $("#filter_dimension_height_info").html(sprintf("{'between %d and %d pixels'|@translate}", ui.values[0], ui.values[1]));
    522     }
    523   });
     560      $("input[name='filter_dimension_min_height']").val(dimension_values['height'][ui.values[0]]);
     561      $("input[name='filter_dimension_max_height']").val(dimension_values['height'][ui.values[1]]);
     562
     563      $("#filter_dimension_height_info").html(sprintf(
     564        "{'between %d and %d pixels'|@translate}",
     565        dimension_values['height'][ui.values[0]],
     566        dimension_values['height'][ui.values[1]]
     567      ));
     568    }
     569  });
     570
    524571  $("#filter_dimension_ratio_slider").slider({ldelim}
    525572    range: true,
    526     step: 0.01,
    527     min: {$dimensions.bounds.min_ratio},
    528     max: {$dimensions.bounds.max_ratio},
    529     values: [{$dimensions.selected.min_ratio}, {$dimensions.selected.max_ratio}],
     573    min: 0,
     574    max: dimension_values['ratio'].length - 1,
     575    values: [
     576      getSliderKeyFromValue({$dimensions.selected.min_ratio}, dimension_values['ratio']),
     577      getSliderKeyFromValue({$dimensions.selected.max_ratio}, dimension_values['ratio'])
     578    ],
    530579    slide: function(event, ui) {ldelim}
    531       $("input[name='filter_dimension_min_ratio']").val(ui.values[0]);
    532       $("input[name='filter_dimension_max_ratio']").val(ui.values[1]);
    533       $("#filter_dimension_ratio_info").html(sprintf("{'between %.2f and %.2f'|@translate}", ui.values[0], ui.values[1]));
     580      $("input[name='filter_dimension_min_ratio']").val(dimension_values['ratio'][ui.values[0]]);
     581      $("input[name='filter_dimension_max_ratio']").val(dimension_values['ratio'][ui.values[1]]);
     582
     583      $("#filter_dimension_ratio_info").html(sprintf(
     584        "{'between %.2f and %.2f'|@translate}",
     585        dimension_values['ratio'][ui.values[0]],
     586        dimension_values['ratio'][ui.values[1]]
     587      ));
    534588    },
    535589    change: function(event, ui) {ldelim}
    536       $("input[name='filter_dimension_min_ratio']").val(ui.values[0]);
    537       $("input[name='filter_dimension_max_ratio']").val(ui.values[1]);
    538       $("#filter_dimension_ratio_info").html(sprintf("{'between %.2f and %.2f'|@translate}", ui.values[0], ui.values[1]));
     590      $("input[name='filter_dimension_min_ratio']").val(dimension_values['ratio'][ui.values[0]]);
     591      $("input[name='filter_dimension_max_ratio']").val(dimension_values['ratio'][ui.values[1]]);
     592
     593      $("#filter_dimension_ratio_info").html(sprintf(
     594        "{'between %.2f and %.2f'|@translate}",
     595        dimension_values['ratio'][ui.values[0]],
     596        dimension_values['ratio'][ui.values[1]]
     597      ));
    539598    }
    540599  });
    541600 
    542601  $("a.dimensions-choice").click(function() {ldelim}
    543     $("#filter_dimension_"+ $(this).data("type") +"_slider").slider("values", 0, $(this).data("min"));
    544     $("#filter_dimension_"+ $(this).data("type") +"_slider").slider("values", 1, $(this).data("max"));
     602    var type = jQuery(this).data("type");
     603    var min = jQuery(this).data("min");
     604    var max = jQuery(this).data("max");
     605
     606    $("#filter_dimension_"+ type +"_slider").slider(
     607      "values",
     608      0,
     609      getSliderKeyFromValue(min, dimension_values[type])
     610    );
     611
     612    $("#filter_dimension_"+type+"_slider").slider("values", 1, getSliderKeyFromValue(max, dimension_values[type]));
    545613  });
    546614});
    … …  
    606674        <a href="#" class="removeFilter" title="remove this filter"><span>[x]</span></a>
    607675        <input type="checkbox" name="filter_dimension_use" class="useFilterCheckbox" {if isset($filter.dimension)}checked="checked"{/if}>
    608         {'Dimensions'|@translate} :
     676        {'Dimensions'|@translate}
    609677       
    610678        <blockquote>
    611           {'Width'|@translate} : <span id="filter_dimension_width_info">{'between %d and %d pixels'|@translate|sprintf:$dimensions.selected.min_width:$dimensions.selected.max_width}</span>
     679          {'Width'|@translate} <span id="filter_dimension_width_info">{'between %d and %d pixels'|@translate|sprintf:$dimensions.selected.min_width:$dimensions.selected.max_width}</span>
    612680          | <a class="dimensions-choice" data-type="width" data-min="{$dimensions.bounds.min_width}" data-max="{$dimensions.bounds.max_width}">{'Reset'|@translate}</a>
    613681          <div id="filter_dimension_width_slider"></div>
    614682         
    615           {'Height'|@translate} : <span id="filter_dimension_height_info">{'between %d and %d pixels'|@translate|sprintf:$dimensions.selected.min_height:$dimensions.selected.max_height}</span>
     683          {'Height'|@translate} <span id="filter_dimension_height_info">{'between %d and %d pixels'|@translate|sprintf:$dimensions.selected.min_height:$dimensions.selected.max_height}</span>
    616684          | <a class="dimensions-choice" data-type="height" data-min="{$dimensions.bounds.min_height}" data-max="{$dimensions.bounds.max_height}">{'Reset'|@translate}</a>
    617685          <div id="filter_dimension_height_slider"></div>
    618686         
    619           {'Ratio'|@translate} : <span id="filter_dimension_ratio_info">{'between %.2f and %.2f'|@translate|sprintf:$dimensions.selected.min_ratio:$dimensions.selected.max_ratio}</span>
    620           | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.bounds.min_ratio}" data-max="0.95">{'Portrait'|@translate}</a>
    621           | <a class="dimensions-choice" data-type="ratio" data-min="0.95" data-max="1.05">{'square'|@translate}</a>
    622           | <a class="dimensions-choice" data-type="ratio" data-min="1.05" data-max="2.5">{'Landscape'|@translate}</a>
    623           | <a class="dimensions-choice" data-type="ratio" data-min="2.5" data-max="{$dimensions.bounds.max_ratio}">{'Panorama'|@translate}</a>
     687          {'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>
     688{if isset($dimensions.ratio_portrait.min)}
     689          | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_portrait.min}" data-max="{$dimensions.ratio_portrait.max}">{'Portrait'|@translate}</a>
     690{/if}
     691{if isset($dimensions.ratio_square.min)}
     692          | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_square.min}" data-max="{$dimensions.ratio_square.max}">{'square'|@translate}</a>
     693{/if}
     694{if isset($dimensions.ratio_landscape.min)}
     695          | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_landscape.min}" data-max="{$dimensions.ratio_landscape.max}">{'Landscape'|@translate}</a>
     696{/if}
     697{if isset($dimensions.ratio_panorama.min)}
     698          | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_panorama.min}" data-max="{$dimensions.ratio_panorama.max}">{'Panorama'|@translate}</a>
     699{/if}
    624700          | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.bounds.min_ratio}" data-max="{$dimensions.bounds.max_ratio}">{'Reset'|@translate}</a>
    625701          <div id="filter_dimension_ratio_slider"></div>

  • trunk/admin/themes/default/theme.css

    r18976 r19069  
    970970#batchManagerGlobal .useFilterCheckbox {display:none;}
    971971
     972#batchManagerGlobal #filter_dimension blockquote {margin:5px 0 20px 15px;}
     973#batchManagerGlobal #filter_dimension .ui-slider-horizontal {width:650px;margin:5px 0 10px 0;}
     974
    972975
    973976/* TokenInput (with Facebook style) */
Note: See TracChangeset for help on using the changeset viewer.