diff options
author | plegall <plg@piwigo.org> | 2013-12-27 20:50:51 +0000 |
---|---|---|
committer | plegall <plg@piwigo.org> | 2013-12-27 20:50:51 +0000 |
commit | 4c4fb7d9d9b5eaf1632de203202c28b4c9013860 (patch) | |
tree | 532eb2e00149555cf6ace4a68ef1afb247ca0c54 /admin/themes/default/template | |
parent | 33c683e1592e7b3a2db2d816843e7de631c4c382 (diff) |
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.
git-svn-id: http://piwigo.org/svn/trunk@26270 68402e56-0260-453c-a942-63ccdbb3a9ee
Diffstat (limited to 'admin/themes/default/template')
-rw-r--r-- | admin/themes/default/template/user_list.tpl | 353 |
1 files changed, 201 insertions, 152 deletions
diff --git a/admin/themes/default/template/user_list.tpl b/admin/themes/default/template/user_list.tpl index 36e2daa16..a491cae17 100644 --- a/admin/themes/default/template/user_list.tpl +++ b/admin/themes/default/template/user_list.tpl @@ -6,6 +6,8 @@ {combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'} {combine_css path="themes/default/js/plugins/chosen.css"} +{combine_script id='jquery.underscore' load='footer' path='themes/default/js/plugins/underscore.js'} + {combine_script id='jquery.ui.slider' require='jquery.ui' load='footer' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'} {combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"} @@ -180,176 +182,98 @@ jQuery(document).ready(function() { if (data.stat == 'ok') { var user = data.result.users[0]; - var userDetails = '<form>'; - userDetails += '<div class="userActions">'; - - if (parseInt(userId) != guestUser) { - userDetails += '<span class="changePasswordDone infos" style="display:none">✔ {/literal}{'Password updated'|translate|escape:javascript}{literal}</span>'; - 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>'; - userDetails += '<a class="icon-key changePasswordOpen" href="#">{/literal}{'Change password'|translate|escape:javascript}{literal}</a>'; - userDetails += '<br>'; - } - - userDetails += '<a target="_blank" href="admin.php?page=user_perm&user_id='+userId+'" class="icon-lock">{/literal}{'Permissions'|translate|escape:javascript}{literal}</a>'; - - if (protectedUsers.indexOf(parseInt(userId)) == -1) { - 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>'; - } - - userDetails += '</div>'; - - userDetails += '<span class="changeUsernameOpen"><strong class="username">'+user.username+'</strong>'; - - if (parseInt(userId) != guestUser) { - userDetails += ' <a href="#" class="icon-pencil">{/literal}{'Change username'|translate|escape:javascript}{literal}</a></span>'; - userDetails += '<span class="changeUsername" style="display:none">'; - 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>'; - } - - userDetails += '</span>'; - - userDetails += '<div class="userStats">'; - userDetails += sprintf(registeredOn_pattern, user.registration_date_string, user.registration_date_since); - - if (typeof user.last_visit != 'undefined') { - userDetails += '<br>'+sprintf(lastVisit_pattern, user.last_visit_string, user.last_visit_since); - } - - userDetails += '</div>'; - userDetails += '<div class="userPropertiesContainer">'; - userDetails += '<input type="hidden" name="user_id" value="'+user.id+'">'; - userDetails += '<div class="userPropertiesSet">'; - userDetails += '<div class="userPropertiesSetTitle">{/literal}{'Properties'|translate}{literal}</div>'; - - userDetails += '<div class="userProperty"><strong>{/literal}{'Email address'|translate}{literal}</strong>'; - userDetails += '<br>'; - if (parseInt(userId) != guestUser) { - userDetails += '<input name="email" type="text" value="'+ (user.email||'') +'">'; - } - else { - userDetails += '{/literal}{'N/A'|translate}{literal}'; - } - userDetails += '</div>'; - - userDetails += '<div class="userProperty"><strong>{/literal}{'Status'|translate}{literal}</strong>'; - userDetails += '<br>'; - - if (protectedUsers.indexOf(parseInt(userId)) == -1) { - userDetails += '<select name="status">'; - jQuery("#action select[name=status] option").each(function() { - var selected = ''; - if (user.status == jQuery(this).val()) { - selected = ' selected="selected"'; - } - userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; - }); - userDetails += '</select>'; - } - else { - jQuery("#action select[name=status] option").each(function() { - if (user.status == jQuery(this).val()) { - userDetails += jQuery(this).html(); - } - }); - } - userDetails += '</div>'; - - userDetails += '<div class="userProperty"><strong>{/literal}{'Privacy level'|translate}{literal}</strong>'; - userDetails += '<br><select name="level">'; + /* Prepare data for template */ + user.statusOptions = []; + jQuery("#action select[name=status] option").each(function() { + var option = {value:jQuery(this).val(), label:jQuery(this).html(), isSelected:false}; + + if (user.status == jQuery(this).val()) { + option.isSelected = true; + } + + user.statusOptions.push(option); + }); + + user.levelOptions = []; jQuery("#action select[name=level] option").each(function() { - var selected = ''; + var option = {value:jQuery(this).val(), label:jQuery(this).html(), isSelected:false}; + if (user.level == jQuery(this).val()) { - selected = ' selected="selected"'; + option.isSelected = true; } - userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; + + user.levelOptions.push(option); }); - userDetails += '</select></div>'; - - var checked = ''; - if (user.enabled_high == 'true') { - checked = ' checked="checked"'; - } - userDetails += '<div class="userProperty"><label><input type="checkbox" name="enabled_high"'+checked+'> <strong>{/literal}{'High definition enabled'|translate}{literal}</strong></label>'; - userDetails += '</div>'; - - userDetails += '<div class="userProperty"><strong>{/literal}{'Groups'|translate}{literal}</strong>'; - userDetails += '<br><select multiple class="chzn-select" style="width:340px;" name="group_id[]">'; + + user.groupOptions = []; jQuery("#action select[name=associate] option").each(function() { - var selected = ''; + var option = {value:jQuery(this).val(), label:jQuery(this).html(), isSelected:false}; + if (user.groups.indexOf( parseInt(jQuery(this).val()) ) != -1) { - selected = ' selected="selected"'; + option.isSelected = true; } - userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; + + user.groupOptions.push(option); }); - userDetails += '</select></div>'; - // userDetails += '<br>'+user.groups.join(",")+'</div>'; - - userDetails += '</div><div class="userPropertiesSet userPrefs">'; - userDetails += '<div class="userPropertiesSetTitle">{/literal}{'Preferences'|translate}{literal}</div>'; - - userDetails += '<div class="userProperty"><strong class="nb_image_page_infos"></strong>'; - userDetails += '<div class="nb_image_page"></div>'; - userDetails += '<input type="hidden" name="nb_image_page" value="'+user.nb_image_page+'">'; - userDetails += '</div>'; - - userDetails += '<div class="userProperty"><strong>{/literal}{'Theme'|translate|escape:javascript}{literal}</strong>'; - userDetails += '<br><select name="theme">'; + + user.themeOptions = []; jQuery("#action select[name=theme] option").each(function() { - var selected = ''; + var option = {value:jQuery(this).val(), label:jQuery(this).html(), isSelected:false}; + if (user.theme == jQuery(this).val()) { - selected = ' selected="selected"'; + option.isSelected = true; } - userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; + + user.themeOptions.push(option); }); - userDetails += '</select></div>'; - - userDetails += '<div class="userProperty"><strong>{/literal}{'Language'|translate}{literal}</strong>'; - userDetails += '<br><select name="language">'; + + user.languageOptions = []; jQuery("#action select[name=language] option").each(function() { - var selected = ''; + var option = {value:jQuery(this).val(), label:jQuery(this).html(), isSelected:false}; + if (user.language == jQuery(this).val()) { - selected = ' selected="selected"'; + option.isSelected = true; } - userDetails += '<option value="'+jQuery(this).val()+'"'+selected+'>'+jQuery(this).html()+'</option>'; + + user.languageOptions.push(option); }); - userDetails += '</select></div>'; - - userDetails += '<div class="userProperty"><strong>{/literal}{'Recent period'|translate}{literal}</strong> <span class="recent_period_infos"></span>'; - userDetails += '<div class="recent_period"></div>'; - userDetails += '<input type="hidden" name="recent_period" value="'+user.recent_period+'">'; - userDetails += '</div>'; - - var checked = ''; - if (user.expand == 'true') { - checked = ' checked="checked"'; - } - userDetails += '<div class="userProperty"><label><input type="checkbox" name="expand"'+checked+'> <strong>{/literal}{'Expand all albums'|translate}{literal}</strong></label>'; - userDetails += '</div>'; - - var checked = ''; - if (user.show_nb_comments == 'true') { - checked = ' checked="checked"'; + + user.isGuest = (parseInt(userId) == guestUser); + user.isProtected = (protectedUsers.indexOf(parseInt(userId)) != -1); + + user.registeredOn_string = sprintf( + registeredOn_pattern, + user.registration_date_string, + user.registration_date_since + ); + + user.lastVisit_string = ""; + if (typeof user.last_visit != 'undefined') { + user.lastVisit_string = sprintf(lastVisit_pattern, user.last_visit_string, user.last_visit_since); } - userDetails += '<div class="userProperty"><label><input type="checkbox" name="show_nb_comments"'+checked+'> <strong>{/literal}{'Show number of comments'|translate}{literal}</strong></label>'; - userDetails += '</div>'; + + user.updateString = sprintf( + "{/literal}{'User %s updated'|translate|escape:javascript}{literal}", + user.username + ); + + user.email = user.email || ''; + + jQuery("#action select[name=status] option").each(function() { + if (user.status == jQuery(this).val()) { + user.statusLabel = jQuery(this).html(); + } + }); + + /* Render the underscore template */ + _.templateSettings.variable = "user"; + + var template = _.template( + jQuery("script.userDetails").html() + ); + + jQuery("#user"+userId).append(template(user)); - var checked = ''; - if (user.show_nb_hits == 'true') { - checked = ' checked="checked"'; - } - userDetails += '<div class="userProperty"><label><input type="checkbox" name="show_nb_hits"'+checked+'> <strong>{/literal}{'Show number of hits'|translate}{literal}</strong></label>'; - userDetails += '</div>'; - userDetails += '</div>'; - userDetails += '<div style="clear:both"></div></div>'; - - userDetails += '<span class="infos propertiesUpdateDone" style="display:none">✔ '; - userDetails += sprintf("{/literal}{'User %s updated'|translate|escape:javascript}{literal}", user.username); - userDetails += '</span>'; - userDetails += '<input type="submit" value="{/literal}{'Update user'|translate|escape:javascript}{literal}" style="display:none;" data-user_id="'+userId+'">'; - userDetails += '<img class="submitWait" src="themes/default/images/ajax-loader-small.gif" style="display:none">' - userDetails += '</form>'; - - jQuery("#user"+userId).append(userDetails); jQuery(".chzn-select").chosen(); /* nb_image_page slider */ @@ -1086,3 +1010,128 @@ span.infos, span.errors {background-image:none; padding:2px 5px; margin:0;border </fieldset> </form> + +{* Underscore Template Definition *} +<script type="text/template" class="userDetails"> +<form> + <div class="userActions"> +<% if (!user.isGuest) { %> + <span class="changePasswordDone infos" style="display:none">✔ {'Password updated'|translate}</span> + <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> + <a class="icon-key changePasswordOpen" href="#">{'Change password'|translate}</a> + <br> +<% } %> + + <a target="_blank" href="admin.php?page=user_perm&user_id=<%- user.id %>" class="icon-lock">{'Permissions'|translate}</a> + +<% if (!user.isProtected) { %> + <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> +<% } %> + + </div> + + <span class="changeUsernameOpen"><strong class="username"><%- user.username %></strong> + +<% if (!user.isGuest) { %> + <a href="#" class="icon-pencil">{'Change username'|translate}</a></span> + <span class="changeUsername" style="display:none"> + <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> +<% } %> + + </span> + + <div class="userStats"><%- user.registeredOn_string %><br><%- user.lastVisit_string %></div> + + <div class="userPropertiesContainer"> + <input type="hidden" name="user_id" value="<%- user.id %>"> + <div class="userPropertiesSet"> + <div class="userPropertiesSetTitle">{'Properties'|translate}</div> + + <div class="userProperty"><strong>{'Email address'|translate}</strong> + <br> +<% if (!user.isGuest) { %> + <input name="email" type="text" value="<%- user.email %>"> +<% } else { %> + {'N/A'|translate} +<% } %> + </div> + + <div class="userProperty"><strong>{'Status'|translate}</strong> + <br> +<% if (!user.isProtected) { %> + <select name="status"> + <% _.each( user.statusOptions, function( option ){ %> + <option value="<%- option.value%>" <% if (option.isSelected) { %>selected="selected"<% } %>><%- option.label %></option> + <% }); %> + </select> +<% } else { %> + <%- user.statusLabel %> +<% } %> + </div> + + <div class="userProperty"><strong>{'Privacy level'|translate}</strong> + <br> + <select name="level"> +<% _.each( user.levelOptions, function( option ){ %> + <option value="<%- option.value%>" <% if (option.isSelected) { %>selected="selected"<% } %>><%- option.label %></option> +<% }); %> + </select> + </div> + + <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> + + <div class="userProperty"><strong>{'Groups'|translate}</strong><br> + <select multiple class="chzn-select" style="width:340px;" name="group_id[]"> +<% _.each( user.groupOptions, function( option ){ %> + <option value="<%- option.value%>" <% if (option.isSelected) { %>selected="selected"<% } %>><%- option.label %></option> +<% }); %> + </select> + </div> + </div> + + <div class="userPropertiesSet userPrefs"> + <div class="userPropertiesSetTitle">{'Preferences'|translate}</div> + + <div class="userProperty"><strong class="nb_image_page_infos"></strong> + <div class="nb_image_page"></div> + <input type="hidden" name="nb_image_page" value="<%- user.nb_image_page %>"> + </div> + + <div class="userProperty"><strong>{'Theme'|translate}</strong><br> + <select name="theme"> +<% _.each( user.themeOptions, function( option ){ %> + <option value="<%- option.value%>" <% if (option.isSelected) { %>selected="selected"<% } %>><%- option.label %></option> +<% }); %> + </select> + </div> + + <div class="userProperty"><strong>{'Language'|translate}</strong><br> + <select name="language"> +<% _.each( user.languageOptions, function( option ){ %> + <option value="<%- option.value%>" <% if (option.isSelected) { %>selected="selected"<% } %>><%- option.label %></option> +<% }); %> + </select> + </div> + + <div class="userProperty"><strong>{'Recent period'|translate}</strong> <span class="recent_period_infos"></span> + <div class="recent_period"></div> + <input type="hidden" name="recent_period" value="<%- user.recent_period %>"> + </div> + + <div class="userProperty"><label><input type="checkbox" name="expand"<% if (user.expand == 'true') { %> checked="checked"<% }%>> <strong>{'Expand all albums'|translate}</strong></label></div> + + <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> + + <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> + + </div> + + <div style="clear:both"></div> + </div> {* userPropertiesContainer *} + + <span class="infos propertiesUpdateDone" style="display:none">✔ <%- user.updateString %></span> + + <input type="submit" value="{'Update user'|translate|escape:html}" style="display:none;" data-user_id="<%- user.id %>"> + <img class="submitWait" src="themes/default/images/ajax-loader-small.gif" style="display:none"> +</form> +</script> |