|
|
// 当页面加载完成后执行的函数，用于初始化页面中与表情相关的各种设置、元素创建以及事件绑定等操作
|
|
|
window.onload = function () {
|
|
|
// 设置编辑器（editor，可能是自定义的富文本编辑器对象）的配置选项，将 'emotionLocalization' 设置为 false，表示表情相关资源的本地化属性为否，具体影响后续表情图片等资源的获取路径
|
|
|
editor.setOpt({
|
|
|
emotionLocalization: false
|
|
|
});
|
|
|
|
|
|
// 根据编辑器的 'emotionLocalization' 选项值来确定表情图片的路径（SmileyPath），如果为 true，则从本地相对路径 'images/' 获取，否则从指定的网络路径 "http://img.baidu.com/hi/" 获取
|
|
|
emotion.SmileyPath = editor.options.emotionLocalization === true? 'images/' : "http://img.baidu.com/hi/";
|
|
|
// 创建一个包含指定数量（emotion.tabNum）的空数组对象，用于存储不同面板（tab）下的相关信息（比如每个面板对应的表情图片文件名等），每个属性名以 'tab' 加数字的形式表示（如 'tab0'、'tab1' 等）
|
|
|
emotion.SmileyBox = createTabList(emotion.tabNum);
|
|
|
// 创建一个包含指定数量（emotion.tabNum）的数组，数组元素初始值都为 0，用于标记每个面板（tab）是否已经创建或存在相关内容，后续根据这个标记来决定是否需要重新创建对应面板的内容
|
|
|
emotion.tabExist = createArr(emotion.tabNum);
|
|
|
|
|
|
// 初始化表情图片名称相关的数据，比如根据已有的图片前缀名等信息生成完整的图片文件名列表，填充到对应的面板数组（emotion.SmileyBox）中
|
|
|
initImgName();
|
|
|
// 初始化事件处理函数，为特定 id（此处传入 'tabHeads'）对应的元素及其子元素绑定点击等事件监听器，实现切换面板等交互功能
|
|
|
initEvtHandler("tabHeads");
|
|
|
};
|
|
|
|
|
|
// 初始化表情图片名称相关数据的函数，用于根据已有的表情图片前缀名（emotion.SmilmgName 中存储的信息）和数量信息，生成完整的表情图片文件名，并填充到对应的面板数组（emotion.SmileyBox）中
|
|
|
function initImgName() {
|
|
|
// 遍历 emotion.SmilmgName 对象的每个属性（pro），每个属性对应一个面板（如 'tab0'、'tab1' 等）
|
|
|
for (var pro in emotion.SmilmgName) {
|
|
|
var tempName = emotion.SmilmgName[pro],
|
|
|
tempBox = emotion.SmileyBox[pro],
|
|
|
tempStr = "";
|
|
|
|
|
|
// 如果当前面板对应的数组（tempBox）已经有元素了（即长度大于 0），则直接返回，不进行重复处理，可能是避免多次初始化同一面板的数据
|
|
|
if (tempBox.length) return;
|
|
|
// 根据当前面板对应的图片前缀名（tempName[0]）和数量（tempName[1]）信息，循环生成完整的图片文件名，并添加到当前面板对应的数组（tempBox）中
|
|
|
for (var i = 1; i <= tempName[1]; i++) {
|
|
|
tempStr = tempName[0];
|
|
|
if (i < 10) tempStr = tempStr + '0';
|
|
|
tempStr = tempStr + i + '.gif';
|
|
|
tempBox.push(tempStr);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 初始化事件处理函数，用于为指定 id（conId）对应的元素及其子元素绑定点击等事件监听器，实现切换面板等交互功能
|
|
|
function initEvtHandler(conId) {
|
|
|
// 通过 $G 函数（可能是自定义的获取 DOM 元素的函数）获取指定 id（conId）对应的元素，此处应该是获取页面中用于切换面板的头部元素集合（如包含各个面板标题的 span 元素的父元素）
|
|
|
var tabHeads = $G(conId);
|
|
|
// 遍历头部元素集合的每个子节点（childNodes），为符合条件的元素绑定点击事件监听器
|
|
|
for (var i = 0, j = 0; i < tabHeads.childNodes.length; i++) {
|
|
|
var tabObj = tabHeads.childNodes[i];
|
|
|
// 只对节点类型为元素节点（nodeType == 1）的子节点进行操作，过滤掉文本节点、注释节点等非元素类型的节点
|
|
|
if (tabObj.nodeType == 1) {
|
|
|
// 使用 domUtils.on 函数（可能是自定义的事件绑定工具函数）为当前元素（tabObj）绑定点击事件监听器，点击时执行一个立即执行函数返回的函数，这个函数会调用 switchTab 函数，并传入当前面板的索引（j）作为参数，实现点击切换对应面板的功能，同时 j 自增，用于记录下一个面板的索引
|
|
|
domUtils.on(tabObj, "click", (function (index) {
|
|
|
return function () {
|
|
|
switchTab(index);
|
|
|
};
|
|
|
})(j));
|
|
|
j++;
|
|
|
}
|
|
|
}
|
|
|
// 初始时默认切换到第一个面板（索引为 0），调用 switchTab 函数显示第一个面板的内容
|
|
|
switchTab(0);
|
|
|
// 将用于显示表情预览的元素（id 为 'tabIconReview'）隐藏起来，初始状态下不显示预览内容
|
|
|
$G("tabIconReview").style.display = 'none';
|
|
|
}
|
|
|
|
|
|
// 插入表情图片到编辑器中的函数，根据传入的图片 URL（url）以及触发的事件对象（evt），创建一个包含图片源地址（src）等信息的对象（obj），然后通过编辑器的命令（execCommand）插入图片，并且如果不是按下 Ctrl 键触发的操作，则隐藏相关的弹出对话框（popup.hide）
|
|
|
function InsertSmiley(url, evt) {
|
|
|
var obj = {
|
|
|
src: editor.options.emotionLocalization? editor.options.UEDITOR_HOME_URL + "dialogs/emotion/" + url : url
|
|
|
};
|
|
|
obj._src = obj.src;
|
|
|
editor.execCommand('insertimage', obj);
|
|
|
if (!evt.ctrlKey) {
|
|
|
dialog.popup.hide();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 切换面板显示的函数，根据传入的面板索引（index），执行调整面板高度（autoHeight）、创建面板内容（如果不存在）以及切换显示对应面板内容和隐藏其他面板内容等操作
|
|
|
function switchTab(index) {
|
|
|
// 根据传入的面板索引调整对应面板的高度相关样式，比如设置 iframe 和其父元素的高度值，确保合适的显示布局
|
|
|
autoHeight(index);
|
|
|
// 如果当前面板还不存在（对应 emotion.tabExist 数组中该索引位置的值为 0），则标记该面板已存在（设置为 1），并调用 createTab 函数创建该面板的具体内容（如添加表情图片表格等元素）
|
|
|
if (emotion.tabExist[index] == 0) {
|
|
|
emotion.tabExist[index] = 1;
|
|
|
createTab('tab' + index);
|
|
|
}
|
|
|
// 获取用于切换面板的头部元素集合（包含各个面板标题的 span 元素）和主体元素集合（包含各个面板具体内容的 div 元素）
|
|
|
var tabHeads = $G("tabHeads").getElementsByTagName("span"),
|
|
|
tabBodys = $G("tabBodys").getElementsByTagName("div"),
|
|
|
i = 0, L = tabHeads.length;
|
|
|
// 循环遍历头部和主体元素集合，将所有元素的样式设置为初始状态，即隐藏主体元素（display="none"），清除头部元素的类名（className=""），用于清除之前可能设置的选中类名等样式
|
|
|
for (; i < L; i++) {
|
|
|
tabHeads[i].className = "";
|
|
|
tabBodys[i].style.display = "none";
|
|
|
}
|
|
|
// 将当前要显示的面板对应的头部元素添加特定的类名（可能用于设置选中样式，如背景色等变化），并显示其对应的主体元素内容
|
|
|
tabHeads[index].className = "focus";
|
|
|
tabBodys[index].style.display = "block";
|
|
|
}
|
|
|
|
|
|
// 根据传入的面板索引（index）调整对应面板的高度相关样式的函数，通过设置 iframe 及其父元素的高度值，为不同面板设置不同的合适高度，确保良好的显示布局效果
|
|
|
function autoHeight(index) {
|
|
|
var iframe = dialog.getDom("iframe"),
|
|
|
parent = iframe.parentNode.parentNode;
|
|
|
switch (index) {
|
|
|
case 0:
|
|
|
iframe.style.height = "380px";
|
|
|
parent.style.height = "392px";
|
|
|
break;
|
|
|
case 1:
|
|
|
iframe.style.height = "220px";
|
|
|
parent.style.height = "232px";
|
|
|
break;
|
|
|
case 2:
|
|
|
iframe.style.height = "260px";
|
|
|
parent.style.height = "272px";
|
|
|
break;
|
|
|
case 3:
|
|
|
iframe.style.height = "300px";
|
|
|
parent.style.height = "312px";
|
|
|
break;
|
|
|
case 4:
|
|
|
iframe.style.height = "140px";
|
|
|
parent.style.height = "152px";
|
|
|
break;
|
|
|
case 5:
|
|
|
iframe.style.height = "260px";
|
|
|
parent.style.height = "272px";
|
|
|
break;
|
|
|
case 6:
|
|
|
iframe.style.height = "230px";
|
|
|
parent.style.height = "242px";
|
|
|
break;
|
|
|
default:
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 创建特定面板（tabName）内容的函数，主要用于生成包含表情图片、相关提示信息以及鼠标交互事件绑定的表格元素，并添加到对应的面板 div 元素中，实现表情图片的展示和交互功能
|
|
|
function createTab(tabName) {
|
|
|
var faceVersion = "?v=1.1", //版本号
|
|
|
tab = $G(tabName), //获取将要生成的 Div 句柄，即对应面板的 div 元素对象，用于后续往里面添加生成的表格内容
|
|
|
imagePath = emotion.SmileyPath + emotion.imageFolders[tabName], //获取显示表情和预览表情的路径，通过拼接表情图片的基础路径（SmileyPath）和当前面板对应的文件夹路径（imageFolders[tabName]）得到完整路径
|
|
|
positionLine = 11 / 2, //中间数，可能用于判断图片在表格中的位置（比如用于控制背景图片的定位等情况，结合后续代码看与鼠标悬停显示预览相关逻辑有关）
|
|
|
iWidth = iHeight = 35, //图片长宽，设置表情图片在页面上显示的宽度和高度均为 35 像素
|
|
|
iColWidth = 3, //表格剩余空间的显示比例，可能用于设置表格单元格的宽度占比等布局相关参数，影响表情图片在表格中的排列方式
|
|
|
tableCss = emotion.imageCss[tabName],
|
|
|
cssOffset = emotion.imageCssOffset[tabName],
|
|
|
textHTML = ['<table class="smileytable">'],
|
|
|
i = 0, imgNum = emotion.SmileyBox[tabName].length, imgColNum = 11, faceImage,
|
|
|
sUrl, realUrl, posflag, offset, infor;
|
|
|
|
|
|
// 循环遍历当前面板对应的表情图片数量（imgNum），生成表格的行（tr）和列（td）元素，将表情图片、相关提示信息以及鼠标交互事件绑定添加到表格中
|
|
|
for (; i < imgNum;) {
|
|
|
textHTML.push('<tr>');
|
|
|
for (var j = 0; j < imgColNum; j++, i++) {
|
|
|
faceImage = emotion.SmileyBox[tabName][i];
|
|
|
if (faceImage) {
|
|
|
sUrl = imagePath + faceImage + faceVersion;
|
|
|
realUrl = imagePath + faceImage;
|
|
|
posflag = j < positionLine? 0 : 1;
|
|
|
offset = cssOffset * i * (-1) - 1;
|
|
|
infor = emotion.SmileyInfor[tabName][i];
|
|
|
|
|
|
textHTML.push('<td class="' + tableCss + '" border="1" width="' + iColWidth + '%" style="border-collapse:collapse;" align="center" bgcolor="transparent" onclick="InsertSmiley(\'' + realUrl.replace(/'/g, "\\'") + '\',event)" onmouseover="over(this,\'' + sUrl + '\',\'' + posflag + '\')" onmouseout="out(this)">');
|
|
|
textHTML.push('<span>');
|
|
|
textHTML.push('<img style="background-position:left ' + offset + 'px;" title="' + infor + '" src="' + emotion.SmileyPath + (editor.options.emotionLocalization? '0.gif" width="' : 'default/0.gif" width="') + iWidth + '" height="' + iHeight + '"></img>');
|
|
|
textHTML.push('</span>');
|
|
|
} else {
|
|
|
textHTML.push('<td width="' + iColWidth + '%" bgcolor="#FFFFFF">');
|
|
|
}
|
|
|
textHTML.push('</td>');
|
|
|
}
|
|
|
textHTML.push('</tr>');
|
|
|
}
|
|
|
textHTML.push('</table>');
|
|
|
textHTML = textHTML.join("");
|
|
|
tab.innerHTML = textHTML;
|
|
|
}
|
|
|
|
|
|
// 鼠标悬停在表情图片所在单元格（td）上时执行的函数，用于改变单元格背景色、显示表情预览图片以及显示表情预览元素（tabIconReview）等操作，实现鼠标悬停时的交互效果
|
|
|
function over(td, srcPath, posFlag) {
|
|
|
td.style.backgroundColor = "#ACCD3C";
|
|
|
$G('faceReview').style.backgroundImage = "url(" + srcPath + ")";
|
|
|
if (posFlag == 1) $G("tabIconReview").className = "show";
|
|
|
$G("tabIconReview").style.display = 'block';
|
|
|
}
|
|
|
|
|
|
// 鼠标移出表情图片所在单元格（td）时执行的函数，用于恢复单元格背景色为透明、隐藏表情预览元素（tabIconReview）以及清除其相关类名等操作，还原到初始状态
|
|
|
function out(td) {
|
|
|
td.style.backgroundColor = "transparent";
|
|
|
var tabIconRevew = $G("tabIconReview");
|
|
|
tabIconRevew.className = "";
|
|
|
tabIconRevew.style.display = 'none';
|
|
|
}
|
|
|
|
|
|
// 创建一个包含指定数量（tabNum）的空数组对象的函数，每个属性名以 'tab' 加数字的形式表示（如 'tab0'、'tab1' 等），用于后续存储不同面板相关的信息，初始时每个数组都是空的
|
|
|
function createTabList(tabNum) {
|
|
|
var obj = {};
|
|
|
for (var i = 0; i < tabNum; i++) {
|
|
|
obj["tab" + i] = [];
|
|
|
}
|
|
|
return obj;
|
|
|
}
|
|
|
|
|
|
// 创建一个包含指定数量（tabNum）的数组，数组元素初始值都为 0 的函数，用于标记每个面板（tab）是否已经创建或存在相关内容，后续根据这个标记来决定是否需要重新创建对应面板的内容
|
|
|
function createArr(tabNum) {
|
|
|
var arr = [];
|
|
|
for (var i = 0; i < tabNum; i++) {
|
|
|
arr[i] = 0;
|
|
|
}
|
|
|
return arr;
|
|
|
} |
