Changeset 25491


Ignore:
Timestamp:
11/15/13 23:28:10 (6 years ago)
Author:
plg
Message:

feature 1668: in user details, ability to modify recent_period and nb_image_page with sliders

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/admin/themes/default/template/user_list.tpl

    r25483 r25491  
    66{combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'} 
    77{combine_css path="themes/default/js/plugins/chosen.css"} 
     8 
     9{combine_script id='jquery.ui.slider' require='jquery.ui' load='footer' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'} 
     10{combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"} 
    811 
    912{footer_script} 
     
    9093   * Table with users 
    9194   */ 
     95  /** 
     96   * find the key from a value in the startStopValues array 
     97   */ 
     98  function getSliderKeyFromValue(value, values) { 
     99    for (var key in values) { 
     100      if (values[key] == value) { 
     101        return key; 
     102      } 
     103    } 
     104    return 0; 
     105  } 
     106 
     107  var recent_period_values = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,25,30,40,50,60,80,99]; 
     108 
     109  function getRecentPeriodInfoFromIdx(idx) { 
     110    return sprintf( 
     111      "{/literal}{'%d days'|@translate}{literal}", 
     112      recent_period_values[idx] 
     113    ); 
     114  } 
     115 
     116  var nb_image_page_values = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,35,40,45,50,60,70,80,90,100,200,300,500,999]; 
     117 
     118  function getNbImagePageInfoFromIdx(idx) { 
     119    return sprintf( 
     120      "{/literal}{'%d photos per page'|@translate}{literal}", 
     121      nb_image_page_values[idx] 
     122    ); 
     123  } 
     124 
    92125  /* Formating function for row details */ 
    93126  function fnFormatDetails(oTable, nTr) { 
     
    184217          userDetails += '<div class="userPropertiesSetTitle">{/literal}{'Preferences'|translate}{literal}</div>'; 
    185218 
    186           userDetails += '<div class="userProperty"><strong>{/literal}{'Number of photos per page'|translate}{literal}</strong>'; 
    187           userDetails += '<br>'+user.nb_image_page+'</div>'; 
     219          userDetails += '<div class="userProperty"><strong class="nb_image_page_infos"></strong>'; 
     220          userDetails += '<div class="nb_image_page"></div>'; 
     221          userDetails += '<input type="hidden" name="nb_image_page" value="'+user.nb_image_page+'">'; 
     222          userDetails += '</div>'; 
    188223 
    189224          userDetails += '<div class="userProperty"><strong>{/literal}{'Theme'|translate}{literal}</strong>'; 
     
    209244          userDetails += '</select></div>'; 
    210245 
    211           userDetails += '<div class="userProperty"><strong>{/literal}{'Recent period'|translate}{literal}</strong>'; 
    212           userDetails += '<br>'+user.recent_period+'</div>'; 
     246          userDetails += '<div class="userProperty"><strong>{/literal}{'Recent period'|translate}{literal}</strong> <span class="recent_period_infos"></span>'; 
     247          userDetails += '<div class="recent_period"></div>'; 
     248          userDetails += '<input type="hidden" name="recent_period" value="'+user.recent_period+'">'; 
     249          userDetails += '</div>'; 
    213250 
    214251          var checked = ''; 
     
    242279          jQuery("#user"+userId).append(userDetails); 
    243280          jQuery(".chzn-select").chosen(); 
     281 
     282          /* nb_image_page slider */ 
     283          var nb_image_page_init = getSliderKeyFromValue(jQuery('input[name=nb_image_page]').val(), nb_image_page_values); 
     284           
     285          jQuery('#user'+userId+' .nb_image_page_infos').html(getNbImagePageInfoFromIdx(nb_image_page_init)); 
     286           
     287          jQuery('#user'+userId+' .nb_image_page').slider({ 
     288            range: "min", 
     289            min: 0, 
     290            max: nb_image_page_values.length - 1, 
     291            value: nb_image_page_init, 
     292            slide: function( event, ui ) { 
     293              jQuery('#user'+userId+' .nb_image_page_infos').html(getNbImagePageInfoFromIdx(ui.value)); 
     294            }, 
     295            stop: function( event, ui ) { 
     296              jQuery('#user'+userId+' input[name=nb_image_page]').val(nb_image_page_values[ui.value]).trigger('change'); 
     297            } 
     298          }); 
     299 
     300          /* recent_period slider */ 
     301          var recent_period_init = getSliderKeyFromValue(jQuery('input[name=recent_period]').val(), recent_period_values); 
     302          jQuery('#user'+userId+' .recent_period_infos').html(getRecentPeriodInfoFromIdx(recent_period_init)); 
     303           
     304          jQuery('#user'+userId+' .recent_period').slider({ 
     305            range: "min", 
     306            min: 0, 
     307            max: recent_period_values.length - 1, 
     308            value: recent_period_init, 
     309            slide: function( event, ui ) { 
     310              jQuery('#user'+userId+' .recent_period_infos').html(getRecentPeriodInfoFromIdx(ui.value)); 
     311            }, 
     312            stop: function( event, ui ) { 
     313              jQuery('#user'+userId+' input[name=recent_period]').val(recent_period_values[ui.value]).trigger('change'); 
     314            } 
     315          }); 
    244316        } 
    245317        else { 
     
    737809 
    738810.userStats {margin-top:10px;} 
     811.recent_period_infos {margin-left:10px;} 
     812.nb_image_page, .recent_period {width:340px;margin-top:5px;} 
    739813</style> 
    740814{/literal} 
Note: See TracChangeset for help on using the changeset viewer.