Added form reset

boards/static/js/form.js

@@ -1,302 +1,329 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 REPLY_TO_MSG = '.reply-to-message';
 
 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);
     }
 }
 
+function getForm() {
+    return $('.post-form-w');
+}
+
+/**
+ * Clear all entered values in the form fields
+ */
+function resetForm() {
+    var form = getForm();
+
+    form.find('input:text, input:password, input:file, textarea').val('');
+    form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
+    pastedImages = [];
+    $('#pasted-images').remove();
+    $('.file_wrap').find('.file-thumb').remove();
+    $('#preview-text').hide();
+
+    resetFormPosition(form);
+}
+
+function resetFormPosition(form) {
+    form.insertBefore($('footer'));
+
+    $(REPLY_TO_MSG).hide();
+}
+
 $(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.js

@@ -1,167 +1,142 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 REPLY_TO_MSG = '.reply-to-message';
 var REPLY_TO_MSG_ID = '#reply-to-message-id';
 
 var $html = $("html, body");
 
 function moveCaretToEnd(el) {
     var newPos = el.val().length;
     el[0].setSelectionRange(newPos, newPos);
 }
 
-function getForm() {
-    return $('.post-form-w');
-}
-
-/**
- * Clear all entered values in the form fields
- */
-function resetForm() {
-    var form = getForm();
-
-    form.find('input:text, input:password, input:file, textarea').val('');
-    form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
-    pastedImages = [];
-    $('#pasted-images').remove();
-    $('.file_wrap').find('.file-thumb').remove();
-    $('#preview-text').hide();
-
-    resetFormPosition(form);
-}
-
-function resetFormPosition(form) {
-    form.insertAfter($('.thread'));
-
-    $(REPLY_TO_MSG).hide();
-}
 
 function showFormAfter(blockToInsertAfter) {
     var form = getForm();
     form.insertAfter(blockToInsertAfter);
 
     form.show();
     $(REPLY_TO_MSG_ID).text(blockToInsertAfter.attr('id'));
     $(REPLY_TO_MSG).show();
 }
 
 function addQuickReply(postId) {
     var blockToInsert = null;
     var textAreaJq = getPostTextarea();
     var postLinkRaw = '[post]' + postId + '[/post]'
     var textToAdd = '';
 
     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.
         var postText = textAreaJq.val();
         if (!post.is(':first-child') && postText.indexOf(postLinkRaw) < 0) {
             // Insert line break if none is present.
             if (postText.length > 0 && !postText.endsWith('\n') && !postText.endsWith('\r')) {
                 textToAdd += '\n';
             }
             textToAdd += postLinkRaw + '\n';
         }
 
         textAreaJq.val(textAreaJq.val()+ textToAdd);
         blockToInsert = post;
     } else {
         blockToInsert = $('.thread');
     }
     showFormAfter(blockToInsert);
 
     textAreaJq.focus();
 
     moveCaretToEnd(textAreaJq);
 }
 
 function addQuickQuote() {
     var textAreaJq = getPostTextarea();
 
     var quoteButton = $("#quote-button");
     var postId = quoteButton.attr('data-post-id');
     if (postId != null) {
         addQuickReply(postId);
     }
 
     var textToAdd = '';
     var selection = window.getSelection().toString();
     if (selection.length == 0) {
         selection = quoteButton.attr('data-text');
     }
     if (selection.length > 0) {
         textToAdd += '[quote]' + selection + '[/quote]\n';
     }
 
     textAreaJq.val(textAreaJq.val() + textToAdd);
 
     textAreaJq.focus();
 
     moveCaretToEnd(textAreaJq);
 }
 
 function scrollToBottom() {
     $html.animate({scrollTop: $html.height()}, "fast");
 }
 
 function showQuoteButton() {
     var selection = window.getSelection().getRangeAt(0).getBoundingClientRect();
     var quoteButton = $("#quote-button");
     if (selection.width > 0) {
         // quoteButton.offset({ top: selection.top - selection.height, left: selection.left });
         quoteButton.css({top: selection.top + $(window).scrollTop() - 30, left: selection.left});
         quoteButton.show();
 
         var text = window.getSelection().toString();
         quoteButton.attr('data-text', text);
 
         var rect = window.getSelection().getRangeAt(0).getBoundingClientRect();
         var element = $(document.elementFromPoint(rect.x, rect.y));
         var postId = null;
         if (element.hasClass('post')) {
             postId = element.attr('id');
         } else {
             var postParent = element.parents('.post');
             if (postParent.length > 0) {
                 postId = postParent.attr('id');
             }
         }
         quoteButton.attr('data-post-id', postId);
     } else {
         quoteButton.hide();
     }
 }
 
 $(document).ready(function() {
     $('body').on('mouseup', function() {
         showQuoteButton();
     });
     $("#quote-button").click(function() {
         addQuickQuote();
     })
 });

boards/templates/boards/form.html

@@ -1,44 +1,46 b''
 {% load i18n %}
 {% load board %}
 {% load static %}
 
 <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' %}">
         {% if new_thread %}
             <div class="form-title">{% trans "Create new thread" %}</div>
         {% else %}
             <div class="form-title">{% trans "Reply to thread" %} #{{ opening_post_id }}<span class="reply-to-message"> {% trans "to message " %} #<span id="reply-to-message-id"></span></span></div>
         {% endif %}
 
         <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><a href="#" onClick="resetForm(); return false;">{% trans 'Reset form' %}</a></div>
+
         <div>
             {% if new_thread %}
                 {% trans 'Tags must be delimited by spaces. Text or image is required.' %}<br />
             {% endif %}
             {% with size=max_file_size|filesizeformat %}
                 {% blocktrans %}Max total file size is {{ size }}.{% endblocktrans %}<br />
             {% 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/jquery.form.min.js' %}"></script>
 <script src="{% static 'js/3party/jquery.blockUI.js' %}"></script>