CocoRoboDesktop/js/Controls/Basic/Face.js

//PC端表情包
Namespace.register("U.MD.UI.face");
/*
**  添加表情包
**  @param {element} button 插入表情包的元素
**  @param {element} el  输入框的元素
*/
U.MD.UI.face = function (button, el) {
    var i, _el1, _el2;
    if ($("#U_MD_UI_face")[0]) {//判断是否存在表情包
        if ($("#U_MD_UI_face")[0].style.display == "none") {//如果存在，判断是否隐藏
            U.selectEl("#U_MD_UI_face")[0].style.display = "block"; //如果隐藏 则显示表情包
        } else {
            U.selectEl("#U_MD_UI_face")[0].style.display = "none"; //否则，隐藏
        }
    } else {//不存在表情包，创建表情包
        var _el = $$("div", { "style": { "position": "relative"} }, U.selectEl(button)[0]); //创建表情包的总样式
        _el1 = $$("div", { "id": "U_MD_UI_face", "className": "U_MD_UI_face", "onmousedown": U.UF.EV.stopBubble }, _el); //创建表情包的阻止冒泡事件
        _el2 = $$("div", { "className": "U_MD_UI_face_H" }, _el1); //创建存放表情的父级元素
        for (i = 0; i <= 104; i++) {//循环打印所有的表情包 共104个
            $$("button", {
                "className": "U_MD_UI_face_C", "style": { "opacity": "0" }, "onclick": U.UF.C.closure(function (i) {
                    U.UF.EV.stopBubble();
                    U.MD.UI.face.printEmoticon(_el1, i, U.UF.E.getRangeAt(), el)
                }, [i])
            }, _el2); //创建单个表情，并且给每个表情赋值一个点击事件，参数为表情框元素，第几个表情，光标位置，输入框的位置，点击后打印表情到输入框的位置
        }
        //获取整个body部分的点击事件
        U.selectEl('body').unbind('click', U.MD.UI.face.externalClick);
        U.selectEl('body').bind('click', U.MD.UI.face.externalClick);
    }
    el.focus();
};

U.MD.UI.face.externalClick = function (e) {
    if (window.event.srcElement.tagName != "BUTTON" && U.selectEl("#U_MD_UI_face")[0]) {//判断点击的是否是发送表情的按钮
        U.selectEl("#U_MD_UI_face")[0].style.display = "none"; //如果不是，则隐藏掉表情包
    }
}
/* 点击表情框处理
*
* @param  {element} el1 表情框元素
* @param  {number}  i 第几个表情。通过i的值代表是哪个表情
* @param  {range}   range 光标的位置，先获取光标对象，然后通过光标对象获取光标位置
* @param  {element}
对应路径 /img/ChatingFaceGif/[face](i).gif
*/
U.MD.UI.face.printEmoticon = function (el1, i, range, el) {
    var _imageurl = "/img/ChatingFaceGif/[face](" + i + ").gif"; //表情路径
    if (!range) {
        $$("img", { "onerror": U.MD.C.imgError, "src": _imageurl, "contentEditable": "true" }, U.selectEl(el)[0]);
    } else {
        var img = '<img contentEditable="true" src="' + _imageurl + '">';
        U.UF.E.addRange(img, null, true);
    }
    U.selectEl(el1)[0].style.display = "none";
}