Enhance javascript “like” functionality to include replies.
[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) {
8         $(inputSelector).each(function() {
9                 textarea = $("<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.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, 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 }
136
137 var watchedSones = {};
138
139 /**
140  * Watches this Sone for updates to its status.
141  *
142  * @param soneId
143  *            The ID of the Sone to watch
144  */
145 function watchSone(soneId) {
146         if (watchedSones[soneId]) {
147                 return;
148         }
149         watchedSones[soneId] = true;
150         (function(soneId) {
151                 setTimeout(function() {
152                         getSoneStatus(soneId);
153                 }, 5000);
154         })(soneId);
155 }
156
157 /**
158  * Enhances a “delete” button so that the confirmation is done on the same page.
159  *
160  * @param buttonId
161  *            The selector of the button
162  * @param translationKey
163  *            The translation key of the text to show on the button
164  * @param deleteCallback
165  *            The callback that actually deletes something
166  */
167 function enhanceDeleteButton(buttonId, translationKey, deleteCallback) {
168         button = $(buttonId);
169         (function(button) {
170                 getTranslation(translationKey, function(translation) {
171                         newButton = $("<button></button>").addClass("confirm").hide().text(translation).click(function() {
172                                 $(this).fadeOut("slow");
173                                 deleteCallback();
174                                 return false;
175                         }).insertAfter(button);
176                         (function(button, newButton) {
177                                 button.click(function() {
178                                         button.fadeOut("slow", function() {
179                                                 newButton.fadeIn("slow");
180                                                 $(document).one("click", function() {
181                                                         if (this != newButton.get(0)) {
182                                                                 newButton.fadeOut(function() {
183                                                                         button.fadeIn();
184                                                                 });
185                                                         }
186                                                 });
187                                         });
188                                         return false;
189                                 });
190                         })(button, newButton);
191                 });
192         })(button);
193 }
194
195 /**
196  * Enhances a post’s “delete” button.
197  *
198  * @param buttonId
199  *            The selector of the button
200  * @param postId
201  *            The ID of the post to delete
202  */
203 function enhanceDeletePostButton(buttonId, postId) {
204         enhanceDeleteButton(buttonId, "WebInterface.Confirmation.DeletePostButton", function() {
205                 $.getJSON("ajax/deletePost.ajax", { "post": postId, "formPassword": $("#sone #formPassword").text() }, function(data, textStatus) {
206                         if (data.success) {
207                                 $("#sone .post#" + postId).slideUp();
208                         } else if (data.error == "invalid-post-id") {
209                                 alert("Invalid post ID given!");
210                         } else if (data.error == "auth-required") {
211                                 alert("You need to be logged in.");
212                         } else if (data.error == "not-authorized") {
213                                 alert("You are not allowed to delete this post.");
214                         }
215                 });
216         });
217 }
218
219 /**
220  * Enhances a reply’s “delete” button.
221  *
222  * @param buttonId
223  *            The selector of the button
224  * @param replyId
225  *            The ID of the reply to delete
226  */
227 function enhanceDeleteReplyButton(buttonId, replyId) {
228         enhanceDeleteButton(buttonId, "WebInterface.Confirmation.DeleteReplyButton", function() {
229                 $.getJSON("ajax/deleteReply.ajax", { "reply": replyId, "formPassword": $("#sone #formPassword").text() }, function(data, textStatus) {
230                         if (data.success) {
231                                 $("#sone .reply#" + replyId).slideUp();
232                         } else if (data.error == "invalid-reply-id") {
233                                 alert("Invalid reply ID given!");
234                         } else if (data.error == "auth-required") {
235                                 alert("You need to be logged in.");
236                         } else if (data.error == "not-authorized") {
237                                 alert("You are not allowed to delete this reply.");
238                         }
239                 });
240         });
241 }
242
243 function getFormPassword() {
244         return $("#sone #formPassword").text();
245 }
246
247 function getSoneElement(element) {
248         return $(element).parents(".sone");
249 }
250
251 /**
252  * Returns the ID of the Sone that this element belongs to.
253  *
254  * @param element
255  *            The element to locate the matching Sone ID for
256  * @returns The ID of the Sone, or undefined
257  */
258 function getSoneId(element) {
259         return getSoneElement(element).find(".id").text();
260 }
261
262 function getPostElement(element) {
263         return $(element).parents(".post");
264 }
265
266 function getPostId(element) {
267         return getPostElement(element).attr("id");
268 }
269
270 function getReplyElement(element) {
271         return $(element).parents(".reply");
272 }
273
274 function getReplyId(element) {
275         return getReplyElement(element).attr("id");
276 }
277
278 function likePost(postId) {
279         $.getJSON("ajax/like.ajax", { "type": "post", "post" : postId, "formPassword": getFormPassword() }, function() {
280                 $("#sone .post#" + postId + " > .status-line .like").addClass("hidden");
281                 $("#sone .post#" + postId + " > .status-line .unlike").removeClass("hidden");
282                 updatePostLikes(postId);
283         });
284 }
285
286 function unlikePost(postId) {
287         $.getJSON("ajax/unlike.ajax", { "type": "post", "post" : postId, "formPassword": getFormPassword() }, function() {
288                 $("#sone .post#" + postId + " > .status-line .unlike").addClass("hidden");
289                 $("#sone .post#" + postId + " > .status-line .like").removeClass("hidden");
290                 updatePostLikes(postId);
291         });
292 }
293
294 function updatePostLikes(postId) {
295         $.getJSON("ajax/getLikes.ajax", { "type": "post", "post": postId }, function(data, textStatus) {
296                 if (data.success) {
297                         $("#sone .post#" + postId + " > .status-line .likes").toggleClass("hidden", data.likes == 0)
298                         $("#sone .post#" + postId + " > .status-line .likes span.like-count").text(data.likes);
299                 }
300         });
301 }
302
303 function likeReply(replyId) {
304         $.getJSON("ajax/like.ajax", { "type": "reply", "reply" : replyId, "formPassword": getFormPassword() }, function() {
305                 $("#sone .reply#" + replyId + " .status-line .like").addClass("hidden");
306                 $("#sone .reply#" + replyId + " .status-line .unlike").removeClass("hidden");
307                 updateReplyLikes(replyId);
308         });
309 }
310
311 function unlikeReply(replyId) {
312         $.getJSON("ajax/unlike.ajax", { "type": "reply", "reply" : replyId, "formPassword": getFormPassword() }, function() {
313                 $("#sone .reply#" + replyId + " .status-line .unlike").addClass("hidden");
314                 $("#sone .reply#" + replyId + " .status-line .like").removeClass("hidden");
315                 updateReplyLikes(replyId);
316         });
317 }
318
319 function updateReplyLikes(replyId) {
320         $.getJSON("ajax/getLikes.ajax", { "type": "reply", "reply": replyId }, function(data, textStatus) {
321                 if (data.success) {
322                         $("#sone .reply#" + replyId + " .status-line .likes").toggleClass("hidden", data.likes == 0)
323                         $("#sone .reply#" + replyId + " .status-line .likes span.like-count").text(data.likes);
324                 }
325         });
326 }