old/assets/js/post-create.js

$('#contentField').on('keyup', function (e) {
    var range = window.getSelection().getRangeAt(0);
    var end_node = range.endContainer;
    var end = range.endOffset;

    if (end_node !== this) {
        const text_nodes = get_text_nodes_in(this);
        for (let i = 0; i < text_nodes.length; ++i) {
            if (text_nodes[i] === end_node) {
                break;
            }
            end += text_nodes[i].length;
        }
    }

    let html = $(this).html();
    if (/\&nbsp;$/.test(html) && $(this).text().length === end) {
        end--;
        set_range(end, end, this);
        return;
    }

    let filter = html.replace(/<span class="mention">/g, "")
        .replace(/<span class="hashtag">/g, "")
        .replace(/<\/span>/g, "")
        .replace(/@[A-Za-z0-9._]+/g, function (match) {
            return `<span class="mention">${match}</span>`;
        })
        .replace(/#[A-Za-z0-9._]+/g, function (match) {
            return `<span class="hashtag">${match}</span>`;
        });

    console.log(html);

    if (!/&nbsp;$/.test($(this).html())) {
        filter += '&nbsp;';
    }
    $(this).html(filter);
    set_range(end, end, this);
});

$('#contentField').on('mouseup', function (e) {
    if (!/\&nbsp;$/.test($(this).html())) {
        return;
    }
    var range = window.getSelection().getRangeAt(0);
    var end = range.endOffset;
    var end_node = range.endContainer;
    if (end_node != this) {
        var text_nodes = get_text_nodes_in(this);
        for (var i = 0; i < text_nodes.length; ++i) {
            if (text_nodes[i] == end_node) {
                break;
            }
            end += text_nodes[i].length;
        }
    }
    if ($(this).text().length == end) {
        end = end - 1;
        set_range(end, end, this);
    }
});

function get_text_nodes_in(node) {
    var text_nodes = [];
    if (node.nodeType === 3) {
        text_nodes.push(node);
    } else {
        var children = node.childNodes;
        for (var i = 0, len = children.length; i < len; ++i) {
            var text_node;
            text_nodes.push.apply(text_nodes, get_text_nodes_in(children[i]));
        }
    }
    return text_nodes;
}

function set_range(start, end, element) {
    var range = document.createRange();
    range.selectNodeContents(element);
    var text_nodes = get_text_nodes_in(element);
    var foundStart = false;
    var char_count = 0, end_char_count;

    for (var i = 0, text_node; text_node = text_nodes[i++];) {
        end_char_count = char_count + text_node.length;
        if (!foundStart && start >= char_count && (start < end_char_count || (start === end_char_count && i < text_nodes.length))) {
            range.setStart(text_node, start - char_count);
            foundStart = true;
        }
        if (foundStart && end <= end_char_count) {
            range.setEnd(text_node, end - char_count);
            break;
        }
        char_count = end_char_count;
    }

    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}

$.fn.selectRange = function (start, end) {
    var e = document.getElementById($(this).attr('id'));
    if (!e) return;
    else if (e.setSelectionRange) {
        e.focus();
        e.setSelectionRange(start, end);
    } /* WebKit */
    else if (e.createTextRange) {
        var range = e.createTextRange();
        range.collapse(true);
        range.moveEnd('character', end);
        range.moveStart('character', start);
        range.select();
    } /* IE */
    else if (e.selectionStart) {
        e.selectionStart = start;
        e.selectionEnd = end;
    }
};

let postMedia = {};
function publishPost() {
    let isFilled = true;
    let content = $('#contentField').text();
    console.log(content);
    if (content === "") {
        $('#postModal #content').addClass('has-error');
        isFilled = false;
    } else {
        $('#postModal #content').addClass('has-success');
    }

    if (isFilled) {
        const replyTo = $('#postModal #replyTo').val();
        submitPost(content, replyTo);
    }
}

$('#postFiles').on('change', function() {
    console.log(this.files);
    const match = ['image/jpeg', 'image/jpg', 'image/png'];
    const mediaCount = Object.keys(postMedia).length;
    if(mediaCount < 4) {
        for (let i = 0; i < this.files.length && i < 4 - mediaCount; i++) {
            const file = this.files[i];
            if (match.indexOf(file.type) === -1)
                continue;

            const reader = new FileReader();
            reader.addEventListener('load', () => {
                $('.post-images').append(`<div class="post-image" style="background-image: url(${reader.result})"></div>`);
                postMedia[mediaCount + i] = {
                    image: reader.result,
                    type: file.type,
                    size: file.size,
                    name: file.name
                };
            });
            reader.readAsDataURL(file);
        }
    }
    if(Object.keys(postMedia).length >= 4) {
        $('.postImageUpload').hide();
    }
});

$('#postModal').on('hidden.bs.modal', () => {
    $('#postModal #replyTo').val(-1);
});

function submitPost(content, replyTo) {
    if(postMedia.length > 4) {
        return;
    }

    $.ajax({
        url: "/user/publishPost",
        method: 'POST',
        data: {
            content,
            replyTo,
            postMedia
        },
        beforeSend: function () {
            $('#postModalBody').empty().append("<i class='fa fa-cog fa-spin fa-5x'></i>");
            $('#postModalPublish').button('loading');
        },
        success: function (data) {
            $('#postModalBody').empty().append(data);
        },
        error: function (data) {
            console.log(data);
        }
    });
}