SergiX44/XBackBone

View on GitHub
src/js/app.js

Summary

Maintainability
B
5 hrs
Test Coverage
var app = {
    init: function () {
        Dropzone.options.uploadDropzone = {
            paramName: 'upload',
            maxFilesize: window.AppConfig.max_upload_size / Math.pow(1024, 2), // MB
            dictDefaultMessage: window.AppConfig.lang.dropzone,
            error: function (file, response) {
                this.defaultOptions.error(file, response.message);
            },
            totaluploadprogress: function (uploadProgress) {
                var text = Math.round(uploadProgress) + '%';
                $('#uploadProgess').css({'width': text}).text(text);
            },
            queuecomplete: function () {
                $('#uploadProgess').css({'width': '0%'}).text('');
            },
            success: function (file, response) {
                $(file.previewElement)
                    .find('.dz-filename')
                    .children()
                    .html('<a href="' + response.url + '">' + file.name + '</a>');
            },
            timeout: 0
        };
    },
    run: function () {
        $('[data-toggle="tooltip"]').tooltip();
        $('[data-toggle="popover"]').popover();

        $('.user-delete').click(app.modalDelete);
        $('.public-delete').click(app.modalDelete);
        $('.public-vanity').click(app.modalVanity);
        $('.media-delete').click(app.mediaDelete);
        $('.publish-toggle').click(app.publishToggle);

        $('.refresh-token').click(app.refreshToken);
        $('#themes').mousedown(app.loadThemes);
        $('.checkForUpdatesButton').click(app.checkForUpdates);

        $('.bulk-selector').contextmenu(app.bulkSelect);
        $('#bulk-delete').click(app.bulkDelete);

        $('.tag-add').click(app.addTag);
        $('.tag-item').contextmenu(app.removeTag);


        $('.alert').not('.alert-permanent').fadeTo(10000, 500).slideUp(500, function () {
            $('.alert').slideUp(500);
        });

        if ($('.dropzone').length > 0) {
            app.initClipboardPasteToUpload();
        }

        new ClipboardJS('.btn-clipboard');
        new Plyr($('#player'), {ratio: '16:9'});

        $('.footer').fadeIn(600);

        console.log('Application is ready.');
    },
    modalDelete: function () {
        $('#modalDelete-link').attr('href', $(this).data('link'));
        $('#modalDelete').modal('show');
    },
    modalVanity: function () {
        var id = $(this).data('id');
        $('#modalVanity').modal('show');
        $('#modalVanity-link').click(function () {
            var $callerButton = $(this);
            $.post(window.AppConfig.base_url + '/upload/' + id + '/vanity', {vanity: $('#modalVanity-input').val()}, function (responseData, status) {
                $callerButton.tooltip('dispose');
                $('#modalVanity').modal('hide');
                $('#modalVanity-input').val('');
                var parsedData = JSON.parse(responseData);
                if ($('#media_' + id).find('.btn-group').length > 0) {
                    $('#media_' + id).find('.btn-group').find('a').each(function (item) {
                        var oldUrl = $(this).attr('href');
                        var newUrl = oldUrl.replace(oldUrl.substr(oldUrl.lastIndexOf('/') + 1), parsedData.code.code);
                        $(this).attr('href', newUrl);
                    });
                } else {
                    var oldUrl = window.location.href;
                    var newUrl = oldUrl.replace(oldUrl.substr(oldUrl.lastIndexOf('/') + 1), parsedData.code.code);
                    window.location.href = newUrl;
                }
            });
        });
    },
    publishToggle: function () {
        var id = $(this).data('id');
        var $callerButton = $(this);
        var isOutline = false;
        if ($(this).data('published')) {
            isOutline = $callerButton.hasClass('btn-outline-warning');
            $.post(window.AppConfig.base_url + '/upload/' + id + '/unpublish', function () {
                $callerButton
                    .data('published', false)
                    .tooltip('dispose')
                    .attr('title', window.AppConfig.lang.publish)
                    .tooltip()
                    .removeClass(isOutline ? 'btn-outline-warning' : 'btn-warning')
                    .addClass(isOutline ? 'btn-outline-info' : 'btn-info')
                    .html('<i class="fas fa-check-circle"></i>');
                $('#published_' + id).html('<span class="badge badge-danger"><i class="fas fa-times"></i></span>');
            });
        } else {
            isOutline = $callerButton.hasClass('btn-outline-info');
            $.post(window.AppConfig.base_url + '/upload/' + id + '/publish', function () {
                $callerButton
                    .data('published', true)
                    .tooltip('dispose')
                    .attr('title', window.AppConfig.lang.hide)
                    .tooltip()
                    .removeClass(isOutline ? 'btn-outline-info' : 'btn-info')
                    .addClass(isOutline ? 'btn-outline-warning' : 'btn-warning')
                    .html('<i class="fas fa-times-circle"></i>');
                $('#published_' + id).html('<span class="badge badge-success"><i class="fas fa-check"></i></span>');
            });
        }
    },
    mediaDelete: function () {
        var id = $(this).data('id');
        var $callerButton = $(this);
        $.post(window.AppConfig.base_url + '/upload/' + id + '/delete', function () {
            $callerButton.tooltip('dispose');
            $('#media_' + id).fadeOut(200, function () {
                $(this).remove();
            });
        });
    },
    refreshToken: function () {
        var id = $(this).data('id');
        $.post(window.AppConfig.base_url + '/user/' + id + '/refreshToken', function (data) {
            $('#token').val(data);
        });
    },
    loadThemes: function (e) {
        e.preventDefault();
        var $themes = $('#themes');
        $.get(window.AppConfig.base_url + '/system/themes', function (data) {
            $themes.empty();
            $.each(data, function (key, value) {
                var opt = document.createElement('option');
                opt.value = value;
                opt.innerHTML = key;
                if (value === null) {
                    opt.disabled = true;
                }
                $themes.append(opt);
            });
        });
        $themes.unbind('mousedown');
    },
    checkForUpdates: function () {
        $('#checkForUpdatesMessage').empty().html('<i class="fas fa-spinner fa-pulse fa-3x"></i>');
        $('#doUpgradeButton').prop('disabled', true);
        $.get(window.AppConfig.base_url + '/system/checkForUpdates?prerelease=' + $(this).data('prerelease'), function (data) {
            $('#checkForUpdatesMessage').empty().text(data.message);
            if (data.upgrade) {
                $('#doUpgradeButton').prop('disabled', false);
            } else {
                $('#doUpgradeButton').prop('disabled', true);
            }
        });
    },
    bulkSelect: function (e) {
        e.preventDefault();
        $(this).toggleClass('bg-light').toggleClass('text-danger').toggleClass('bulk-selected');
        var $bulkDelete = $('#bulk-delete');
        if ($bulkDelete.hasClass('disabled')) {
            $bulkDelete.removeClass('disabled');
        }
    },
    bulkDelete: function () {
        $('.bulk-selected').each(function (index, media) {
            $.post(window.AppConfig.base_url + '/upload/' + $(media).data('id') + '/delete', function () {
                $(media).fadeOut(200, function () {
                    $(this).remove();
                });
            });
        });
        $(this).addClass('disabled');
    },
    addTag: function (e) {
        var $caller = $(this);
        var $newAddTag = $caller.clone()
            .click(app.addTag)
            .appendTo($caller.parent());

        var tagInput = $(document.createElement('input'))
            .addClass('form-control form-control-verysm tag-input')
            .attr('data-id', $caller.data('id'))
            .attr('maxlength', 32)
            .css('width', '90px')
            .attr('onchange', 'this.value = this.value.toLowerCase();')
            .keydown(function (e) {
                if (e.keyCode === 13) { // enter -> save tag
                    app.saveTag.call($(this)); // change context
                    return false;
                }
                if (e.keyCode === 32) { // space -> save and add new tag
                    $newAddTag.click();
                    return false;
                }
            })
            .focusout(app.saveTag);

        $caller.off()
            .removeClass('badge-success badge-light')
            .html(tagInput)
            .children()
            .focus();
    },
    saveTag: function () {
        var tag = $(this).val();
        var mediaId = $(this).data('id');
        var $parent = $(this).parent();
        if (tag === '') {
            $parent.remove();
            return false;
        }
        $.ajax({
            type: 'POST',
            url: window.AppConfig.base_url + '/tag/add' + window.location.search,
            data: {'tag': tag, 'mediaId': mediaId},
            dataType: 'json',
            success: function (data) {
                if (!data.limitReached) {
                    $parent.replaceWith(
                        $(document.createElement('a'))
                            .addClass('badge badge-pill badge-light shadow-sm tag-item mr-1')
                            .attr('data-id', data.tagId)
                            .attr('data-media', mediaId)
                            .attr('href', data.href)
                            .contextmenu(app.removeTag)
                            .text(tag)
                    );
                } else {
                    $parent.remove();
                }
            }
        });
    },
    removeTag: function (e) {
        e.preventDefault();
        e.stopPropagation();
        var $tag = $(this);

        $.post(window.AppConfig.base_url + '/tag/remove', {
            'tagId': $tag.data('id'),
            'mediaId': $tag.data('media')
        }, function (data) {
            $tag.remove();
            if (data.deleted) {
                $('#dropdown-tag-list > a[data-id="' + $tag.data('id') + '"]').remove();
            }
        });
    },
    initClipboardPasteToUpload: function() {
      document.onpaste = function(event){
        if (event.clipboardData || event.originalEvent.clipboardData) {
            const items = (event.clipboardData || event.originalEvent.clipboardData).items;
            items.forEach((item) => {
                if (item.kind === 'file') {
                    // Add the file to the dropzone instance.
                    Dropzone.forElement('.dropzone').addFile(item.getAsFile());
                }
            });
        }
      }
    },
};

app.init();
$(document).ready(app.run);