comparison media/js/forums.js @ 285:8fd4984d5c3b

This is a first rough commit for #95, adding the ability to embed YouTube videos in forum posts. Some more polish and testing needs to happen at this point. I wanted to get all these changes off my hard drive and into the repository.
author Brian Neal <bgneal@gmail.com>
date Thu, 14 Oct 2010 02:39:35 +0000
parents 13330e1836f3
children 72fd300685d5
comparison
equal deleted inserted replaced
284:df2c81f705a8 285:8fd4984d5c3b
6 if (text.length == 0) { 6 if (text.length == 0) {
7 alert('Please enter some text.'); 7 alert('Please enter some text.');
8 return false; 8 return false;
9 } 9 }
10 $(this).attr('disabled', 'disabled').val('Posting reply...'); 10 $(this).attr('disabled', 'disabled').val('Posting reply...');
11
12 var attachments = new Array()
13 $('#attachment div input').each(function(index) {
14 attachments[index] = $(this).val();
15 });
16
11 $.ajax({ 17 $.ajax({
12 url: '/forums/quick-reply/', 18 url: '/forums/quick-reply/',
13 type: 'POST', 19 type: 'POST',
14 data: { 20 data: {
15 body : postText.val(), 21 body : postText.val(),
16 topic_id : $('#id_topic_id').val() 22 topic_id : $('#id_topic_id').val(),
23 attachment : attachments
17 }, 24 },
25 traditional: true,
18 dataType: 'html', 26 dataType: 'html',
19 success: function (data, textStatus) { 27 success: function (data, textStatus) {
20 postText.val(''); 28 postText.val('');
21 $('#forum-topic tr:last').after(data); 29 $('#forum-topic tr:last').after(data);
22 var lastTr = $('#forum-topic tr:last'); 30 var lastTr = $('#forum-topic tr:last');
23 lastTr.hide(); 31 lastTr.hide();
24 lastTr.fadeIn(3000); 32 lastTr.fadeIn(3000);
25 postButton.removeAttr('disabled').val('Submit Reply'); 33 postButton.removeAttr('disabled').val('Submit Reply');
34 initAttachments();
26 }, 35 },
27 error: function (xhr, textStatus, ex) { 36 error: function (xhr, textStatus, ex) {
28 alert('Oops, an error occurred. ' + xhr.statusText + ' - ' + 37 alert('Oops, an error occurred. ' + xhr.statusText + ' - ' +
29 xhr.responseText); 38 xhr.responseText);
30 postButton.removeAttr('disabled').val('Submit Reply'); 39 postButton.removeAttr('disabled').val('Submit Reply');
40 initAttachments();
31 } 41 }
32 }); 42 });
33 return false; 43 return false;
34 }); 44 });
35 $('a.post-flag').click(function () { 45 $('a.post-flag').click(function () {
80 }); 90 });
81 $('#forum-mod-del-topic').click(function () { 91 $('#forum-mod-del-topic').click(function () {
82 return confirm('Are you sure you want to delete this topic?\n' + 92 return confirm('Are you sure you want to delete this topic?\n' +
83 'WARNING: all posts will be lost.'); 93 'WARNING: all posts will be lost.');
84 }); 94 });
95
96 var vid = 0;
97 var vidDiv = $('#attachment');
98
99 function clearAttachments()
100 {
101 $('#attachment div').remove();
102 $('#attach-another').remove();
103 }
104
105 function initAttachments()
106 {
107 clearAttachments();
108
109 var post_input = $('#attachment input');
110 if (post_input.length == 1)
111 {
112 post_id = post_input.val();
113 post_input.replaceWith('<img src="/media/icons/ajax_busy.gif" alt="Busy" />');
114 $.ajax({
115 url: '/forums/fetch_attachments/',
116 type: 'GET',
117 data: {
118 pid : post_id
119 },
120 dataType: 'json',
121 success: function (data, textStatus) {
122 $('#attachment img').remove();
123 $.each(data, function(index, value) {
124 var html = '<div id="video-' + index + '">' + value.html +
125 '<span class="link">' +
126 '<img src="/media/icons/television_delete.png" alt="Remove" /> ' +
127 '<a href="#">Remove</a></span>' +
128 '<input type="hidden" name="attachment" value="' + value.id + '" />';
129 '</div>';
130 vidDiv.append(html);
131 $('#video-' + index + ' a').click(function() {
132 $('#video-' + index).remove();
133 relabelAttachLink();
134 return false;
135 });
136 });
137 vid = data.length;
138 $('#video-' + (vid-1)).after('<a id="attach-another" href="#">Attach another video</a>');
139 $('#attach-another').click(function() {
140 addVideo();
141 relabelAttachLink();
142 return false;
143 });
144 },
145 error: function (xhr, textStatus, ex) {
146 alert('Oops, an error occurred. ' + xhr.statusText + ' - ' +
147 xhr.responseText);
148 }
149 });
150 }
151 else
152 {
153 vid = 0;
154 var s = '<div id="init-add">' +
155 '<img src="/media/icons/television_add.png" alt="Add" /> ' +
156 '<a href="#">Attach Video</a></div>';
157 vidDiv.prepend(s);
158 $('#attachment a').click(function () {
159 $('#init-add').remove();
160 addVideo();
161 return false;
162 });
163 }
164 }
165
166 function relabelAttachLink()
167 {
168 var another = $('#attach-another');
169 var n = $('#attachment div').length;
170 if (n == 0)
171 {
172 another.html("Attach a video");
173 }
174 else
175 {
176 another.html("Attach another video");
177 }
178 }
179
180 function addVideo()
181 {
182 var id = "video-" + vid;
183
184 var fakeForm = '<div id="' + id + '">' +
185 '<img src="/media/icons/television_add.png" alt="Attach" class="r" /> ' +
186 '<input type="text" size="45" class="r" /> <button type="button" class="r">Attach</button> ' +
187 '<a href="#" class="r">Remove</a><br /></div>';
188
189 var n = $('#attachment div').length;
190
191 var another = $('#attach-another');
192 if (n == 0)
193 {
194 if (another.length > 0)
195 {
196 another.before(fakeForm);
197 }
198 else
199 {
200 vidDiv.append(fakeForm);
201 }
202 }
203 else
204 {
205 $('#attachment div:last').after(fakeForm);
206 }
207
208 $('#' + id + ' a').click(function() {
209 $('#' + id).remove();
210 relabelAttachLink();
211 return false;
212 });
213
214 var vidText = $('#' + id + ' input');
215
216 $('#' + id + ' button').click(function() {
217 $.ajax({
218 url: '/oembed/fetch/',
219 type: 'POST',
220 data: {
221 q : vidText.val()
222 },
223 dataType: 'json',
224 success: function (data, textStatus) {
225 $('#' + id + " .r").remove();
226 var myDiv = $('#' + id);
227 var html = '<span class="link">' +
228 '<img src="/media/icons/television_delete.png" alt="Remove" /> ' +
229 '<a href="#">Remove</a></span>' +
230 '<input type="hidden" name="attachment" value="' + data.id + '" />';
231 myDiv.prepend(html);
232 myDiv.prepend(data.embed);
233 $('#' + id + ' a').click(function() {
234 myDiv.remove();
235 relabelAttachLink();
236 return false;
237 });
238 },
239 error: function (xhr, textStatus, ex) {
240 alert('Oops, an error occurred. ' + xhr.statusText + ' - ' +
241 xhr.responseText);
242 }
243 });
244 });
245
246 if (vid == 0)
247 {
248 $('#video-0').after('<a id="attach-another" href="#">Attach another video</a>');
249 $('#attach-another').click(function() {
250 addVideo();
251 relabelAttachLink();
252 return false;
253 });
254 }
255 ++vid;
256 }
257
258 initAttachments();
85 }); 259 });