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

File:
1 edited

Legend:

Unmodified
Added
Removed

  • 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>
Note: See TracChangeset for help on using the changeset viewer.