thread_update.js
278 lines
| 7.5 KiB
| application/javascript
|
JavascriptLexer
|
r365 | /* | ||
@licstart The following is the entire license notice for the | ||||
JavaScript code in this page. | ||||
Copyright (C) 2013 neko259 | ||||
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. | ||||
*/ | ||||
|
r853 | var wsUrl = 'ws://localhost:9090/connection/websocket'; | ||
var wsUser = ''; | ||||
|
r361 | |||
var loading = false; | ||||
|
r363 | var lastUpdateTime = null; | ||
|
r725 | var unreadPosts = 0; | ||
|
r363 | |||
|
r853 | // Thread ID does not change, can be stored one time | ||
var threadId = $('div.thread').children('.post').first().attr('id'); | ||||
function connectWebsocket() { | ||||
var metapanel = $('.metapanel')[0]; | ||||
var wsHost = metapanel.getAttribute('data-ws-host'); | ||||
var wsPort = metapanel.getAttribute('data-ws-port'); | ||||
if (wsHost.length > 0 && wsPort.length > 0) | ||||
var centrifuge = new Centrifuge({ | ||||
"url": 'ws://' + wsHost + ':' + wsPort + "/connection/websocket", | ||||
"project": metapanel.getAttribute('data-ws-project'), | ||||
"user": wsUser, | ||||
"timestamp": metapanel.getAttribute('data-last-update'), | ||||
"token": metapanel.getAttribute('data-ws-token'), | ||||
|
r854 | "debug": false | ||
|
r853 | }); | ||
centrifuge.on('error', function(error_message) { | ||||
alert("Error connecting to websocket server."); | ||||
}); | ||||
centrifuge.on('connect', function() { | ||||
var channelName = 'thread:' + threadId; | ||||
centrifuge.subscribe(channelName, function(message) { | ||||
var postHtml = message.data['html']; | ||||
var isAdded = (message.data['diff_type'] === 'added'); | ||||
if (postHtml) { | ||||
updatePost(postHtml, isAdded); | ||||
} | ||||
}); | ||||
$('#autoupdate').text('[+]'); | ||||
}); | ||||
centrifuge.connect(); | ||||
} | ||||
function updatePost(postHtml, isAdded) { | ||||
// This needs to be set on start because the page is scrolled after posts | ||||
// are added or updated | ||||
var bottom = isPageBottom(); | ||||
var post = $(postHtml); | ||||
var threadPosts = $('div.thread').children('.post'); | ||||
var lastUpdate = ''; | ||||
if (isAdded) { | ||||
var lastPost = threadPosts.last(); | ||||
post.appendTo(lastPost.parent()); | ||||
updateBumplimitProgress(1); | ||||
showNewPostsTitle(1); | ||||
lastUpdate = post.children('.post-info').first() | ||||
.children('.pub_time').first().text(); | ||||
if (bottom) { | ||||
scrollToBottom(); | ||||
} | ||||
} else { | ||||
var postId = post.attr('id'); | ||||
var oldPost = $('div.thread').children('.post[id=' + postId + ']'); | ||||
oldPost.replaceWith(post); | ||||
} | ||||
processNewPost(post); | ||||
updateMetadataPanel(lastUpdate) | ||||
} | ||||
|
r363 | function blink(node) { | ||
var blinkCount = 2; | ||||
var nodeToAnimate = node; | ||||
for (var i = 0; i < blinkCount; i++) { | ||||
|
r481 | nodeToAnimate = nodeToAnimate.fadeTo('fast', 0.5).fadeTo('fast', 1.0); | ||
|
r363 | } | ||
} | ||||
|
r361 | |||
|
r373 | function isPageBottom() { | ||
var scroll = $(window).scrollTop() / ($(document).height() | ||||
- $(window).height()) | ||||
return scroll == 1 | ||||
} | ||||
|
r363 | function initAutoupdate() { | ||
|
r853 | connectWebsocket() | ||
|
r363 | } | ||
|
r391 | |||
function getReplyCount() { | ||||
|
r404 | return $('.thread').children('.post').length | ||
|
r391 | } | ||
function getImageCount() { | ||||
return $('.thread').find('img').length | ||||
} | ||||
|
r420 | |||
|
r536 | function updateMetadataPanel(lastUpdate) { | ||
var replyCountField = $('#reply-count'); | ||||
var imageCountField = $('#image-count'); | ||||
replyCountField.text(getReplyCount()); | ||||
imageCountField.text(getImageCount()); | ||||
if (lastUpdate !== '') { | ||||
var lastUpdateField = $('#last-update'); | ||||
lastUpdateField.text(lastUpdate); | ||||
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(); | ||||
|
r585 | $('.thread').children('.post').addClass('dead_post'); | ||
|
r420 | } else { | ||
postsToLimitElement.text(newPostsToLimit); | ||||
progressBar.width((100 - postCount / bumplimit * 100.0) + '%'); | ||||
} | ||||
} | ||||
|
r427 | } | ||
|
r429 | |||
|
r451 | var documentOriginalTitle = ''; | ||
/** | ||||
* 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; | ||||
document.title = '[' + unreadPosts + '] ' + documentOriginalTitle; | ||||
|
r451 | |||
document.addEventListener('visibilitychange', function() { | ||||
if (documentOriginalTitle !== '') { | ||||
document.title = documentOriginalTitle; | ||||
documentOriginalTitle = ''; | ||||
|
r468 | unreadPosts = 0; | ||
|
r451 | } | ||
document.removeEventListener('visibilitychange', null); | ||||
}); | ||||
} | ||||
|
r458 | } | ||
|
r533 | /** | ||
* Clear all entered values in the form fields | ||||
*/ | ||||
function resetForm(form) { | ||||
form.find('input:text, input:password, input:file, select, textarea').val(''); | ||||
form.find('input:radio, input:checkbox') | ||||
.removeAttr('checked').removeAttr('selected'); | ||||
|
r682 | $('.file_wrap').find('.file-thumb').remove(); | ||
|
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, ''); | ||
|
r682 | |||
if (status === 'ok') { | ||||
resetForm(form); | ||||
} 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 | |||
|
r709 | /** | ||
|
r725 | * Show text in the errors row of the form. | ||
* @param form | ||||
* @param text | ||||
*/ | ||||
function showAsErrors(form, text) { | ||||
form.children('.form-errors').remove(); | ||||
if (text.length > 0) { | ||||
var errorList = $('<div class="form-errors">' + text | ||||
+ '<div>'); | ||||
errorList.appendTo(form); | ||||
} | ||||
} | ||||
/** | ||||
|
r709 | * Run js methods that are usually run on the document, on the new post | ||
*/ | ||||
function processNewPost(post) { | ||||
|
r710 | addRefLinkPreview(post[0]); | ||
|
r709 | highlightCode(post); | ||
|
r853 | blink(post); | ||
|
r709 | } | ||
|
r458 | $(document).ready(function(){ | ||
initAutoupdate(); | ||||
|
r534 | |||
// Post form data over AJAX | ||||
|
r725 | var threadId = $('div.thread').children('.post').first().attr('id'); | ||
|
r534 | |||
var form = $('#form'); | ||||
|
r682 | |||
|
r534 | var options = { | ||
|
r725 | beforeSubmit: function(arr, $form, options) { | ||
showAsErrors($('form'), gettext('Sending message...')); | ||||
}, | ||||
|
r534 | success: updateOnPost, | ||
|
r682 | url: '/api/add_post/' + threadId + '/' | ||
|
r534 | }; | ||
form.ajaxForm(options); | ||||
|
r682 | resetForm(form); | ||
|
r458 | }); | ||