Update the list of Sones that like a post or reply after liking/unliking.
[Sone.git] / src / main / resources / static / javascript / sone.js
1 /* Sone JavaScript functions. */
2
3 function isOnline() {
4         return $("#sone").hasClass("online");
5 }
6
7 function registerInputTextareaSwap(inputSelector, defaultText, inputFieldName, optional, dontUseTextarea) {
8         $(inputSelector).each(function() {
9                 textarea = $(dontUseTextarea ? "<input type=\"text\" name=\"" + inputFieldName + "\">" : "<textarea name=\"" + inputFieldName + "\"></textarea>").blur(function() {
10                         if ($(this).val() == "") {
11                                 $(this).hide();
12                                 inputField = $(this).data("inputField");
13                                 inputField.show().removeAttr("disabled").addClass("default");
14                                 (function(inputField) {
15                                         getTranslation(defaultText, function(translation) {
16                                                 inputField.val(translation);
17                                         });
18                                 })(inputField);
19                         }
20                 }).hide().data("inputField", $(this)).val($(this).val());
21                 $(this).after(textarea);
22                 (function(inputField, textarea) {
23                         inputField.focus(function() {
24                                 $(this).hide().attr("disabled", "disabled");
25                                 textarea.show().focus();
26                         });
27                         if (inputField.val() == "") {
28                                 inputField.addClass("default");
29                                 (function(inputField) {
30                                         getTranslation(defaultText, function(translation) {
31                                                 inputField.val(translation);
32                                         });
33                                 })(inputField);
34                         } else {
35                                 inputField.hide().attr("disabled", "disabled");
36                                 textarea.show();
37                         }
38                         $(inputField.get(0).form).submit(function() {
39                                 if (!optional && (textarea.val() == "")) {
40                                         return false;
41                                 }
42                         });
43                 })($(this), textarea);
44         });
45 }
46
47 /* hide all the “create reply” forms until a link is clicked. */
48 function addCommentLinks() {
49         if (!isOnline()) {
50                 return;
51         }
52         $("#sone .post").each(function() {
53                 postId = $(this).attr("id");
54                 commentElement = (function(postId) {
55                         var commentElement = $("<div><span>Comment</span></div>").addClass("show-reply-form").click(function() {
56                                 replyElement = $("#sone .post#" + postId + " .create-reply");
57                                 replyElement.removeClass("hidden");
58                                 replyElement.removeClass("light");
59                                 (function(replyElement) {
60                                         replyElement.find("input.reply-input").blur(function() {
61                                                 if ($(this).hasClass("default")) {
62                                                         replyElement.addClass("light");
63                                                 }
64                                         }).focus(function() {
65                                                 replyElement.removeClass("light");
66                                         });
67                                 })(replyElement);
68                                 replyElement.find("input.reply-input").focus();
69                         });
70                         return commentElement;
71                 })(postId);
72                 $(this).find(".create-reply").addClass("hidden");
73                 $(this).find(".status-line .time").each(function() {
74                         $(this).after(commentElement.clone(true));
75                 });
76         });
77 }
78
79 /**
80  * Retrieves the translation for the given key and calls the callback function.
81  * The callback function takes a single parameter, the translated string.
82  *
83  * @param key
84  *            The key of the translation string
85  * @param callback
86  *            The callback function
87  */
88 function getTranslation(key, callback) {
89         $.getJSON("ajax/getTranslation.ajax", {"key": key}, function(data, textStatus) {
90                 callback(data.value);
91         });
92 }
93
94 /**
95  * Fires off an AJAX request to retrieve the current status of a Sone.
96  *
97  * @param soneId
98  *            The ID of the Sone
99  */
100 function getSoneStatus(soneId) {
101         $.getJSON("ajax/getSoneStatus.ajax", {"sone": soneId}, function(data, textStatus) {
102                 updateSoneStatus(soneId, data.name, data.status, data.modified, data.lastUpdated);
103                 /* seconds! */
104                 updateInterval = 60;
105                 if (data.modified || (data.status == "downloading") || (data.status == "inserting")) {
106                         updateInterval = 5;
107                 }
108                 setTimeout(function() {
109                         getSoneStatus(soneId);
110                 }, updateInterval * 1000);
111         });
112 }
113
114 /**
115  * Updates the status of the given Sone.
116  *
117  * @param soneId
118  *            The ID of the Sone to update
119  * @param status
120  *            The status of the Sone (“idle”, “unknown”, “inserting”,
121  *            “downloading”)
122  * @param modified
123  *            Whether the Sone is modified
124  * @param lastUpdated
125  *            The date and time of the last update (formatted for display)
126  */
127 function updateSoneStatus(soneId, name, status, modified, lastUpdated) {
128         $("#sone .sone." + soneId).
129                 toggleClass("unknown", status == "unknown").
130                 toggleClass("idle", status == "idle").
131                 toggleClass("inserting", status == "inserting").
132                 toggleClass("downloading", status == "downloading").
133                 toggleClass("modified", modified);
134         $("#sone .sone." + soneId + " .last-update span.time").text(lastUpdated);
135         $("#sone .sone." + soneId + " .profile-link a").text(name);
136 }
137
138 var watchedSones = {};
139
140 /**
141  * Watches this Sone for updates to its status.
142  *
143  * @param soneId
144  *            The ID of the Sone to watch
145  */
146 function watchSone(soneId) {
147         if (watchedSones[soneId]) {
148                 return;
149         }
150         watchedSones[soneId] = true;
151         (function(soneId) {
152                 setTimeout(function() {
153                         getSoneStatus(soneId);
154                 }, 5000);
155         })(soneId);
156 }
157
158 /**
159  * Enhances a “delete” button so that the confirmation is done on the same page.
160  *
161  * @param buttonId
162  *            The selector of the button
163  * @param translationKey
164  *            The translation key of the text to show on the button
165  * @param deleteCallback
166  *            The callback that actually deletes something
167  */
168 function enhanceDeleteButton(buttonId, translationKey, deleteCallback) {
169         button = $(buttonId);
170         (function(button) {
171                 getTranslation(translationKey, function(translation) {
172                         newButton = $("<button></button>").addClass("confirm").hide().text(translation).click(function() {
173                                 $(this).fadeOut("slow");
174                                 deleteCallback();
175                                 return false;
176                         }).insertAfter(button);
177                         (function(button, newButton) {
178                                 button.click(function() {
179                                         button.fadeOut("slow", function() {
180                                                 newButton.fadeIn("slow");
181                                                 $(document).one("click", function() {
182                                                         if (this != newButton.get(0)) {
183                                                                 newButton.fadeOut(function() {
184                                                                         button.fadeIn();
185                                                                 });
186                                                         }
187                                                 });
188                                         });
189                                         return false;
190                                 });
191                         })(button, newButton);
192                 });
193         })(button);
194 }
195
196 /**
197  * Enhances a post’s “delete” button.
198  *
199  * @param buttonId
200  *            The selector of the button
201  * @param postId
202  *            The ID of the post to delete
203  */
204 function enhanceDeletePostButton(buttonId, postId) {
205         enhanceDeleteButton(buttonId, "WebInterface.Confirmation.DeletePostButton", function() {
206                 $.getJSON("ajax/deletePost.ajax", { "post": postId, "formPassword": $("#sone #formPassword").text() }, function(data, textStatus) {
207                         if (data.success) {
208                                 $("#sone .post#" + postId).slideUp();
209                         } else if (data.error == "invalid-post-id") {
210                                 alert("Invalid post ID given!");
211                         } else if (data.error == "auth-required") {
212                                 alert("You need to be logged in.");
213                         } else if (data.error == "not-authorized") {
214                                 alert("You are not allowed to delete this post.");
215                         }
216                 });
217         });
218 }
219
220 /**
221  * Enhances a reply’s “delete” button.
222  *
223  * @param buttonId
224  *            The selector of the button
225  * @param replyId
226  *            The ID of the reply to delete
227  */
228 function enhanceDeleteReplyButton(buttonId, replyId) {
229         enhanceDeleteButton(buttonId, "WebInterface.Confirmation.DeleteReplyButton", function() {
230                 $.getJSON("ajax/deleteReply.ajax", { "reply": replyId, "formPassword": $("#sone #formPassword").text() }, function(data, textStatus) {
231                         if (data.success) {
232                                 $("#sone .reply#" + replyId).slideUp();
233                         } else if (data.error == "invalid-reply-id") {
234                                 alert("Invalid reply ID given!");
235                         } else if (data.error == "auth-required") {
236                                 alert("You need to be logged in.");
237                         } else if (data.error == "not-authorized") {
238                                 alert("You are not allowed to delete this reply.");
239                         }
240                 });
241         });
242 }
243
244 function getFormPassword() {
245         return $("#sone #formPassword").text();
246 }
247
248 function getSoneElement(element) {
249         return $(element).parents(".sone");
250 }
251
252 /**
253  * Generates a list of Sones by concatening the names of the given sones with a
254  * new line character (“\n”).
255  *
256  * @param sones
257  *            The sones to format
258  * @returns {String} The created string
259  */
260 function generateSoneList(sones) {
261         var soneList = "";
262         $.each(sones, function() {
263                 if (soneList != "") {
264                         soneList += "\n";
265                 }
266                 soneList += this.name;
267         });
268         return soneList;
269 }
270
271 /**
272  * Returns the ID of the Sone that this element belongs to.
273  *
274  * @param element
275  *            The element to locate the matching Sone ID for
276  * @returns The ID of the Sone, or undefined
277  */
278 function getSoneId(element) {
279         return getSoneElement(element).find(".id").text();
280 }
281
282 function getPostElement(element) {
283         return $(element).parents(".post");
284 }
285
286 function getPostId(element) {
287         return getPostElement(element).attr("id");
288 }
289
290 function getReplyElement(element) {
291         return $(element).parents(".reply");
292 }
293
294 function getReplyId(element) {
295         return getReplyElement(element).attr("id");
296 }
297
298 function likePost(postId) {
299         $.getJSON("ajax/like.ajax", { "type": "post", "post" : postId, "formPassword": getFormPassword() }, function() {
300                 $("#sone .post#" + postId + " > .status-line .like").addClass("hidden");
301                 $("#sone .post#" + postId + " > .status-line .unlike").removeClass("hidden");
302                 updatePostLikes(postId);
303         });
304 }
305
306 function unlikePost(postId) {
307         $.getJSON("ajax/unlike.ajax", { "type": "post", "post" : postId, "formPassword": getFormPassword() }, function() {
308                 $("#sone .post#" + postId + " > .status-line .unlike").addClass("hidden");
309                 $("#sone .post#" + postId + " > .status-line .like").removeClass("hidden");
310                 updatePostLikes(postId);
311         });
312 }
313
314 function updatePostLikes(postId) {
315         $.getJSON("ajax/getLikes.ajax", { "type": "post", "post": postId }, function(data, textStatus) {
316                 if (data.success) {
317                         $("#sone .post#" + postId + " > .status-line .likes").toggleClass("hidden", data.likes == 0)
318                         $("#sone .post#" + postId + " > .status-line .likes span.like-count").text(data.likes);
319                         $("#sone .post#" + postId + " > .status-line .likes > span").attr("title", generateSoneList(data.sones));
320                 }
321         });
322 }
323
324 function likeReply(replyId) {
325         $.getJSON("ajax/like.ajax", { "type": "reply", "reply" : replyId, "formPassword": getFormPassword() }, function() {
326                 $("#sone .reply#" + replyId + " .status-line .like").addClass("hidden");
327                 $("#sone .reply#" + replyId + " .status-line .unlike").removeClass("hidden");
328                 updateReplyLikes(replyId);
329         });
330 }
331
332 function unlikeReply(replyId) {
333         $.getJSON("ajax/unlike.ajax", { "type": "reply", "reply" : replyId, "formPassword": getFormPassword() }, function() {
334                 $("#sone .reply#" + replyId + " .status-line .unlike").addClass("hidden");
335                 $("#sone .reply#" + replyId + " .status-line .like").removeClass("hidden");
336                 updateReplyLikes(replyId);
337         });
338 }
339
340 function updateReplyLikes(replyId) {
341         $.getJSON("ajax/getLikes.ajax", { "type": "reply", "reply": replyId }, function(data, textStatus) {
342                 if (data.success) {
343                         $("#sone .reply#" + replyId + " .status-line .likes").toggleClass("hidden", data.likes == 0)
344                         $("#sone .reply#" + replyId + " .status-line .likes span.like-count").text(data.likes);
345                         $("#sone .reply#" + replyId + " .status-line .likes > span").attr("title", generateSoneList(data.sones));
346                 }
347         });
348 }