emoji.js
16.9 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
var emoji={"[大笑]":{file:"emoji_0.png"},"[可爱]":{file:"emoji_01.png"},"[色]":{file:"emoji_02.png"},"[嘘]":{file:"emoji_03.png"},"[亲]":{file:"emoji_04.png"},"[呆]":{file:"emoji_05.png"},"[口水]":{file:"emoji_06.png"},"[汗]":{file:"emoji_145.png"},"[呲牙]":{file:"emoji_07.png"},"[鬼脸]":{file:"emoji_08.png"},"[害羞]":{file:"emoji_09.png"},"[偷笑]":{file:"emoji_10.png"},"[调皮]":{file:"emoji_11.png"},"[可怜]":{file:"emoji_12.png"},"[敲]":{file:"emoji_13.png"},"[惊讶]":{file:"emoji_14.png"},"[流感]":{file:"emoji_15.png"},"[委屈]":{file:"emoji_16.png"},"[流泪]":{file:"emoji_17.png"},"[嚎哭]":{file:"emoji_18.png"},"[惊恐]":{file:"emoji_19.png"},"[怒]":{file:"emoji_20.png"},"[酷]":{file:"emoji_21.png"},"[不说]":{file:"emoji_22.png"},"[鄙视]":{file:"emoji_23.png"},"[阿弥陀佛]":{file:"emoji_24.png"},"[奸笑]":{file:"emoji_25.png"},"[睡着]":{file:"emoji_26.png"},"[口罩]":{file:"emoji_27.png"},"[努力]":{file:"emoji_28.png"},"[抠鼻孔]":{file:"emoji_29.png"},"[疑问]":{file:"emoji_30.png"},"[怒骂]":{file:"emoji_31.png"},"[晕]":{file:"emoji_32.png"},"[呕吐]":{file:"emoji_33.png"},"[拜一拜]":{file:"emoji_160.png"},"[惊喜]":{file:"emoji_161.png"},"[流汗]":{file:"emoji_162.png"},"[卖萌]":{file:"emoji_163.png"},"[默契眨眼]":{file:"emoji_164.png"},"[烧香拜佛]":{file:"emoji_165.png"},"[晚安]":{file:"emoji_166.png"},"[强]":{file:"emoji_34.png"},"[弱]":{file:"emoji_35.png"},"[OK]":{file:"emoji_36.png"},"[拳头]":{file:"emoji_37.png"},"[胜利]":{file:"emoji_38.png"},"[鼓掌]":{file:"emoji_39.png"},"[握手]":{file:"emoji_200.png"},"[发怒]":{file:"emoji_40.png"},"[骷髅]":{file:"emoji_41.png"},"[便便]":{file:"emoji_42.png"},"[火]":{file:"emoji_43.png"},"[溜]":{file:"emoji_44.png"},"[爱心]":{file:"emoji_45.png"},"[心碎]":{file:"emoji_46.png"},"[钟情]":{file:"emoji_47.png"},"[唇]":{file:"emoji_48.png"},"[戒指]":{file:"emoji_49.png"},"[钻石]":{file:"emoji_50.png"},"[太阳]":{file:"emoji_51.png"},"[有时晴]":{file:"emoji_52.png"},"[多云]":{file:"emoji_53.png"},"[雷]":{file:"emoji_54.png"},"[雨]":{file:"emoji_55.png"},"[雪花]":{file:"emoji_56.png"},"[爱人]":{file:"emoji_57.png"},"[帽子]":{file:"emoji_58.png"},"[皇冠]":{file:"emoji_59.png"},"[篮球]":{file:"emoji_60.png"},"[足球]":{file:"emoji_61.png"},"[垒球]":{file:"emoji_62.png"},"[网球]":{file:"emoji_63.png"},"[台球]":{file:"emoji_64.png"},"[咖啡]":{file:"emoji_65.png"},"[啤酒]":{file:"emoji_66.png"},"[干杯]":{file:"emoji_67.png"},"[柠檬汁]":{file:"emoji_68.png"},"[餐具]":{file:"emoji_69.png"},"[汉堡]":{file:"emoji_70.png"},"[鸡腿]":{file:"emoji_71.png"},"[面条]":{file:"emoji_72.png"},"[冰淇淋]":{file:"emoji_73.png"},"[沙冰]":{file:"emoji_74.png"},"[生日蛋糕]":{file:"emoji_75.png"},"[蛋糕]":{file:"emoji_76.png"},"[糖果]":{file:"emoji_77.png"},"[葡萄]":{file:"emoji_78.png"},"[西瓜]":{file:"emoji_79.png"},"[光碟]":{file:"emoji_80.png"},"[手机]":{file:"emoji_81.png"},"[电话]":{file:"emoji_82.png"},"[电视]":{file:"emoji_83.png"},"[声音开启]":{file:"emoji_84.png"},"[声音关闭]":{file:"emoji_85.png"},"[铃铛]":{file:"emoji_86.png"},"[锁头]":{file:"emoji_87.png"},"[放大镜]":{file:"emoji_88.png"},"[灯泡]":{file:"emoji_89.png"},"[锤头]":{file:"emoji_90.png"},"[烟]":{file:"emoji_91.png"},"[炸弹]":{file:"emoji_92.png"},"[枪]":{file:"emoji_93.png"},"[刀]":{file:"emoji_94.png"},"[药]":{file:"emoji_95.png"},"[打针]":{file:"emoji_96.png"},"[钱袋]":{file:"emoji_97.png"},"[钞票]":{file:"emoji_98.png"},"[银行卡]":{file:"emoji_99.png"},"[手柄]":{file:"emoji_100.png"},"[麻将]":{file:"emoji_101.png"},"[调色板]":{file:"emoji_102.png"},"[电影]":{file:"emoji_103.png"},"[麦克风]":{file:"emoji_104.png"},"[耳机]":{file:"emoji_105.png"},"[音乐]":{file:"emoji_106.png"},"[吉他]":{file:"emoji_107.png"},"[火箭]":{file:"emoji_108.png"},"[飞机]":{file:"emoji_109.png"},"[火车]":{file:"emoji_110.png"},"[公交]":{file:"emoji_111.png"},"[轿车]":{file:"emoji_112.png"},"[出租车]":{file:"emoji_113.png"},"[警车]":{file:"emoji_114.png"},"[自行车]":{file:"emoji_115.png"}};
var emojiList = {
"emoji": {
"[大笑]":{file:"emoji_0.png"},"[可爱]":{file:"emoji_01.png"},"[色]":{file:"emoji_02.png"},"[嘘]":{file:"emoji_03.png"},"[亲]":{file:"emoji_04.png"},"[呆]":{file:"emoji_05.png"},"[口水]":{file:"emoji_06.png"},"[汗]":{file:"emoji_145.png"},"[呲牙]":{file:"emoji_07.png"},"[鬼脸]":{file:"emoji_08.png"},"[害羞]":{file:"emoji_09.png"},"[偷笑]":{file:"emoji_10.png"},"[调皮]":{file:"emoji_11.png"},"[可怜]":{file:"emoji_12.png"},"[敲]":{file:"emoji_13.png"},"[惊讶]":{file:"emoji_14.png"},"[流感]":{file:"emoji_15.png"},"[委屈]":{file:"emoji_16.png"},"[流泪]":{file:"emoji_17.png"},"[嚎哭]":{file:"emoji_18.png"},"[惊恐]":{file:"emoji_19.png"},"[怒]":{file:"emoji_20.png"},"[酷]":{file:"emoji_21.png"},"[不说]":{file:"emoji_22.png"},"[鄙视]":{file:"emoji_23.png"},"[阿弥陀佛]":{file:"emoji_24.png"},"[奸笑]":{file:"emoji_25.png"},"[睡着]":{file:"emoji_26.png"},"[口罩]":{file:"emoji_27.png"},"[努力]":{file:"emoji_28.png"},"[抠鼻孔]":{file:"emoji_29.png"},"[疑问]":{file:"emoji_30.png"},"[怒骂]":{file:"emoji_31.png"},"[晕]":{file:"emoji_32.png"},"[呕吐]":{file:"emoji_33.png"},"[拜一拜]":{file:"emoji_160.png"},"[惊喜]":{file:"emoji_161.png"},"[流汗]":{file:"emoji_162.png"},"[卖萌]":{file:"emoji_163.png"},"[默契眨眼]":{file:"emoji_164.png"},"[烧香拜佛]":{file:"emoji_165.png"},"[晚安]":{file:"emoji_166.png"},"[强]":{file:"emoji_34.png"},"[弱]":{file:"emoji_35.png"},"[OK]":{file:"emoji_36.png"},"[拳头]":{file:"emoji_37.png"},"[胜利]":{file:"emoji_38.png"},"[鼓掌]":{file:"emoji_39.png"},"[握手]":{file:"emoji_200.png"},"[发怒]":{file:"emoji_40.png"},"[骷髅]":{file:"emoji_41.png"},"[便便]":{file:"emoji_42.png"},"[火]":{file:"emoji_43.png"},"[溜]":{file:"emoji_44.png"},"[爱心]":{file:"emoji_45.png"},"[心碎]":{file:"emoji_46.png"},"[钟情]":{file:"emoji_47.png"},"[唇]":{file:"emoji_48.png"},"[戒指]":{file:"emoji_49.png"},"[钻石]":{file:"emoji_50.png"},"[太阳]":{file:"emoji_51.png"},"[有时晴]":{file:"emoji_52.png"},"[多云]":{file:"emoji_53.png"},"[雷]":{file:"emoji_54.png"},"[雨]":{file:"emoji_55.png"},"[雪花]":{file:"emoji_56.png"},"[爱人]":{file:"emoji_57.png"},"[帽子]":{file:"emoji_58.png"},"[皇冠]":{file:"emoji_59.png"},"[篮球]":{file:"emoji_60.png"},"[足球]":{file:"emoji_61.png"},"[垒球]":{file:"emoji_62.png"},"[网球]":{file:"emoji_63.png"},"[台球]":{file:"emoji_64.png"},"[咖啡]":{file:"emoji_65.png"},"[啤酒]":{file:"emoji_66.png"},"[干杯]":{file:"emoji_67.png"},"[柠檬汁]":{file:"emoji_68.png"},"[餐具]":{file:"emoji_69.png"},"[汉堡]":{file:"emoji_70.png"},"[鸡腿]":{file:"emoji_71.png"},"[面条]":{file:"emoji_72.png"},"[冰淇淋]":{file:"emoji_73.png"},"[沙冰]":{file:"emoji_74.png"},"[生日蛋糕]":{file:"emoji_75.png"},"[蛋糕]":{file:"emoji_76.png"},"[糖果]":{file:"emoji_77.png"},"[葡萄]":{file:"emoji_78.png"},"[西瓜]":{file:"emoji_79.png"},"[光碟]":{file:"emoji_80.png"},"[手机]":{file:"emoji_81.png"},"[电话]":{file:"emoji_82.png"},"[电视]":{file:"emoji_83.png"},"[声音开启]":{file:"emoji_84.png"},"[声音关闭]":{file:"emoji_85.png"},"[铃铛]":{file:"emoji_86.png"},"[锁头]":{file:"emoji_87.png"},"[放大镜]":{file:"emoji_88.png"},"[灯泡]":{file:"emoji_89.png"},"[锤头]":{file:"emoji_90.png"},"[烟]":{file:"emoji_91.png"},"[炸弹]":{file:"emoji_92.png"},"[枪]":{file:"emoji_93.png"},"[刀]":{file:"emoji_94.png"},"[药]":{file:"emoji_95.png"},"[打针]":{file:"emoji_96.png"},"[钱袋]":{file:"emoji_97.png"},"[钞票]":{file:"emoji_98.png"},"[银行卡]":{file:"emoji_99.png"},"[手柄]":{file:"emoji_100.png"},"[麻将]":{file:"emoji_101.png"},"[调色板]":{file:"emoji_102.png"},"[电影]":{file:"emoji_103.png"},"[麦克风]":{file:"emoji_104.png"},"[耳机]":{file:"emoji_105.png"},"[音乐]":{file:"emoji_106.png"},"[吉他]":{file:"emoji_107.png"},"[火箭]":{file:"emoji_108.png"},"[飞机]":{file:"emoji_109.png"},"[火车]":{file:"emoji_110.png"},"[公交]":{file:"emoji_111.png"},"[轿车]":{file:"emoji_112.png"},"[出租车]":{file:"emoji_113.png"},"[警车]":{file:"emoji_114.png"},"[自行车]":{file:"emoji_115.png"}
}
}
var pinupList = {
'ajmd':[],
'xxy':[],
'lt':[]
};
(function(){
for (var i = 1; i <=48; i++) {
pinupList['ajmd'].push('ajmd0'+ (i>=10?i:'0'+i)+'.png')
};
for (var i = 1; i <=40; i++) {
pinupList['xxy'].push('xxy0'+ (i>=10?i:'0'+i)+'.png')
};
for (var i = 1; i <=20; i++) {
pinupList['lt'].push('lt0'+ (i>=10?i:'0'+i)+'.png')
};
})();
/**
* 通过正则替换掉文本消息中的emoji表情
* @param text:文本消息内容
*/
function buildEmoji(text) {
var re = /\[([^\]\[]*)\]/g;
var matches = text.match(re) || [];
for (var j = 0, len = matches.length; j < len; ++j) {
if(emoji[matches[j]]){
text = text.replace(matches[j], '<img class="emoji" src="images/emoji/' + emoji[matches[j]].file + '" />');
}
}
return text;
}
function CEmojiEngine(emNode,emConfig){
emConfig = emConfig || {};
this.__init(emNode,emConfig);
};
CEmojiEngine.prototype.__init = function(emNode,emConfig){
this._emojiList = emConfig.emojiList||[]; //表情列表
this._pinupList = emConfig.pinupList||[]; //贴图列表
this._imgpath = emConfig.imgpath; //图片根目录
this._callback = emConfig.callback||function(){}; //回调函数
this.__initXGui(emNode,emConfig); //控件初始化
this.__renderChangeCol(); //渲染表情选择栏
this._curEmojiType = 'emoji-emoji'; //初始化当前默认表情选择
this._curEmojiNode = document.getElementById('chn-emoji-emoji');
this.__renderPictureCol(); //渲染表情图片栏
this.__bindEvent();
};
//初始化表情节点
CEmojiEngine.prototype.__initXGui = function(emNode,emConfig){
this._parentNode = document.createElement('div');
this._parentNode.className = 'm-emoji-wrapper';
this._width = emConfig.width||300;
this._height= emConfig.height||200;
this._parentNode.style.width = this._width + 'px';
this._parentNode.style.height = 'auto';
this._lWidth = parseInt((this._width-25)/12)-20; //小的缩略图
this._hWidth = parseInt((this._width-25)/5)-20; //大的缩略图
var tmpdiv= document.createElement('div');
tmpdiv.className = 'm-emoji-picCol';
tmpdiv.style.width = this._width + 'px';
tmpdiv.style.height= this._height + 'px';
this._parentNode.appendChild(tmpdiv);
this._pictureColumn= document.createElement('ul');
this._pictureColumn.className = 'm-emoji-picCol-ul';
this._pictureColumn.style.width = (this._width-10)+'px';
this._pictureColumn.style.height= 'auto';
tmpdiv.appendChild(this._pictureColumn);
tmpdiv = document.createElement('div');
tmpdiv.className = 'm-emoji-chnCol';
tmpdiv.style.width = this._width+'px';
tmpdiv.style.height= 'auto';
this._parentNode.appendChild(tmpdiv);
this._changeColumn = document.createElement('div');
this._changeColumn.className = 'm-emoji-chnCol-ul';
this._changeColumn.style.width = 'auto';
this._changeColumn.style.height= '50px';
tmpdiv.appendChild(this._changeColumn);
emNode.appendChild(this._parentNode);
};
CEmojiEngine.prototype.__renderChangeCol = function(){
for(var i in this._emojiList){
var emojiList = this._emojiList[i];
for(var key in emojiList){
var span = document.createElement('span');
span.id = 'chn-emoji-'+i;
var img = new Image();
img.src = "./images/"+emojiList[key]['file'];
span.appendChild(img);
this._changeColumn.appendChild(span);
break;
}
if(i=='emoji'){
span.className = 'f-sel';
}
}
for(var i in this._pinupList){
var pinupList = this._pinupList[i];
var span = document.createElement('span');
span.id = 'chn-pinup-'+i;
var img = new Image();
img.src = "./images/"+ pinupList[0];
span.appendChild(img);
this._changeColumn.appendChild(span);
}
}
CEmojiEngine.prototype.__renderPictureCol= function(){
this._pictureColumn.innerHTML = ""
var isEmoji = /^emoji-/.test(this._curEmojiType);
if(isEmoji){ //表情包
var subtype = this._curEmojiType.replace('emoji-','');
var emojiList = this._emojiList[subtype];
for(var key in emojiList){
var span = document.createElement('span');
span.id = 'pic-emoji-'+key;
span.style.width = this._lWidth+'px';
span.style.height= 'auto';
var img = new Image();
img.src = this._imgpath +subtype+ '/'+ emojiList[key]['file'];
span.appendChild(img);
this._pictureColumn.appendChild(span);
}
}else{ //贴图
var subtype = this._curEmojiType.replace('pinup-','');
var pinupList = this._pinupList[subtype];
for(var key = 0;key<pinupList.length;key++){
var span = document.createElement('span');
span.id = 'pic-pinup-'+key;
span.style.width = this._hWidth+'px';
span.style.height= 'auto';
var img = new Image();
img.src = this._imgpath +subtype+ '/'+pinupList[key];
span.appendChild(img);
this._pictureColumn.appendChild(span);
}
}
}
CEmojiEngine.prototype.__bindEvent = function(){
var that = this;
//切换表情栏
this._$addEvent(this._changeColumn,'click',function(event){
var target = that._$getElement(event);
that._$stop(event);
if(target.tagName.toLowerCase()=='img'){
target = target.parentNode;
}else if(target.tagName.toLowerCase()!='span'){
return;
} //target 在li上
that._curEmojiNode.className = '';
var id = target.id;
id = /^chn-(\w+)-(.+)/.exec(id);
var type=id[1];
if(type=='emoji'){ //普通表情
that._curEmojiType = 'emoji-'+id[2];
that._curEmojiNode = target;
}else if(type=='pinup'){ //贴图表情
that._curEmojiType = 'pinup-'+id[2];
that._curEmojiNode = target;
}
target.className = 'f-sel';
that.__renderPictureCol();
});
//选择表情栏
this._$addEvent(this._pictureColumn,'click',function(event){
var target = that._$getElement(event);
that._$stop(event);
if(target.tagName.toLowerCase()=='img'){
target = target.parentNode;
}else if(target.tagName.toLowerCase()!='span'){
return;
}
var id = target.id;
var type = /^pic-(\w+)-(.+)$/.exec(id);
var emoji = type[2];
type = type[1];
var category = that._curEmojiType;
if(type=='emoji'){
category = category.replace('emoji-','');
}else if(type=='pinup'){
category = category.replace('pinup-','');
}
var result = {
"type":type,
"category":category,
"emoji":emoji
};
if(that._callback instanceof Function){
that._callback.call(this,result);
that._$hide();
}
});
this._$addEvent(this._pictureColumn,'mouseover',function(event){
var target = that._$getElement(event);
if(target.tagName.toLowerCase()=='img'){
target = target.parentNode;
}else if(target.tagName.toLowerCase()!='li'){
return;
}
target.className = 'f-sel';
});
this._$addEvent(this._pictureColumn,'mouseout',function(event){
var target = that._$getElement(event);
if(target.tagName.toLowerCase()=='img'){
target = target.parentNode;
}else if(target.tagName.toLowerCase()!='li'){
return;
}
target.className = '';
});
this._$addEvent(document,'click',function(){
that._$hide();
});
}
//查找对应的表情原图,用于显示
// CEmojiEngine.prototype._$find = function(obj){
// if(typeof obj == 'string'){
// var type = 'emoji';
// var category = '0';
// var emoji = obj||'';
// }else{
// var type = obj.type||'emoji';
// var category = obj.category||'0';
// var emoji = obj.emoji||'';
// }
// if(type=='emoji'){
// var detail = this._emojiList[category][emoji];
// }else if(type=='pinup'){
// var detail = this._pinupList[category][emoji];
// }
// return this._imgpath+(detail&&detail['file']||'');
// }
//显示控件
CEmojiEngine.prototype._$show = function(){
this._curEmojiType = 'emoji-emoji'; //初始化当前默认表情选择
this._curEmojiNode = document.getElementById('chn-emoji-emoji');
this.__renderPictureCol(); //渲染表情图片栏
var tags = this._changeColumn.getElementsByTagName('span');
for(var i=0;i<tags.length;i++){
tags[i].className = '';
}
tags[0].className = 'f-sel';
var that = this;
setTimeout(function(){
that._parentNode.style.display = 'block'; //阻止冒泡产生的负效应
},20);
}
//隐藏控件
CEmojiEngine.prototype._$hide = function(){
this._parentNode.style.display = 'none';
}
//关于事件绑定的原生对象
CEmojiEngine.prototype._$addEvent = function(element,type,callback){
if(!!element.addEventListener){
element.addEventListener(type,callback,false);
}else if(!!element.attachEvent){
element.attachEvent('on'+type,callback);
}else{
}
};
CEmojiEngine.prototype._$stop = function(event){
event=event?event:window.event;
if(!!event.stopPropogation){
event.stopPropogation();
}else{
event.cancelBubble=true;
}
};
CEmojiEngine.prototype._$getElement = function(event){
event = event||window.event;
var target = event.target||event.srcElement;
return target;
};