clip-paste.js 5.07 KB
/**
 * 粘贴剪切板
 * @author qi.li@yoho.cn
 * @date: 2017/03/09
 */

/* global gDomains injected from client.hbs*/ // eslint-disable-line
var $ = require('yoho-jquery');
var view = require('./view');
var Handlebars = require('yoho-handlebars');

// dialog html
var $view = '<div class="mask-dialog preview-dialog">' +
                '<div class="dialog-mask"></div>' +
                '<div class="dialog-main">' +
                    '<div class="head-part">' +
                        '<span class="head-title">是否发送图片</span> ' +
                        '<span class="head-close">x</span>' +
                    '</div>' +
                    '<div class="body-part">' +
                        '<img class="clip-img" src="{{src}}">' +
                    '</div>' +
                    '<div class="foot-part">' +
                        '<a class="foot-btn confirm-btn" href="javascript:;">发送</a>' +
                        '<a class="foot-btn cancel-btn" href="javascript:;">取消</a>' +
                    '</div>' +
                '</div>' +
            '</div>';

var $viewHbs = Handlebars.compile($view);

/**
 * 粘贴事件
 * @param sl 事件元素选择器
 * @param cb 上传成功的回调
 */
function Paste(sl, cb) {
    if (typeof sl !== 'string') {
        return;
    }
    this.$el = document.querySelector(sl);
    this.formData = null;
    this.uploadCb = cb;
    this.isSending = false;
    this.bindEvents();
    this.input = '';
}

function _upload() {
    var path;
    var self = this;

    if (self.isSending) {
        return;
    }
    self.isSending = true;

    $.ajax({
        type: 'POST',
        url: gDomains.imCs + '/fileManage/uploadFile',
        data: self.formData,
        processData: false,  // 告诉jQuery不要去处理发送的数据
        contentType: false
    })
        .done(function(res) {
            if (res.code === 200) {
                path = res.data.filePath;
                self.uploadCb(path);
                self.close();
            }
        })
        .always(function() {
            self.isSending = false;
        });
}

function _drawPreview(url) {
    var html;
    var self = this;
    var $prev = $('.preview-dialog');
    var $img = $prev.find('.clip-img');
    var len = $img.length;

    if (len) {
        $img.attr('src', url);
        self.$preview = $prev;
        return;
    }

    html = $viewHbs({src: url});
    $('body').append(html);
    $('.preview-dialog').css('z-index', 1090);
    self.$preview = $('.preview-dialog');

    // 绑定预览内事件
    self.$preview.on('click', '.head-close, .cancel-btn', self.close.bind(self))
        .on('click', '.confirm-btn', _upload.bind(self));
}

Paste.prototype = {
    bindEvents: function() {
        var self = this;

        this.$el.addEventListener('paste', function(e) {
            var cbd = e.clipboardData;
            var ua = window.navigator.userAgent;
            var i;
            var item;
            var reader;
            var file;

            self.input = $('.text.msg-area').val();

            // 如果是 Safari 直接 return
            if (!(e.clipboardData && e.clipboardData.items)) {
                return;
            }

            // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
            if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === 'string' && cbd.items[1].kind === 'file' &&
                cbd.types && cbd.types.length === 2 && cbd.types[0] === 'text/plain' && cbd.types[1] === 'Files' &&
                ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
                return;
            }

            for (i = 0; i < cbd.items.length; i++) {
                item = cbd.items[i];
                if (item.kind === 'file') {
                    file = item.getAsFile();

                    if (file.size === 0) {
                        return;
                    }

                    self.formData = new FormData();
                    self.formData.append('files[]', file, 'clip.jpg');

                    reader = new FileReader();
                    reader.onload = function(e) {       // eslint-disable-line
                        var base64 = e.target.result;
                        var image = new Image();

                        image.src = base64;
                        image.onload = function() {
                            $('.text.msg-area').val(self.input);
                            _drawPreview.bind(self)(base64);
                            self.open();
                        };
                    };

                    reader.readAsDataURL(file);
                }
            }
        }, false);
    },

    open: function() {
        var dh, vh = $(window).height();
        var $main = $('.preview-dialog .dialog-main');

        // 机器人不支持
        if (!view.processInfo.manual) {
            return;
        }

        this.$preview.show();
        dh = $main.height();
        $main.css('top', (vh - dh - 40) / 2);
    },

    close: function() {
        this.$preview.hide();
    }
};

Paste.prototype.constructor = Paste;

module.exports = Paste;