diff 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
line wrap: on
line diff
--- a/media/js/forums.js	Mon Oct 04 01:01:29 2010 +0000
+++ b/media/js/forums.js	Thu Oct 14 02:39:35 2010 +0000
@@ -8,13 +8,21 @@
          return false;
       }
       $(this).attr('disabled', 'disabled').val('Posting reply...');
+
+      var attachments = new Array()
+      $('#attachment div input').each(function(index) {
+         attachments[index] = $(this).val();
+      });
+
       $.ajax({
          url: '/forums/quick-reply/', 
          type: 'POST',
          data: {
-         body : postText.val(),
-         topic_id : $('#id_topic_id').val()
+            body : postText.val(),
+            topic_id : $('#id_topic_id').val(),
+            attachment : attachments
          },
+         traditional: true,
          dataType: 'html',
          success: function (data, textStatus) {
             postText.val('');
@@ -23,11 +31,13 @@
             lastTr.hide();
             lastTr.fadeIn(3000);
             postButton.removeAttr('disabled').val('Submit Reply');
+            initAttachments();
          },
          error: function (xhr, textStatus, ex) {
             alert('Oops, an error occurred. ' + xhr.statusText + ' - ' + 
                xhr.responseText);
             postButton.removeAttr('disabled').val('Submit Reply');
+            initAttachments();
          }
          });
       return false;
@@ -82,4 +92,168 @@
          return confirm('Are you sure you want to delete this topic?\n' +
             'WARNING: all posts will be lost.');
    });
+
+   var vid = 0;
+   var vidDiv = $('#attachment');
+
+   function clearAttachments()
+   {
+      $('#attachment div').remove();
+      $('#attach-another').remove();
+   }
+
+   function initAttachments()
+   {
+      clearAttachments();
+
+      var post_input = $('#attachment input');
+      if (post_input.length == 1)
+      {
+         post_id = post_input.val();
+         post_input.replaceWith('<img src="/media/icons/ajax_busy.gif" alt="Busy" />');
+         $.ajax({
+            url: '/forums/fetch_attachments/', 
+            type: 'GET',
+            data: {
+               pid : post_id
+            },
+            dataType: 'json',
+            success: function (data, textStatus) {
+               $('#attachment img').remove();
+               $.each(data, function(index, value) {
+                  var html = '<div id="video-' + index + '">' + value.html +
+                     '<span class="link">' +
+                     '<img src="/media/icons/television_delete.png" alt="Remove" /> ' +
+                     '<a href="#">Remove</a></span>' +
+                     '<input type="hidden" name="attachment" value="' + value.id + '" />';
+                     '</div>';
+                  vidDiv.append(html);
+                  $('#video-' + index + ' a').click(function() {
+                     $('#video-' + index).remove();
+                     relabelAttachLink();
+                     return false;
+                  });
+               });
+               vid = data.length;
+               $('#video-' + (vid-1)).after('<a id="attach-another" href="#">Attach another video</a>');
+               $('#attach-another').click(function() {
+                  addVideo();
+                  relabelAttachLink();
+                  return false;
+               });
+            },
+            error: function (xhr, textStatus, ex) {
+               alert('Oops, an error occurred. ' + xhr.statusText + ' - ' + 
+                  xhr.responseText);
+            }
+         });
+      }
+      else
+      {
+         vid = 0;
+         var s = '<div id="init-add">' +
+            '<img src="/media/icons/television_add.png" alt="Add" /> ' +
+            '<a href="#">Attach Video</a></div>';
+         vidDiv.prepend(s);
+         $('#attachment a').click(function () {
+            $('#init-add').remove();
+            addVideo();
+            return false;
+         });
+      }
+   }
+
+   function relabelAttachLink()
+   {
+      var another = $('#attach-another');
+      var n = $('#attachment div').length;
+      if (n == 0)
+      {
+         another.html("Attach a video");
+      }
+      else
+      {
+         another.html("Attach another video");
+      }
+   }
+
+   function addVideo()
+   {
+      var id = "video-" + vid;
+
+      var fakeForm = '<div id="' + id + '">' +
+         '<img src="/media/icons/television_add.png" alt="Attach" class="r" /> ' +
+         '<input type="text" size="45" class="r" /> <button type="button" class="r">Attach</button> ' +
+         '<a href="#" class="r">Remove</a><br /></div>';
+
+      var n = $('#attachment div').length;
+
+      var another = $('#attach-another');
+      if (n == 0)
+      {
+         if (another.length > 0)
+         {
+            another.before(fakeForm);
+         }
+         else
+         {
+            vidDiv.append(fakeForm);
+         }
+      }
+      else
+      {
+         $('#attachment div:last').after(fakeForm);
+      }
+
+      $('#' + id + ' a').click(function() {
+         $('#' + id).remove();
+         relabelAttachLink();
+         return false;
+      });
+
+      var vidText = $('#' + id + ' input');
+
+      $('#' + id + ' button').click(function() {
+         $.ajax({
+            url: '/oembed/fetch/', 
+            type: 'POST',
+            data: {
+               q : vidText.val()
+            },
+            dataType: 'json',
+            success: function (data, textStatus) {
+               $('#' + id + " .r").remove();
+               var myDiv = $('#' + id);
+               var html = '<span class="link">' +
+                  '<img src="/media/icons/television_delete.png" alt="Remove" /> ' +
+                  '<a href="#">Remove</a></span>' +
+                  '<input type="hidden" name="attachment" value="' + data.id + '" />';
+               myDiv.prepend(html);
+               myDiv.prepend(data.embed);
+               $('#' + id + ' a').click(function() {
+                  myDiv.remove();
+                  relabelAttachLink();
+                  return false;
+               });
+            },
+            error: function (xhr, textStatus, ex) {
+               alert('Oops, an error occurred. ' + xhr.statusText + ' - ' + 
+                  xhr.responseText);
+            }
+         });
+      });
+
+      if (vid == 0)
+      {
+         $('#video-0').after('<a id="attach-another" href="#">Attach another video</a>');
+         $('#attach-another').click(function() {
+            addVideo();
+            relabelAttachLink();
+            return false;
+         });
+      }
+      ++vid;
+   }
+
+   initAttachments();
 });