Changeset 26270


Ignore:
Timestamp:
Dec 27, 2013, 9:50:51 PM (11 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.