boards/static/js/thread_update.js

/*
 @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)
            }

            // 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 lastUpdate = '';

    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);

        lastUpdate = post.children('.post-info').first()
            .children('.pub_time').first().html();

        if (bottom) {
            scrollToBottom();
        }
    }

    processNewPost(post);
    updateMetadataPanel(lastUpdate)
}

/**
 * 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(lastUpdate) {
    var replyCountField = $('#reply-count');
    var imageCountField = $('#image-count');

    replyCountField.text(getReplyCount());
    imageCountField.text(getImageCount());

    if (lastUpdate !== '') {
        var lastUpdateField = $('#last-update');
        lastUpdateField.html(lastUpdate);
        translate_time(lastUpdateField);
        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();
            $('.thread').children('.post').addClass('dead_post');
        } 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') {
        resetForm(form);
        getThreadDiff();
    } else {
        var errors = json.errors;
        for (var i = 0; i < errors.length; i++) {
            var fieldErrors = errors[i];

            var error = fieldErrors.errors;

            showAsErrors(form, error);
        }
    }

    scrollToBottom();
}

/**
 * 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);
    }
}

/**
 * Run js methods that are usually run on the document, on the new post
 */
function processNewPost(post) {
    addRefLinkPreview(post[0]);
    highlightCode(post);
    translate_time(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');

        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);
});