Changeset 26270


Ignore:
Timestamp:
12/27/13 21:50:51 (6 years ago)
Author:
plg
Message:

feature 1668: use underscore.js to template the userDetails instead of
generating HTML directly in javascript. Will make work easier for plugins
modifying the user profile.

Location:
trunk
Files:
1 added
1 edited

Legend:

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

    r26230 r26270  
    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.underscore' load='footer' path='themes/default/js/plugins/underscore.js'} 
    810 
    911{combine_script id='jquery.ui.slider' require='jquery.ui' load='footer' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'} 
     
    181183          var user = data.result.users[0]; 
    182184 
    183           var userDetails = '<form>'; 
    184           userDetails += '<div class="userActions">'; 
    185  
    186           if (parseInt(userId) != guestUser) { 
    187             userDetails += '<span class="changePasswordDone infos" style="display:none">&#x2714; {/literal}{'Password updated'|translate|escape:javascript}{literal}</span>'; 
    188             userDetails += '<span class="changePassword" style="display:none">{/literal}{'New password'|translate}{literal} <input type="text"> <a href="#" class="buttonLike updatePassword"><img src="themes/default/images/ajax-loader-small.gif" style="margin-bottom:-1px;margin-left:1px;display:none;"><span class="text">{/literal}{'Submit'|translate|escape:javascript}{literal}</span></a> <a href="#" class="cancel">{/literal}{'Cancel'|translate|escape:javascript}{literal}</a></span>'; 
    189             userDetails += '<a class="icon-key changePasswordOpen" href="#">{/literal}{'Change password'|translate|escape:javascript}{literal}</a>'; 
    190             userDetails += '<br>'; 
     185          /* Prepare data for template */ 
     186          user.statusOptions = []; 
     187          jQuery("#action select[name=status] option").each(function() { 
     188            var option = {value:jQuery(this).val(), label:jQuery(this).html(), isSelected:false}; 
     189           
     190            if (user.status == jQuery(this).val()) { 
     191              option.isSelected = true; 
     192            } 
     193           
     194            user.statusOptions.push(option); 
     195          }); 
     196           
     197          user.levelOptions = []; 
     198          jQuery("#action select[name=level] option").each(function() { 
     199            var option = {value:jQuery(this).val(), label:jQuery(this).html(), isSelected:false}; 
     200           
     201            if (user.level == jQuery(this).val()) { 
     202              option.isSelected = true; 
     203            } 
     204           
     205            user.levelOptions.push(option); 
     206          }); 
     207           
     208          user.groupOptions = []; 
     209          jQuery("#action select[name=associate] option").each(function() { 
     210            var option = {value:jQuery(this).val(), label:jQuery(this).html(), isSelected:false}; 
     211           
     212            if (user.groups.indexOf( parseInt(jQuery(this).val()) ) != -1) { 
     213              option.isSelected = true; 
     214            } 
     215           
     216            user.groupOptions.push(option); 
     217          }); 
     218           
     219          user.themeOptions = []; 
     220          jQuery("#action select[name=theme] option").each(function() { 
     221            var option = {value:jQuery(this).val(), label:jQuery(this).html(), isSelected:false}; 
     222           
     223            if (user.theme == jQuery(this).val()) { 
     224              option.isSelected = true; 
     225            } 
     226           
     227            user.themeOptions.push(option); 
     228          }); 
     229           
     230          user.languageOptions = []; 
     231          jQuery("#action select[name=language] option").each(function() { 
     232            var option = {value:jQuery(this).val(), label:jQuery(this).html(), isSelected:false}; 
     233           
     234            if (user.language == jQuery(this).val()) { 
     235              option.isSelected = true; 
     236            } 
     237           
     238            user.languageOptions.push(option); 
     239          }); 
     240           
     241          user.isGuest = (parseInt(userId) == guestUser); 
     242          user.isProtected = (protectedUsers.indexOf(parseInt(userId)) != -1); 
     243           
     244          user.registeredOn_string = sprintf( 
     245            registeredOn_pattern, 
     246            user.registration_date_string, 
     247            user.registration_date_since 
     248          ); 
     249           
     250          user.lastVisit_string = ""; 
     251          if (typeof user.last_visit != 'undefined') { 
     252            user.lastVisit_string = sprintf(lastVisit_pattern, user.last_visit_string, user.last_visit_since); 
    191253          } 
    192  
    193           userDetails += '<a target="_blank" href="admin.php?page=user_perm&amp;user_id='+userId+'" class="icon-lock">{/literal}{'Permissions'|translate|escape:javascript}{literal}</a>'; 
    194  
    195           if (protectedUsers.indexOf(parseInt(userId)) == -1) { 
    196             userDetails += '<br><span class="userDelete"><img class="loading" src="themes/default/images/ajax-loader-small.gif" style="display:none;"><a href="#" class="icon-trash" data-user_id="'+userId+'">{/literal}{'Delete'|translate|escape:javascript}{literal}</a></span>'; 
    197           } 
    198  
    199           userDetails += '</div>'; 
    200  
    201           userDetails += '<span class="changeUsernameOpen"><strong class="username">'+user.username+'</strong>'; 
    202  
    203           if (parseInt(userId) != guestUser) { 
    204             userDetails += ' <a href="#" class="icon-pencil">{/literal}{'Change username'|translate|escape:javascript}{literal}</a></span>'; 
    205             userDetails += '<span class="changeUsername" style="display:none">'; 
    206             userDetails += '<input type="text"> <a href="#" class="buttonLike updateUsername"><img src="themes/default/images/ajax-loader-small.gif" style="margin-bottom:-1px;margin-left:1px;display:none;"><span class="text">{/literal}{'Submit'|translate}{literal}</span></a> <a href="#" class="cancel">{/literal}{'Cancel'|translate|escape:javascript}{literal}</a>'; 
    207           } 
    208  
    209           userDetails += '</span>'; 
    210  
    211           userDetails += '<div class="userStats">'; 
    212           userDetails += sprintf(registeredOn_pattern, user.registration_date_string, user.registration_date_since); 
    213  
    214           if (typeof user.last_visit != 'undefined') { 
    215             userDetails += '<br>'+sprintf(lastVisit_pattern, user.last_visit_string, user.last_visit_since); 
    216           } 
    217  
    218           userDetails += '</div>'; 
    219           userDetails += '<div class="userPropertiesContainer">'; 
    220           userDetails += '<input type="hidden" name="user_id" value="'+user.id+'">'; 
    221           userDetails += '<div class="userPropertiesSet">'; 
    222           userDetails += '<div class="userPropertiesSetTitle">{/literal}{'Properties'|translate}{literal}</div>'; 
    223  
    224           userDetails += '<div class="userProperty"><strong>{/literal}{'Email address'|translate}{literal}</strong>'; 
    225           userDetails += '<br>'; 
    226           if (parseInt(userId) != guestUser) { 
    227             userDetails += '<input name="email" type="text" value="'+ (user.email||'') +'">'; 
    228           } 
    229           else { 
    230             userDetails += '{/literal}{'N/A'|translate}{literal}'; 
    231           } 
    232           userDetails += '</div>'; 
    233  
    234           userDetails += '<div class="userProperty"><strong>{/literal}{'Status'|translate}{literal}</strong>'; 
    235           userDetails += '<br>'; 
    236  
    237           if (protectedUsers.indexOf(parseInt(userId)) == -1) { 
    238             userDetails += '<select name="status">'; 
    239             jQuery("#action select[name=status] option").each(function() { 
    240               var selected = ''; 
    241               if (user.status == jQuery(this).val()) { 
    242                 selected = ' selected="selected"'; 
    243               } 
    244               userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; 
    245             }); 
    246             userDetails += '</select>'; 
    247           } 
    248           else { 
    249             jQuery("#action select[name=status] option").each(function() { 
    250               if (user.status == jQuery(this).val()) { 
    251                 userDetails += jQuery(this).html(); 
    252               } 
    253             }); 
    254           } 
    255           userDetails += '</div>'; 
    256  
    257           userDetails += '<div class="userProperty"><strong>{/literal}{'Privacy level'|translate}{literal}</strong>'; 
    258           userDetails += '<br><select name="level">'; 
    259           jQuery("#action select[name=level] option").each(function() { 
    260             var selected = ''; 
    261             if (user.level == jQuery(this).val()) { 
    262               selected = ' selected="selected"'; 
     254           
     255          user.updateString = sprintf( 
     256            "{/literal}{'User %s updated'|translate|escape:javascript}{literal}", 
     257            user.username 
     258          ); 
     259           
     260          user.email = user.email || ''; 
     261           
     262          jQuery("#action select[name=status] option").each(function() { 
     263            if (user.status == jQuery(this).val()) { 
     264              user.statusLabel = jQuery(this).html(); 
    263265            } 
    264             userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; 
    265266          }); 
    266           userDetails += '</select></div>'; 
    267  
    268           var checked = ''; 
    269           if (user.enabled_high == 'true') { 
    270             checked = ' checked="checked"'; 
    271           } 
    272           userDetails += '<div class="userProperty"><label><input type="checkbox" name="enabled_high"'+checked+'> <strong>{/literal}{'High definition enabled'|translate}{literal}</strong></label>'; 
    273           userDetails += '</div>'; 
    274  
    275           userDetails += '<div class="userProperty"><strong>{/literal}{'Groups'|translate}{literal}</strong>'; 
    276           userDetails += '<br><select multiple class="chzn-select" style="width:340px;" name="group_id[]">'; 
    277           jQuery("#action select[name=associate] option").each(function() { 
    278             var selected = ''; 
    279             if (user.groups.indexOf( parseInt(jQuery(this).val()) ) != -1) { 
    280               selected = ' selected="selected"'; 
    281             } 
    282             userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; 
    283           }); 
    284           userDetails += '</select></div>'; 
    285           // userDetails += '<br>'+user.groups.join(",")+'</div>'; 
    286  
    287           userDetails += '</div><div class="userPropertiesSet userPrefs">'; 
    288           userDetails += '<div class="userPropertiesSetTitle">{/literal}{'Preferences'|translate}{literal}</div>'; 
    289  
    290           userDetails += '<div class="userProperty"><strong class="nb_image_page_infos"></strong>'; 
    291           userDetails += '<div class="nb_image_page"></div>'; 
    292           userDetails += '<input type="hidden" name="nb_image_page" value="'+user.nb_image_page+'">'; 
    293           userDetails += '</div>'; 
    294  
    295           userDetails += '<div class="userProperty"><strong>{/literal}{'Theme'|translate|escape:javascript}{literal}</strong>'; 
    296           userDetails += '<br><select name="theme">'; 
    297           jQuery("#action select[name=theme] option").each(function() { 
    298             var selected = ''; 
    299             if (user.theme == jQuery(this).val()) { 
    300               selected = ' selected="selected"'; 
    301             } 
    302             userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; 
    303           }); 
    304           userDetails += '</select></div>'; 
    305  
    306           userDetails += '<div class="userProperty"><strong>{/literal}{'Language'|translate}{literal}</strong>'; 
    307           userDetails += '<br><select name="language">'; 
    308           jQuery("#action select[name=language] option").each(function() { 
    309             var selected = ''; 
    310             if (user.language == jQuery(this).val()) { 
    311               selected = ' selected="selected"'; 
    312             } 
    313             userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; 
    314           }); 
    315           userDetails += '</select></div>'; 
    316  
    317           userDetails += '<div class="userProperty"><strong>{/literal}{'Recent period'|translate}{literal}</strong> <span class="recent_period_infos"></span>'; 
    318           userDetails += '<div class="recent_period"></div>'; 
    319           userDetails += '<input type="hidden" name="recent_period" value="'+user.recent_period+'">'; 
    320           userDetails += '</div>'; 
    321  
    322           var checked = ''; 
    323           if (user.expand == 'true') { 
    324             checked = ' checked="checked"'; 
    325           } 
    326           userDetails += '<div class="userProperty"><label><input type="checkbox" name="expand"'+checked+'> <strong>{/literal}{'Expand all albums'|translate}{literal}</strong></label>'; 
    327           userDetails += '</div>'; 
    328  
    329           var checked = ''; 
    330           if (user.show_nb_comments == 'true') { 
    331             checked = ' checked="checked"'; 
    332           } 
    333           userDetails += '<div class="userProperty"><label><input type="checkbox" name="show_nb_comments"'+checked+'> <strong>{/literal}{'Show number of comments'|translate}{literal}</strong></label>'; 
    334           userDetails += '</div>'; 
    335  
    336           var checked = ''; 
    337           if (user.show_nb_hits == 'true') { 
    338             checked = ' checked="checked"'; 
    339           } 
    340           userDetails += '<div class="userProperty"><label><input type="checkbox" name="show_nb_hits"'+checked+'> <strong>{/literal}{'Show number of hits'|translate}{literal}</strong></label>'; 
    341           userDetails += '</div>'; 
    342           userDetails += '</div>'; 
    343           userDetails += '<div style="clear:both"></div></div>'; 
    344  
    345           userDetails += '<span class="infos propertiesUpdateDone" style="display:none">&#x2714; '; 
    346           userDetails += sprintf("{/literal}{'User %s updated'|translate|escape:javascript}{literal}", user.username); 
    347           userDetails += '</span>'; 
    348           userDetails += '<input type="submit" value="{/literal}{'Update user'|translate|escape:javascript}{literal}" style="display:none;" data-user_id="'+userId+'">'; 
    349           userDetails += '<img class="submitWait" src="themes/default/images/ajax-loader-small.gif" style="display:none">' 
    350           userDetails += '</form>'; 
    351  
    352           jQuery("#user"+userId).append(userDetails); 
     267           
     268                      /* Render the underscore template */ 
     269          _.templateSettings.variable = "user"; 
     270           
     271          var template = _.template( 
     272            jQuery("script.userDetails").html() 
     273                      ); 
     274           
     275          jQuery("#user"+userId).append(template(user)); 
     276 
    353277          jQuery(".chzn-select").chosen(); 
    354278 
     
    10871011 
    10881012</form>  
     1013 
     1014{* Underscore Template Definition *} 
     1015<script type="text/template" class="userDetails"> 
     1016<form> 
     1017  <div class="userActions"> 
     1018<% if (!user.isGuest) { %> 
     1019    <span class="changePasswordDone infos" style="display:none">&#x2714; {'Password updated'|translate}</span> 
     1020    <span class="changePassword" style="display:none">{'New password'|translate} <input type="text"> <a href="#" class="buttonLike updatePassword"><img src="themes/default/images/ajax-loader-small.gif" style="margin-bottom:-1px;margin-left:1px;display:none;"><span class="text">{'Submit'|translate}</span></a> <a href="#" class="cancel">{'Cancel'|translate}</a></span> 
     1021    <a class="icon-key changePasswordOpen" href="#">{'Change password'|translate}</a> 
     1022    <br> 
     1023<% } %> 
     1024 
     1025    <a target="_blank" href="admin.php?page=user_perm&amp;user_id=<%- user.id %>" class="icon-lock">{'Permissions'|translate}</a> 
     1026 
     1027<% if (!user.isProtected) { %> 
     1028    <br><span class="userDelete"><img class="loading" src="themes/default/images/ajax-loader-small.gif" style="display:none;"><a href="#" class="icon-trash" data-user_id="<%- user.id %>">{'Delete'|translate}</a></span> 
     1029<% } %> 
     1030 
     1031  </div> 
     1032 
     1033  <span class="changeUsernameOpen"><strong class="username"><%- user.username %></strong> 
     1034 
     1035<% if (!user.isGuest) { %> 
     1036  <a href="#" class="icon-pencil">{'Change username'|translate}</a></span> 
     1037  <span class="changeUsername" style="display:none"> 
     1038  <input type="text"> <a href="#" class="buttonLike updateUsername"><img src="themes/default/images/ajax-loader-small.gif" style="margin-bottom:-1px;margin-left:1px;display:none;"><span class="text">{'Submit'|translate}</span></a> <a href="#" class="cancel">{'Cancel'|translate}</a> 
     1039<% } %> 
     1040 
     1041  </span> 
     1042 
     1043  <div class="userStats"><%- user.registeredOn_string %><br><%- user.lastVisit_string %></div> 
     1044 
     1045  <div class="userPropertiesContainer"> 
     1046    <input type="hidden" name="user_id" value="<%- user.id %>"> 
     1047    <div class="userPropertiesSet"> 
     1048      <div class="userPropertiesSetTitle">{'Properties'|translate}</div> 
     1049 
     1050      <div class="userProperty"><strong>{'Email address'|translate}</strong> 
     1051        <br> 
     1052<% if (!user.isGuest) { %> 
     1053        <input name="email" type="text" value="<%- user.email %>"> 
     1054<% } else { %> 
     1055      {'N/A'|translate} 
     1056<% } %> 
     1057      </div> 
     1058 
     1059      <div class="userProperty"><strong>{'Status'|translate}</strong> 
     1060        <br> 
     1061<% if (!user.isProtected) { %> 
     1062        <select name="status"> 
     1063  <% _.each( user.statusOptions, function( option ){ %> 
     1064          <option value="<%- option.value%>" <% if (option.isSelected) { %>selected="selected"<% } %>><%- option.label %></option> 
     1065  <% }); %> 
     1066        </select> 
     1067<% } else { %> 
     1068        <%- user.statusLabel %> 
     1069<% } %> 
     1070      </div> 
     1071 
     1072      <div class="userProperty"><strong>{'Privacy level'|translate}</strong> 
     1073        <br> 
     1074        <select name="level"> 
     1075<% _.each( user.levelOptions, function( option ){ %> 
     1076          <option value="<%- option.value%>" <% if (option.isSelected) { %>selected="selected"<% } %>><%- option.label %></option> 
     1077<% }); %> 
     1078        </select> 
     1079      </div> 
     1080 
     1081      <div class="userProperty"><label><input type="checkbox" name="enabled_high"<% if (user.enabled_high == 'true') { %> checked="checked"<% } %>> <strong>{'High definition enabled'|translate}</strong></label></div> 
     1082 
     1083      <div class="userProperty"><strong>{'Groups'|translate}</strong><br> 
     1084        <select multiple class="chzn-select" style="width:340px;" name="group_id[]"> 
     1085<% _.each( user.groupOptions, function( option ){ %> 
     1086          <option value="<%- option.value%>" <% if (option.isSelected) { %>selected="selected"<% } %>><%- option.label %></option> 
     1087<% }); %> 
     1088        </select> 
     1089      </div> 
     1090    </div> 
     1091 
     1092    <div class="userPropertiesSet userPrefs"> 
     1093      <div class="userPropertiesSetTitle">{'Preferences'|translate}</div> 
     1094 
     1095      <div class="userProperty"><strong class="nb_image_page_infos"></strong> 
     1096        <div class="nb_image_page"></div> 
     1097        <input type="hidden" name="nb_image_page" value="<%- user.nb_image_page %>"> 
     1098      </div> 
     1099 
     1100      <div class="userProperty"><strong>{'Theme'|translate}</strong><br> 
     1101        <select name="theme"> 
     1102<% _.each( user.themeOptions, function( option ){ %> 
     1103          <option value="<%- option.value%>" <% if (option.isSelected) { %>selected="selected"<% } %>><%- option.label %></option> 
     1104<% }); %> 
     1105        </select> 
     1106      </div> 
     1107 
     1108      <div class="userProperty"><strong>{'Language'|translate}</strong><br> 
     1109        <select name="language"> 
     1110<% _.each( user.languageOptions, function( option ){ %> 
     1111          <option value="<%- option.value%>" <% if (option.isSelected) { %>selected="selected"<% } %>><%- option.label %></option> 
     1112<% }); %> 
     1113        </select> 
     1114      </div> 
     1115 
     1116      <div class="userProperty"><strong>{'Recent period'|translate}</strong> <span class="recent_period_infos"></span> 
     1117        <div class="recent_period"></div> 
     1118        <input type="hidden" name="recent_period" value="<%- user.recent_period %>"> 
     1119      </div> 
     1120 
     1121      <div class="userProperty"><label><input type="checkbox" name="expand"<% if (user.expand == 'true') { %> checked="checked"<% }%>> <strong>{'Expand all albums'|translate}</strong></label></div> 
     1122 
     1123      <div class="userProperty"><label><input type="checkbox" name="show_nb_comments"<% if (user.show_nb_comments == 'true') { %> checked="checked"<% }%>> <strong>{'Show number of comments'|translate}</strong></label></div> 
     1124 
     1125      <div class="userProperty"><label><input type="checkbox" name="show_nb_hits"<% if (user.show_nb_hits == 'true') { %> checked="checked"<% }%>> <strong>{'Show number of hits'|translate}</strong></label></div> 
     1126 
     1127    </div> 
     1128 
     1129    <div style="clear:both"></div> 
     1130  </div> {* userPropertiesContainer *} 
     1131 
     1132  <span class="infos propertiesUpdateDone" style="display:none">&#x2714; <%- user.updateString %></span> 
     1133    
     1134  <input type="submit" value="{'Update user'|translate|escape:html}" style="display:none;" data-user_id="<%- user.id %>"> 
     1135  <img class="submitWait" src="themes/default/images/ajax-loader-small.gif" style="display:none"> 
     1136</form> 
     1137</script> 
Note: See TracChangeset for help on using the changeset viewer.