Changeset 29249


Ignore:
Timestamp:
08/23/14 12:24:55 (6 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.