ChatFace.js
3.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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
100
101
102
103
104
105
106
107
108
109
//*
// 聊天表情 和选项卡
// */
import Emiter from "Emiter";
import Loger from "Loger";
import $ from "jquery";
let loger = Loger.getLoger('PC-ChatFace');
let step = 0, count = 4;
let $inner = $("#inner-slide"), $tip = $("#tiplist"), $tipList = $tip.children("li");
class ChatFace extends Emiter {
constructor() {
super();
this.addEvent();
this.init();
}
init() {
let that = this;
//布局
$(".face").on("click", that._showHide.bind(this));
$(".swiper-slide").on("click", "li", function (e) {
$("#txt_message").val($("#txt_message").val() + "[img:" + $(this).find("img").attr("data-type") + "]");
const faceList = document.getElementById("facelist");
faceList.style.display = "none";
});
//UI按钮点击事件
$tipList.bind("click", function () {
step = $(this).index();
$inner.stop().animate({left: -step * 320}, 500);
that._changeTip();
});
//选项卡s
this._changeTab();
//文字区域点击后表情消失
/* $("#txt_message").on("focus",that._hideFace.bind(this));
$("#panel_message").on("click",that._hideFace.bind(this));
$(".middle").on("click",that._hideFace.bind(this));
$(".left").on("click",that._hideFace.bind(this));
$(".header").on("click",that._hideFace.bind(this));
$(".videoWindow").on("click",that._hideFace.bind(this));
$(".userListTitle").on("click",that._hideFace.bind(this));*/
}
addEvent() {
}
_showHide() {
let faceList = document.getElementById("facelist");
this._showHideFace(faceList);
}
_showHideFace(obj) {
if (obj.style.display == "none") {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
}
_hideFace(){
let faceList = document.getElementById("facelist");
if (faceList.style.display == "block") {
faceList.style.display = 'none';
}
}
_faceSelected() {
$("#txt_message").val($("#txt_message").val() + "[img:" + $(this).find("img").attr("data-type") + "]");
let faceList = document.getElementById("facelist");
faceList.style.display = "none";
}
_changeTip() {
let that = this;
let temp = step;
temp >= count ? temp = 0 : null;
$tipList.each(function (index, item) {
index === temp ? $(this).addClass("bg") : $(this).removeClass("bg");
});
}
_changeTab() {
$(document).ready(function () {
$(".tabTitle li").click(function () {
$(".tabTitle li").eq($(this).index()).addClass("select").siblings().removeClass("select");
$(".tabCon").hide().eq($(this).index()).show();
});
$(".userListTitle").click(function () {
$(".userListTitle").css("borderBottom", "1px solid #3498db");
$(".discussTitle").css("borderBottom", "1px solid #666");
});
$(".discussTitle").click(function () {
$(".userListTitle").css("borderBottom", "1px solid #666");
$(".discussTitle").css("borderBottom", "1px solid #3498db");
$("#panel_message")[0].scrollTop=$("#panel_message")[0].scrollHeight;
})
})
}
}
ChatFace.prototype.CHAT_FACE_CHANGE = ChatFace.CHAT_FACE_CHANGE = "chat_face_change";
export default ChatFace;