/** * 粘贴剪切板 * @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;