old/assets/js/post-create.js

// $('#contentField').on('keypress', function (e) {
//     console.log(e, $(this).html());
//
//     if (e.ctrlKey)
//         return;
//
//     setTimeout(() => {
//         // console.log($(this).html());
//         //
//         const range = window.getSelection().getRangeAt(0);
//         const endNode = range.endContainer;
//         let end = range.endOffset;
//
//         // console.log(range.startOffset, end);
//
//         if (endNode !== this) {
//             console.log('test');
//             const textNodes = get_text_nodes_in(this);
//             console.log(textNodes);
//             for (let i = 0; i < textNodes.length; ++i) {
//                 if (textNodes[i] === endNode)
//                     break;
//                 end += textNodes[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, (match) => `<span class="mention">${match}</span>`)
//             .replace(/#[A-Za-z0-9._]+/g, (match) => `<span class="hashtag">${match}</span>`);
//
//         console.log(range.startOffset, end);
//         $(this).html(filter);
//         set_range(end, end, this);
//     }, 1);
const keys = ['Home', 'End', 'Insert', 'Delete', 'Enter'];
$('#contentField').on('keypress', function (e) {
    console.log(e.key, e.code);
    if(e.ctrlKey || e.key.indexOf('Arrow') === 0 || keys.includes(e.key))
        return;

    console.log(e.which);

    setTimeout(() => {
        var range = window.getSelection().getRangeAt(0);
        var end_node = range.endContainer;
        var end = range.endOffset;
        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;
            }
        }
        var html = $(this).html();
        if (/\&nbsp;$/.test(html) && $(this).text().length == end) {
            end = end - 1;
            set_range(end, end, this);
            return;
        }

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

        // var filter = html.replace(/(<b>)?\/([^<\/]*)(<\/b>)?/g, '\/$2');
        // console.log(filter);
        // filter = filter.replace(/(<b>)?([^<\/]*)\/(<\/b>)?/g, '$2\/');
        // console.log(filter);
        // filter = filter.replace(/(<b>)?\/([^<\/]*)\/(<\/b>)?/g, '<b>\/$2\/<\/b>');
        // console.log(filter);

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

        $(this).html(filter);
        set_range(end, end, this);
    }, 1);
});
// 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>`;
//     });
//
// 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) {
    } 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();
    if (postMedia.length === 0 && content === "") {
        $('#postModal #content').addClass('has-error');
        isFilled = false;
    } else {
        $('#postModal #content').addClass('has-success');
    }

    if (isFilled) {
        const replyTo = $('#postModal #replyTo').val();
        submitPost(content, replyTo);
    } else {
        addSnackbar('primary', 'Wir haben leider noch nicht erlernt, wie man leere Posts veröffentlicht.');
    }
}

let uploadingFiles = [];

(function () {
    // file drag hover
    function fileDragHover(e) {
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : "");
    }

    // file selection
    function fileSelectHandler(e) {

        // cancel event and hover styling
        fileDragHover(e);

        // fetch FileList object
        const files = e.target.files || e.dataTransfer.files;

        // process all File objects
        let i = 0;
        for (let f of files) {
            const generalType = f.type.split('/')[0];

            if (postMedia.length + i > 4 || postMedia.find(media => media.type !== 'image' || media.type !== generalType)) {
                addSnackbar('warning', 'Du kannst maximal vier Bilder zu einem Post hinzufügen.');
                continue;
            }

            parseFile(f);
            uploadFile(f);
            i++;
        }
    }

    // output file information
    function parseFile(file) {
        $('#postModalPublish').addClass('disabled').attr('disabled', true);
        uploadingFiles.push(file);

        const thumbnailEl = $('<div class="post-image"></div>');
        $('.post-images').append(thumbnailEl);
        switch (file.type.split('/')[0]) {
            case 'image':
                const reader = new FileReader();
                reader.addEventListener('load', () => {
                    thumbnailEl.css('background-image', `url(${reader.result})`);
                });
                reader.readAsDataURL(file);

                if (postMedia.length >= 4)
                    $('.postImageUpload').hide();
                break;
            case 'video':
                const video = document.createElement('video');
                video.src = URL.createObjectURL(file);

                video.addEventListener('loadeddata', () => {
                    const width = video.videoWidth;
                    const height = video.videoHeight;

                    const canvas = document.createElement('canvas');
                    canvas.width = width;
                    canvas.height = height;
                    canvas.getContext('2d').drawImage(video, 0, 0, width, height);

                    thumbnailEl.css('background-image', `url(${canvas.toDataURL()})`);
                });

                $('.postImageUpload').hide();
                break;
            case 'audio':
                break;
        }
    }

    // upload JPEG files
    function uploadFile(file) {
        var xhr = new XMLHttpRequest();
        const allowedTypes = ['image/jpg', 'image/jpeg', 'image/gif', 'image/png', 'video/mp4'];
        if (xhr.upload && allowedTypes.includes(file.type) && file.size <= 100000000) {
            const formData = new FormData();
            formData.append('postMedia', file);

            $.ajax({
                url: '/user/uploadPostMedia',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: (data) => {
                    postMedia.push({
                        type: data.type,
                        path: data.path,
                    });

                    uploadingFiles.splice(uploadingFiles.indexOf(file), 1);
                    if (uploadingFiles.length === 0) {
                        $('#postModalPublish').removeClass('disabled').attr('disabled', false);
                    }
                },
                error: () => {
                    addSnackbar('danger', 'Es ist ein Fehler beim Hochladen aufgetreten')
                }
            });

        }

    }

    // initialize
    function init() {

        var fileselect = $('#postFiles')[0],
            filedrag = $('#postFiles')[0];
        // submitbutton = $id("submitbutton");

        if (!fileselect)
            return;

        // file select
        fileselect.addEventListener("change", fileSelectHandler, false);

        // is XHR2 available?
        var xhr = new XMLHttpRequest();
        if (xhr.upload) {

            // file drop
            filedrag.addEventListener("dragover", fileDragHover, false);
            filedrag.addEventListener("dragleave", fileDragHover, false);
            filedrag.addEventListener("drop", fileSelectHandler, false);
            filedrag.style.display = "block";
        }

    }

    // call initialization file
    if (window.File && window.FileList && window.FileReader) {
        init();
    }


})();

$('#postModal')
    .on('hide.bs.modal', function (e) {
        if (!this.forceQuit && (postMedia.length > 0 || $('#contentField').text().trim().length > 0)) {
            e.preventDefault();

            let allowClosing = false;
            const confirmModal = $(`
                <div class="modal fade" role="dialog">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Post verwerfen?</h4>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-sm btn-outline btn-red dismiss" type="button" data-dismiss="modal">Ja, Post verwerfen</button>
                                <button class="btn btn-sm btn-primary continue" type="submit" data-dismiss="modal">Nein, Post behalten</button>
                            </div>
                        </div>
                    </div>
                </div> 
            `);
            confirmModal.modal('show');

            $('.dismiss', confirmModal).click(() => {
                allowClosing = true;

                this.forceQuit = true;
                $(this).modal('hide');
            });

            $('.continue', confirmModal).click(() => {
                allowClosing = true;
            });

            confirmModal
                .on('hide.bs.modal', function (e) {
                    if (!allowClosing)
                        e.preventDefault();
                })
                .on('hidden.bs.modal', function () {
                    $(this).remove();
                });
        } else {
            this.forceQuit = false;
        }
    })
    .on('hidden.bs.modal', () => {
        $('#postModal #replyTo').val(-1);

        if (postMedia.length > 0) {
            postMedia.forEach(media => {
                $.ajax({
                    url: '/user/deletePostMedia',
                    method: 'POST',
                    data: {
                        path: media.path
                    }
                });
            });
        }
        resetPostForm();
        $('#postModalBody > *:not(#postForm)').remove();
        $('#postForm').show();
        $('#postModal .modal-footer').show();
    });

function resetPostForm() {
    uploadingFiles = [];
    postMedia = [];
    $('.post-images').empty();
    $('.postImageUpload').show();
    $('#contentField').text('');
}

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

    const body = $('#postModalBody');
    $.ajax({
        url: "/user/publishPost",
        method: 'POST',
        data: {
            content,
            replyTo,
            postMedia
        },
        beforeSend: function () {
            body.children().hide().parent().append('<div class="loadingSpinner"></div>');
            $('#postModal .modal-footer').hide();
            resetPostForm();
        },
        success: function (data) {
            console.log(data);
            $('.loadingSpinner', body).remove();
            body.append(`
                <div class="alert alert-${data.success ? 'success' : 'danger'}" role="alert">
                    <b>${data.title}</b>
                    ${data.message.join('<br>')}
                </div>
            `);
            if (data.buttons) {
                const footer = $('<div class="modal-footer"></div>');
                body.parent().append(footer);
                data.buttons.forEach(button => {
                    let btn;
                    if (button.action) {
                        btn = `<a href="${button.action}" class="btn btn-${button.type}">${button.text}</a>`;
                    } else {
                        btn = `<button role="button" class="btn btn-${button.type}">${button.text}</button>`;
                    }
                    footer.append(btn);
                });
            }
        },
        error: function (data) {
            console.log(data);
            addSnackbar('warning', '<b>Ein unbekannter Fehler ist beim Veröffentlichen deines Posts aufgetreten.</b> Bitte versuche es später erneut oder kontaktiere uns.');
        }
    });
}