截图粘贴发送添加

@@ -19,7 +19,13 @@ const index = (req, res, next) => {
     let userAgent = req.headers['user-agent'];
     let unSupport = reg.test(userAgent);
     let encryptedUid = aes.encryptionUid(req.user.uid);
+    let domains = common.domains;
+    let imCs = domains.imCs;
+    let imSocket = domains.imSocket;
+
     let data = {
+        imCs,
+        imSocket,
         encryptedUid,
         layout: false
     };

@@ -54,6 +54,12 @@
         {{> connect-fail}}
 
         <input name="encryptedUid" type="text" type="hidden" value={{encryptedUid}}>
+        <script>
+            var gDomains = {
+                imCs: '{{{imCs}}}',
+                imSocket: '{{{imSocket}}}'
+            }
+        </script>
         {{#if devEnv}}
             <input name="assetsPrefix" type="text" type="hidden" value="">
             <script src="//{{devHost}}:5002/libs.js"></script>

@@ -12,8 +12,10 @@ var $ = require('yoho-jquery'),
     emojiMap = require('./emoji-map'),
     editArea = require('./edit-area'),
     broswer = require('./broswer'),
-    socketChat = require('./socket-chat'),
-    socketConf = require('./socket-config');
+    send = require('./socket/send'),
+    socketChat = require('./socket/chat'),
+    socketConf = require('./socket/config'),
+    clipPaste = require('./clip-paste');
 
 var allRTs,
     endTime,
@@ -824,6 +826,11 @@ function pageInit() {
         });
     }());
 
+    // 剪切板粘贴发送图片
+    new clipPaste('.msg-area', function(path){
+        send.image(path);
+    });
+
     // tab页title重置
     broswer.tabVisible(function() {
         document.title = docTitle;

+/**
+ * 粘贴剪切板
+ * @author qi.li@yoho.cn
+ * @date: 2017/03/09
+ */
+
+/* global gDomains injected from client.hbs*/
+var $ = require('yoho-jquery');
+var Handlebars = require('yoho-handlebars');
+var config = require('../../../config/common');
+
+// 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();
+}
+
+Paste.prototype = {
+    bindEvents: function() {
+        var self = this;
+
+        this.$el.addEventListener("paste", function (e) {
+            var cbd = e.clipboardData;
+            var ua = window.navigator.userAgent;
+
+            // 如果是 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(var i = 0; i < cbd.items.length; i++) {
+                var item = cbd.items[i];
+                if(item.kind == "file"){
+                    var file = item.getAsFile(); 
+                    if (file.size === 0) { return; }
+
+                    self.formData = new FormData();
+                    self.formData.append('files[]', file, 'clip.jpg');
+
+                    var _upload = function() {
+                        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) {
+                                var path = res.data.filePath;
+                                self.uploadCb(path);
+                                self.close();
+                            }
+                        })
+                        .fail(function() {
+                            alert('图片发送失败、点击发送重试！');
+                        })
+                        .always(function() {
+                            self.isSending = false;
+                        });
+                    };
+
+                    var _bindPrevEvents = function() {
+                        var $prev = self.$preview;
+
+                        $prev.on('click', '.head-close, .cancel-btn', self.close.bind(self))
+                             .on('click', '.confirm-btn', _upload);
+                    }
+
+                    var _drawPreview = function(url) {
+                        var $prev = $('.preview-dialog'); 
+                        var $img = $prev.find('.clip-img');
+                        var len = $img.length;
+
+                        if(len) {
+                            $img.attr('src', url);
+                            self.$preview = $prev;
+                            return;
+                        }
+
+                        var html = $viewHbs({src: url});
+                        $('body').append(html);
+                        $('.preview-dialog').css('z-index', 1090);
+                        self.$preview = $('.preview-dialog');
+
+                        // 绑定预览内事件
+                        _bindPrevEvents();
+                    };
+
+                    var reader = new FileReader();
+                    reader.onload = function(e) {
+                        var base64 = e.target.result;    
+                        var image = new Image();
+                        image.src = base64;
+                        image.onload = function() {
+                            _drawPreview(base64);
+                            self.open();                        
+                        }
+                    }
+
+                    reader.readAsDataURL(file);
+                }
+            }
+        }, false);
+    },
+
+    open: function() {
+        this.$preview.show();
+    },
+
+    close: function() {
+        console.log(this);
+        this.$preview.hide();
+    }
+}
+
+Paste.prototype.constructor = Paste;
+
+module.exports = Paste;
+

+/**
+ * 消息发送
+ * @author <qi.li@yoho.cn>
+ * @date 2017/03/13
+ */
+var uuid = require('uuid');
+var chat = require('./chat');
+var sockConf = require('./config');
+var recTypes = sockConf.recType;
+var conMSG = sockConf.conversationMessage;
+
+/**
+ * 发送
+ * @param {msg} 消息体 
+ */
+function _send(msg) {
+    chat.send(msg);
+}
+
+/**
+ * 图片发送
+ */
+exports.image = function(path) {
+    var IMG_TYPE = 2; // 图片消息
+    conMSG.type = recTypes.CU_SEND;
+    conMSG.chatMessage.content = path;
+    conMSG.chatMessage.type = IMG_TYPE;
+    conMSG.uuid = uuid.v4();
+    _send(conMSG);
+}
\ No newline at end of file

@@ -22,9 +22,9 @@
         position: relative;
         display: block;
         height: auto;
+        max-width: 90%;
         margin: 0 auto;
         margin-top: 50px;
         cursor: pointer;
-
     }
 }

@@ -1150,6 +1150,7 @@ $color-3a3a3a: #3a3a3a;
     @import "_img-zoom-in.css";
     @import "_un-support.css";
     @import "_connect-fail.css";
+    @import "_mask-dialog.css";
 }
 
 

+.mask-dialog {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    
+    .dialog-mask {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1070;
+        background-color: #000;
+        filter: alpha(opacity=50);
+        opacity: .4;
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+    }
+
+    .dialog-main {
+        position: relative;
+        top: 50px;
+        width: 600px;
+        padding: 20px;
+        z-index: 1100;
+        margin: 0 auto;
+        background: #fff;
+        border: 1px solid #c2bbbb;
+        box-shadow: 1px 1px 10px #000;
+
+        .head-part {
+            margin-bottom: 20px;
+
+            .head-title {
+                font-size: 14px;
+            }
+
+            .head-close {
+                position: absolute;
+                right: 25px;
+                top: 15px;
+                font-size: 22px;
+                cursor: pointer;
+            }
+        }
+
+        .body-part {
+            margin-bottom: 20px;
+            text-align: center;
+
+            .clip-img {
+                max-width: 560px;
+                max-height: 400px;
+                border: 1px solid #eee;
+            }
+
+        }
+
+        .foot-part {
+            text-align: center;
+
+            .foot-btn {
+                display: inline-block;
+                height: 30px;
+                width: 120px;
+                margin: 0 40px;
+                color: #fff;
+                line-height: 30px;
+                text-align: center;
+                text-decoration: none;
+                background: #fff;
+                border: 1px solid #000;
+                cursor: pointer;
+            }
+
+            .confirm-btn {
+                background: #000;
+            }
+
+            .cancel-btn {
+                color: #000;
+            }
+
+        }
+    }
+}
+