css Загрузкафайлов（полнаяверсия）

Posted 2021-05-13

/**
 * Обеспечивает вложение изображений в переписку
 * @author Elovskiy I.V. <[e-mail]> <[e-mail]>
 * @type {Object}
 */
var BroadcastAttachments = {

    init: function () {
        this.initAppVars();
        this.handlerStore();
        this.initAppListeners();
        this.initContentEditableDiv();
        this.addPasteLister();
        this.addRequirementsText();
    },
    /**
     * Инициализация переменных
     */
    initAppVars: function () {
        this.defaultFileNameText = _('Файл');
        this.defaultFileSizeText = 0 + ' ' + _('Б') + ' / ' + 0 + ' ' + _('Б');
        this.sizeLimit = 52428800;
        this.sizeLimitText = _('50МБ');
        this.allowedExtensions = ['jpeg', 'jpg', 'gif', 'png', 'pdf', 'doc', 'docx'];
        this.broadcastMsgElem = $('#broadcast_message');
        this.listeners = {};
        this.broadcastId = null;
        this.companyId = null;
        this.broadcastMethods = null;
        this.broadcastIndicatorElem = null;
        this.returnServerData = [];
        this.dropAreaIn = $('#msg_list_state_state0')[0];
        this.dropAreaOut = $('#msg_listfade')[0];
        this.dropAreaTarget = $('#broadcast_drop_area')[0];
        this.userAgent = detect.parse(navigator.userAgent);
    },
    /**
     * Хранилище для хендлеров
     */
    handlerStore: function () {
        this.handlers = {};
        this.handlers['clickThumbsHandlers'] = [];
        this.handlers['closeSwitchThumbsHandlers'] = [];
        this.handlers['imgHandlers'] = [];
        this.handlers['zoomImgHandlers'] = [];
    },
    /**
     * Инициализация прослушек
     */
    initAppListeners: function () {
        this.addBtnListener();
        this.addInputListener();
        this.addDragDropListeners();
    },
    /**
     * Добавляет прослушку
     * @param element
     * @param event
     * @param handler
     * @param capture
     * @returns {number} Идентификатор прослушки
     */
    addListener: function (element, event, handler, capture) {
        var i = Object.keys(this.listeners).length;
        element.addEventListener(event, handler, capture);
        this.listeners[i] = {
            element: element,
            event: event,
            handler: handler,
            capture: capture
        };
        return i;
    },
    /**
     * Удаляет прослушку по идентификатору
     * @param id
     */
    removeListener: function (id) {
        var h;
        if (id in this.listeners) {
            h = this.listeners[id];
            h.element.removeEventListener(h.event, h.handler, h.capture);
            delete this.listeners[id];
        }
    },
    /**
     * Добавляет прослушку на кнопку
     */
    addBtnListener: function () {
        var attachImageBtn = document.getElementById('broadcast_attach_file_btn');
        this.handlers['attachImageBtn'] = this.addListener(attachImageBtn, 'click', BroadcastAttachments.actionAttach, false);
    },
    /**
     * Добавляет прослушку на инпут
     */
    addInputListener: function () {
        var inputFile = $('#broadcast_file_uploader input')[0];
        this.handlers['inputFile'] = this.addListener(inputFile, 'change', BroadcastAttachments.actionInput, false);
    },
    /**
     * Инициализация вспомогательного div-контейнера для IE (вставка из буфера)
     */
    initContentEditableDiv: function () {
        // Только для IE
        if (['IE'].indexOf(this.userAgent.browser.family) !== -1) {
            var div = $('<div />', {
                id: 'broadcast_message_ced',
                contenteditable: true,
                css: {
                    opacity: '0',
                    maxWidth: '0',
                    maxHeight: '0',
                    width: '0',
                    height: '0',
                    minWidth: '0',
                    minHeight: '0',
                    border: '0'
                }
            });
            $('#broadcast_attach_file_textarea_wrapper').append(div);
            this.contentEditableDiv = $('#broadcast_message_ced');
        }
    },
    /**
     * Обработка события paste
     */
    addPasteLister: function () {
        this.handlers['pasteHandler'] = this.addListener(this.broadcastMsgElem[0], 'paste', BroadcastAttachments.actionPaste, false);

        // Для IE
        if (['IE'].indexOf(this.userAgent.browser.family) !== -1) {
            this.handlers['contentEditableDivPasteHandler'] = this.addListener(this.contentEditableDiv[0], 'paste', BroadcastAttachments.actionPaste, false);
            $(this.broadcastMsgElem[0]).on('keydown', function (event) {
                if ((event.ctrlKey && event.keyCode === 86) || (event.shiftKey && event.keyCode === 45)) {
                    $(BroadcastAttachments.contentEditableDiv).empty();
                    $(BroadcastAttachments.contentEditableDiv).focus();
                }
            });
        }
    },
    /**
     * Вызовет клик по label (input type file) для открытия диалога выбора файлов
     */
    actionAttach: function () {
        $('#broadcast_file_uploader label').trigger('click');
    },
    /**
     * Обработка выбранных файлов
     * @param e
     */
    actionInput: function (e) {
        var files = e.target.files;
        if (files.length === 0) return;

        var result = BroadcastAttachments.checkRequirements(files);
        if (result.errorType === false && result.errorSize === false) {
            BroadcastAttachments.sendFiles(files);
        } else {
            BroadcastAttachments.createErrorWindow(result);
        }
    },
    /**
     * Создаст окно с ошибкой
     * @param errors
     */
    createErrorWindow: function (errors) {
        var buttons = {};
        buttons[_('ОК')] = true;
        var errorMsg = {
            errorType: _('Только изображения, pdf и doc/docx-файлы, пожалуйста'),
            errorSize: _('Размер файла не должен превышать') + ' ' + _(BroadcastAttachments.sizeLimitText)
        };
        var text = (errors.errorType === true) ? errorMsg['errorType'] : errorMsg['errorSize'];
        if (errors.errorText) {
            text = errors.errorText;
        }
        $.slPrompt(text, {
            close: true,
            title: _('Ошибка'),
            prefix: 'err_',
            buttons: buttons
        });
    },
    /**
     * Проверка файлов
     * Файл должен быть изображением и не более 50 Мб
     * @param files
     */
    checkRequirements: function (files) {
        var result = {};
        result.errorType = false;
        result.errorSize = false;
        var validTypes = [
            'application/pdf',
            'application/msword',
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        ];
        for (var k = 0; k < files.length; k++) {
            // Только изображения
            if (!files[k].type.match('image.*')) {
                result.errorType = true;
            }
            // Если всё-таки pdf, doc, docx, то нет ошибки по типу файла
            if (validTypes.indexOf(files[k].type) !== -1) {
                result.errorType = false;
            }
            // Не более 50Мб
            if (files[k].size > BroadcastAttachments.sizeLimit) {
                result.errorSize = true;
            }
        }
        return result;
    },
    /**
     * Покажет лоадер, отправит файлы на сервер
     * @param files
     */
    sendFiles: function (files) {
        var pause = 500;
        BroadcastAttachments.showLoader();
        BroadcastAttachments.progressBarShow();
        var isBusy = false;
        function request(opts) {
            var d = $.Deferred();
            var timerId = setTimeout(function tick(opts) {
                if (isBusy === false) {
                    isBusy = true;
                    opts.customFunc(opts);
                    var xhr = new XMLHttpRequest();
                    xhr.open(opts.method, opts.url);
                    xhr.onload = function () {
                        isBusy = false;
                        clearTimeout(timerId);
                        if (this.status >= 200 && this.status < 300) {
                            d.resolve(xhr.response);
                        } else {
                            console.log({status: this.status, statusText: xhr.statusText});
                            d.reject({status: this.status, statusText: xhr.statusText});
                        }
                    };
                    xhr.upload.onprogress = function() {
                        opts.progressFunc(event);
                    };
                    xhr.onerror = function () {
                        isBusy = false;
                        clearTimeout(timerId);
                        console.log({status: this.status, statusText: xhr.statusText});
                        d.reject({status: this.status, statusText: xhr.statusText});
                    };

                    // headers: {'X-Subliminal-Message': 'Upvote-this-answer'}
                    if (opts.headers) {
                        Object.keys(opts.headers).forEach(function (key) {xhr.setRequestHeader(key, opts.headers[key]);});
                    }

                    // params: {param1: 'val1', param2: 'val2}' OR params = 'param1=val1&param2=val2' OR params = new FormData
                    var params = opts.params;
                    if (params && typeof params === 'object') {
                        if (params instanceof FormData !== true) {
                            params = Object.keys(params).map(function (key) {return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);}).join('&');
                        }
                    }
                    xhr.send(params);
                } else {
                    timerId = setTimeout(tick, pause, opts);
                }
            }, pause, opts);
            return d.promise();
        }

        var fileNameElem = document.getElementById("broadcast_loader_progress_file_name");
        var progressElem = document.getElementById("broadcast_loader_progress_line");
        var uploadedElem = document.getElementById("broadcast_loader_progress_file_size_uploaded");

        var deferred = [];
        var fileName;
        var formData;
        var bindFiles = {};
        var id;
        for (var i = 0; i < files.length; i++) {
            fileName = (files[i].name) ? files[i].name : 'image.png';
            id = BroadcastAttachments.randomString();
            bindFiles[id] = files[i];
            formData = new FormData();
            formData.append('id', id);
            formData.append('file_name', fileName);
            formData.append('size_limit', BroadcastAttachments.sizeLimit);
            $.each(BroadcastAttachments.allowedExtensions, function (index, value) {
                formData.append('allowed_extensions[]', value);
            });
            if (files[i].type.match('image.*')) {
                formData.append('is_image', '1');
            } else {
                formData.append('is_image', '0');
            }
            formData.append('path', BroadcastAttachments.companyId + '/broadcast/' + BroadcastAttachments.broadcastId);
            formData.append('qqfile', files[i], fileName);
            deferred.push(request({
                    method: 'POST',
                    url: '/File/ajaxUpload',
                    params: formData,
                    customFunc: function(opts) {
                        fileNameElem.innerText = opts.params.get('file_name');
                    },
                    progressFunc: function (event) {
                        uploadedElem.innerHTML = '(' + BroadcastAttachments.formatBytes(event.loaded) + ' / ' + BroadcastAttachments.formatBytes(event.total) + ')';
                        progressElem.setAttribute('max', event['total']);
                        progressElem.value = event.loaded;
                    }
                })
            );
        }
        $.when.apply($, deferred).done(function () {
            var isError = false;
            var serverResponse = '';
            for (var i = 0; i < arguments.length; i++) {
                serverResponse = JSON.parse(arguments[i]);
                if (serverResponse.error) {
                    isError = true;
                    break;
                } else {
                    BroadcastAttachments.returnServerData.push(serverResponse);
                }
            }
            BroadcastAttachments.hideLoader();
            BroadcastAttachments.clearInputFile();
            BroadcastAttachments.restoreLoaderDefaults();
            if (isError) {
                var errors = {errorText: serverResponse.error};
                BroadcastAttachments.createErrorWindow(errors);

            } else {
                BroadcastAttachments.createThumbs(bindFiles);
            }
        })
            .fail(function(error) {console.log(error)})
            .always(function () {console.log('Запросов на сервер сделано: ' + deferred.length)});

    },
    /**
     * Покажет лоадер с индикатором загрузки
     */
    showLoader: function() {
        var textAreaWrapper = $('#broadcast_attach_file_textarea_wrapper');
        var loaderArea = $('#broadcast_loader_area_wrapper');
        var height = $(textAreaWrapper).height();
        $(loaderArea).height(height - (parseInt($(loaderArea).css('borderWidth')) * 2));
        $(textAreaWrapper).hide();
        $(loaderArea).css('display', '');
    },
    /**
     * Скроет лоадер
     */
    hideLoader: function() {
        var textAreaWrapper = $('#broadcast_attach_file_textarea_wrapper');
        var loaderArea = $('#broadcast_loader_area_wrapper');
        $(loaderArea).css('display', 'none');
        $(textAreaWrapper).show();
    },
    /**
     * Создает превью изображений
     * @param files
     */
    createThumbs: function (files) {
        var prevImgPath = '/modules/broadcast/images/paperclip-file-preview.png';
        function create(f, filename) {
            var d = $.Deferred();
            var reader = new FileReader();
            reader.onload = (function (theFile, theFileName) {
                return function (e) {
                    var div = document.createElement('div');
                    div.className = 'broadcast_file_uploader_thumb_wrapper';
                    div.dataset.filename = theFileName;
                    if (!theFile.type.match('image.*')) {
                        div.innerHTML = ['<div class="broadcast_file_uploader_img_wrapper" data-type="is_file"><div class="broadcast_file_uploader_thumb_close broadcast_file_uploader_thumb_close_hide"></div><img class="broadcast_file_uploader_img" title="', (theFile.name), '" src="', prevImgPath, '" /></div>'].join('');
                    } else {
                        div.innerHTML = ['<div class="broadcast_file_uploader_img_wrapper" data-type="is_image"><div class="broadcast_file_uploader_thumb_close broadcast_file_uploader_thumb_close_hide"></div><img class="broadcast_file_uploader_img" title="', (theFile.name), '" src="', e.target.result, '" /></div>'].join('');
                    }
                    var fileNameDiv = document.createElement('div');
                    fileNameDiv.className = 'broadcast_file_uploader_text';
                    fileNameDiv.innerText = theFile.name;
                    $(div).append(fileNameDiv);
                    document.getElementById('broadcast_file_uploader_thumbs_wrapper').insertBefore(div, null);
                    d.resolve();
                };
            })(f, filename);
            // Чтение изображений в виде data URL.
            reader.readAsDataURL(f);
            return d.promise();
        }
        var deferred = [];
        for (var key in files) {
            if (files.hasOwnProperty(key)) {
                for (var i = 0; i < BroadcastAttachments.returnServerData.length; i++) {
                    if (BroadcastAttachments.returnServerData[i]['id'] === key) {
                        if (BroadcastAttachments.returnServerData[i]['success'] && BroadcastAttachments.returnServerData[i]['success'] === true) {
                            deferred[deferred.length] = create(files[key], BroadcastAttachments.returnServerData[i].filename);
                        }
                    }
                }

            }
        }
        $.when.apply($, deferred).done(function () {
            $('.broadcast_file_uploader_img_wrapper').each(function(index, value) {
                BroadcastAttachments.handlers['clickThumbsHandlers'].push(BroadcastAttachments.addListener(value, 'click', BroadcastAttachments.clickThumb, false));
                BroadcastAttachments.addListener(value, 'mouseover', BroadcastAttachments.showCloseThumb, false);
                BroadcastAttachments.addListener(value, 'mouseout', BroadcastAttachments.hideCloseThumb, false);
            });
            $('.broadcast_file_uploader_thumb_close').each(function(index, value) {
                BroadcastAttachments.addListener(value, 'click', BroadcastAttachments.removeThumb, false);
            });
        });
    },
    /**
     * Добавляет действие на клик по превью файлов thumbs
     * @param e
     */
    clickThumb: function(e) {
        var elem = $(e.target);
        while ($(elem).hasClass('broadcast_file_uploader_img_wrapper') !== true) {
            elem = $(elem).parent();
        }
        var type = $(elem).data('type');
        var title = $(elem).find('img').attr('title');

        var link;
        $.each(BroadcastAttachments.returnServerData, function(index, value) {
            if (value['original_filename'] === title) {
                link = '/File/show' + value['user_dir'] + '/' + value['filename'];
                return false;
            }
        });
        if (type === 'is_image') {
            var src = $(elem).find('img').attr('src');
            BroadcastAttachments.openModal(src, link);
        } else {
            window.location = link;
        }
    },
    /**
     * Покажет иконку удаления файла
     * @param e
     */
    showCloseThumb: function(e) {
        var elem = $(e.target);
        while ($(elem).hasClass('broadcast_file_uploader_img_wrapper') !== true) {
            elem = $(elem).parent();
        }
        $(elem).find('.broadcast_file_uploader_thumb_close').removeClass('broadcast_file_uploader_thumb_close_hide');
    },
    /**
     * Скроет иконку удаления файла
     * @param e
     */
    hideCloseThumb: function(e) {
        var elem = $(e.target);
        while ($(elem).hasClass('broadcast_file_uploader_img_wrapper') !== true) {
            elem = $(elem).parent();
        }
        $(elem).find('.broadcast_file_uploader_thumb_close').addClass('broadcast_file_uploader_thumb_close_hide');
    },
    /**
     * Удалит файл из списка для отправки и из зоны thumbs
     * @param e
     */
    removeThumb: function(e) {
        e.stopPropagation();
        e.preventDefault();
        var elem = $(e.target);
        while ($(elem).hasClass('broadcast_file_uploader_thumb_wrapper') !== true) {
            elem = $(elem).parent();
        }
        var sData = [];
        BroadcastAttachments.returnServerData.forEach(function(item, i, arr) {
            if (elem[0].dataset.filename !== item['filename']) {
                sData.push(item);
            }
        });
        BroadcastAttachments.returnServerData = sData;
        $(elem).remove();
    },
    /**
     * Удаляет все прослушки с thumbs
     */
    removeThumbsListeners: function () {
        for (var i = 0; i < this.handlers['clickThumbsHandlers'].length; i++) {
            this.removeListener(this.handlers['clickThumbsHandlers'][i]);
        }
        this.handlers['clickThumbsHandlers'] = [];
    },
    /**
     * Добавляет прослушку на изображения в чате
     */
    addImgListeners: function() {
        $('.broadcast_message_img').each(function(index, value) {
            BroadcastAttachments.handlers['imgHandlers'].push(BroadcastAttachments.addListener(value, 'click', BroadcastAttachments.actionImg, false));
        });
    },
    /**
     * Действие на клик по изображению в чате
     * @param e
     */
    actionImg: function(e) {
        var elem = $(e.target);
        while ($(elem).hasClass('broadcast_message_img') !== true) {
            elem = $(elem).parent();
        }
        var src = $(elem).attr('src');
        BroadcastAttachments.openModal(src, src);

    },
    /**
     * Модальное окно для предварительного просмотра изображений
     * @param src - источник
     * @param link - ссылка
     */
    openModal: function(src, link) {
        var buttons = {};
        buttons[_('Закрыть')] = true;
        $.slPrompt(['<div class="broadcast_img_wrapper"><img alt="img" class="broadcast_img" src="', (src), '" /><br /><a href="', (link), '" download>', _('Скачать с сервера'), '</a></div>'].join(''), {
            close: true,
            title: _('Изображение'),
            prefix: 'thumb_',
            buttons: buttons,
            callback: function (value, message, fields) {},
            submit: function (value, message, fields) {
                BroadcastAttachments.removeZoom();
            },
            loaded: function () {
                BroadcastAttachments.handlers['zoomImgHandlers'].push(BroadcastAttachments.addListener($('.broadcast_img')[0], 'click', BroadcastAttachments.addZoom, false));
            }
        });
    },
    /**
     * Добавляет эффект "зума" для изображений
     * @param e
     */
    addZoom: function(e) {
        var elem = $(e.target);
        while ($(elem).hasClass('broadcast_img') !== true) {
            elem = $(elem).parent();
        }
        var src = elem.attr('src');
        $('body').append('<div class="broadcast_popup">' +                        // Добавляем в тело документа разметку всплывающего окна
            '<div class="broadcast_popup_bg"></div>' +                            // Блок, который будет служить фоном затемненным
            '<img alt="" src="' + src + '" class="broadcast_popup_img" />' +      // Само увеличенное изображение
            '</div>');
        var broadcastPopup = $('.broadcast_popup');
        var maxZ = BroadcastAttachments.getMaxZIndex();
        $(broadcastPopup).css('zIndex', maxZ + 1);
        $(broadcastPopup).fadeIn(200);                                            // Медленно выводим изображение
        $('.broadcast_popup_bg').click(function () {	                          // Событие клика на затемненный фон
            $(broadcastPopup).fadeOut(200);	                                      // Медленно убираем всплывающее окно
            setTimeout(function () {	                                      // Выставляем таймер
                $(broadcastPopup).remove();                                       // Удаляем разметку всплывающего окна
            }, 200);
        });
    },
    /**
     * Удаляет все прослушки для функционала "зума"
     */
    removeZoom: function() {
        for (var i = 0; i < this.handlers['zoomImgHandlers'].length; i++) {
            this.removeListener(this.handlers['zoomImgHandlers'][i]);
        }
        this.handlers['zoomImgHandlers'] = [];
    },
    /**
     * Возвращает максимальный zIndex
     * @returns {number}
     */
    getMaxZIndex: function () {
        var divs = document.getElementsByTagName('div');
        var highest = 0;
        for (var i = 0; i < divs.length; i++) {
            var zindex = divs[i].style.zIndex;
            if (zindex > highest) {
                highest = zindex;
            }
        }
        return highest;
    },
    /**
     * Очистит input от выбранных файлов
     */
    clearInputFile: function () {
        var inputFile = $('#broadcast_file_uploader input');
        $(inputFile).attr('type', '');
        $(inputFile).attr('type', 'file');
    },
    /**
     * Подготовит DOM для изображения и отправит на сохранение в БД
     * @param comment - комментарий
     * @param imgPath - путь к файлу
     * @param imgName - имя файла
     */
    sendMessageImage: function (comment, imgPath, imgName) {
        var commentDiv = $('<div />', {text: comment});
        var wrapperMsg = $('<div />', {});
        var messageImgDiv = $('<div />', {});
        $(messageImgDiv).addClass('broadcast_message_img_div');
        var img = $('<img />', {alt: imgName, src: imgPath});
        $(img).addClass('broadcast_message_img');
        $(messageImgDiv).append(img);
        $(messageImgDiv).append('<br />');
        var link = $('<a />', {href: imgPath});
        $(link).attr('download', '');
        $(link).text(_('Скачать с сервера'));
        $(messageImgDiv).append(link);
        $(wrapperMsg).append(commentDiv, messageImgDiv);

        this.broadcastMethods._addMessage(comment);
        this.broadcastMethods._send(this.broadcastIndicatorElem, this.broadcastId, $(wrapperMsg).html());

        this.reset();
    },
    /**
     * Подготовит DOM для файла и отправит на сохранение в БД
     * @param comment - комментарий
     * @param fullPath - путь к файлу
     * @param fileName - имя файла
     */
    sendMessageFile: function(comment, fullPath, fileName) {
        var commentDiv = $('<div />', {text: comment});
        var wrapperMsg = $('<div />', {});
        var messageFileDiv = $('<div />', {});
        $(messageFileDiv).addClass('broadcast_message_file_div');
        var divFileName = $('<div />');
        $(divFileName).append('<i class="fa fa-paperclip"></i>' + ' ' + fileName);
        $(messageFileDiv).append(divFileName);
        $(messageFileDiv).append('<br />');
        var link = $('<a />', {href: fullPath});
        $(link).attr('download', '');
        $(link).text(_('Скачать с сервера'));
        $(messageFileDiv).append(link);
        $(wrapperMsg).append(commentDiv, messageFileDiv);

        this.broadcastMethods._addMessage(comment);
        this.broadcastMethods._send(this.broadcastIndicatorElem, this.broadcastId, $(wrapperMsg).html());
    },
    /**
     * Сброс в начальное состояние после отправки
     */
    reset: function() {
        $(this.broadcastMsgElem).val('');
        this.clearInputFile();
        BroadcastAttachments.returnServerData = [];
        var thumbArea = document.getElementById('broadcast_file_uploader_thumbs_wrapper');
        while (thumbArea.firstChild) {
            thumbArea.removeChild(thumbArea.firstChild);
        }
        this.removeThumbsListeners();
        this.restoreLoaderDefaults();
    },
    /**
     * Сбрасывает имя и размер в лоадере
     */
    restoreLoaderDefaults: function() {
        $('#broadcast_loader_progress_file_name').text(this.defaultFileNameText);
        $('#broadcast_loader_progress_file_size_uploaded').text(this.defaultFileSizeText);
    },
    /**
     * Перехватывает вставку из буфера обмена
     * @param e
     */
    actionPaste: function (e) {
        // Если поддерживается event.clipboardData (Chrome|Opera|Safari|Firefox)
        if (e.clipboardData) {
            // Получаем все содержимое буфера
            var items = e.clipboardData.items;
            if (items) {
                // Находим изображение
                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        // Представляем изображение в виде файла
                        var blob = items[i].getAsFile();
                        var result = BroadcastAttachments.checkRequirements([blob]);
                        if (result.errorType === false && result.errorSize === false) {
                            BroadcastAttachments.sendFiles([blob]);
                        } else {
                            BroadcastAttachments.createErrorWindow(result);
                        }
                    }
                }
            }
        } else {
            // IE
            var waitToPastInterval = setTimeout(function () {
                if ($(BroadcastAttachments.contentEditableDiv).children().length > 0) {
                    clearInterval(waitToPastInterval);
                    // Поиск изображений
                    var image = $(BroadcastAttachments.contentEditableDiv).find('img');
                    if (image.length > 0) {
                        var dataURI = $(BroadcastAttachments.contentEditableDiv).find('img')[0].src;
                        var blob = BroadcastAttachments.dataURItoBlob(dataURI);
                        var result = BroadcastAttachments.checkRequirements([blob]);
                        if (result.errorType === false && result.errorSize === false) {
                            BroadcastAttachments.sendFiles([blob]);
                        } else {
                            BroadcastAttachments.createErrorWindow(result);
                        }
                    } else {
                        // Изображения не найдены, заберём текст
                        var text = window.clipboardData.getData("text");
                        $(BroadcastAttachments.broadcastMsgElem).val(text);
                        $(BroadcastAttachments.broadcastMsgElem).focus();
                    }
                }
                $(BroadcastAttachments.contentEditableDiv).empty();
            }, 1);
        }

    },
    /**
     * Конвертирует строку dataURI в blob-представление
     * @param dataURI
     * @returns {Blob}
     */
    dataURItoBlob: function (dataURI) {
        var byteString = atob(dataURI.split(',')[1]);
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], {type: mimeString});
    },
    /**
     * Добавляет прослушки для реализации drag&drop
     */
    addDragDropListeners: function() {

        BroadcastAttachments.addListener(BroadcastAttachments.dropAreaIn, 'dragover', BroadcastAttachments.actionFileDragHover, true);
        BroadcastAttachments.addListener(BroadcastAttachments.dropAreaOut, 'dragleave', BroadcastAttachments.actionFileDragHover, true);
        BroadcastAttachments.addListener(BroadcastAttachments.dropAreaTarget, 'drop', BroadcastAttachments.actionFileSelect, false);
    },
    /**
     * Действие при наведении файла на окно чата
     * @param e
     */
    actionFileDragHover: function (e) {
        e.stopPropagation();
        e.preventDefault();
        if (e.type === "dragover") {
            BroadcastAttachments.dropAreaShow();
        } else {
            BroadcastAttachments.dropAreaHide();
        }
    },
    /**
     * Действие при "сбросе" файла в окно чата
     * @param e
     */
    actionFileSelect: function(e) {
        BroadcastAttachments.actionFileDragHover(e);
        var files = e.target.files || e.dataTransfer.files;
        var result = BroadcastAttachments.checkRequirements(files);
        if (result.errorType === false && result.errorSize === false) {
            BroadcastAttachments.sendFiles(files);
        } else {
            BroadcastAttachments.createErrorWindow(result);
        }
    },
    /**
     * Покажет окно с текстом для перетаскивания файлов
     */
    dropAreaShow: function() {
        BroadcastAttachments.showLoader();
        BroadcastAttachments.progressBarHide();

    },
    /**
     * Скроет линию progress bar, покажет подсказку для перетаскивания файлов
     */
    progressBarHide: function() {
        $('#broadcast_drop_area_message_wrapper').show();
        $('#broadcast_loader_progress_wrapper').hide();
    },
    /**
     * Спрячет окно с текстом для перетаскивания файлов
     */
    dropAreaHide: function() {
        BroadcastAttachments.hideLoader();
        BroadcastAttachments.progressBarShow();
    },
    /**
     * Скроет подсказку для перетаскивания файлов, покажет progress bar
     */
    progressBarShow: function() {
        $('#broadcast_drop_area_message_wrapper').hide();
        $('#broadcast_loader_progress_wrapper').show();
    },
    /**
    /**
     * Конвертирует байты
     * @param bytes
     * @param decimals
     * @returns {string}
     */
    formatBytes: function (bytes, decimals) {
        if (parseInt(bytes) === 0) return '0' + _('Б');
        var k = 1024,
            dm = decimals <= 0 ? 0 : decimals || 2,
            sizes = [_('Б'), _('КБ'), _('МБ'), _('ГБ')],
            i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
    },
    /**
     * Добавляет текст в окно для перетаскивания файлов
     */
    addRequirementsText: function() {
        $('#broadcast_drop_area_message_requirements').text(_('Разрешены файлы до') + ' ' + this.sizeLimitText + ', ' + _('в форматах') + ': ' + this.allowedExtensions.join(', '))
    },
    /**
     * Ненератор случайной строки
     * @returns {string}
     */
    randomString: function () {
        var result = '';
        var words = 'qwertyuiopasdfghjklzxcvbnm';
        var max_position = words.length - 1;
        var i, position;
        for (i = 0; i < 5; ++i) {
            position = Math.floor(Math.random() * max_position);
            result = result + words.substring(position, position + 1);
        }
        return result;
    }

};

.broadcast_drop_area {
    border: 5px solid #efefef;
}

.broadcast_file_uploader {
    display: none;
}

.broadcast_attach_file_btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    background: url('/modules/broadcast/images/paperclip-button.png') no-repeat center;
    cursor: pointer;
}

.broadcast_file_uploader_thumbs_wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    margin: 10px 5px 10px 5px;
    max-height: 75px;
    overflow-y: auto;
}

.broadcast_file_uploader_thumbs_wrapper > div:last-child {
    margin: 0;
}

.broadcast_file_uploader_thumb_wrapper {
    width: 87px;
    margin-right: 10px;
    cursor: pointer;
}

.broadcast_file_uploader_thumb_close {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 12px;
    height: 11px;
    opacity: 0.3;
    border-radius: 50%;
    background-color: #fff;
}

.broadcast_file_uploader_thumb_close_hide {
    display: none;
}

.broadcast_file_uploader_thumb_close:hover {
    opacity: 1;
}

.broadcast_file_uploader_thumb_close:before, .broadcast_file_uploader_thumb_close:after {
    position: absolute;
    left: 5px;
    top: 2px;
    content: ' ';
    height: 7px;
    width: 2px;
    background-color: #333;
}

.broadcast_file_uploader_thumb_close:before {
    transform: rotate(45deg);
}

.broadcast_file_uploader_thumb_close:after {
    transform: rotate(-45deg);
}


.broadcast_file_uploader_img_wrapper {
    position: relative;
    display: flex;
    background-color: #cad6e2;
    width: 87px;
    height: 58px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
}

.broadcast_file_uploader_img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

.broadcast_file_uploader_text {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.broadcast_attach_file_textarea_wrapper {
    position: relative;
}

.broadcast_message {
    min-height: 100px;
}

.broadcast_message_img_div {
    margin: 10px 0 0 0;
    height: 130px;
}

.broadcast_message_file_div {
    margin: 10px 0 0 0;
}

.broadcast_message_img {
    cursor: pointer;
    max-width: 100%;
    max-height: 100%;
}

.broadcast_loader_area_wrapper {
    display: flex;
    border: 4px dashed #e3e3e3;
    background-color: #fff;
    border-image-source: url('/modules/broadcast/images/loader-border.png');
    border-image-slice: 4;
    border-image-repeat: round;
    justify-content: center;
    align-items: center;
}

.broadcast_loader_progress_wrapper {
    display: none;
    margin: 10px;
}

.broadcast_loader_progress_file_name_size_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    color: #597B9C;
    font-size: 13px;
}

.broadcast_loader_progress_file_name_size_wrapper > div {
    margin: 0 2px 0 2px;
}

.broadcast_loader_progress_line_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.broadcast_loader_progress_line {
    color: #96b7d7;
    background-color: #ebebeb;
    width: 550px;
    height: 7px;
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    /*appearance: none;*/
    border: none;
    border-radius: 50px;
}

/* WebKit, Blink */
.broadcast_loader_progress_line::-webkit-progress-bar {
    background-color: #ebebeb;
    border-radius: 50px;
}

/* WebKit, Blink */
.broadcast_loader_progress_line::-webkit-progress-value {
    background-color: #96b7d7;
    border-radius: 50px;
}

/* Gecko, Firefox */
.broadcast_loader_progress_line::-moz-progress-bar {
    background-color: #96b7d7;
    border-radius: 50px;
}

.broadcast_drop_area_message_wrapper {
    padding: 10px;
}

.broadcast_drop_area_message_wrapper > div {
    font-size: 13px;
    color: #999999;
    margin: 0 auto;
    text-align: center;
}

.broadcast_drop_area_message_img {
    background: url('/modules/broadcast/images/arrow.png') no-repeat center;
    width: 36px;
    height: 22px;
}

.broadcast_buttons_area {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.broadcast_img_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.broadcast_img {
    max-height: 400px;
    max-width: 400px;
    cursor: zoom-in;
}

.broadcast_popup {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
    text-align: center;
}

.broadcast_popup_bg {
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;
}


.broadcast_popup_img {
    position: fixed;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 90%;
}

.broadcast_popup_img {
    pointer-events: none;
}