old/assets/js/project-edit.js

let editor;
$(function () {
    editor = ContentTools.EditorApp.get();
    editor.init('*[data-editable]', 'data-name', null, false);
    editor.start();

    if ($('#projectImage').val() !== '-1') {
        showProjectImage();
    }

    if($('#url').val() === '') {
        allowUrlEditing = true;
    }
});

function showProjectImage() {
    $('#uploadedImage').css('background-image', 'url(' + $('#projectImage').val() + ')');
}

function sendEdit() {
    editor.stop(true);
    const data = {
        titleDE: $('#title').val(),
        titleEN: $('#titleEnglish').val(),
        titleFR: $('#titleFrench').val(),
        headlineDE: $('#headline').val(),
        headlineEN: $('#headlineEnglish').val(),
        headlineFR: $('#headlineFrench').val(),
        contentDE: $('#content').html(),
        contentEN: $('#contentEnglish').html(),
        contentFR: $('#contentFrench').html(),
        url: $('#url').val(),
        categories: $('#categories').val(),
        date: $('#datepicker').val(),
        image: $('#projectImage').val(),
        isDownloadable: $('#download').val(),
        downloadLink: $('#downloadLink').val(),
        downloadLinkName: $('#downloadLinkName').text(),
        isOpenSource: $('#opensource').val(),
        openSourceLink: $('#openSourceLink').val(),
        openSourceLinkName: $('#openSourceLinkName').text(),
        customLink: $('#customLink').val(),
        customLinkName: $('#customLinkName').text(),
        editingID: $('#editingID').val()
    };
    editor.start();

    $.ajax({
        url: '/admin/projects/sendEdit',
        data: data,
        method: 'POST',
        success: data => {
            if(data.success) {
                $('#editingID').val(data.id);
                $('.snackbar-container').append(`
                    <div class="alert alert-success snackbar" role="alert">
                        ${data.message}
                    </div>
                `);
            } else {
                $('.snackbar-container').append(`
                    <div class="alert alert-danger snackbar" role="alert">
                        ${data.message}
                    </div>
                `);
            }
        },
    })
}

$('#projectForm').submit((e) => {
    e.preventDefault();
    sendEdit();
});

$('#opensource').change(function() {
    toggleOpenSouce();
});

$('#download').change(function () {
    toggleDownload();
});

function toggleDownload() {
    if($('#download').prop('checked')) {
        $('#downloadLink').prop('disabled', false);
        $('#downloadLinkName').prop('contenteditable', true)
            .prop('disabled', false);
    } else {
        $('#opensource').prop('checked', false);
        $('#downloadLink').prop('disabled', true);
        $('#downloadLinkName').prop('contenteditable', false)
            .prop('disabled', true);
        toggleOpenSouce();
    }
}

function toggleOpenSouce() {
    if($('#opensource').prop('checked')) {
        $('#download').prop('checked', true);
        $('#openSourceLink').prop('disabled', false);
        $('#openSourceLinkName').prop('contenteditable', true)
            .prop('disabled', false);
        toggleDownload();
    } else {
        $('#openSourceLink').prop('disabled', true);
        $('#openSourceLinkName').prop('contenteditable', false)
            .prop('disabled', true);
    }
}

$('.upload-btn').on('change', '.upload-image', function () {
    $('.upload-btn .fa').removeClass('fa-upload')
        .addClass('fa-cog').addClass('fa-spin');

    const file = this.files[0],
        imageFile = file.type,
        match = ['image/jpeg', 'image/jpg', 'image/png'];

    if(match.indexOf(imageFile) === -1) {
        return;
    }

    const reader = new FileReader();
    reader.addEventListener('load', () => {
        $('.uploaded-image-container').css('background-image', `url(${reader.result}`);

        $.ajax({
            url: '/admin/files/uploadImage',
            type: 'POST',
            data: {
                image: reader.result,
                name: file.name,
                type: file.type,
                size: file.size
            },
            success: (data) => {
                if(data.success) {
                    $('.upload-btn .fa').removeClass('fa-cog').removeClass('fa-spin')
                        .addClass('fa-check');
                    $('#projectImage').val(data.url);
                    $('.uploaded-image-container').css('background-image', `url(${data.url}`);
                    $('.snackbar-container').append(`
                        <div class="alert alert-success snackbar" role="alert">
                            ${data.message}
                        </div>
                    `);
                } else {
                    $('.upload-btn .fa').removeClass('fa-cog').removeClass('fa-spin')
                        .addClass('fa-cross');
                    $('.uploaded-image-container').css('background-image', '')
                        .css('background-color', '#F72754');
                    $('.snackbar-container').append(`
                        <div class="alert alert-danger snackbar" role="alert">
                            ${data.message}
                        </div>
                    `);
                }

                setTimeout(() => {
                    $('.upload-btn .fa').removeClass('fa-cross')
                        .removeClass('fa-check')
                        .addClass('fa-upload');
                    $('.uploaded-image-container').css('background-color', '');
                }, 2000);
            },
        });
    });
    reader.readAsDataURL(file);
});

$('#url').keyup(function (e) {
    $('#url').val(encodeUrl($('#url').val()));
    allowUrlEditing = false;
});

function encodeUrl(text) {
    return text.toLowerCase()
        .replace(/ /g, '-')
        .replace(/ä/g, 'ae')
        .replace(/ö/g, 'oe')
        .replace(/ü/g, 'ue')
        .replace(/[.!?\\\/,]/g, '')
        .replace(/-+/g, '-');
}

let allowUrlEditing = false;

$('#title').keyup(() => {
    if(allowUrlEditing) {
        $('#url').val(encodeUrl($('#title').val()));
    }
});