Add simple string encoding.
[Sone.git] / src / main / resources / templates / editProfile.html
1 <%include include/head.html>
2
3         <script language="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                                         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                                                         buttonName = confirmButton.attr("name");
63                                                         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                                 profileField = $(this).parents(".profile-field");
75                                 fieldNameElement = profileField.find(".name");
76                                 inputField = $("input[type=text].short", profileField);
77                                 confirmButton = $("button.confirm", profileField);
78                                 cancelButton = $("button.cancel", profileField);
79                                 (function(editButton, inputField, confirmButton, cancelButton, fieldNameElement) {
80                                         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.attr("disabled", "disabled");
89                                                 confirmButton.attr("disabled", "disabled");
90                                                 cancelButton.attr("disabled", "disabled");
91                                                 editProfileField(confirmButton.parents(".profile-field").attr("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.attr("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                                 profileField = $(this).parents(".profile-field");
124                                 moveProfileFieldDown(profileField.attr("id"), function() {
125                                         next = profileField.next();
126                                         current = profileField.insertAfter(next);
127                                         recheckMoveButtons();
128                                 });
129                                 return false;
130                         });
131                         $("#sone .profile-field .move-up-field button").click(function() {
132                                 profileField = $(this).parents(".profile-field");
133                                 moveProfileFieldUp(profileField.attr("id"), function() {
134                                         previous = profileField.prev();
135                                         current = profileField.insertBefore(previous);
136                                         recheckMoveButtons();
137                                 });
138                                 return false;
139                         });
140                 });
141         </script>
142
143         <h1><%= Page.EditProfile.Page.Title|l10n|html></h1>
144
145         <p><%= Page.EditProfile.Page.Description|l10n|html></p>
146         <p><%= Page.EditProfile.Page.Hint.Optionality|l10n|html></p>
147
148         <form id="edit-profile" method="post">
149                 <input type="hidden" name="formPassword" value="<% formPassword|html>" />
150
151                 <div>
152                         <label for="first-name"><%= Page.EditProfile.Label.FirstName|l10n|html></label>
153                         <input type="text" name="first-name" value="<% firstName|html>" />
154                 </div>
155
156                 <div>
157                         <label for="middle-name"><%= Page.EditProfile.Label.MiddleName|l10n|html></label>
158                         <input type="text" name="middle-name" value="<% middleName|html>" />
159                 </div>
160
161                 <div>
162                         <label for="last-name"><%= Page.EditProfile.Label.LastName|l10n|html></label>
163                         <input type="text" name="last-name" value="<% lastName|html>" />
164                 </div>
165
166                 <h1><%= Page.EditProfile.Birthday.Title|l10n|html></h1>
167
168                 <div id="birth-day">
169                         <label for="birth-day"><%= Page.EditProfile.Birthday.Label.Day|l10n|html></label>
170                         <input type="text" name="birth-day" value="<% birthDay|html>" />
171                 </div>
172
173                 <div id="birth-month">
174                         <label for="birth-month"><%= Page.EditProfile.Birthday.Label.Month|l10n|html></label>
175                         <input type="text" name="birth-month" value="<% birthMonth|html>" />
176                 </div>
177
178                 <div id="birth-year">
179                         <label for="birth-year"><%= Page.EditProfile.Birthday.Label.Year|l10n|html></label>
180                         <input type="text" name="birth-year" value="<% birthYear|html>" />
181                 </div>
182
183                 <div>
184                         <button type="submit" name="save-profile" value="true"><%= Page.EditProfile.Button.Save|l10n|html></button>
185                 </div>
186
187                 <h1><%= Page.EditProfile.Fields.Title|l10n|html></h1>
188
189                 <p><%= Page.EditProfile.Fields.Description|l10n|html></p>
190
191                 <%foreach fields field fieldLoop>
192                         <div class="profile-field" id="<% field.id|html>">
193                                 <div class="name"><% field.name|html></div>
194                                 <input class="short hidden" type="text"><button class="edit confirm hidden" type="button">✔</button><button class="cancel hidden" type="button">✘</button>
195                                 <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>
196                                 <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>
197                                 <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>
198                                 <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>
199                                 <div class="value"><input type="text" name="field-<% field.id|html>" value="<% field.value|html>" /></div>
200                         </div>
201
202                         <%if fieldLoop.last>
203                                 <div>
204                                         <button type="submit" name="save-profile" value="true"><%= Page.EditProfile.Button.Save|l10n|html></button>
205                                 </div>
206                         <%/if>
207                 <%/foreach>
208
209         </form>
210
211         <form id="add-profile-field" method="post">
212                 <input type="hidden" name="formPassword" value="<% formPassword|html>" />
213
214                 <a name="profile-fields"></a>
215                 <h2><%= Page.EditProfile.Fields.AddField.Title|l10n|html></h2>
216
217                 <%if duplicateFieldName>
218                         <p><%= Page.EditProfile.Error.DuplicateFieldName|l10n|replace needle="{fieldName}" replacementKey="fieldName"|html></p>
219                 <%/if>
220
221                 <div id="new-field">
222                         <label for="new-field"><%= Page.EditProfile.Fields.AddField.Label.Name|l10n|html></label>
223                         <input type="text" name="field-name" value="" />
224                         <button type="submit" name="add-field" value="true"><%= Page.EditProfile.Fields.AddField.Button.AddField|l10n|html></button>
225                 </div>
226
227         </form>
228
229 <%include include/tail.html>