src/main/resources/templates/editProfile.html

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