Changeset 29249


Ignore:
Timestamp:
Aug 23, 2014, 12:24:55 PM (10 years ago)
Author:
mistic100
Message:

create a mini jquery plugin for sliders on batch manager + async load

Location:
trunk/admin
Files:
1 added
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/admin/batch_manager.php

    r29245 r29249  
    536536$heights = array();
    537537$ratios = array();
     538$dimensions = array();
    538539
    539540// get all width, height and ratios
     
    566567}
    567568
    568 
    569 
    570 $widths = array_unique($widths);
    571 sort($widths);
    572 
    573 $heights = array_unique($heights);
    574 sort($heights);
    575 
    576 $ratios = array_unique($ratios);
    577 sort($ratios);
    578 
    579 $dimensions['widths'] = implode(',', $widths);
    580 $dimensions['heights'] = implode(',', $heights);
    581 $dimensions['ratios'] = implode(',', $ratios);
     569foreach (array('widths','heights','ratios') as $type)
     570{
     571  ${$type} = array_unique(${$type});
     572  sort(${$type});
     573  $dimensions[$type] = implode(',', ${$type});
     574}
    582575
    583576$dimensions['bounds'] = array(
    584577  'min_width' => $widths[0],
    585   'max_width' => $widths[count($widths)-1],
     578  'max_width' => end($widths),
    586579  'min_height' => $heights[0],
    587   'max_height' => $heights[count($heights)-1],
     580  'max_height' => end($heights),
    588581  'min_ratio' => $ratios[0],
    589   'max_ratio' => $ratios[count($ratios)-1],
     582  'max_ratio' => end($ratios),
    590583  );
    591584
     
    618611}
    619612
    620 foreach (array_keys($ratio_categories) as $ratio_category)
    621 {
    622   if (count($ratio_categories[$ratio_category]) > 0)
    623   {
    624     $dimensions['ratio_'.$ratio_category] = array(
    625       'min' => $ratio_categories[$ratio_category][0],
    626       'max' => array_pop($ratio_categories[$ratio_category]),
     613foreach (array_keys($ratio_categories) as $type)
     614{
     615  if (count($ratio_categories[$type]) > 0)
     616  {
     617    $dimensions['ratio_'.$type] = array(
     618      'min' => $ratio_categories[$type][0],
     619      'max' => end($ratio_categories[$type]),
    627620      );
    628621  }
     
    645638
    646639$filesizes = array();
     640$filesize = array();
    647641
    648642$query = '
     
    676670$filesize['bounds'] = array(
    677671  'min' => $filesizes[0],
    678   'max' => $filesizes[count($filesizes)-1],
     672  'max' => end($filesizes),
    679673  );
    680674
  • trunk/admin/themes/clear/theme.css

    r29239 r29249  
    295295#batchManagerGlobal .thumbSelected {background-color:#C2F5C2 !important}
    296296#batchManagerGlobal #selectedMessage {background-color:#C2F5C2;}
    297 #filter_dimension_width_info, #filter_dimension_height_info, #filter_dimension_ratio_info, #filter_filesize_info {color:#ff7700;font-weight:bold;}
     297.slider-info {color:#ff7700;font-weight:bold;}
    298298
    299299.selectedComment {background-color:#C2F5C2;}
  • trunk/admin/themes/default/js/batchManagerGlobal.js

    r28909 r29249  
    4444});
    4545
     46$('[data-slider=widths]').pwgDoubleSlider(sliders.widths);
     47$('[data-slider=heights]').pwgDoubleSlider(sliders.heights);
     48$('[data-slider=ratios]').pwgDoubleSlider(sliders.ratios);
     49$('[data-slider=filesizes]').pwgDoubleSlider(sliders.filesizes);
    4650
    4751
  • trunk/admin/themes/default/template/batch_manager_global.tpl

    r29244 r29249  
    55{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
    66
    7 {combine_script id='jquery.ui.slider' require='jquery.ui' load='footer' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
     7{combine_script id='jquery.ui.slider' require='jquery.ui' load='async' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
    88{combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"}
     9{combine_script id='doubleSlider' load='async' require='jquery.ui.slider' path='admin/themes/default/js/doubleSlider.js'}
    910
    1011{combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'}
     
    1718{combine_script id='jquery.ajaxmanager' load='async' path='themes/default/js/plugins/jquery.ajaxmanager.js'}
    1819
    19 {combine_script id='batchManagerGlobal' load='async' require='jquery,datepicker,jquery.colorbox,addAlbum' path='admin/themes/default/js/batchManagerGlobal.js'}
     20{combine_script id='batchManagerGlobal' load='async' require='jquery,datepicker,jquery.colorbox,addAlbum,doubleSlider' path='admin/themes/default/js/batchManagerGlobal.js'}
    2021
    2122{footer_script}
     
    265266  checkPermitAction();
    266267
    267         {* /* dimensions sliders */
    268         /**
    269          * find the key from a value in the startStopValues array
    270          */ *}
    271   function getSliderKeyFromValue(value, values) {
    272     for (var key in values) {
    273       if (values[key] == value) {
    274         return key;
    275       }
    276     }
    277 
    278     return 0;
    279   }
    280 
    281   var dimension_values = {
    282     width:[{$dimensions.widths}],
    283     height:[{$dimensions.heights}],
    284     ratio:[{$dimensions.ratios}]
    285   };
    286 
    287         function onSliderChange(type, ui, pattern) {
    288                 $("input[name='filter_dimension_min_"+type+"']").val(dimension_values[type][ui.values[0]]);
    289                 $("input[name='filter_dimension_max_"+type+"']").val(dimension_values[type][ui.values[1]]);
    290 
    291                 $("#filter_dimension_"+type+"_info").html(sprintf(
    292                         pattern,
    293                         dimension_values[type][ui.values[0]],
    294                         dimension_values[type][ui.values[1]]
    295                 ));
    296         }
    297        
    298   $("#filter_dimension_width_slider").slider({
    299     range: true,
    300     min: 0,
    301     max: dimension_values['width'].length - 1,
    302     values: [
    303       getSliderKeyFromValue({$dimensions.selected.min_width}, dimension_values['width']),
    304       getSliderKeyFromValue({$dimensions.selected.max_width}, dimension_values['width'])
    305     ],
    306                 slide: function(event, ui) {
    307                         onSliderChange('width', ui, "{'between %d and %d pixels'|translate|escape:'javascript'}");
    308                 },
    309                 change: function(event, ui) {
    310                         onSliderChange('width', ui, "{'between %d and %d pixels'|translate|escape:'javascript'}");
    311                 }
    312   });
    313 
    314   $("#filter_dimension_height_slider").slider({
    315     range: true,
    316     min: 0,
    317     max: dimension_values['height'].length - 1,
    318     values: [
    319       getSliderKeyFromValue({$dimensions.selected.min_height}, dimension_values['height']),
    320       getSliderKeyFromValue({$dimensions.selected.max_height}, dimension_values['height'])
    321     ],
    322                 slide: function(event, ui) {
    323                         onSliderChange('height', ui, "{'between %d and %d pixels'|translate|escape:'javascript'}");
    324                 },
    325                 change: function(event, ui) {
    326                         onSliderChange('height', ui, "{'between %d and %d pixels'|translate|escape:'javascript'}");
    327                 }
    328   });
    329 
    330   $("#filter_dimension_ratio_slider").slider({
    331     range: true,
    332     min: 0,
    333     max: dimension_values['ratio'].length - 1,
    334     values: [
    335       getSliderKeyFromValue({$dimensions.selected.min_ratio}, dimension_values['ratio']),
    336       getSliderKeyFromValue({$dimensions.selected.max_ratio}, dimension_values['ratio'])
    337     ],
    338                 slide: function(event, ui) {
    339                         onSliderChange('ratio', ui, "{'between %.2f and %.2f'|translate|escape:'javascript'}");
    340                 },
    341                 change: function(event, ui) {
    342                         onSliderChange('ratio', ui, "{'between %.2f and %.2f'|translate|escape:'javascript'}");
    343                 }
    344   });
    345 
    346   $("a.dimensions-choice").click(function() {
    347     var type = jQuery(this).data("type");
    348     var min = jQuery(this).data("min");
    349     var max = jQuery(this).data("max");
    350 
    351                 $("#filter_dimension_"+ type +"_slider")
    352                         .slider("values", 0, getSliderKeyFromValue(min, dimension_values[type]) )
    353                         .slider("values", 1, getSliderKeyFromValue(max, dimension_values[type]) );
    354   });
    355 
    356   {* filesize, copied from dimensions filter and modified, to be moved in a plugin later *}
    357   var filesize_values = [{$filesize.list}];
    358 
    359   function filesize_onSliderChange(ui, pattern) {
    360     $("input[name='filter_filesize_min']").val(filesize_values[ui.values[0]]);
    361     $("input[name='filter_filesize_max']").val(filesize_values[ui.values[1]]);
    362 
    363     $("#filter_filesize_info").html(sprintf(
    364       pattern,
    365       filesize_values[ui.values[0]],
    366       filesize_values[ui.values[1]]
    367     ));
    368   }
    369        
    370   $("#filter_filesize_slider").slider({
    371     range: true,
    372     min: 0,
    373     max: filesize_values.length - 1,
    374     values: [
    375       getSliderKeyFromValue({$filesize.selected.min}, filesize_values),
    376       getSliderKeyFromValue({$filesize.selected.max}, filesize_values)
    377     ],
    378     slide: function(event, ui) {
    379       filesize_onSliderChange(ui, "{'between %s and %s MB'|translate|escape:'javascript'}");
    380     },
    381     change: function(event, ui) {
    382       filesize_onSliderChange(ui, "{'between %s and %s MB'|translate|escape:'javascript'}");
    383     }
    384   });
    385 
    386   $("a.filesize-choice").click(function() {
    387     $("#filter_filesize_slider")
    388       .slider("values", 0, 0)
    389       .slider("values", 1, filesize_values.length - 1);
    390   });
    391 
    392 
    393268  jQuery("select[name=filter_prefilter]").change(function() {
    394269    jQuery("#empty_caddie").toggle(jQuery(this).val() == "caddie");
     
    397272});
    398273
     274{*<!-- sliders config -->*}
     275var sliders = {
     276  widths: {
     277    values: [{$dimensions.widths}],
     278    selected: {
     279      min: {$dimensions.selected.min_width},
     280      max: {$dimensions.selected.max_width},
     281    },
     282    text: '{'between %d and %d pixels'|translate|escape:'javascript'}'
     283  },
     284
     285  heights: {
     286    values: [{$dimensions.heights}],
     287    selected: {
     288      min: {$dimensions.selected.min_height},
     289      max: {$dimensions.selected.max_height},
     290    },
     291    text: '{'between %d and %d pixels'|translate|escape:'javascript'}'
     292  },
     293
     294  ratios: {
     295    values: [{$dimensions.ratios}],
     296    selected: {
     297      min: {$dimensions.selected.min_ratio},
     298      max: {$dimensions.selected.max_ratio},
     299    },
     300    text: '{'between %.2f and %.2f'|translate|escape:'javascript'}'
     301  },
     302
     303  filesizes: {
     304    values: [{$filesize.list}],
     305    selected: {
     306      min: {$filesize.selected.min},
     307      max: {$filesize.selected.max},
     308    },
     309    text: '{'between %s and %s MB'|translate|escape:'javascript'}'
     310  }
     311};
     312
    399313{/footer_script}
    400314
     
    404318
    405319  <form action="{$F_ACTION}" method="post">
    406         <input type="hidden" name="start" value="{$START}">
     320  <input type="hidden" name="start" value="{$START}">
    407321
    408322  <fieldset>
     
    462376        <a href="#" class="removeFilter" title="remove this filter"><span>[x]</span></a>
    463377        <input type="checkbox" name="filter_dimension_use" class="useFilterCheckbox" {if isset($filter.dimension)}checked="checked"{/if}>
    464         {'Dimensions'|@translate}
     378        {'Dimensions'|translate}
    465379
    466380        <blockquote>
    467           {'Width'|@translate} <span id="filter_dimension_width_info">{'between %d and %d pixels'|@translate:$dimensions.selected.min_width:$dimensions.selected.max_width}</span>
    468           | <a class="dimensions-choice" data-type="width" data-min="{$dimensions.bounds.min_width}" data-max="{$dimensions.bounds.max_width}">{'Reset'|@translate}</a>
    469           <div id="filter_dimension_width_slider"></div>
    470 
    471           {'Height'|@translate} <span id="filter_dimension_height_info">{'between %d and %d pixels'|@translate:$dimensions.selected.min_height:$dimensions.selected.max_height}</span>
    472           | <a class="dimensions-choice" data-type="height" data-min="{$dimensions.bounds.min_height}" data-max="{$dimensions.bounds.max_height}">{'Reset'|@translate}</a>
    473           <div id="filter_dimension_height_slider"></div>
    474 
    475           {'Ratio'|@translate} ({'Width'|@translate}/{'Height'|@translate}) <span id="filter_dimension_ratio_info">{'between %.2f and %.2f'|@translate:$dimensions.selected.min_ratio:$dimensions.selected.max_ratio}</span>
    476 {if isset($dimensions.ratio_portrait)}
    477           | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_portrait.min}" data-max="{$dimensions.ratio_portrait.max}">{'Portrait'|@translate}</a>
    478 {/if}
    479 {if isset($dimensions.ratio_square)}
    480           | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_square.min}" data-max="{$dimensions.ratio_square.max}">{'square'|@translate}</a>
    481 {/if}
    482 {if isset($dimensions.ratio_landscape)}
    483           | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_landscape.min}" data-max="{$dimensions.ratio_landscape.max}">{'Landscape'|@translate}</a>
    484 {/if}
    485 {if isset($dimensions.ratio_panorama)}
    486           | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.ratio_panorama.min}" data-max="{$dimensions.ratio_panorama.max}">{'Panorama'|@translate}</a>
    487 {/if}
    488           | <a class="dimensions-choice" data-type="ratio" data-min="{$dimensions.bounds.min_ratio}" data-max="{$dimensions.bounds.max_ratio}">{'Reset'|@translate}</a>
    489           <div id="filter_dimension_ratio_slider"></div>
     381          <div data-slider="widths">
     382            {'Width'|translate} <span class="slider-info">{'between %d and %d pixels'|translate:$dimensions.selected.min_width:$dimensions.selected.max_width}</span>
     383            | <a class="slider-choice" data-min="{$dimensions.bounds.min_width}" data-max="{$dimensions.bounds.max_width}">{'Reset'|translate}</a>
     384            <div class="slider-slider"></div>
     385
     386            <input type="hidden" data-input="min" name="filter_dimension_min_width" value="{$dimensions.selected.min_width}">
     387            <input type="hidden" data-input="max" name="filter_dimension_max_width" value="{$dimensions.selected.max_width}">
     388          </div>
     389
     390          <div data-slider="heights">
     391            {'Height'|translate} <span class="slider-info">{'between %d and %d pixels'|translate:$dimensions.selected.min_height:$dimensions.selected.max_height}</span>
     392            | <a class="slider-choice" data-min="{$dimensions.bounds.min_height}" data-max="{$dimensions.bounds.max_height}">{'Reset'|translate}</a>
     393            <div class="slider-slider"></div>
     394           
     395            <input type="hidden" data-input="min" name="filter_dimension_min_height" value="{$dimensions.selected.min_height}">
     396            <input type="hidden" data-input="max" name="filter_dimension_max_height" value="{$dimensions.selected.max_height}">
     397          </div>
     398
     399          <div data-slider="ratios">
     400            {'Ratio'|translate} ({'Width'|@translate}/{'Height'|@translate}) <span class="slider-info">{'between %.2f and %.2f'|translate:$dimensions.selected.min_ratio:$dimensions.selected.max_ratio}</span>
     401            {if isset($dimensions.ratio_portrait)}| <a class="slider-choice" data-min="{$dimensions.ratio_portrait.min}" data-max="{$dimensions.ratio_portrait.max}">{'Portrait'|translate}</a>{/if}
     402            {if isset($dimensions.ratio_square)}| <a class="slider-choice" data-min="{$dimensions.ratio_square.min}" data-max="{$dimensions.ratio_square.max}">{'square'|translate}</a>{/if}
     403            {if isset($dimensions.ratio_landscape)}| <a class="slider-choice" data-min="{$dimensions.ratio_landscape.min}" data-max="{$dimensions.ratio_landscape.max}">{'Landscape'|translate}</a>{/if}
     404            {if isset($dimensions.ratio_panorama)}| <a class="slider-choice" data-min="{$dimensions.ratio_panorama.min}" data-max="{$dimensions.ratio_panorama.max}">{'Panorama'|translate}</a>{/if}
     405            | <a class="slider-choice" data-min="{$dimensions.bounds.min_ratio}" data-max="{$dimensions.bounds.max_ratio}">{'Reset'|translate}</a>
     406            <div class="slider-slider"></div>
     407
     408            <input type="hidden" data-input="min" name="filter_dimension_min_ratio" value="{$dimensions.selected.min_ratio}">
     409            <input type="hidden" data-input="max" name="filter_dimension_max_ratio" value="{$dimensions.selected.max_ratio}">
     410          </div>
    490411        </blockquote>
    491 
    492         <input type="hidden" name="filter_dimension_min_width" value="{$dimensions.selected.min_width}">
    493         <input type="hidden" name="filter_dimension_max_width" value="{$dimensions.selected.max_width}">
    494         <input type="hidden" name="filter_dimension_min_height" value="{$dimensions.selected.min_height}">
    495         <input type="hidden" name="filter_dimension_max_height" value="{$dimensions.selected.max_height}">
    496         <input type="hidden" name="filter_dimension_min_ratio" value="{$dimensions.selected.min_ratio}">
    497         <input type="hidden" name="filter_dimension_max_ratio" value="{$dimensions.selected.max_ratio}">
    498412      </li>
    499413
     
    510424        <a href="#" class="removeFilter" title="remove this filter"><span>[x]</span></a>
    511425        <input type="checkbox" name="filter_filesize_use" class="useFilterCheckbox" {if isset($filter.filesize)}checked="checked"{/if}>
    512         {'Filesize'|@translate}
     426        {'Filesize'|translate}
    513427
    514428        <blockquote>
    515           <span id="filter_filesize_info">{'between %s and %s MB'|@translate:$filesize.selected.min:$filesize.selected.max}</span>
    516           | <a class="filesize-choice">{'Reset'|@translate}</a>
    517           <div id="filter_filesize_slider"></div>
     429          <div data-slider="filesizes">
     430            <span class="slider-info">{'between %s and %s MB'|translate:$filesize.selected.min:$filesize.selected.max}</span>
     431            | <a class="slider-choice" data-min="{$filesize.bounds.min}" data-max="{$filesize.bounds.max}">{'Reset'|translate}</a>
     432            <div class="slider-slider"></div>
     433
     434            <input type="hidden" data-input="min" name="filter_filesize_min" value="{$filesize.selected.min}">
     435            <input type="hidden" data-input="max" name="filter_filesize_max" value="{$filesize.selected.max}">
     436          </div>
    518437        </blockquote>
    519 
    520         <input type="hidden" name="filter_filesize_min" value="{$filesize.selected.min}">
    521         <input type="hidden" name="filter_filesize_max" value="{$filesize.selected.max}">
    522438      </li>
    523439    </ul>
Note: See TracChangeset for help on using the changeset viewer.