emotion.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. window.onload = function () {
  2. editor.setOpt({
  3. emotionLocalization: false
  4. })
  5. emotion.SmileyPath =
  6. editor.options.emotionLocalization === true ? 'images/' : 'http://img.baidu.com/hi/'
  7. emotion.SmileyBox = createTabList(emotion.tabNum)
  8. emotion.tabExist = createArr(emotion.tabNum)
  9. initImgName()
  10. initEvtHandler('tabHeads')
  11. }
  12. function initImgName() {
  13. for (var pro in emotion.SmilmgName) {
  14. var tempName = emotion.SmilmgName[pro],
  15. tempBox = emotion.SmileyBox[pro],
  16. tempStr = ''
  17. if (tempBox.length) return
  18. for (var i = 1; i <= tempName[1]; i++) {
  19. tempStr = tempName[0]
  20. if (i < 10) tempStr = tempStr + '0'
  21. tempStr = tempStr + i + '.gif'
  22. tempBox.push(tempStr)
  23. }
  24. }
  25. }
  26. function initEvtHandler(conId) {
  27. var tabHeads = $G(conId)
  28. for (var i = 0, j = 0; i < tabHeads.childNodes.length; i++) {
  29. var tabObj = tabHeads.childNodes[i]
  30. if (tabObj.nodeType == 1) {
  31. domUtils.on(
  32. tabObj,
  33. 'click',
  34. (function (index) {
  35. return function () {
  36. switchTab(index)
  37. }
  38. })(j)
  39. )
  40. j++
  41. }
  42. }
  43. switchTab(0)
  44. $G('tabIconReview').style.display = 'none'
  45. }
  46. function InsertSmiley(url, evt) {
  47. var obj = {
  48. src: editor.options.emotionLocalization
  49. ? editor.options.UEDITOR_HOME_URL + 'dialogs/emotion/' + url
  50. : url
  51. }
  52. obj._src = obj.src
  53. console.log('InsertSmiley')
  54. editor.execCommand('insertimage', obj)
  55. if (!evt.ctrlKey) {
  56. dialog.popup.hide()
  57. }
  58. }
  59. function switchTab(index) {
  60. autoHeight(index)
  61. if (emotion.tabExist[index] == 0) {
  62. emotion.tabExist[index] = 1
  63. createTab('tab' + index)
  64. }
  65. //获取呈现元素句柄数组
  66. var tabHeads = $G('tabHeads').getElementsByTagName('span'),
  67. tabBodys = $G('tabBodys').getElementsByTagName('div'),
  68. i = 0,
  69. L = tabHeads.length
  70. //隐藏所有呈现元素
  71. for (; i < L; i++) {
  72. tabHeads[i].className = ''
  73. tabBodys[i].style.display = 'none'
  74. }
  75. //显示对应呈现元素
  76. tabHeads[index].className = 'focus'
  77. tabBodys[index].style.display = 'block'
  78. }
  79. function autoHeight(index) {
  80. var iframe = dialog.getDom('iframe'),
  81. parent = iframe.parentNode.parentNode
  82. switch (index) {
  83. case 0:
  84. iframe.style.height = '380px'
  85. parent.style.height = '392px'
  86. break
  87. case 1:
  88. iframe.style.height = '220px'
  89. parent.style.height = '232px'
  90. break
  91. case 2:
  92. iframe.style.height = '260px'
  93. parent.style.height = '272px'
  94. break
  95. case 3:
  96. iframe.style.height = '300px'
  97. parent.style.height = '312px'
  98. break
  99. case 4:
  100. iframe.style.height = '140px'
  101. parent.style.height = '152px'
  102. break
  103. case 5:
  104. iframe.style.height = '260px'
  105. parent.style.height = '272px'
  106. break
  107. case 6:
  108. iframe.style.height = '230px'
  109. parent.style.height = '242px'
  110. break
  111. default:
  112. }
  113. }
  114. function createTab(tabName) {
  115. var faceVersion = '?v=1.1', //版本号
  116. tab = $G(tabName), //获取将要生成的Div句柄
  117. imagePath = emotion.SmileyPath + emotion.imageFolders[tabName], //获取显示表情和预览表情的路径
  118. positionLine = 11 / 2, //中间数
  119. iWidth = (iHeight = 35), //图片长宽
  120. iColWidth = 3, //表格剩余空间的显示比例
  121. tableCss = emotion.imageCss[tabName],
  122. cssOffset = emotion.imageCssOffset[tabName],
  123. textHTML = ['<table class="smileytable">'],
  124. i = 0,
  125. imgNum = emotion.SmileyBox[tabName].length,
  126. imgColNum = 11,
  127. faceImage,
  128. sUrl,
  129. realUrl,
  130. posflag,
  131. offset,
  132. infor
  133. for (; i < imgNum; ) {
  134. textHTML.push('<tr>')
  135. for (var j = 0; j < imgColNum; j++, i++) {
  136. faceImage = emotion.SmileyBox[tabName][i]
  137. if (faceImage) {
  138. sUrl = imagePath + faceImage + faceVersion
  139. realUrl = imagePath + faceImage
  140. posflag = j < positionLine ? 0 : 1
  141. offset = cssOffset * i * -1 - 1
  142. infor = emotion.SmileyInfor[tabName][i]
  143. textHTML.push(
  144. '<td class="' +
  145. tableCss +
  146. '" border="1" width="' +
  147. iColWidth +
  148. '%" style="border-collapse:collapse;" align="center" bgcolor="transparent" onclick="InsertSmiley(\'' +
  149. realUrl.replace(/'/g, "\\'") +
  150. '\',event)" onmouseover="over(this,\'' +
  151. sUrl +
  152. "','" +
  153. posflag +
  154. '\')" onmouseout="out(this)">'
  155. )
  156. textHTML.push('<span>')
  157. textHTML.push(
  158. '<img style="background-position:left ' +
  159. offset +
  160. 'px;" title="' +
  161. infor +
  162. '" src="' +
  163. emotion.SmileyPath +
  164. (editor.options.emotionLocalization ? '0.gif" width="' : 'default/0.gif" width="') +
  165. iWidth +
  166. '" height="' +
  167. iHeight +
  168. '"></img>'
  169. )
  170. textHTML.push('</span>')
  171. } else {
  172. textHTML.push('<td width="' + iColWidth + '%" bgcolor="#FFFFFF">')
  173. }
  174. textHTML.push('</td>')
  175. }
  176. textHTML.push('</tr>')
  177. }
  178. textHTML.push('</table>')
  179. textHTML = textHTML.join('')
  180. tab.innerHTML = textHTML
  181. }
  182. function over(td, srcPath, posFlag) {
  183. td.style.backgroundColor = '#ACCD3C'
  184. $G('faceReview').style.backgroundImage = 'url(' + srcPath + ')'
  185. if (posFlag == 1) $G('tabIconReview').className = 'show'
  186. $G('tabIconReview').style.display = 'block'
  187. }
  188. function out(td) {
  189. td.style.backgroundColor = 'transparent'
  190. var tabIconRevew = $G('tabIconReview')
  191. tabIconRevew.className = ''
  192. tabIconRevew.style.display = 'none'
  193. }
  194. function createTabList(tabNum) {
  195. var obj = {}
  196. for (var i = 0; i < tabNum; i++) {
  197. obj['tab' + i] = []
  198. }
  199. return obj
  200. }
  201. function createArr(tabNum) {
  202. var arr = []
  203. for (var i = 0; i < tabNum; i++) {
  204. arr[i] = 0
  205. }
  206. return arr
  207. }