AJAX-based thread creation

boards/static/js/form.js

@@ -1,232 +1,302 b''
 var ITEM_FILE_SOURCE = 'fileSource';
 var URL_STICKERS = '/api/stickers';
 var MIN_INPUT_LENGTH = 3;
 var URL_DELIMITER = '\n';
+// TODO This needs to be the same for attachment download time limit.
+var POST_AJAX_TIMEOUT = 30000;
 
 var pastedImages = [];
 
 $('input[name=image]').wrap($('<div class="file_wrap"></div>'));
 
 $('body').on('change', 'input[name=image]', function(event) {
     var file = event.target.files[0];
 
     if(file.type.match('image.*')) {
         var fileReader = new FileReader();
 
         fileReader.addEventListener("load", function(event) {
             var wrapper = $('.file_wrap');
 
             wrapper.find('.file-thumb').remove();
             wrapper.append(
                 $('<div class="file-thumb" style="background-image: url('+event.target.result+')"></div>')
             );
         });
 
         fileReader.readAsDataURL(file);
     }
 });
 
 var form = $('#form');
 $('textarea').keypress(function(event) {
     if ((event.which == 10 || event.which == 13) && event.ctrlKey) {
         form.find('input[type=submit]').click();
     }
 });
 
 $('#preview-button').click(function() {
     var data = {
         raw_text: $('textarea#id_text').val()
     }
 
     var diffUrl = '/api/preview/';
 
     $.post(diffUrl,
         data,
         function(data) {
             var previewTextBlock = $('#preview-text');
             previewTextBlock.html(data);
             previewTextBlock.show();
 
             addScriptsToPost(previewTextBlock);
         })
 });
 
 /**
  * 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);
     }
 }
 
 function addHiddenInput(form, name, value) {
     form.find('input[name=' + name + ']').val(value);
 }
 
 function selectFileChoice() {
     var file_input = $('#id_file');
     var url_input = $('#id_file_url');
 
     var file_input_row = file_input.parent().parent();
     var url_input_row = url_input.parent().parent();
 
     file_input_row.toggle();
     url_input_row.toggle();
     url_input.val('');
     file_input.val('');
 
     var source;
     if (file_input_row.is(':visible')) {
         source = 'file';
     } else {
         source = 'url';
     }
     localStorage.setItem(ITEM_FILE_SOURCE, source);
 }
 
 function getPostTextarea() {
     return $('textarea#id_text');
 }
 
 function addOnImagePaste() {
     $('#id_file_1').on('paste', function(event) {
         var items = (event.clipboardData || event.originalEvent.clipboardData).items;
         for (index in items) {
             var item = items[index];
             if (item.kind === 'file') {
                 var blob = item.getAsFile();
 
                 pastedImages.push(blob);
 
                 var pastedImagesList = $('#pasted-images');
                 if (pastedImagesList.length === 0) {
                     pastedImagesList = $('<div id="pasted-images" />');
                     $('#id_file_1').parent().append(pastedImagesList);
                 }
 
                 var fr = new FileReader();
                 fr.onload = function () {
                     var img = $('<img class="image-preview" />');
                     img.attr('src', fr.result);
                     pastedImagesList.append(img);
                     img.on("click", function() {
                         // Remove the image from all lists
                         var itemIndex = $(this).index();
                         pastedImages.splice(itemIndex, 1);
                         $(this).remove();
                     });
                 };
                 fr.readAsDataURL(blob);
             }
         }
     });
 }
 
+/**
+ * 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;
+    var url = json.url;
+
+    showAsErrors(form, '');
+    $('.post-form-w').unblock();
+
+    if (status === 'ok') {
+        if (url) {
+            document.location = url;
+        } else {
+            resetForm();
+            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);
+        }
+    }
+}
+
+function initAjaxForm(openingPostId) {
+    var form = $('#form');
+
+    var url = '/api/add_post/';
+    if (openingPostId) {
+        url += openingPostId + '/';
+    }
+
+    if (form.length > 0) {
+        var options = {
+            beforeSubmit: function(arr, form, options) {
+                $('.post-form-w').block({ message: gettext('Sending message...') });
+
+                $.each(pastedImages, function(i, blob) {
+                    arr.push({
+                        name: "file_0",
+                        value: blob
+                    });
+                });
+            },
+            success: updateOnPost,
+            error: function(xhr, textStatus, errorString) {
+                var errorText = gettext('Server error: ') + textStatus;
+                if (errorString) {
+                    errorText += ' / ' + errorString;
+                }
+                showAsErrors(form, errorText);
+                $('.post-form-w').unblock();
+            },
+            url: url,
+            timeout: POST_AJAX_TIMEOUT
+        };
+
+        form.ajaxForm(options);
+    }
+}
+
 $(document).ready(function() {
     var powDifficulty = parseInt($('body').attr('data-pow-difficulty'));
     if (powDifficulty > 0 && typeof SharedWorker != 'undefined') {
         var worker = new SharedWorker($('.post-form').attr('data-pow-script'));
         worker.port.onmessage = function(e) {
             var form = $('#form');
             addHiddenInput(form, 'timestamp', e.data.timestamp);
             addHiddenInput(form, 'iteration', e.data.iteration);
             addHiddenInput(form, 'guess', e.data.guess);
 
             form.submit();
             $('.post-form-w').unblock();
         };
         worker.onerror = function(event){
             throw new Error(event.message + " (" + event.filename + ":" + event.lineno + ")");
         };
         worker.port.start();
 
         var form = $('#form');
         var submitButton = form.find('input[type=submit]');
         submitButton.click(function() {
             showAsErrors(form, gettext('Computing PoW...'));
             $('.post-form-w').block({ message: gettext('Computing PoW...') })
 
             var msg = $('textarea#id_text').val().trim();
 
             var data = {
                 msg: msg,
                 difficulty: parseInt($('body').attr('data-pow-difficulty')),
                 hasher: $('.post-form').attr('data-hasher')
             };
             worker.port.postMessage(data);
 
             return false;
         });
     }
 
     var $fileSourceButton = $('#file-source-button');
     if (window.localStorage) {
         var source = localStorage.getItem(ITEM_FILE_SOURCE);
         if (source == null) {
             source = 'file';
         }
         if (source == 'file') {
             $('#id_file_url').parent().parent().hide();
         } else {
             $('#id_file').parent().parent().hide();
         }
 
         $fileSourceButton.click(function() {
             selectFileChoice();
         });
     } else {
         $fileSourceButton.hide();
     }
 
     addOnImagePaste();
 
     // Stickers autocomplete
     function split( val ) {
         return val.split(URL_DELIMITER);
     }
 
     function extractLast( term ) {
         return split(term).pop();
     }
 
     $('#id_file_1').autocomplete({
         source: function( request, response ) {
             $.getJSON(URL_STICKERS, {
                 term: extractLast( request.term )
             }, response);
         },
         search: function() {
             // custom minLength
             var term = extractLast( this.value );
             if (term.length < MIN_INPUT_LENGTH) {
                 return false;
             }
         },
         focus: function() {
             // prevent value inserted on focus
             return false;
         },
         select: function( event, ui ) {
             var terms = split( this.value );
             // remove the current input
             terms.pop();
             // add the selected item
             terms.push( ui.item.alias );
             // add placeholder to get the comma-and-space at the end
             terms.push("");
             this.value = terms.join(URL_DELIMITER);
             return false;
         }
     })
     .autocomplete( "instance" )._renderItem = function( ul, item ) {
         return $( "<li>" )
             .append( "<div>" + '<img src="' + item.thumb + '">' + '<br />' + item.alias + "</div>" )
             .appendTo( ul );
     };
 });

boards/static/js/thread_create.js

@@ -1,43 +1,45 b''
 var MIN_INPUT_LENGTH = 2;
 var URL_TAGS = '/api/tags';
 var TAG_DELIMITER = ' ';
 
 function split( val ) {
     return val.split(TAG_DELIMITER);
 }
 
 function extractLast( term ) {
     return split( term ).pop();
 }
 
 $( document ).ready(function() {
     $('#id_tags').autocomplete({
         source: function( request, response ) {
             $.getJSON(URL_TAGS, {
                 term: extractLast( request.term )
             }, response);
         },
         search: function() {
             // custom minLength
             var term = extractLast( this.value );
             if (term.length < MIN_INPUT_LENGTH) {
                 return false;
             }
         },
         focus: function() {
             // prevent value inserted on focus
             return false;
         },
         select: function( event, ui ) {
             var terms = split( this.value );
             // remove the current input
             terms.pop();
             // add the selected item
             terms.push( ui.item.value );
             // add placeholder to get the comma-and-space at the end
             terms.push("");
             this.value = terms.join(TAG_DELIMITER);
             return false;
         }
     });
+
+    initAjaxForm(null);
 });
  No newline at end of file

boards/static/js/thread_update.js

@@ -1,395 +1,340 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 POST_ADDED = 0;
 var POST_UPDATED = 1;
 
 // TODO These need to be syncronized with board settings.
 var JS_AUTOUPDATE_PERIOD = 20000;
-// TODO This needs to be the same for attachment download time limit.
-var POST_AJAX_TIMEOUT = 30000;
 var BLINK_SPEED = 500;
 
 var ALLOWED_FOR_PARTIAL_UPDATE = [
     'refmap',
     'post-info'
 ];
 
 var ATTR_CLASS = 'class';
 var ATTR_UID = 'data-uid';
 
 var unreadPosts = 0;
 var documentOriginalTitle = '';
 
 // Thread ID does not change, can be stored one time
 var threadId = $('div.thread').children(CLASS_POST).first().attr('id');
 var blinkColor = $('<div class="post-blink"></div>').css('background-color');
 
 /**
  * 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 all_posts = $('.post');
 
     var uids = '';
     var posts = all_posts;
     for (var i = 0; i < posts.length; i++) {
         uids += posts[i].getAttribute('data-uid') + ' ';
     }
 
     var data = {
         uids: uids,
         thread: threadId
     };
 
     var diffUrl = '/api/diff_thread/';
 
     $.post(diffUrl,
         data,
         function(data) {
             var updatedPosts = data.updated;
             var addedPostCount = 0;
 
             for (var i = 0; i < updatedPosts.length; i++) {
                 var postText = updatedPosts[i];
                 var post = $(postText);
 
                 if (updatePost(post) == POST_ADDED) {
                     addedPostCount++;
                 }
             }
 
             var hasMetaUpdates = updatedPosts.length > 0;
             if (hasMetaUpdates) {
                 updateMetadataPanel();
             }
 
             if (addedPostCount > 0) {
                 updateBumplimitProgress(addedPostCount);
             }
 
             if (updatedPosts.length > 0) {
                 showNewPostsTitle(addedPostCount);
             }
 
             // TODO Process removed posts if any
             $('.metapanel').attr('data-last-update', data.last_update);
 
             if (data.subscribed == 'True') {
                 var favButton = $('#thread-fav-button .not_fav');
 
                 if (favButton.length > 0) {
                     favButton.attr('value', 'unsubscribe');
                     favButton.removeClass('not_fav');
                     favButton.addClass('fav');
                 }
             }
         },
         'json'
     )
 }
 
 /**
  * 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 + ']');
 
     var type;
 
     if (existingPosts.size() > 0) {
         replacePartial(existingPosts.first(), post, false);
         post = existingPosts.first();
 
         type = POST_UPDATED;
     } else {
         post.appendTo(threadBlock);
 
         if (bottom) {
             scrollToBottom();
         }
 
         type = POST_ADDED;
     }
 
     processNewPost(post);
 
     return type;
 }
 
 /**
  * Initiate a blinking animation on a node to show it was updated.
  */
 function blink(node) {
     node.effect('highlight', { color: blinkColor }, BLINK_SPEED);
 }
 
 function isPageBottom() {
     var scroll = $(window).scrollTop() / ($(document).height()
         - $(window).height());
 
     return scroll == 1
 }
 
 function enableJsUpdate() {
     setInterval(getThreadDiff, JS_AUTOUPDATE_PERIOD);
     return true;
 }
 
 function initAutoupdate() {
     return enableJsUpdate();
 }
 
 function getReplyCount() {
     return $('.thread').children(CLASS_POST).length
 }
 
 function getImageCount() {
     return $('.thread').find('.image').length
 }
 
 /**
  * Update post count, images count and last update time in the metadata
  * panel.
  */
 function updateMetadataPanel() {
     var replyCountField = $('#reply-count');
     var imageCountField = $('#image-count');
 
     var replyCount = getReplyCount();
     replyCountField.text(replyCount);
     var imageCount = getImageCount();
     imageCountField.text(imageCount);
 
     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;
 
         var newTitle = null;
         if (unreadPosts > 0) {
             newTitle = '[' + unreadPosts + '] ';
         } else {
             newTitle = '* ';
         }
         newTitle += documentOriginalTitle;
 
         document.title = newTitle;
 
         document.addEventListener('visibilitychange', function() {
             if (documentOriginalTitle !== '') {
                 document.title = documentOriginalTitle;
                 documentOriginalTitle = '';
                 unreadPosts = 0;
             }
 
             document.removeEventListener('visibilitychange', null);
         });
     }
 }
 
-
-/**
- * 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, '');
-    $('.post-form-w').unblock();
-
-    if (status === 'ok') {
-        resetForm();
-        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);
-        }
-    }
-}
-
-
 /**
  * Run js methods that are usually run on the document, on the new post
  */
 function processNewPost(post) {
     addScriptsToPost(post);
     blink(post);
 }
 
 function replacePartial(oldNode, newNode, recursive) {
     if (!equalNodes(oldNode, newNode)) {
         // Update parent node attributes
         updateNodeAttr(oldNode, newNode, ATTR_CLASS);
         updateNodeAttr(oldNode, newNode, ATTR_UID);
 
         // Replace children
         var children = oldNode.children();
         if (children.length == 0) {
             oldNode.replaceWith(newNode);
         } else {
             var newChildren = newNode.children();
             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);
                             }
                         }
                     }
                 }
             });
         }
     }
 }
 
 /**
  * Compare nodes by content
  */
 function equalNodes(node1, node2) {
     return node1[0].outerHTML == node2[0].outerHTML;
 }
 
 /**
  * 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);
     }
 }
 
 $(document).ready(function() {
     if (initAutoupdate()) {
         // Post form data over AJAX
         var threadId = $('div.thread').children('.post').first().attr('id');
 
         var form = $('#form');
 
+        initAjaxForm(threadId);
         if (form.length > 0) {
-            var options = {
-                beforeSubmit: function(arr, form, options) {
-                    $('.post-form-w').block({ message: gettext('Sending message...') });
-
-                    $.each(pastedImages, function(i, blob) {
-                        arr.push({
-                            name: "file_0",
-                            value: blob
-                        });
-                    });
-                },
-                success: updateOnPost,
-                error: function(xhr, textStatus, errorString) {
-                    var errorText = gettext('Server error: ') + textStatus;
-                    if (errorString) {
-                        errorText += ' / ' + errorString;
-                    }
-                    showAsErrors(form, errorText);
-                    $('.post-form-w').unblock();
-                },
-                url: '/api/add_post/' + threadId + '/',
-                timeout: POST_AJAX_TIMEOUT
-            };
-
-            form.ajaxForm(options);
-
             resetForm();
         }
     }
 });

boards/templates/boards/all_threads.html

@@ -1,210 +1,211 b''
 {% extends "boards/paginated.html" %}
 
 {% load i18n %}
 {% load board %}
 {% load static %}
 {% load tz %}
 
 {% block head %}
     <meta name="robots" content="noindex">
 
     {% if tag %}
         <title>{{ tag.get_localized_name }} - {{ site_name }}</title>
     {% else %}
         <title>{{ site_name }}</title>
     {% endif %}
 
     {% if prev_page_link %}
         <link rel="prev" href="{{ prev_page_link|safe }}" />
     {% endif %}
     {% if next_page_link %}
         <link rel="next" href="{{ next_page_link|safe }}" />
     {% endif %}
 
 {% endblock %}
 
 {% block content %}
 
     {% get_current_language as LANGUAGE_CODE %}
     {% get_current_timezone as TIME_ZONE %}
 
     {% for banner in banners %}
         <div class="post">
             <div class="title">{{ banner.title }}</div>
             <div>{{ banner.get_text|safe }}</div>
             <div>{% trans 'Details' %}: <a href="{{ banner.post.get_absolute_url|safe }}">>>{{ banner.post.id }}</a></div>
         </div>
     {% endfor %}
 
 {% if tag %}
     <div class="tag_info" style="border-bottom: solid .5ex #{{ tag.get_color }}">
         {% if random_image_post %}
             <div class="tag-image">
                 {% with image=random_image_post.get_first_image %}
                     <a href="{{ random_image_post.get_absolute_url|safe }}"><img
                         src="{{ image.get_thumb_url|safe }}"
                         width="{{ image.get_preview_size.0 }}"
                         height="{{ image.get_preview_size.1 }}"
                         alt="{{ random_image_post.id }}"/></a>
                 {% endwith %}
             </div>
         {% endif %}
         <div class="tag-text-data">
             <h2>
                 /{{ tag.get_view|safe }}/
             </h2>
             {% if perms.change_tag %}
                 <div class="moderator_info"><a href="{% url 'admin:boards_tag_change' tag.id %}">{% trans 'Edit tag' %}</a></div>
             {% endif %}
             <p>
                 <form action="{% url 'tag' tag.get_name %}" method="post" class="post-button-form">
                     {% if is_favorite %}
                         <button name="method" value="unsubscribe" class="fav">★ {% trans "Remove from favorites" %}</button>
                     {% else %}
                         <button name="method" value="subscribe" class="not_fav">★ {% trans "Add to favorites" %}</button>
                     {% endif %}
                 </form>
                 &bull;
                 <form action="{% url 'tag' tag.get_name %}" method="post" class="post-button-form">
                     {% if is_hidden %}
                         <button name="method" value="unhide" class="fav">{% trans "Show" %}</button>
                     {% else %}
                         <button name="method" value="hide" class="not_fav">{% trans "Hide" %}</button>
                     {% endif %}
                 </form>
                 &bull;
                 <a href="{% url 'tag_gallery' tag.get_name %}">{% trans 'Gallery' %}</a>
             </p>
             {% if tag.get_description %}
                 <p>{{ tag.get_description|safe }}</p>
             {% endif %}
             <p>
                 {% with active_count=tag.get_active_thread_count bumplimit_count=tag.get_bumplimit_thread_count archived_count=tag.get_archived_thread_count %}
                     {% if active_count %}
                         ● {{ active_count }}&ensp;
                     {% endif %}
                     {% if bumplimit_count %}
                         ◍ {{ bumplimit_count }}&ensp;
                     {% endif %}
                     {% if archived_count %}
                         ○ {{ archived_count }}&ensp;
                     {% endif %}
                 {% endwith %}
                 ♥ {{ tag.get_post_count }}
             </p>
             {% if tag.get_all_parents %}
                 <p>
                     {% for parent in tag.get_all_parents %}
                         {{ parent.get_view|safe }} &gt;
                     {% endfor %}
                     {{ tag.get_view|safe }}
                 </p>
             {% endif %}
             {% if tag.get_children.all %}
                 <p>
                 {% trans "Subsections: " %}
                 {% for child in tag.get_children.all %}
                     {{ child.get_view|safe }}{% if not forloop.last%}, {% endif %}
                 {% endfor %}
                 </p>
             {% endif %}
         </div>
     </div>
 {% endif %}
 
     {% if threads %}
         {% if prev_page_link %}
             <div class="page_link">
                 <a href="{{ prev_page_link }}">&lt;&lt; {% trans "Previous page" %} &lt;&lt;</a>
             </div>
         {% endif %}
 
         {% for thread in threads %}
             <div class="thread">
                 {% post_view thread.get_opening_post thread=thread truncated=True need_open_link=True %}
                 {% if not thread.archived %}
                     {% with last_replies=thread.get_last_replies %}
                         {% if last_replies %}
                             {% with skipped_replies_count=thread.get_skipped_replies_count %}
                                 {% if skipped_replies_count %}
                                     <div class="skipped_replies">
                                         <a href="{% url 'thread' thread.get_opening_post_id %}">
                                             {% blocktrans count count=skipped_replies_count %}Skipped {{ count }} reply. Open thread to see all replies.{% plural %}Skipped {{ count }} replies. Open thread to see all replies.{% endblocktrans %}
                                         </a>
                                     </div>
                                 {% endif %}
                             {% endwith %}
                             <div class="last-replies">
                                 {% for post in last_replies %}
                                     {% post_view post truncated=True %}
                                 {% endfor %}
                             </div>
                         {% endif %}
                     {% endwith %}
                 {% endif %}
             </div>
         {% endfor %}
 
         {% if next_page_link %}
             <div class="page_link">
                 <a href="{{ next_page_link }}">&gt;&gt; {% trans "Next page" %} &gt;&gt;</a>
             </div>
         {% endif %}
     {% else %}
         <div class="post">
             {% trans 'No threads exist. Create the first one!' %}</div>
     {% endif %}
 
     <div class="post-form-w">
         <script src="{% static 'js/panel.js' %}"></script>
         <div class="post-form" data-hasher="{% static 'js/3party/sha256.js' %}"
                                data-pow-script="{% static 'js/proof_of_work.js' %}">
             <div class="form-title">{% trans "Create new thread" %}</div>
             <div class="swappable-form-full">
             <form enctype="multipart/form-data" method="post" id="form">{% csrf_token %}
                 {{ form.as_div }}
                 <div class="form-submit">
                     <input type="submit" value="{% trans "Post" %}"/>
                     <button id="preview-button" type="button" onclick="return false;">{% trans 'Preview' %}</button>
                 </div>
             </form>
             </div>
             <div>
                 {% trans 'Tags must be delimited by spaces. Text or image is required.' %}
                 {% with size=max_file_size|filesizeformat %}
                     {% blocktrans %}Max total file size is {{ size }}.{% endblocktrans %}
                 {% endwith %}
                 {% blocktrans %}Max file number is {{ max_files }}.{% endblocktrans %}
             </div>
             <div id="preview-text"></div>
             <div><a href="{% url "staticpage" name="help" %}">{% trans 'Help' %}</a></div>
         </div>
     </div>
 
     <script src="{% static 'js/form.js' %}"></script>
-        <script src="{% static 'js/3party/jquery.blockUI.js' %}"></script>
+    <script src="{% static 'js/jquery.form.min.js' %}"></script>
+    <script src="{% static 'js/3party/jquery.blockUI.js' %}"></script>
     <script src="{% static 'js/thread_create.js' %}"></script>
 
 {% endblock %}
 
 {% block metapanel %}
 
     <span class="metapanel">
         {% trans "Pages:" %}
         [
         {% with dividers=paginator.get_dividers %}
             {% for page in paginator.get_divided_range %}
                 {% if page in dividers %}
                     …,
                 {% endif %}
                 <a
                     {% ifequal page current_page.number %}
                         class="current_page"
                     {% endifequal %}
                     href="{% page_url paginator page %}">{{ page }}</a>{% if not forloop.last %},{% endif %}
             {% endfor %}
         {% endwith %}
         ]
     </span>
 
 {% endblock %}

boards/urls.py

@@ -1,90 +1,91 b''
 from django.conf.urls import url
 from django.urls import path
 from django.views.i18n import JavaScriptCatalog
 
 from boards import views
 from boards.rss import AllThreadsFeed, TagThreadsFeed, ThreadPostsFeed
 from boards.views import api, tag_threads, all_threads, settings, feed, stickers, thread, banned
 from boards.views.authors import AuthorsView
 from boards.views.landing import LandingView
 from boards.views.notifications import NotificationView
 from boards.views.preview import PostPreviewView
 from boards.views.random import RandomImageView
 from boards.views.search import BoardSearchView
 from boards.views.static import StaticPageView
 from boards.views.sync import get_post_sync_data, response_get, response_list
 from boards.views.tag_gallery import TagGalleryView
 from boards.views.utils import UtilsView
 
 
 urlpatterns = [
     # /boards/
     path('all/', all_threads.AllThreadsView.as_view(), name='index'),
 
     # /boards/tag/tag_name/
     url(r'^tag/(?P<tag_name>[\w\d\']+)/$', tag_threads.TagView.as_view(),
         name='tag'),
     url(r'^tag/(?P<tag_name>[\w\d\']+)/gallery/$', TagGalleryView.as_view(), name='tag_gallery'),
 
     # /boards/thread/
     path('thread/<int:post_id>/', views.thread.NormalThreadView.as_view(),
          name='thread'),
     path('thread/<int:post_id>/mode/gallery/', views.thread.GalleryThreadView.as_view(),
          name='thread_gallery'),
     path('thread/<int:post_id>/mode/tree/', views.thread.TreeThreadView.as_view(),
          name='thread_tree'),
     # /feed/
     path('feed/', views.feed.FeedView.as_view(), name='feed'),
 
     path('settings/', settings.SettingsView.as_view(), name='settings'),
     path('stickers/', stickers.AliasesView.as_view(), name='stickers'),
     path('stickers/<str:category>/', stickers.AliasesView.as_view(), name='stickers'),
     path('authors/', AuthorsView.as_view(), name='authors'),
 
     path('banned/', views.banned.BannedView.as_view(), name='banned'),
     path('staticpage/<str:name>/', StaticPageView.as_view(), name='staticpage'),
 
     path('random/', RandomImageView.as_view(), name='random'),
     path('search/', BoardSearchView.as_view(), name='search'),
     path('', LandingView.as_view(), name='landing'),
     path('utils', UtilsView.as_view(), name='utils'),
 
     # RSS feeds
     path('rss/', AllThreadsFeed()),
     path('all/rss/', AllThreadsFeed()),
     url(r'^tag/(?P<tag_name>\w+)/rss/$', TagThreadsFeed()),
     path('thread/<int:post_id>/rss/', ThreadPostsFeed()),
 
     # i18n
     path('jsi18n/', JavaScriptCatalog.as_view(packages=['boards']), name='js_info_dict'),
 
     # API
     url(r'^api/post/(?P<post_id>\d+)/$', api.get_post, name="get_post"),
     url(r'^api/diff_thread/$', api.api_get_threaddiff, name="get_thread_diff"),
     url(r'^api/threads/(?P<count>\w+)/$', api.api_get_threads,
             name='get_threads'),
     url(r'^api/tags/$', api.api_get_tags, name='get_tags'),
     url(r'^api/thread/(?P<opening_post_id>\w+)/$', api.api_get_thread_posts,
             name='get_thread'),
     url(r'^api/add_post/(?P<opening_post_id>\w+)/$', api.api_add_post,
-            name='add_post'),
+        name='add_post'),
+    url(r'^api/add_post/$', api.api_add_post, name='add_post'),
     url(r'^api/notifications/(?P<username>\w+)/$', api.api_get_notifications,
             name='api_notifications'),
     url(r'^api/preview/$', api.api_get_preview, name='preview'),
     url(r'^api/new_posts/$', api.api_get_new_posts, name='new_posts'),
     url(r'^api/stickers/$', api.api_get_stickers, name='get_stickers'),
 
     # Sync protocol API
     url(r'^api/sync/list/$', response_list, name='api_sync_list'),
     url(r'^api/sync/get/$', response_get, name='api_sync_get'),
 
     # Notifications
     path('notifications/<str:username>/', NotificationView.as_view(), name='notifications'),
     path('notifications/', NotificationView.as_view(), name='notifications'),
 
     # Post preview
     path('preview/', PostPreviewView.as_view(), name='preview'),
     path('post_xml/<int:post_id>', get_post_sync_data,
          name='post_sync_data'),
 ]
 

boards/views/api.py

@@ -1,321 +1,331 b''
 import json
 import logging
 
 from django.core import serializers
 from django.db import transaction
 from django.db.models import Q
 from django.http import HttpResponse, HttpResponseBadRequest
 from django.shortcuts import get_object_or_404
 from django.views.decorators.csrf import csrf_protect
 
 from boards.abstracts.settingsmanager import get_settings_manager
-from boards.forms import PostForm, PlainErrorList
+from boards.forms import PostForm, PlainErrorList, ThreadForm
 from boards.mdx_neboard import Parser
 from boards.models import Post, Thread, Tag, TagAlias
 from boards.models.attachment import AttachmentSticker
 from boards.models.thread import STATUS_ARCHIVE
 from boards.models.user import Notification
 from boards.utils import datetime_to_epoch
 
 __author__ = 'neko259'
 
 PARAMETER_TRUNCATED = 'truncated'
 PARAMETER_TAG = 'tag'
 PARAMETER_OFFSET = 'offset'
 PARAMETER_DIFF_TYPE = 'type'
 PARAMETER_POST = 'post'
 PARAMETER_UPDATED = 'updated'
 PARAMETER_LAST_UPDATE = 'last_update'
 PARAMETER_THREAD = 'thread'
 PARAMETER_UIDS = 'uids'
 PARAMETER_SUBSCRIBED = 'subscribed'
 
 DIFF_TYPE_HTML = 'html'
 DIFF_TYPE_JSON = 'json'
 
 STATUS_OK = 'ok'
 STATUS_ERROR = 'error'
 
 logger = logging.getLogger(__name__)
 
 
 @transaction.atomic
 def api_get_threaddiff(request):
     """
     Gets posts that were changed or added since time
     """
 
     thread_id = request.POST.get(PARAMETER_THREAD)
     uids_str = request.POST.get(PARAMETER_UIDS)
 
     if not thread_id or not uids_str:
         return HttpResponse(content='Invalid request.')
 
     uids = uids_str.strip().split(' ')
 
     opening_post = get_object_or_404(Post, id=thread_id)
     thread = opening_post.get_thread()
 
     json_data = {
         PARAMETER_UPDATED: [],
         PARAMETER_LAST_UPDATE: None,  # TODO Maybe this can be removed already?
     }
     posts = Post.objects.filter(thread=thread).exclude(uid__in=uids)
 
     diff_type = request.GET.get(PARAMETER_DIFF_TYPE, DIFF_TYPE_HTML)
 
     for post in posts:
         json_data[PARAMETER_UPDATED].append(post.get_post_data(
             format_type=diff_type, request=request))
     json_data[PARAMETER_LAST_UPDATE] = str(thread.last_edit_time)
 
     settings_manager = get_settings_manager(request)
     json_data[PARAMETER_SUBSCRIBED] = str(settings_manager.thread_is_fav(opening_post))
 
     # If the tag is favorite, update the counter
     settings_manager = get_settings_manager(request)
     favorite = settings_manager.thread_is_fav(opening_post)
     if favorite:
         settings_manager.add_or_read_fav_thread(opening_post)
 
     return HttpResponse(content=json.dumps(json_data))
 
 
 @csrf_protect
-def api_add_post(request, opening_post_id):
+def api_add_post(request, opening_post_id=None):
     """
     Adds a post and return the JSON response for it
     """
 
-    # TODO Allow thread creation here too, without specifying opening post
-    opening_post = get_object_or_404(Post, id=opening_post_id)
+    if opening_post_id:
+        opening_post = get_object_or_404(Post, id=opening_post_id)
+    else:
+        opening_post = None
 
     status = STATUS_OK
     errors = []
 
     post = None
     if request.method == 'POST':
-        form = PostForm(request.POST, request.FILES, error_class=PlainErrorList)
+        if opening_post:
+            form = PostForm(request.POST, request.FILES, error_class=PlainErrorList)
+        else:
+            form = ThreadForm(request.POST, request.FILES, error_class=PlainErrorList)
+
         form.session = request.session
 
         if form.need_to_ban:
             # Ban user because he is suspected to be a bot
             # _ban_current_user(request)
             status = STATUS_ERROR
         if form.is_valid():
             post = Post.objects.create_from_form(request, form, opening_post,
                                                  html_response=False)
             if not post:
                 status = STATUS_ERROR
             else:
                 logger.info('Added post #%d via api.' % post.id)
         else:
             status = STATUS_ERROR
             errors = form.as_json_errors()
     else:
         status = STATUS_ERROR
 
     response = {
         'status': status,
         'errors': errors,
     }
 
     if post:
         response['post_id'] = post.id
+        if not opening_post:
+            # FIXME For now we include URL only for threads to navigate to them.
+            # This needs to become something universal, just not yet sure how.
+            response['url'] = post.get_absolute_url()
 
     return HttpResponse(content=json.dumps(response))
 
 
 def get_post(request, post_id):
     """
     Gets the html of a post. Used for popups. Post can be truncated if used
     in threads list with 'truncated' get parameter.
     """
 
     post = get_object_or_404(Post, id=post_id)
     truncated = PARAMETER_TRUNCATED in request.GET
 
     return HttpResponse(content=post.get_view(truncated=truncated, need_op_data=True))
 
 
 def api_get_threads(request, count):
     """
     Gets the JSON thread opening posts list.
     Parameters that can be used for filtering:
     tag, offset (from which thread to get results)
     """
 
     if PARAMETER_TAG in request.GET:
         tag_name = request.GET[PARAMETER_TAG]
         if tag_name is not None:
             tag = get_object_or_404(Tag, name=tag_name)
             threads = tag.get_threads().exclude(status=STATUS_ARCHIVE)
     else: 
         threads = Thread.objects.exclude(status=STATUS_ARCHIVE)
 
     if PARAMETER_OFFSET in request.GET:
         offset = request.GET[PARAMETER_OFFSET]
         offset = int(offset) if offset is not None else 0
     else:
         offset = 0
 
     threads = threads.order_by('-bump_time')
     threads = threads[offset:offset + int(count)]
 
     opening_posts = []
     for thread in threads:
         opening_post = thread.get_opening_post()
 
         # TODO Add tags, replies and images count
         post_data = opening_post.get_post_data(include_last_update=True)
         post_data['status'] = thread.get_status()
 
         opening_posts.append(post_data)
 
     return HttpResponse(content=json.dumps(opening_posts))
 
 
 # TODO Test this
 def api_get_tags(request):
     """
     Gets all tags or user tags.
     """
 
     # TODO Get favorite tags for the given user ID
 
     tags = TagAlias.objects.all()
 
     term = request.GET.get('term')
     if term is not None:
         tags = tags.filter(name__contains=term)
 
     tag_names = [tag.name for tag in tags]
 
     return HttpResponse(content=json.dumps(tag_names))
 
 
 def api_get_stickers(request):
     term = request.GET.get('term')
     if not term:
         return HttpResponseBadRequest()
     
     global_stickers = AttachmentSticker.objects.filter(Q(name__icontains=term) | Q(stickerpack__name__icontains=term))
     local_stickers = [sticker for sticker in get_settings_manager(request).get_stickers() if term in sticker.name]
     stickers = list(global_stickers) + local_stickers
 
     image_dict = [{'thumb': sticker.attachment.get_thumb_url(),
                    'alias': str(sticker)}
                   for sticker in stickers]
 
     return HttpResponse(content=json.dumps(image_dict))
 
 
 # TODO The result can be cached by the thread last update time
 # TODO Test this
 def api_get_thread_posts(request, opening_post_id):
     """
     Gets the JSON array of thread posts
     """
 
     opening_post = get_object_or_404(Post, id=opening_post_id)
     thread = opening_post.get_thread()
     posts = thread.get_replies()
 
     json_data = {
         'posts': [],
         'last_update': None,
     }
     json_post_list = []
 
     for post in posts:
         json_post_list.append(post.get_post_data())
     json_data['last_update'] = datetime_to_epoch(thread.last_edit_time)
     json_data['posts'] = json_post_list
 
     return HttpResponse(content=json.dumps(json_data))
 
 
 def api_get_notifications(request, username):
     last_notification_id_str = request.GET.get('last', None)
     last_id = int(last_notification_id_str) if last_notification_id_str is not None else None
 
     posts = Notification.objects.get_notification_posts(usernames=[username],
                                                         last=last_id)
 
     json_post_list = []
     for post in posts:
         json_post_list.append(post.get_post_data())
     return HttpResponse(content=json.dumps(json_post_list))
 
 
 def api_get_post(request, post_id):
     """
     Gets the JSON of a post. This can be
     used as and API for external clients.
     """
 
     post = get_object_or_404(Post, id=post_id)
 
     json = serializers.serialize("json", [post], fields=(
         "pub_time", "_text_rendered", "title", "text", "image",
         "image_width", "image_height", "replies", "tags"
     ))
 
     return HttpResponse(content=json)
 
 
 def api_get_preview(request):
     raw_text = request.POST['raw_text']
 
     parser = Parser()
     return HttpResponse(content=parser.parse(parser.preparse(raw_text)))
 
 
 def api_get_new_posts(request):
     """
     Gets favorite threads and unread posts count.
     """
     posts = list()
 
     include_posts = 'include_posts' in request.GET
 
     settings_manager = get_settings_manager(request)
     fav_threads = settings_manager.get_fav_threads()
     fav_thread_ops = Post.objects.filter(id__in=fav_threads.keys())\
         .order_by('-pub_time').prefetch_related('thread')
 
     ops = [{'op': op, 'last_id': fav_threads[str(op.id)]} for op in fav_thread_ops]
     if include_posts:
         new_post_threads = Thread.objects.get_new_posts(ops)
         if new_post_threads:
             thread_ids = {thread.id: thread for thread in new_post_threads}
         else:
             thread_ids = dict()
 
         for op in fav_thread_ops:
             fav_thread_dict = dict()
 
             op_thread = op.get_thread()
             if op_thread.id in thread_ids:
                 thread = thread_ids[op_thread.id]
                 new_post_count = thread.new_post_count
                 fav_thread_dict['newest_post_link'] = thread.get_replies()\
                         .filter(id__gt=fav_threads[str(op.id)])\
                         .first().get_absolute_url(thread=thread)
             else:
                 new_post_count = 0
             fav_thread_dict['new_post_count'] = new_post_count
 
             fav_thread_dict['id'] = op.id
 
             fav_thread_dict['post_url'] = op.get_link_view()
             fav_thread_dict['title'] = op.title
 
             posts.append(fav_thread_dict)
     else:
         fav_thread_dict = dict()
         fav_thread_dict['new_post_count'] = \
             Thread.objects.get_new_post_count(ops)
         posts.append(fav_thread_dict)
 
     return HttpResponse(content=json.dumps(posts))