/* @licstart The following is the entire license notice for the JavaScript code in this page. Copyright (C) 2013-2014 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. */ var wsUser = ''; var unreadPosts = 0; var documentOriginalTitle = ''; // Thread ID does not change, can be stored one time var threadId = $('div.thread').children('.post').first().attr('id'); /** * Connect to websocket server and subscribe to thread updates. On any update we * request a thread diff. * * @returns {boolean} true if connected, false otherwise */ 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'), "debug": false }); centrifuge.on('error', function(error_message) { console.log("Error connecting to websocket server."); return false; }); centrifuge.on('connect', function() { var channelName = 'thread:' + threadId; centrifuge.subscribe(channelName, function(message) { getThreadDiff(); }); // For the case we closed the browser and missed some updates getThreadDiff(); $('#autoupdate').hide(); }); centrifuge.connect(); return true; } /** * 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() { var lastUpdateTime = $('.metapanel').attr('data-last-update'); var diffUrl = '/api/diff_thread/' + threadId + '/' + lastUpdateTime + '/'; $.getJSON(diffUrl) .success(function(data) { var addedPosts = data.added; for (var i = 0; i < addedPosts.length; i++) { var postText = addedPosts[i]; var post = $(postText); updatePost(post) } var updatedPosts = data.updated; for (var i = 0; i < updatedPosts.length; i++) { var postText = updatedPosts[i]; var post = $(postText); updatePost(post) } updateMetadataPanel(); // TODO Process removed posts if any $('.metapanel').attr('data-last-update', data.last_update); }) } /** * Add or update the post on html page. */ function updatePost(postHtml) { // 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 threadBlock = $('div.thread'); 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 + ']'); if (existingPosts.size() > 0) { existingPosts.replaceWith(post); } else { var threadPosts = threadBlock.children('.post'); var lastPost = threadPosts.last(); post.appendTo(lastPost.parent()); updateBumplimitProgress(1); showNewPostsTitle(1); if (bottom) { scrollToBottom(); } } processNewPost(post); } /** * Initiate a blinking animation on a node to show it was updated. */ function blink(node) { var blinkCount = 2; var nodeToAnimate = node; for (var i = 0; i < blinkCount; i++) { nodeToAnimate = nodeToAnimate.fadeTo('fast', 0.5).fadeTo('fast', 1.0); } } function isPageBottom() { var scroll = $(window).scrollTop() / ($(document).height() - $(window).height()); return scroll == 1 } function initAutoupdate() { return connectWebsocket(); } function getReplyCount() { return $('.thread').children('.post').length } function getImageCount() { return $('.thread').find('img').length } /** * Update post count, images count and last update time in the metadata * panel. */ function updateMetadataPanel() { var replyCountField = $('#reply-count'); var imageCountField = $('#image-count'); replyCountField.text(getReplyCount()); imageCountField.text(getImageCount()); var lastUpdate = $('.post:last').children('.post-info').first() .children('.pub_time').first().html(); if (lastUpdate !== '') { var lastUpdateField = $('#last-update'); lastUpdateField.html(lastUpdate); blink(lastUpdateField); } blink(replyCountField); blink(imageCountField); } /** * Update bumplimit progress bar */ 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; if (newPostsToLimit <= 0) { $('.bar-bg').remove(); } else { postsToLimitElement.text(newPostsToLimit); progressBar.width((100 - postCount / bumplimit * 100.0) + '%'); } } } /** * Show 'new posts' text in the title if the document is not visible to a user */ function showNewPostsTitle(newPostCount) { if (document.hidden) { if (documentOriginalTitle === '') { documentOriginalTitle = document.title; } unreadPosts = unreadPosts + newPostCount; document.title = '[' + unreadPosts + '] ' + documentOriginalTitle; document.addEventListener('visibilitychange', function() { if (documentOriginalTitle !== '') { document.title = documentOriginalTitle; documentOriginalTitle = ''; unreadPosts = 0; } document.removeEventListener('visibilitychange', null); }); } } /** * 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'); $('.file_wrap').find('.file-thumb').remove(); } /** * 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; showAsErrors(form, ''); if (status === 'ok') { resetFormPosition(); resetForm(form); getThreadDiff(); scrollToBottom(); } else { var errors = json.errors; for (var i = 0; i < errors.length; i++) { var fieldErrors = errors[i]; var error = fieldErrors.errors; showAsErrors(form, error); } } } /** * 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 = $('
' + text + '
'); errorList.appendTo(form); } } /** * Run js methods that are usually run on the document, on the new post */ function processNewPost(post) { addRefLinkPreview(post[0]); highlightCode(post); blink(post); } $(document).ready(function(){ if (initAutoupdate()) { // Post form data over AJAX var threadId = $('div.thread').children('.post').first().attr('id'); var form = $('#form'); if (form.length > 0) { var options = { beforeSubmit: function(arr, $form, options) { showAsErrors($('form'), gettext('Sending message...')); }, success: updateOnPost, url: '/api/add_post/' + threadId + '/' }; form.ajaxForm(options); resetForm(form); } } $('#autoupdate').click(getThreadDiff); });