emoticons.js
3.8 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
/*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net
*
* @author Roddy <luolonghao@gmail.com>
* @site http://www.kindsoft.net/
* @licence http://www.kindsoft.net/license.php
*******************************************************************************/
KindEditor.plugin('emoticons', function(K) {
var self = this, name = 'emoticons',
path = (self.emoticonsPath || self.pluginsPath + 'emoticons/images/'),
allowPreview = self.allowPreviewEmoticons === undefined ? true : self.allowPreviewEmoticons,
currentPageNum = 1;
self.clickToolbar(name, function() {
var rows = 5, cols = 9, total = 135, startNum = 0,
cells = rows * cols, pages = Math.ceil(total / cells),
colsHalf = Math.floor(cols / 2),
wrapperDiv = K('<div class="ke-plugin-emoticons"></div>'),
elements = [],
menu = self.createMenu({
name : name,
beforeRemove : function() {
removeEvent();
}
});
menu.div.append(wrapperDiv);
var previewDiv, previewImg;
if (allowPreview) {
previewDiv = K('<div class="ke-preview"></div>').css('right', 0);
previewImg = K('<img class="ke-preview-img" src="' + path + startNum + '.gif" />');
wrapperDiv.append(previewDiv);
previewDiv.append(previewImg);
}
function bindCellEvent(cell, j, num) {
if (previewDiv) {
cell.mouseover(function() {
if (j > colsHalf) {
previewDiv.css('left', 0);
previewDiv.css('right', '');
} else {
previewDiv.css('left', '');
previewDiv.css('right', 0);
}
previewImg.attr('src', path + num + '.gif');
K(this).addClass('ke-on');
});
} else {
cell.mouseover(function() {
K(this).addClass('ke-on');
});
}
cell.mouseout(function() {
K(this).removeClass('ke-on');
});
cell.click(function(e) {
self.insertHtml('<img src="' + path + num + '.gif" border="0" alt="" />').hideMenu().focus();
e.stop();
});
}
function createEmoticonsTable(pageNum, parentDiv) {
var table = document.createElement('table');
parentDiv.append(table);
if (previewDiv) {
K(table).mouseover(function() {
previewDiv.show('block');
});
K(table).mouseout(function() {
previewDiv.hide();
});
elements.push(K(table));
}
table.className = 'ke-table';
table.cellPadding = 0;
table.cellSpacing = 0;
table.border = 0;
var num = (pageNum - 1) * cells + startNum;
for (var i = 0; i < rows; i++) {
var row = table.insertRow(i);
for (var j = 0; j < cols; j++) {
var cell = K(row.insertCell(j));
cell.addClass('ke-cell');
bindCellEvent(cell, j, num);
var span = K('<span class="ke-img"></span>')
.css('background-position', '-' + (24 * num) + 'px 0px')
.css('background-image', 'url(' + path + 'static.gif)');
cell.append(span);
elements.push(cell);
num++;
}
}
return table;
}
var table = createEmoticonsTable(currentPageNum, wrapperDiv);
function removeEvent() {
K.each(elements, function() {
this.unbind();
});
}
var pageDiv;
function bindPageEvent(el, pageNum) {
el.click(function(e) {
removeEvent();
table.parentNode.removeChild(table);
pageDiv.remove();
table = createEmoticonsTable(pageNum, wrapperDiv);
createPageTable(pageNum);
currentPageNum = pageNum;
e.stop();
});
}
function createPageTable(currentPageNum) {
pageDiv = K('<div class="ke-page"></div>');
wrapperDiv.append(pageDiv);
for (var pageNum = 1; pageNum <= pages; pageNum++) {
if (currentPageNum !== pageNum) {
var a = K('<a href="javascript:;">[' + pageNum + ']</a>');
bindPageEvent(a, pageNum);
pageDiv.append(a);
elements.push(a);
} else {
pageDiv.append(K('@[' + pageNum + ']'));
}
pageDiv.append(K('@ '));
}
}
createPageTable(currentPageNum);
});
});