Face.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. //PC端表情包
  2. Namespace.register("U.MD.UI.face");
  3. /*
  4. ** 添加表情包
  5. ** @param {element} button 插入表情包的元素
  6. ** @param {element} el 输入框的元素
  7. */
  8. U.MD.UI.face = function (button, el) {
  9. var i, _el1, _el2;
  10. if ($("#U_MD_UI_face")[0]) {//判断是否存在表情包
  11. if ($("#U_MD_UI_face")[0].style.display == "none") {//如果存在,判断是否隐藏
  12. U.selectEl("#U_MD_UI_face")[0].style.display = "block"; //如果隐藏 则显示表情包
  13. } else {
  14. U.selectEl("#U_MD_UI_face")[0].style.display = "none"; //否则,隐藏
  15. }
  16. } else {//不存在表情包,创建表情包
  17. var _el = $$("div", { "style": { "position": "relative"} }, U.selectEl(button)[0]); //创建表情包的总样式
  18. _el1 = $$("div", { "id": "U_MD_UI_face", "className": "U_MD_UI_face", "onmousedown": U.UF.EV.stopBubble }, _el); //创建表情包的阻止冒泡事件
  19. _el2 = $$("div", { "className": "U_MD_UI_face_H" }, _el1); //创建存放表情的父级元素
  20. for (i = 0; i <= 104; i++) {//循环打印所有的表情包 共104个
  21. $$("button", {
  22. "className": "U_MD_UI_face_C", "style": { "opacity": "0" }, "onclick": U.UF.C.closure(function (i) {
  23. U.UF.EV.stopBubble();
  24. U.MD.UI.face.printEmoticon(_el1, i, U.UF.E.getRangeAt(), el)
  25. }, [i])
  26. }, _el2); //创建单个表情,并且给每个表情赋值一个点击事件,参数为表情框元素,第几个表情,光标位置,输入框的位置,点击后打印表情到输入框的位置
  27. }
  28. //获取整个body部分的点击事件
  29. U.selectEl('body').unbind('click', U.MD.UI.face.externalClick);
  30. U.selectEl('body').bind('click', U.MD.UI.face.externalClick);
  31. }
  32. el.focus();
  33. };
  34. U.MD.UI.face.externalClick = function (e) {
  35. if (window.event.srcElement.tagName != "BUTTON" && U.selectEl("#U_MD_UI_face")[0]) {//判断点击的是否是发送表情的按钮
  36. U.selectEl("#U_MD_UI_face")[0].style.display = "none"; //如果不是,则隐藏掉表情包
  37. }
  38. }
  39. /* 点击表情框处理
  40. *
  41. * @param {element} el1 表情框元素
  42. * @param {number} i 第几个表情。通过i的值代表是哪个表情
  43. * @param {range} range 光标的位置,先获取光标对象,然后通过光标对象获取光标位置
  44. * @param {element}
  45. 对应路径 /img/ChatingFaceGif/[face](i).gif
  46. */
  47. U.MD.UI.face.printEmoticon = function (el1, i, range, el) {
  48. var _imageurl = "/img/ChatingFaceGif/[face](" + i + ").gif"; //表情路径
  49. if (!range) {
  50. $$("img", { "onerror": U.MD.C.imgError, "src": _imageurl, "contentEditable": "true" }, U.selectEl(el)[0]);
  51. } else {
  52. var img = '<img contentEditable="true" src="' + _imageurl + '">';
  53. U.UF.E.addRange(img, null, true);
  54. }
  55. U.selectEl(el1)[0].style.display = "none";
  56. }