Mercurial > public > sg101

annotate forums/static/js/forums.js @ 1166:130ac1e98cf4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
More V3 forums tweaking. Adding attachments is working now. Adding a post via ajax is working. Still need to display attachments on posts.
author Brian Neal <bgneal@gmail.com>
date Sun, 20 Aug 2017 15:55:54 -0500
parents 92101013d5ac
children
rev   line source
bgneal@312 1 $(document).ready(function() {
bgneal@312 2 var postText = $('#id_body');
bgneal@312 3 var postButton = $('#forums-reply-post');
bgneal@312 4 postButton.click(function () {
bgneal@312 5 $(this).attr('disabled', 'disabled').val('Posting reply...');
bgneal@312 6
bgneal@312 7 var attachments = new Array()
bgneal@312 8 $('#attachment div input').each(function(index) {
bgneal@312 9 attachments[index] = $(this).val();
bgneal@312 10 });
bgneal@312 11
bgneal@312 12 $.ajax({
bgneal@673 13 url: '/forums/quick-reply/',
bgneal@312 14 type: 'POST',
bgneal@312 15 data: {
bgneal@312 16 body : postText.val(),
bgneal@312 17 topic_id : $('#id_topic_id').val(),
bgneal@312 18 attachment : attachments
bgneal@312 19 },
bgneal@312 20 traditional: true,
bgneal@312 21 dataType: 'html',
bgneal@312 22 success: function (data, textStatus) {
bgneal@312 23 postText.val('');
bgneal@1166 24 var lastPost = $('#forum-topic-post-container > div:last-child');
bgneal@1166 25 var firstCard = lastPost.find('div > div').first();
bgneal@1166 26 var newCardClass = firstCard.hasClass('sg101-card1') ? 'sg101-card2' : 'sg101-card1';
bgneal@1166 27 var newDividerClass = newCardClass == 'sg101-card1' ? 'sg101-card-divider1' : 'sg101-card-divider2';
bgneal@1166 28 lastPost.after(data);
bgneal@1166 29
bgneal@1166 30 lastPost = $('#forum-topic-post-container > div:last-child');
bgneal@1166 31 var firstCard = lastPost.find('> div > div').first();
bgneal@1166 32 firstCard.addClass(newCardClass);
bgneal@1166 33 var firstDivider = firstCard.find('> div').first();
bgneal@1166 34 firstDivider.addClass(newDividerClass);
bgneal@1166 35 var lastCard = lastPost.find('> div:last-child > div').first();
bgneal@1166 36 lastCard.addClass(newCardClass);
bgneal@1166 37 var lastDivider = lastCard.find('> div').first();
bgneal@1166 38 lastDivider.addClass(newDividerClass);
bgneal@1166 39
bgneal@1166 40 lastPost.hide();
bgneal@1166 41 lastPost.fadeIn(3000);
bgneal@312 42 postButton.removeAttr('disabled').val('Submit Reply');
bgneal@312 43 initAttachments();
bgneal@312 44 },
bgneal@312 45 error: function (xhr, textStatus, ex) {
bgneal@673 46 alert('Oops, an error occurred. ' + xhr.statusText + ' - ' +
bgneal@312 47 xhr.responseText);
bgneal@312 48 postButton.removeAttr('disabled').val('Submit Reply');
bgneal@312 49 initAttachments();
bgneal@312 50 }
bgneal@312 51 });
bgneal@312 52 return false;
bgneal@312 53 });
bgneal@312 54 $('a.post-flag').click(function () {
bgneal@312 55 var id = this.id;
bgneal@312 56 if (id.match(/fp-(\d+)/)) {
bgneal@312 57 id = RegExp.$1;
bgneal@312 58 if (confirm('Only flag a post if you feel it is spam, abuse, violates site rules, ' +
bgneal@312 59 'or is not appropriate. ' +
bgneal@312 60 'A moderator will be notified and will review the post. ' +
bgneal@312 61 'Are you sure you want to flag this post?')) {
bgneal@312 62 $.ajax({
bgneal@312 63 url: '/forums/flag-post/',
bgneal@312 64 type: 'POST',
bgneal@673 65 data: {id: id},
bgneal@312 66 dataType: 'text',
bgneal@312 67 success: function (response, textStatus) {
bgneal@312 68 alert(response);
bgneal@312 69 },
bgneal@312 70 error: function (xhr, textStatus, ex) {
bgneal@312 71 alert('Oops, an error occurred: ' + xhr.statusText + ' - ' + xhr.responseText);
bgneal@312 72 }
bgneal@312 73 });
bgneal@312 74 }
bgneal@312 75 }
bgneal@312 76 return false;
bgneal@312 77 });
bgneal@312 78 $('a.post-delete').click(function () {
bgneal@312 79 var id = this.id;
bgneal@312 80 if (id.match(/dp-(\d+)/)) {
bgneal@312 81 id = RegExp.$1;
bgneal@312 82 if (confirm('Are you sure you want to delete this post?')) {
bgneal@312 83 $.ajax({
bgneal@312 84 url: '/forums/delete-post/',
bgneal@312 85 type: 'POST',
bgneal@673 86 data: {id: id},
bgneal@312 87 dataType: 'text',
bgneal@312 88 success: function (response, textStatus) {
bgneal@312 89 alert(response);
bgneal@312 90 $('#post-' + id).fadeOut(3000);
bgneal@312 91 },
bgneal@312 92 error: function (xhr, textStatus, ex) {
bgneal@312 93 alert('Oops, an error occurred: ' + xhr.statusText + ' - ' + xhr.responseText);
bgneal@312 94 }
bgneal@312 95 });
bgneal@312 96 }
bgneal@312 97 }
bgneal@312 98 return false;
bgneal@312 99 });
bgneal@312 100 $('#forum-mod-del-topic').click(function () {
bgneal@312 101 return confirm('Are you sure you want to delete this topic?\n' +
bgneal@312 102 'WARNING: all posts will be lost.');
bgneal@312 103 });
bgneal@312 104
bgneal@312 105 var vid = 0;
bgneal@312 106 var vidDiv = $('#attachment');
bgneal@312 107
bgneal@312 108 function clearAttachments()
bgneal@312 109 {
bgneal@312 110 $('#attachment div').remove();
bgneal@312 111 $('#attach-another').remove();
bgneal@312 112 }
bgneal@312 113
bgneal@673 114 function processEmbeds(data, textStatus)
bgneal@312 115 {
bgneal@312 116 vidDiv.find('img').remove();
bgneal@312 117 $.each(data, function(index, value) {
bgneal@312 118 var html = '<div id="video-' + index + '">' + value.html +
bgneal@312 119 '<span class="link">' +
bgneal@312 120 '<img src="/static/icons/television_delete.png" alt="Remove" /> ' +
bgneal@312 121 '<a href="#">Remove</a></span>' +
bgneal@312 122 '<input type="hidden" name="attachment" value="' + value.id + '" />';
bgneal@312 123 '</div>';
bgneal@312 124 vidDiv.append(html);
bgneal@312 125 $('#video-' + index + ' a').click(function() {
bgneal@312 126 $('#video-' + index).remove();
bgneal@312 127 relabelAttachLink();
bgneal@312 128 return false;
bgneal@312 129 });
bgneal@312 130 });
bgneal@312 131 vid = data.length;
bgneal@312 132 $('#video-' + (vid-1)).after('<a id="attach-another" href="#">Attach another video</a>');
bgneal@312 133 $('#attach-another').click(function() {
bgneal@312 134 addVideo();
bgneal@312 135 relabelAttachLink();
bgneal@312 136 return false;
bgneal@312 137 });
bgneal@312 138 }
bgneal@312 139
bgneal@312 140 function initAttachments()
bgneal@312 141 {
bgneal@312 142 clearAttachments();
bgneal@312 143
bgneal@312 144 var post_input = $('#id_post_id');
bgneal@312 145 var attachments = $("#forums_post_form input:hidden[name='attachment']");
bgneal@312 146 if (post_input.length == 1)
bgneal@312 147 {
bgneal@312 148 post_id = post_input.val();
bgneal@312 149 vidDiv.prepend('<img src="/static/icons/ajax_busy.gif" alt="Busy" />');
bgneal@312 150 $.ajax({
bgneal@673 151 url: '/forums/fetch_attachments/',
bgneal@312 152 type: 'GET',
bgneal@312 153 data: {
bgneal@312 154 pid : post_id
bgneal@312 155 },
bgneal@312 156 dataType: 'json',
bgneal@312 157 success: processEmbeds,
bgneal@312 158 error: function (xhr, textStatus, ex) {
bgneal@312 159 vidDiv.find('img').remove();
bgneal@673 160 alert('Oops, an error occurred. ' + xhr.statusText + ' - ' +
bgneal@312 161 xhr.responseText);
bgneal@312 162 }
bgneal@312 163 });
bgneal@312 164 }
bgneal@312 165 else if (attachments.length > 0)
bgneal@312 166 {
bgneal@312 167 vidDiv.prepend('<img src="/static/icons/ajax_busy.gif" alt="Busy" />');
bgneal@312 168 var embeds = new Array();
bgneal@312 169 attachments.each(function(index) {
bgneal@312 170 embeds[index] = $(this).val();
bgneal@312 171 });
bgneal@312 172 attachments.remove();
bgneal@312 173 $.ajax({
bgneal@673 174 url: '/oembed/fetch_saved/',
bgneal@312 175 type: 'GET',
bgneal@312 176 data: {
bgneal@312 177 embeds: embeds
bgneal@312 178 },
bgneal@312 179 traditional: true,
bgneal@312 180 dataType: 'json',
bgneal@312 181 success: processEmbeds,
bgneal@312 182 error: function (xhr, textStatus, ex) {
bgneal@312 183 vidDiv.find('img').remove();
bgneal@673 184 alert('Oops, an error occurred. ' + xhr.statusText + ' - ' +
bgneal@312 185 xhr.responseText);
bgneal@312 186 }
bgneal@312 187 });
bgneal@312 188 }
bgneal@312 189 else
bgneal@312 190 {
bgneal@312 191 vid = 0;
bgneal@312 192 var s = '<div id="init-add">' +
bgneal@1166 193 '<button class="button">' +
bgneal@1166 194 '<i class="fi-video"></i> Attach Video' +
bgneal@1166 195 '</button>' +
bgneal@1166 196 '</div>';
bgneal@312 197 vidDiv.prepend(s);
bgneal@1166 198 $('#attachment button').click(function () {
bgneal@312 199 $('#init-add').remove();
bgneal@312 200 addVideo();
bgneal@312 201 return false;
bgneal@312 202 });
bgneal@312 203 }
bgneal@312 204 }
bgneal@312 205
bgneal@312 206 function relabelAttachLink()
bgneal@312 207 {
bgneal@312 208 var another = $('#attach-another');
bgneal@312 209 var n = $('#attachment div').length;
bgneal@312 210 if (n == 0)
bgneal@312 211 {
bgneal@312 212 another.html("Attach a video");
bgneal@312 213 }
bgneal@312 214 else
bgneal@312 215 {
bgneal@312 216 another.html("Attach another video");
bgneal@312 217 }
bgneal@312 218 }
bgneal@312 219
bgneal@312 220 function addVideo()
bgneal@312 221 {
bgneal@312 222 var id = "video-" + vid;
bgneal@312 223
bgneal@1166 224 var fakeForm =
bgneal@1166 225 '<div id="' + id + '" class="row">' +
bgneal@1166 226 '<div class="columns r">' +
bgneal@1166 227 '<div class="input-group">' +
bgneal@1166 228 '<span class="input-group-label"><i class="fi-video"></i></span>' +
bgneal@1166 229 '<input class="input-group-field" type="text">' +
bgneal@1166 230 '<div class="input-group-button">' +
bgneal@1166 231 '<button type="button" class="button r">Attach</button>' +
bgneal@1166 232 '</div>' +
bgneal@1166 233 '</div>' +
bgneal@1166 234 '</div>' +
bgneal@1166 235 '<div class="small-2 columns r">' +
bgneal@1166 236 '<a href="#">Remove</a>' +
bgneal@1166 237 '</div>' +
bgneal@1166 238 '</div>';
bgneal@312 239
bgneal@312 240 var n = $('#attachment div').length;
bgneal@312 241
bgneal@312 242 var another = $('#attach-another');
bgneal@312 243 if (n == 0)
bgneal@312 244 {
bgneal@312 245 if (another.length > 0)
bgneal@312 246 {
bgneal@312 247 another.before(fakeForm);
bgneal@312 248 }
bgneal@312 249 else
bgneal@312 250 {
bgneal@312 251 vidDiv.append(fakeForm);
bgneal@312 252 }
bgneal@312 253 }
bgneal@312 254 else
bgneal@312 255 {
bgneal@1166 256 $('#attachment div.row:last').after(fakeForm);
bgneal@312 257 }
bgneal@312 258
bgneal@312 259 $('#' + id + ' a').click(function() {
bgneal@312 260 $('#' + id).remove();
bgneal@312 261 relabelAttachLink();
bgneal@312 262 return false;
bgneal@312 263 });
bgneal@312 264
bgneal@312 265 var vidText = $('#' + id + ' input');
bgneal@312 266
bgneal@312 267 $('#' + id + ' button').click(function() {
bgneal@312 268 var button = $(this);
bgneal@312 269 button.attr('disabled', 'disabled');
bgneal@312 270 $.ajax({
bgneal@673 271 url: '/oembed/fetch/',
bgneal@312 272 type: 'POST',
bgneal@312 273 data: {
bgneal@312 274 q : vidText.val()
bgneal@312 275 },
bgneal@312 276 dataType: 'json',
bgneal@312 277 success: function (data, textStatus) {
bgneal@312 278 $('#' + id + " .r").remove();
bgneal@312 279 var myDiv = $('#' + id);
bgneal@1166 280 var html =
bgneal@1166 281 '<div class="columns">' +
bgneal@1166 282 data.embed +
bgneal@1166 283 '<p><a href="#"><i class="fi-x"></i> Remove ' +
bgneal@1166 284 '<i class="fi-arrow-up"></i></a></p>' +
bgneal@1166 285 '</div>';
bgneal@312 286 myDiv.prepend(html);
bgneal@312 287 $('#' + id + ' a').click(function() {
bgneal@312 288 myDiv.remove();
bgneal@312 289 relabelAttachLink();
bgneal@312 290 return false;
bgneal@312 291 });
bgneal@312 292 },
bgneal@312 293 error: function (xhr, textStatus, ex) {
bgneal@673 294 alert('Oops, an error occurred. ' + xhr.statusText + ' - ' +
bgneal@312 295 xhr.responseText);
bgneal@312 296 button.removeAttr('disabled');
bgneal@312 297 }
bgneal@312 298 });
bgneal@312 299 });
bgneal@312 300
bgneal@312 301 if (vid == 0)
bgneal@312 302 {
bgneal@312 303 $('#video-0').after('<a id="attach-another" href="#">Attach another video</a>');
bgneal@312 304 $('#attach-another').click(function() {
bgneal@312 305 addVideo();
bgneal@312 306 relabelAttachLink();
bgneal@312 307 return false;
bgneal@312 308 });
bgneal@312 309 }
bgneal@312 310 ++vid;
bgneal@312 311 }
bgneal@312 312
bgneal@312 313 initAttachments();
bgneal@673 314
bgneal@673 315 var topicTitle = $('#id_name');
bgneal@673 316 var topicSearchButton = $('#search_topics');
bgneal@673 317 var searchBusy = $('#search-busy-icon');
bgneal@673 318 topicSearchButton.click(function () {
bgneal@673 319 var text = $.trim(topicTitle.val());
bgneal@673 320 if (!text) return;
bgneal@673 321
bgneal@673 322 $(this).attr('disabled', 'disabled');
bgneal@673 323 $('#quick-search-results').remove();
bgneal@673 324 searchBusy.toggle();
bgneal@673 325
bgneal@673 326 $.ajax({
bgneal@673 327 url: '/search/ajax/',
bgneal@673 328 type: 'GET',
bgneal@673 329 data: {
bgneal@673 330 q : text,
bgneal@673 331 models : 'forums.topic'
bgneal@673 332 },
bgneal@673 333 traditional: true,
bgneal@673 334 dataType: 'html',
bgneal@673 335 success: function (data, textStatus) {
bgneal@673 336 topicSearchButton.removeAttr('disabled');
bgneal@673 337 searchBusy.hide();
bgneal@673 338 searchBusy.after(data);
bgneal@673 339 $('#hide-search-results').click(function() {
bgneal@673 340 var results = $('#quick-search-results');
bgneal@673 341 results.fadeOut(1500, function() { results.remove(); });
bgneal@673 342 });
bgneal@673 343 },
bgneal@673 344 error: function (xhr, textStatus, ex) {
bgneal@673 345 topicSearchButton.removeAttr('disabled');
bgneal@673 346 searchBusy.hide();
bgneal@673 347 alert('Oops, an error occurred. ' + xhr.statusText + ' - ' +
bgneal@673 348 xhr.responseText);
bgneal@673 349 }
bgneal@673 350 });
bgneal@673 351 return false;
bgneal@673 352 });
bgneal@312 353 });