src/main/resources/templates/editProfile.html

   1 <%include include/head.html>
   2
   3         <script type="application/javascript">
   4                 function recheckMoveButtons() {
   5                         $("#sone .profile-field").each(function() {
   6                                 $(".move-up-field", this).toggleClass("hidden", $(this).prev(".profile-field").length === 0);
   7                                 $(".move-down-field", this).toggleClass("hidden", $(this).next(".profile-field").length === 0);
   8                         });
   9                 }
  10
  11                 $(function() {
  12                         getTranslation("WebInterface.DefaultText.FirstName", function(firstNameDefaultText) {
  13                                 registerInputTextareaSwap("#sone #edit-profile input[name=first-name]", firstNameDefaultText, "first-name", true, true);
  14                         });
  15                         getTranslation("WebInterface.DefaultText.MiddleName", function(middleNameDefaultText) {
  16                                 registerInputTextareaSwap("#sone #edit-profile input[name=middle-name]", middleNameDefaultText, "middle-name", true, true);
  17                         });
  18                         getTranslation("WebInterface.DefaultText.LastName", function(lastNameDefaultText) {
  19                                 registerInputTextareaSwap("#sone #edit-profile input[name=last-name]", lastNameDefaultText, "last-name", true, true);
  20                         });
  21                         getTranslation("WebInterface.DefaultText.BirthDay", function(birthDayDefaultText) {
  22                                 registerInputTextareaSwap("#sone #edit-profile input[name=birth-day]", birthDayDefaultText, "birth-day", true, true);
  23                         });
  24                         getTranslation("WebInterface.DefaultText.BirthMonth", function(birthMonthDefaultText) {
  25                                 registerInputTextareaSwap("#sone #edit-profile input[name=birth-month]", birthMonthDefaultText, "birth-month", true, true);
  26                         });
  27                         getTranslation("WebInterface.DefaultText.BirthYear", function(birthYearDefaultText) {
  28                                 registerInputTextareaSwap("#sone #edit-profile input[name=birth-year]", birthYearDefaultText, "birth-year", true, true);
  29                         });
  30                         getTranslation("WebInterface.DefaultText.FieldName", function(fieldNameDefaultText) {
  31                                 registerInputTextareaSwap("#sone #add-profile-field input[name=field-name]", fieldNameDefaultText, "field-name", false, true);
  32                         });
  33
  34                         <%foreach fields field>
  35                                 registerInputTextareaSwap("#sone #edit-profile input[name=field-<% loop.count>]", <% field.key|js>, "field-<% loop.count>", true, true);
  36                         <%/foreach>
  37
  38                         /* hide all the labels. */
  39                         $("#sone #edit-profile label, #sone #add-profile-field label").hide();
  40
  41                         /* ajaxify the delete buttons. */
  42                         getTranslation("Page.EditProfile.Fields.Button.ReallyDelete", function(reallyDeleteText) {
  43                                 $("#sone #edit-profile .delete-field-name button").each(function() {
  44                                         const confirmButton = $(this).clone().addClass("hidden").addClass("confirm").text(reallyDeleteText).insertAfter(this);
  45                                         (function(deleteButton, confirmButton) {
  46                                                 deleteButton.click(function() {
  47                                                         deleteButton.fadeOut("slow", function() {
  48                                                                 confirmButton.fadeIn("slow");
  49                                                                 $(document).one("click", function() {
  50                                                                         if (this !== confirmButton.get(0)) {
  51                                                                                 confirmButton.fadeOut("slow", function() {
  52                                                                                         deleteButton.fadeIn("slow");
  53                                                                                 });
  54                                                                         }
  55                                                                         return false;
  56                                                                 });
  57                                                         });
  58                                                         return false;
  59                                                 });
  60                                                 confirmButton.click(function() {
  61                                                         confirmButton.fadeOut("slow");
  62                                                         const buttonName = confirmButton.prop("name");
  63                                                         const fieldId = buttonName.substring("delete-field-".length);
  64                                                         deleteProfileField(fieldId);
  65                                                         recheckMoveButtons();
  66                                                         return false;
  67                                                 });
  68                                         })($(this), confirmButton);
  69                                 });
  70                         });
  71
  72                         /* ajaxify the edit button. */
  73                         $("#sone #edit-profile .edit-field-name button").each(function() {
  74                                 const profileField = $(this).parents(".profile-field");
  75                                 const fieldNameElement = profileField.find(".name");
  76                                 const inputField = $("input[type=text].short", profileField);
  77                                 const confirmButton = $("button.confirm", profileField);
  78                                 const cancelButton = $("button.cancel", profileField);
  79                                 (function(editButton, inputField, confirmButton, cancelButton, fieldNameElement) {
  80                                         const cleanUp = function(editButton, inputField, confirmButton, cancelButton, fieldNameElement) {
  81                                                 editButton.removeAttr("disabled");
  82                                                 inputField.addClass("hidden");
  83                                                 confirmButton.addClass("hidden");
  84                                                 cancelButton.addClass("hidden");
  85                                                 fieldNameElement.removeClass("hidden");
  86                                         };
  87                                         confirmButton.click(function() {
  88                                                 inputField.prop("disabled", "disabled");
  89                                                 confirmButton.prop("disabled", "disabled");
  90                                                 cancelButton.prop("disabled", "disabled");
  91                                                 editProfileField(confirmButton.parents(".profile-field").prop("id"), inputField.val(), function() {
  92                                                         fieldNameElement.text(inputField.val());
  93                                                         cleanUp(editButton, inputField, confirmButton, cancelButton, fieldNameElement);
  94                                                 });
  95                                                 return false;
  96                                         });
  97                                         cancelButton.click(function() {
  98                                                 cleanUp(editButton, inputField, confirmButton, cancelButton, fieldNameElement);
  99                                                 return false;
 100                                         });
 101                                         inputField.keypress(function(event) {
 102                                                 if (event.which === 13) {
 103                                                         confirmButton.click();
 104                                                         return false;
 105                                                 } else if (event.which === 27) {
 106                                                         cancelButton.click();
 107                                                         return false;
 108                                                 }
 109                                         });
 110                                         editButton.click(function() {
 111                                                 editButton.prop("disabled", "disabled");
 112                                                 fieldNameElement.addClass("hidden");
 113                                                 inputField.removeAttr("disabled").val(fieldNameElement.text()).removeClass("hidden").focus().select();
 114                                                 confirmButton.removeAttr("disabled").removeClass("hidden");
 115                                                 cancelButton.removeAttr("disabled").removeClass("hidden");
 116                                                 return false;
 117                                         });
 118                                 })($(this), inputField, confirmButton, cancelButton, fieldNameElement);
 119                         });
 120
 121                         /* ajaxify “move up” and “move down” buttons. */
 122                         $("#sone .profile-field .move-down-field button").click(function() {
 123                                 const profileField = $(this).parents(".profile-field");
 124                                 moveProfileFieldDown(profileField.prop("id"), function() {
 125                                         profileField.insertAfter(profileField.next());
 126                                         recheckMoveButtons();
 127                                 });
 128                                 return false;
 129                         });
 130                         $("#sone .profile-field .move-up-field button").click(function() {
 131                                 const profileField = $(this).parents(".profile-field");
 132                                 moveProfileFieldUp(profileField.prop("id"), function() {
 133                                         profileField.insertBefore(profileField.prev());
 134                                         recheckMoveButtons();
 135                                 });
 136                                 return false;
 137                         });
 138                 });
 139         </script>
 140
 141         <h1><%= Page.EditProfile.Page.Title|l10n|html></h1>
 142
 143         <p><%= Page.EditProfile.Page.Description|l10n|html></p>
 144         <p><%= Page.EditProfile.Page.Hint.Optionality|l10n|html></p>
 145
 146         <form id="edit-profile" method="post">
 147                 <input type="hidden" name="formPassword" value="<% formPassword|html>" />
 148
 149                 <div>
 150                         <label for="first-name"><%= Page.EditProfile.Label.FirstName|l10n|html></label>
 151                         <input type="text" name="first-name" value="<% firstName|html>" />
 152                 </div>
 153
 154                 <div>
 155                         <label for="middle-name"><%= Page.EditProfile.Label.MiddleName|l10n|html></label>
 156                         <input type="text" name="middle-name" value="<% middleName|html>" />
 157                 </div>
 158
 159                 <div>
 160                         <label for="last-name"><%= Page.EditProfile.Label.LastName|l10n|html></label>
 161                         <input type="text" name="last-name" value="<% lastName|html>" />
 162                 </div>
 163
 164                 <h1><%= Page.EditProfile.Birthday.Title|l10n|html></h1>
 165
 166                 <div id="birth-day">
 167                         <label for="birth-day"><%= Page.EditProfile.Birthday.Label.Day|l10n|html></label>
 168                         <input type="text" name="birth-day" value="<% birthDay|html>" />
 169                 </div>
 170
 171                 <div id="birth-month">
 172                         <label for="birth-month"><%= Page.EditProfile.Birthday.Label.Month|l10n|html></label>
 173                         <input type="text" name="birth-month" value="<% birthMonth|html>" />
 174                 </div>
 175
 176                 <div id="birth-year">
 177                         <label for="birth-year"><%= Page.EditProfile.Birthday.Label.Year|l10n|html></label>
 178                         <input type="text" name="birth-year" value="<% birthYear|html>" />
 179                 </div>
 180
 181                 <h1><%= Page.EditProfile.Avatar.Title|l10n|html></h1>
 182
 183                 <p><%= Page.EditProfile.Avatar.Description|l10n|html></p>
 184
 185                 <ul id="avatar-selection">
 186                         <li id="no-avatar">
 187                                 <input type="radio" name="avatarId" value="none"<%ifnull avatarId> checked="checked"<%/if>/>
 188                                 <%= Page.EditProfile.Avatar.Delete|l10n|html>
 189                         </li>
 190                         <%foreach currentSone.allImages image>
 191                                 <li>
 192                                         <input type="radio" name="avatarId" value="<%image.id|html>"<%if avatarId|match value=image.id> checked="checked"<%/if>/>
 193                                         <div class="post-avatar"><% image|image-link max-width==48 max-height==48 mode==enlarge title=image.title></div>
 194                                 </li>
 195                         <%/foreach>
 196                 </ul>
 197
 198                 <div>
 199                         <button type="submit" name="save-profile" value="true"><%= Page.EditProfile.Button.Save|l10n|html></button>
 200                 </div>
 201
 202                 <h1><%= Page.EditProfile.Fields.Title|l10n|html></h1>
 203
 204                 <p><%= Page.EditProfile.Fields.Description|l10n|html></p>
 205
 206                 <%foreach fields field fieldLoop>
 207                         <div class="profile-field" id="<% field.id|html>">
 208                                 <div class="name"><% field.name|html></div>
 209                                 <input class="short hidden" type="text"><button class="edit confirm hidden" type="button">✔</button><button class="cancel hidden" type="button">✘</button>
 210                                 <div class="edit-field-name"><button type="submit" name="edit-field-<% field.id|html>" value="true"><%= Page.EditProfile.Fields.Button.Edit|l10n|html></button></div>
 211                                 <div class="delete-field-name"><button type="submit" name="delete-field-<% field.id|html>" value="true"><%= Page.EditProfile.Fields.Button.Delete|l10n|html></button></div>
 212                                 <div class="<%if fieldLoop.last>hidden <%/if>move-down-field"><button type="submit" name="move-down-field-<% field.id|html>" value="true"><%= Page.EditProfile.Fields.Button.MoveDown|l10n|html></button></div>
 213                                 <div class="<%if fieldLoop.first>hidden <%/if>move-up-field"><button type="submit" name="move-up-field-<% field.id|html>" value="true"><%= Page.EditProfile.Fields.Button.MoveUp|l10n|html></button></div>
 214                                 <div class="value"><input type="text" name="field-<% field.id|html>" value="<% field.value|html>" /></div>
 215                         </div>
 216
 217                         <%if fieldLoop.last>
 218                                 <div>
 219                                         <button type="submit" name="save-profile" value="true"><%= Page.EditProfile.Button.Save|l10n|html></button>
 220                                 </div>
 221                         <%/if>
 222                 <%/foreach>
 223
 224         </form>
 225
 226         <form id="add-profile-field" method="post">
 227                 <input type="hidden" name="formPassword" value="<% formPassword|html>" />
 228
 229                 <a name="profile-fields"></a>
 230                 <h2><%= Page.EditProfile.Fields.AddField.Title|l10n|html></h2>
 231
 232                 <%if duplicateFieldName>
 233                         <p><%= Page.EditProfile.Error.DuplicateFieldName|l10n|replace needle=="{fieldName}" replacement=fieldName|html></p>
 234                 <%/if>
 235
 236                 <div id="new-field">
 237                         <label for="new-field"><%= Page.EditProfile.Fields.AddField.Label.Name|l10n|html></label>
 238                         <input type="text" name="field-name" value="" />
 239                         <button type="submit" name="add-field" value="true"><%= Page.EditProfile.Fields.AddField.Button.AddField|l10n|html></button>
 240                 </div>
 241
 242         </form>
 243
 244 <%include include/tail.html>