Mercurial > public > sg101
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(); });