freakimkaefig/Music-XML-Analyzer

/** @constructor */
MusicXMLAnalyzer.UploadView = function(){

    var that = {},

    $logMessages = null,
    uploadMessageCounter = null,

    $uploadModal = null,
    $uploadDropzone = null,
    $uploadSubmit = null,
    $uploadClose = null,
    gotValidFile = null,
    uploadCounter = null,

     /**
     * Init function of UploadView
     * @function
     * @public
     *
     */
    init = function(){
        $uploadModal = $('#uploadModal');
        $uploadModal.data('backdrop', 'static');
        $uploadModal.data('keyboard', false);

        $uploadDropzone = $('#uploadDropzone');

        $uploadSubmit = $('#uploadSubmit');
        $uploadSubmit.on('click', onUploadSubmit);
        $uploadClose = $('#uploadClose');
        $uploadClose.on('click', onUploadClose);
        setUploadSubmit(false);

        var previewNode = document.querySelector('#template');
        previewNode.id = '';
        var previewTemplate = previewNode.parentNode.innerHTML;
        previewNode.parentNode.removeChild(previewNode);

        Dropzone.options.uploadDropzone = {
            acceptedFiles: '.xml',
            maxFiles: null,
            maxFilesize: 1024,
            error: onError,
            success: onSuccess,
            queuecomplete: onQueueComplete,
            previewTemplate: previewTemplate
        };

        gotValidFile = false;
        uploadCounter = 0;

        $logMessages = $('#uploadMessages');
        uploadMessageCounter = 0;
    },

    /**
     * This method sets the upload submit button active or disabled
     * @function
     * @public
     *
     * @param {boolean}    value    boolean value for active or disabled
     *
     */
    setUploadSubmit = function(value) {
        if (value == true) {
            $uploadSubmit.removeAttr('disabled');
            $uploadClose.attr('disabled', 'disabled');
        } else {
            $uploadSubmit.attr('disabled', 'disabled');
            $uploadClose.removeAttr('disabled');
        }
    },

    /**
     * Disables all input buttons
     * @function
     * @public
     *
     */
    disableAllInputs = function() {
        $uploadSubmit.attr('disabled', 'disabled');
        $uploadClose.attr('disabled', 'disabled');
    },

    /**
     * Gets called when upload hast been started
     * @function
     * @public
     *
     * @param {event}    event    the triggered click event
     *
     */
    onUploadSubmit = function(event) {
        if (gotValidFile) {
            addLogMessage('Analyzing files. Hang out ...');
            disableAllInputs();
            $(that).trigger('uploadSubmit');
        } else {
            var errorMessage = 'You have no new files to analyze!';
            addLogMessage('ERROR: ' + errorMessage);
        }
    },

    /**
     * Gets called when uploading data is done
     * @function
     * @public
     *
     */
    onUploadClose = function() {
        $uploadModal.modal('toggle');
    },

    /**
     * Gets called when an error occurs
     * @function
     * @public
     *
     * @param {file}    file            the file to upload
     * @param {string}  errorMessage    error message
     * @param {object}  xhrObject        the xhr object
     */
    onError = function(file, errorMessage, xhrObject) {
        addLogMessage('ERROR: ' + file.name + ' - ' + errorMessage);
    },

    /**
     * Gets called when uploading data has been successful
     * @function
     * @public
     *
     * @param {file}    file        the file to upload
     * @param {string}  respone     the uplaod response message
     *
     */
    onSuccess = function(file, response) {
        if (!Route.check('/')) {
            $uploadModal.modal({
                keyboard: false,
                backdrop: 'static'
            });
        }

        if (file.accepted) {
            gotValidFile = true;
            uploadCounter++;
            addLogMessage('Uploaded ' + file.name);
        }

    },

    /**
     * Gets called when upload queue is complete
     * @function
     * @public
     *
     */
    onQueueComplete = function() {
        if (gotValidFile) {
            setUploadSubmit(true);
        }
    },

    /**
     * Inits the log messages
     * @function
     * @public
     *
     */
    initLogMessages = function() {
        uploadMessageCounter = 0;
        $logMessages.show();
        $logMessages.animate({
            height: 100
        }, 500);
    },

    /**
     * Disposes log messages
     * @function
     * @public
     *
     */
    disposeLogMessages = function() {
        window.setTimeout(function() {
            $logMessages.animate({
                height: 0
            },
            700,
            function() {
                $logMessages.hide();
                $logMessages.empty();
            });
        }, 100);
    },

    /**
     * Adds a log message
     * @function
     * @public
     *
     * @param {string}    msg    log message
     *
     */
    addLogMessage = function(msg) {
        if (uploadCounter === 1) {
            initLogMessages();
        }
        $('#log' + (uploadMessageCounter - 3)).animate({
            "marginTop": "-30px"
        }, 200);
        $logMessages.append('<div id="log' + uploadMessageCounter + '"></div>');
        $('#log' + uploadMessageCounter).typed({
            strings: ['<p>' + msg + '</p>'],
            backDelay: 100000000000000,
            typeSpeed: 0,
            backSpeed: 0,
            loop: true,
        });
        uploadMessageCounter++;
    };

    that.init = init;
    that.disposeLogMessages = disposeLogMessages;
    that.addLogMessage = addLogMessage;

    return that;
}