floor12 / yii2-module-files

assets/yii2-floor12-files.js

console.log('Yii2 files model init.');


var currentCroppingImageId;
var currentRenamingFileId;
var cropper;
var removeFileOnCropCancel;
var yii2CropperRoute;

$(document).on('change', '.yii2-files-upload-field', function () {

    obj = $(this);

    var formData = new FormData();
    formData.append('file', obj[0].files[0]);
    formData.append('modelClass', obj.data('modelclass'));
    formData.append('attribute', obj.data('attribute'));
    formData.append('mode', obj.data('mode'));
    formData.append('ratio', obj.data('ratio'));
    formData.append('_fileFormToken', yii2FileFormToken);


    $.ajax({
        url: yii2UploadRoute,
        type: 'POST',
        data: formData,
        processData: false,  // tell jQuery not to process the data
        contentType: false,  // tell jQuery not to set contentType
        success: function (response) {
            id = '#files-widget-block_' + obj.data('block');
            $(response).appendTo(id).find('div.floor12-files-widget-list');
        }
    });
});


function clipboard(text) {
    //based on https://stackoverflow.com/a/12693636
    document.oncopy = function (event) {
        event.clipboardData.setData("Text", text);
        event.preventDefault();
    };
    document.execCommand("Copy");
    document.oncopy = undefined;
    f12notification.info(text, 1);
}

function updateProgressCircle(val, btnGroup) {
    result = 169.646 * (1 - val / 100);
    btnGroup.querySelector('svg #progress-circle').setAttribute('stroke-dashoffset', result);
    btnGroup.querySelector('.floor12-file-percents').innerHTML = val + '%';
    // setAttribute('stroke-dashoffset', result);
}

var observer = new MutationObserver(function (mutations) {
    percent = mutations[0].target.style.width.replace('%', '');
    btnGroup = mutations[0].target.parentElement.parentElement;
    updateProgressCircle(percent, btnGroup);
});

function Yii2FilesUploaderSet(id, className, attribute, scenario) {

    var mode = 'multi';
    var blockName = "#" + id;
    var block = $(blockName);
    var uploadButton = block.find('button.btn-upload')[0];
    var filesList = block.find('.floor12-files-widget-list')[0];
    var ratio = 0;

    var csrf = block.parents('form').find('input[name=' + yii2CsrfParam + ']').val();

    if (block.data('ratio'))
        ratio = block.data('ratio');

    if (block.hasClass('floor12-files-widget-single-block')) {
        mode = 'single';
        toggleSingleUploadButton(block);
    }

    var data = {
        modelClass: className,
        attribute: attribute,
        scenario: scenario,
        mode: mode,
        ratio: ratio,
        _fileFormToken: yii2FileFormToken
    }
    data[yii2CsrfParam] = csrf

    var uploader = new ss.SimpleUpload({
        button: uploadButton,
        url: yii2UploadRoute,
        name: 'file',
        dropzone: block,
        dragClass: 'floor12-files-widget-block-drug-over',
        multiple: true,
        multipleSelect: true,
        data: data,
        onSubmit:
            function (filename, extension, data) {
                var svg = '\t<svg width="60" height="60" viewBox="0 0 60 60">\n' +
                    '\t\t<circle cx="30" cy="30" r="27" fill="none" stroke="#ccc" stroke-width="5" />\n' +
                    '\t\t<circle id="progress-circle" cx="30" cy="30" r="27" fill="none" stroke="#666" stroke-width="5" stroke-dasharray="169.646" stroke-dashoffset="169.646" />\n' +
                    '\t</svg>';

                var id = generateId(filename);
                var btnGroup = document.createElement('div');
                var fileObject = document.createElement('div');
                var bar = document.createElement('div');
                var percents = document.createElement('div');
                btnGroup.setAttribute('id', id);
                btnGroup.className = 'btn-group files-btn-group';
                fileObject.className = 'floor12-file-object';
                percents.className = 'floor12-file-percents';

                this.setProgressBar(bar);

                fileObject.innerHTML = svg;

                observer.observe(bar, {
                    attributes: true
                });

                fileObject.appendChild(bar);
                fileObject.appendChild(percents);
                btnGroup.appendChild(fileObject);


                if (mode == 'single') {
                    $(filesList).html('');
                }
                $(filesList).append(btnGroup);


            },
        onComplete: function (filename, response) {
            if (!response) {
                console.log(filename + 'upload failed');
                return false;
            }
            f12notification.info(FileUploadedText, 1);
            idName = "#" + generateId(filename);
            $(idName).replaceWith($(response));

            if (mode == 'single')
                toggleSingleUploadButton(block);
        },
        onError: function (filename, errorType, status, statusText, response, uploadBtn, fileSize) {
            data = {
                responseText: response,
                status: status,
                statusText: statusText,
            };
            processError(data);
            idName = "#" + generateId(filename);
            $(idName).remove();
        }

        //     progressUrl: 'uploadProgress.php', // enables cross-browser progress support (more info below)
        //     responseType: 'json',
        //    allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
        //   maxSize: 1024, // kilobytes
        //     hoverClass: 'ui-state-hover',
        //     focusClass: 'ui-state-focus',
        //     disabledClass: 'ui-state-disabled',
    });

}

function generateId(filename) {
    return 'id-' + filename.replace(/[^0-9a-zA-Z]/g, "");
}

function showUploadButton(event) {
    obj = $(event.target);
    console.log(obj);
    obj.parents('div.floor12-files-widget-single-block').find('button').show();
}

function toggleSingleUploadButton(block) {
    if (block.find('div.floor12-single-file-object').length > 0)
        block.find('button').hide();
    else
        block.find('button').show();
}

function sortableFiles() {
    $(".floor12-files-widget-list-multi").sortable({
        opacity: 0.5,
        revert: 1,
        items: "div.files-btn-group",
    });
}

function removeFile(id) {
    id = "#yii2-file-object-" + id;

    $(id).parents('div.files-btn-group').fadeOut(200, function () {
        $(this).remove();
        f12notification.info(FileRemovedText, 1);
    });
    return false;
}

function removeAllFiles(event) {
    console.log('removeAllFiles');
    $(event.target).parents('div.floor12-files-widget-list').find('div.files-btn-group').fadeOut(200, function () {
        $(this).remove();
    });
    f12notification.info(FilesRemovedText, 1);
    return false;
}

function initCropperLayout() {
    if (yii2CropperRoute.length > 0)
        $.get(yii2CropperRoute, function (response) {
            $('body').append(response);

            $('#yii2-file-title-editor input').on('keyup', function (e) {
                if (e.keyCode == 13) {
                    saveFileTitle()
                }
            });
        })
}

function initCropper(id, url, ratio, remove) {
    $('#cropperModal').modal();

    currentCroppingImageId = id;

    removeFileOnCropCancel = false;
    if (remove)
        removeFileOnCropCancel = true;

    currentCropImage = $('<img>').attr('src', url);
    $('#cropperArea').html("");
    $('#cropperArea').append(currentCropImage);

    autoCrop = false;
    aspectRatio = NaN;

You seem to be aliasing the built-in name NaN as aspectRatio. This makes your code very difficult to follow, consider using the built-in name directly.

The variable aspectRatio seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using window.aspectRatio.

    if (ratio) {
        autoCrop = true;
        aspectRatio = ratio;
        $('.cropper-ratio-btn-group').hide();
    }

    setTimeout(function () {
        cropper = currentCropImage.cropper({
            viewMode: 1,
            background: false,
            zoomable: false,
            autoCrop: autoCrop,
            aspectRatio: aspectRatio,
        });
    }, 1000)
}

function stopCrop(id) {
    $('#cropperModal').modal('hide');
    if (removeFileOnCropCancel)
        removeFile(currentCroppingImageId);
}

function cropImage() {
    сropBoxData = cropper.cropper('getCropBoxData');
    imageData = cropper.cropper('getImageData');
    canvasData = cropper.cropper('getCanvasData');
    ratio = imageData.height / imageData.naturalHeight;
    cropLeft = (сropBoxData.left - canvasData.left) / ratio;
    cropTop = (сropBoxData.top - canvasData.top) / ratio;
    cropWidth = сropBoxData.width / ratio;
    cropHeight = сropBoxData.height / ratio;
    rotated = imageData.rotate;

    data = {
        id: currentCroppingImageId,
        width: cropWidth,
        height: cropHeight,
        top: cropTop,
        left: cropLeft,
        rotated: rotated,
        _fileFormToken: yii2FileFormToken
    };

    removeFileOnCropCancel = false;

    $.ajax({
        url: yii2CropRoute,
        'method': 'POST',
        data: data,
        success: function (response) {
            id = '#yii2-file-object-' + currentCroppingImageId;
            if ($(id).find('img').length)
                $(id).find('img').attr('src', response);
            else {
                $(id).css('background-image', 'none');
                $(id).css('background-image', 'url(' + response + ')');
            }
            stopCrop();
            f12notification.info(FileSavedText, 1);
        },
        error: function (response) {
            processError(response);
        }
    })
}

function showRenameFileForm(id, event) {
    var blockId = '#yii2-file-object-' + id;
    var title = $(blockId).attr('title');
    currentRenamingFileId = id;
    $('#yii2-file-title-editor').css('top', event.clientY).css('left', event.clientX - 70).fadeIn(100);
    $('#yii2-file-title-editor input').val(title).focus();
}

function hideYii2FileTitleEditor() {
    $('#yii2-file-title-editor').fadeOut(100);
    currentRenamingFileId = null;
}

function saveFileTitle() {
    $('#yii2-file-title-editor').fadeOut(100);
    val = $('#yii2-file-title-editor input').val();
    blockId = '#yii2-file-object-' + currentRenamingFileId;
    $(blockId).attr('title', val);
    $(blockId).attr('data-title', val);

    $.ajax({
            url: yii2RenameRoute,
            method: 'POST',
            data: {id: currentRenamingFileId, title: val, _fileFormToken: yii2FileFormToken},
            success: function () {
                f12notification.info(FileRenamedText, 1);
            },
            error: function (response) {
                processError(response);
            }
        }
    );
    currentRenamingFileId = null;
}

$(document).ready(function () {
    setInterval(function () {
        sortableFiles()
    }, 2000);

    sortableFiles();

    initCropperLayout();

});