thread_update.js
395 lines
| 10.8 KiB
| application/javascript
|
JavascriptLexer
|
r365 | /* | ||
@licstart The following is the entire license notice for the | ||||
JavaScript code in this page. | ||||
|
r895 | Copyright (C) 2013-2014 neko259 | ||
|
r365 | |||
The JavaScript code in this page is free software: you can | ||||
redistribute it and/or modify it under the terms of the GNU | ||||
General Public License (GNU GPL) as published by the Free Software | ||||
Foundation, either version 3 of the License, or (at your option) | ||||
any later version. The code is distributed WITHOUT ANY WARRANTY; | ||||
without even the implied warranty of MERCHANTABILITY or FITNESS | ||||
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. | ||||
As additional permission under GNU GPL version 3 section 7, you | ||||
may distribute non-source (e.g., minimized or compacted) forms of | ||||
that code without the copy of the GNU GPL normally required by | ||||
section 4, provided you include this license notice and a URL | ||||
through which recipients can access the Corresponding Source. | ||||
@licend The above is the entire license notice | ||||
for the JavaScript code in this page. | ||||
*/ | ||||
|
r1625 | var CLASS_POST = '.post'; | ||
|
r1085 | |||
|
r1126 | var POST_ADDED = 0; | ||
var POST_UPDATED = 1; | ||||
|
r1410 | // TODO These need to be syncronized with board settings. | ||
|
r1146 | var JS_AUTOUPDATE_PERIOD = 20000; | ||
|
r1410 | // TODO This needs to be the same for attachment download time limit. | ||
var POST_AJAX_TIMEOUT = 30000; | ||||
|
r1411 | var BLINK_SPEED = 500; | ||
|
r1146 | |||
|
r1315 | var ALLOWED_FOR_PARTIAL_UPDATE = [ | ||
'refmap', | ||||
'post-info' | ||||
]; | ||||
var ATTR_CLASS = 'class'; | ||||
|
r1316 | var ATTR_UID = 'data-uid'; | ||
|
r1315 | |||
|
r725 | var unreadPosts = 0; | ||
|
r892 | var documentOriginalTitle = ''; | ||
|
r363 | |||
|
r853 | // Thread ID does not change, can be stored one time | ||
|
r1085 | var threadId = $('div.thread').children(CLASS_POST).first().attr('id'); | ||
|
r1412 | var blinkColor = $('<div class="post-blink"></div>').css('background-color'); | ||
|
r853 | |||
|
r895 | /** | ||
|
r892 | * Get diff of the posts from the current thread timestamp. | ||
* This is required if the browser was closed and some post updates were | ||||
* missed. | ||||
*/ | ||||
function getThreadDiff() { | ||||
|
r1332 | var all_posts = $('.post'); | ||
|
r892 | |||
|
r1118 | var uids = ''; | ||
|
r1332 | var posts = all_posts; | ||
|
r1118 | for (var i = 0; i < posts.length; i++) { | ||
uids += posts[i].getAttribute('data-uid') + ' '; | ||||
} | ||||
|
r892 | |||
|
r1118 | var data = { | ||
|
r1191 | uids: uids, | ||
thread: threadId | ||||
|
r1340 | }; | ||
|
r892 | |||
|
r1191 | var diffUrl = '/api/diff_thread/'; | ||
|
r1085 | |||
|
r1118 | $.post(diffUrl, | ||
data, | ||||
function(data) { | ||||
|
r892 | var updatedPosts = data.updated; | ||
|
r1126 | var addedPostCount = 0; | ||
|
r892 | |||
for (var i = 0; i < updatedPosts.length; i++) { | ||||
var postText = updatedPosts[i]; | ||||
var post = $(postText); | ||||
|
r1126 | if (updatePost(post) == POST_ADDED) { | ||
addedPostCount++; | ||||
} | ||||
|
r892 | } | ||
|
r1118 | var hasMetaUpdates = updatedPosts.length > 0; | ||
|
r1074 | if (hasMetaUpdates) { | ||
updateMetadataPanel(); | ||||
} | ||||
|
r1073 | |||
|
r1127 | if (addedPostCount > 0) { | ||
updateBumplimitProgress(addedPostCount); | ||||
} | ||||
if (updatedPosts.length > 0) { | ||||
showNewPostsTitle(addedPostCount); | ||||
} | ||||
|
r1126 | |||
|
r892 | // TODO Process removed posts if any | ||
|
r895 | $('.metapanel').attr('data-last-update', data.last_update); | ||
|
r1625 | |||
if (data.subscribed == 'True') { | ||||
|
r1756 | var favButton = $('#thread-fav-button .not_fav'); | ||
|
r1625 | |||
if (favButton.length > 0) { | ||||
favButton.attr('value', 'unsubscribe'); | ||||
favButton.removeClass('not_fav'); | ||||
favButton.addClass('fav'); | ||||
} | ||||
} | ||||
|
r1118 | }, | ||
'json' | ||||
) | ||||
|
r892 | } | ||
/** | ||||
|
r895 | * Add or update the post on html page. | ||
|
r892 | */ | ||
|
r895 | function updatePost(postHtml) { | ||
|
r853 | // This needs to be set on start because the page is scrolled after posts | ||
// are added or updated | ||||
var bottom = isPageBottom(); | ||||
var post = $(postHtml); | ||||
|
r895 | var threadBlock = $('div.thread'); | ||
|
r853 | |||
|
r895 | var postId = post.attr('id'); | ||
// If the post already exists, replace it. Otherwise add as a new one. | ||||
var existingPosts = threadBlock.children('.post[id=' + postId + ']'); | ||||
|
r1126 | var type; | ||
|
r895 | if (existingPosts.size() > 0) { | ||
|
r1315 | replacePartial(existingPosts.first(), post, false); | ||
post = existingPosts.first(); | ||||
|
r1126 | |||
type = POST_UPDATED; | ||||
|
r895 | } else { | ||
|
r1085 | post.appendTo(threadBlock); | ||
|
r853 | |||
if (bottom) { | ||||
scrollToBottom(); | ||||
} | ||||
|
r1118 | |||
|
r1126 | type = POST_ADDED; | ||
|
r853 | } | ||
processNewPost(post); | ||||
|
r1126 | |||
return type; | ||||
|
r853 | } | ||
|
r892 | /** | ||
* Initiate a blinking animation on a node to show it was updated. | ||||
*/ | ||||
|
r363 | function blink(node) { | ||
|
r1412 | node.effect('highlight', { color: blinkColor }, BLINK_SPEED); | ||
|
r363 | } | ||
|
r361 | |||
|
r373 | function isPageBottom() { | ||
var scroll = $(window).scrollTop() / ($(document).height() | ||||
|
r855 | - $(window).height()); | ||
|
r373 | |||
return scroll == 1 | ||||
} | ||||
|
r1146 | function enableJsUpdate() { | ||
setInterval(getThreadDiff, JS_AUTOUPDATE_PERIOD); | ||||
return true; | ||||
} | ||||
|
r363 | function initAutoupdate() { | ||
|
r1760 | return enableJsUpdate(); | ||
|
r363 | } | ||
|
r391 | |||
function getReplyCount() { | ||||
|
r1085 | return $('.thread').children(CLASS_POST).length | ||
|
r391 | } | ||
function getImageCount() { | ||||
|
r1960 | return $('.thread').find('.image').length | ||
|
r391 | } | ||
|
r420 | |||
|
r892 | /** | ||
* Update post count, images count and last update time in the metadata | ||||
* panel. | ||||
*/ | ||||
|
r1073 | function updateMetadataPanel() { | ||
|
r536 | var replyCountField = $('#reply-count'); | ||
var imageCountField = $('#image-count'); | ||||
|
r1332 | var replyCount = getReplyCount(); | ||
replyCountField.text(replyCount); | ||||
var imageCount = getImageCount(); | ||||
imageCountField.text(imageCount); | ||||
|
r536 | |||
|
r1073 | var lastUpdate = $('.post:last').children('.post-info').first() | ||
.children('.pub_time').first().html(); | ||||
|
r536 | if (lastUpdate !== '') { | ||
var lastUpdateField = $('#last-update'); | ||||
|
r1017 | lastUpdateField.html(lastUpdate); | ||
|
r536 | blink(lastUpdateField); | ||
} | ||||
blink(replyCountField); | ||||
blink(imageCountField); | ||||
} | ||||
|
r429 | /** | ||
* Update bumplimit progress bar | ||||
*/ | ||||
|
r420 | function updateBumplimitProgress(postDelta) { | ||
var progressBar = $('#bumplimit_progress'); | ||||
if (progressBar) { | ||||
var postsToLimitElement = $('#left_to_limit'); | ||||
var oldPostsToLimit = parseInt(postsToLimitElement.text()); | ||||
var postCount = getReplyCount(); | ||||
var bumplimit = postCount - postDelta + oldPostsToLimit; | ||||
var newPostsToLimit = bumplimit - postCount; | ||||
|
r429 | if (newPostsToLimit <= 0) { | ||
$('.bar-bg').remove(); | ||||
|
r420 | } else { | ||
postsToLimitElement.text(newPostsToLimit); | ||||
progressBar.width((100 - postCount / bumplimit * 100.0) + '%'); | ||||
} | ||||
} | ||||
|
r427 | } | ||
|
r429 | |||
|
r451 | /** | ||
* Show 'new posts' text in the title if the document is not visible to a user | ||||
*/ | ||||
|
r468 | function showNewPostsTitle(newPostCount) { | ||
|
r451 | if (document.hidden) { | ||
|
r468 | if (documentOriginalTitle === '') { | ||
documentOriginalTitle = document.title; | ||||
} | ||||
unreadPosts = unreadPosts + newPostCount; | ||||
|
r1127 | |||
|
r1467 | var newTitle = null; | ||
|
r1127 | if (unreadPosts > 0) { | ||
|
r1467 | newTitle = '[' + unreadPosts + '] '; | ||
} else { | ||||
newTitle = '* '; | ||||
|
r1127 | } | ||
newTitle += documentOriginalTitle; | ||||
document.title = newTitle; | ||||
|
r451 | |||
document.addEventListener('visibilitychange', function() { | ||||
if (documentOriginalTitle !== '') { | ||||
document.title = documentOriginalTitle; | ||||
documentOriginalTitle = ''; | ||||
|
r468 | unreadPosts = 0; | ||
|
r451 | } | ||
document.removeEventListener('visibilitychange', null); | ||||
}); | ||||
} | ||||
|
r458 | } | ||
|
r533 | |||
|
r682 | /** | ||
* When the form is posted, this method will be run as a callback | ||||
*/ | ||||
function updateOnPost(response, statusText, xhr, form) { | ||||
var json = $.parseJSON(response); | ||||
var status = json.status; | ||||
|
r725 | showAsErrors(form, ''); | ||
|
r1637 | $('.post-form-w').unblock(); | ||
|
r682 | |||
if (status === 'ok') { | ||||
|
r1880 | resetForm(); | ||
|
r923 | getThreadDiff(); | ||
|
r1057 | scrollToBottom(); | ||
|
r682 | } else { | ||
var errors = json.errors; | ||||
for (var i = 0; i < errors.length; i++) { | ||||
var fieldErrors = errors[i]; | ||||
var error = fieldErrors.errors; | ||||
|
r725 | showAsErrors(form, error); | ||
|
r682 | } | ||
} | ||||
} | ||||
|
r533 | |||
|
r725 | |||
/** | ||||
|
r709 | * Run js methods that are usually run on the document, on the new post | ||
*/ | ||||
function processNewPost(post) { | ||||
|
r1432 | addScriptsToPost(post); | ||
|
r853 | blink(post); | ||
|
r709 | } | ||
|
r1315 | function replacePartial(oldNode, newNode, recursive) { | ||
if (!equalNodes(oldNode, newNode)) { | ||||
|
r1316 | // Update parent node attributes | ||
updateNodeAttr(oldNode, newNode, ATTR_CLASS); | ||||
updateNodeAttr(oldNode, newNode, ATTR_UID); | ||||
|
r1313 | |||
|
r1315 | // Replace children | ||
|
r1313 | var children = oldNode.children(); | ||
if (children.length == 0) { | ||||
oldNode.replaceWith(newNode); | ||||
} else { | ||||
var newChildren = newNode.children(); | ||||
|
r1315 | newChildren.each(function(i) { | ||
var newChild = newChildren.eq(i); | ||||
var newChildClass = newChild.attr(ATTR_CLASS); | ||||
// Update only certain allowed blocks (e.g. not images) | ||||
if (ALLOWED_FOR_PARTIAL_UPDATE.indexOf(newChildClass) > -1) { | ||||
var oldChild = oldNode.children('.' + newChildClass); | ||||
if (oldChild.length == 0) { | ||||
oldNode.append(newChild); | ||||
} else { | ||||
if (!equalNodes(oldChild, newChild)) { | ||||
if (recursive) { | ||||
replacePartial(oldChild, newChild, false); | ||||
} else { | ||||
oldChild.replaceWith(newChild); | ||||
} | ||||
} | ||||
} | ||||
} | ||||
|
r1313 | }); | ||
} | ||||
} | ||||
} | ||||
|
r1315 | /** | ||
* Compare nodes by content | ||||
*/ | ||||
function equalNodes(node1, node2) { | ||||
return node1[0].outerHTML == node2[0].outerHTML; | ||||
} | ||||
|
r1316 | /** | ||
* Update attribute of a node if it has changed | ||||
*/ | ||||
function updateNodeAttr(oldNode, newNode, attrName) { | ||||
var oldAttr = oldNode.attr(attrName); | ||||
var newAttr = newNode.attr(attrName); | ||||
if (oldAttr != newAttr) { | ||||
oldNode.attr(attrName, newAttr); | ||||
|
r1332 | } | ||
|
r1316 | } | ||
|
r1428 | $(document).ready(function() { | ||
|
r922 | if (initAutoupdate()) { | ||
// Post form data over AJAX | ||||
var threadId = $('div.thread').children('.post').first().attr('id'); | ||||
|
r534 | |||
|
r922 | var form = $('#form'); | ||
|
r682 | |||
|
r1024 | if (form.length > 0) { | ||
var options = { | ||||
|
r1428 | beforeSubmit: function(arr, form, options) { | ||
|
r1637 | $('.post-form-w').block({ message: gettext('Sending message...') }); | ||
|
r1985 | |||
$.each(pastedImages, function(i, blob) { | ||||
arr.push({ | ||||
name: "file_0", | ||||
value: blob | ||||
}); | ||||
}); | ||||
|
r1024 | }, | ||
success: updateOnPost, | ||||
|
r1634 | error: function(xhr, textStatus, errorString) { | ||
var errorText = gettext('Server error: ') + textStatus; | ||||
if (errorString) { | ||||
errorText += ' / ' + errorString; | ||||
} | ||||
showAsErrors(form, errorText); | ||||
|
r1637 | $('.post-form-w').unblock(); | ||
|
r1221 | }, | ||
|
r1410 | url: '/api/add_post/' + threadId + '/', | ||
timeout: POST_AJAX_TIMEOUT | ||||
|
r1024 | }; | ||
|
r534 | |||
|
r1024 | form.ajaxForm(options); | ||
|
r534 | |||
|
r1880 | resetForm(); | ||
|
r1024 | } | ||
|
r856 | } | ||
|
r458 | }); | ||