boards/static/js/form.js

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