Refactored thread update code. Use indexOf() instead of contains() for strings

in format panel

boards/static/js/thread.js

@@ -1,88 +1,88 b''
 /*
  @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.
  */
 
 var $html = $("html, body");
 
 function moveCaretToEnd(el) {
         if (typeof el.selectionStart == "number") {
             el.selectionStart = el.selectionEnd = el.value.length;
         } else if (typeof el.createTextRange != "undefined") {
             el.focus();
             var range = el.createTextRange();
             range.collapse(false);
             range.select();
         }
 }
 
 function getForm() {
     return $('.post-form-w');
 }
 
 function resetFormPosition() {
     var form = getForm();
     form.insertAfter($('.thread'));
 }
 
 function addQuickReply(postId) {
     var postLinkRaw = '[post]' + postId + '[/post]'
 
     var textToAdd = '';
     var blockToInsert = null;
 
     var textAreaJq = $('textarea');
 
     if (postId != null) {
         var post = $('#' + postId);
 
         // If this is not OP, add reflink to the post. If there already is
         // the same reflink, don't add it again.
-        if (!post.is(':first-child') && !textAreaJq.val().contains(postLinkRaw)) {
+        if (!post.is(':first-child') && textAreaJq.val().indexOf(postLinkRaw) < 0) {
             textToAdd += postLinkRaw + '\n';
         }
 
         blockToInsert = post;
     } else {
         blockToInsert = $('.thread');
     }
 
     var selection = window.getSelection().toString();
     if (selection.length > 0) {
         textToAdd += '[quote]' + selection + '[/quote]\n';
     }
 
     textAreaJq.val(textAreaJq.val()+ textToAdd);
 
     var form = getForm();
     form.insertAfter(blockToInsert);
     form.show();
 
     textAreaJq.focus();
     var textarea = document.getElementsByTagName('textarea')[0];
     moveCaretToEnd(textarea);
 }
 
 function scrollToBottom() {
     $html.animate({scrollTop: $html.height()}, "fast");
 }

boards/static/js/thread_update.js

@@ -1,336 +1,336 b''
 /*
  @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 CLASS_POST = '.post'
+
 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');
+var threadId = $('div.thread').children(CLASS_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;
             var hasMetaUpdates = false;
 
             for (var i = 0; i < addedPosts.length; i++) {
                 var postText = addedPosts[i];
                 var post = $(postText);
 
                 updatePost(post);
                 hasMetaUpdates = true;
             }
 
+            var addedPostsCount = addedPosts.length;
+            updateBumplimitProgress(addedPostsCount);
+            showNewPostsTitle(addedPostsCount);
+
             var updatedPosts = data.updated;
 
             for (var i = 0; i < updatedPosts.length; i++) {
                 var postText = updatedPosts[i];
                 var post = $(postText);
 
                 updatePost(post);
                 hasMetaUpdates = true;
             }
 
             if (hasMetaUpdates) {
                 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);
+        post.appendTo(threadBlock);
 
         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
+    return $('.thread').children(CLASS_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 = $('<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);
     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);
 });