Blame view

public/js/service/clip-paste.js 5.07 KB
李奇 authored
1 2 3 4 5 6
/**
 * 粘贴剪切板
 * @author qi.li@yoho.cn
 * @date: 2017/03/09
 */
李奇 authored
7
/* global gDomains injected from client.hbs*/ // eslint-disable-line
李奇 authored
8
var $ = require('yoho-jquery');
9
var view = require('./view');
李奇 authored
10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
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);
李奇 authored
31
李奇 authored
32 33 34 35 36 37
/**
 * 粘贴事件
 * @param sl 事件元素选择器
 * @param cb 上传成功的回调
 */
function Paste(sl, cb) {
李奇 authored
38 39 40
    if (typeof sl !== 'string') {
        return;
    }
李奇 authored
41 42 43 44 45
    this.$el = document.querySelector(sl);
    this.formData = null;
    this.uploadCb = cb;
    this.isSending = false;
    this.bindEvents();
李奇 authored
46
    this.input = '';
李奇 authored
47 48
}
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
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));
}
李奇 authored
100 101 102 103
Paste.prototype = {
    bindEvents: function() {
        var self = this;
李奇 authored
104
        this.$el.addEventListener('paste', function(e) {
李奇 authored
105 106
            var cbd = e.clipboardData;
            var ua = window.navigator.userAgent;
107 108 109 110 111 112
            var i;
            var item;
            var reader;
            var file;

            self.input = $('.text.msg-area').val();
李奇 authored
113 114

            // 如果是 Safari 直接 return
李奇 authored
115
            if (!(e.clipboardData && e.clipboardData.items)) {
李奇 authored
116 117
                return;
            }
李奇 authored
118
李奇 authored
119
            // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
李奇 authored
120 121 122
            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) {
李奇 authored
123 124 125
                return;
            }
126 127 128 129 130 131 132 133
            for (i = 0; i < cbd.items.length; i++) {
                item = cbd.items[i];
                if (item.kind === 'file') {
                    file = item.getAsFile();

                    if (file.size === 0) {
                        return;
                    }
李奇 authored
134 135 136 137

                    self.formData = new FormData();
                    self.formData.append('files[]', file, 'clip.jpg');
138 139
                    reader = new FileReader();
                    reader.onload = function(e) {       // eslint-disable-line
李奇 authored
140
                        var base64 = e.target.result;
李奇 authored
141
                        var image = new Image();
142
李奇 authored
143 144
                        image.src = base64;
                        image.onload = function() {
李奇 authored
145
                            $('.text.msg-area').val(self.input);
146
                            _drawPreview.bind(self)(base64);
李奇 authored
147 148 149
                            self.open();
                        };
                    };
李奇 authored
150 151 152 153 154 155 156 157

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

    open: function() {
李奇 authored
158 159 160
        var dh, vh = $(window).height();
        var $main = $('.preview-dialog .dialog-main');
161
        // 机器人不支持
162
        if (!view.processInfo.manual) {
163 164 165
            return;
        }
李奇 authored
166
        this.$preview.show();
李奇 authored
167 168
        dh = $main.height();
        $main.css('top', (vh - dh - 40) / 2);
李奇 authored
169 170 171 172 173
    },

    close: function() {
        this.$preview.hide();
    }
李奇 authored
174
};
李奇 authored
175 176 177 178 179

Paste.prototype.constructor = Paste;

module.exports = Paste;