emoticons.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. /*******************************************************************************
  2. * KindEditor - WYSIWYG HTML Editor for Internet
  3. * Copyright (C) 2006-2011 kindsoft.net
  4. *
  5. * @author Roddy <luolonghao@gmail.com>
  6. * @site http://www.kindsoft.net/
  7. * @licence http://www.kindsoft.net/license.php
  8. *******************************************************************************/
  9. KindEditor.plugin('emoticons', function(K) {
  10. var self = this, name = 'emoticons',
  11. path = (self.emoticonsPath || self.pluginsPath + 'emoticons/images/'),
  12. allowPreview = self.allowPreviewEmoticons === undefined ? true : self.allowPreviewEmoticons,
  13. currentPageNum = 1;
  14. self.clickToolbar(name, function() {
  15. var rows = 5, cols = 9, total = 135, startNum = 0,
  16. cells = rows * cols, pages = Math.ceil(total / cells),
  17. colsHalf = Math.floor(cols / 2),
  18. wrapperDiv = K('<div class="ke-plugin-emoticons"></div>'),
  19. elements = [],
  20. menu = self.createMenu({
  21. name : name,
  22. beforeRemove : function() {
  23. removeEvent();
  24. }
  25. });
  26. menu.div.append(wrapperDiv);
  27. var previewDiv, previewImg;
  28. if (allowPreview) {
  29. previewDiv = K('<div class="ke-preview"></div>').css('right', 0);
  30. previewImg = K('<img class="ke-preview-img" src="' + path + startNum + '.gif" />');
  31. wrapperDiv.append(previewDiv);
  32. previewDiv.append(previewImg);
  33. }
  34. function bindCellEvent(cell, j, num) {
  35. if (previewDiv) {
  36. cell.mouseover(function() {
  37. if (j > colsHalf) {
  38. previewDiv.css('left', 0);
  39. previewDiv.css('right', '');
  40. } else {
  41. previewDiv.css('left', '');
  42. previewDiv.css('right', 0);
  43. }
  44. previewImg.attr('src', path + num + '.gif');
  45. K(this).addClass('ke-on');
  46. });
  47. } else {
  48. cell.mouseover(function() {
  49. K(this).addClass('ke-on');
  50. });
  51. }
  52. cell.mouseout(function() {
  53. K(this).removeClass('ke-on');
  54. });
  55. cell.click(function(e) {
  56. self.insertHtml('<img src="' + path + num + '.gif" border="0" alt="" />').hideMenu().focus();
  57. e.stop();
  58. });
  59. }
  60. function createEmoticonsTable(pageNum, parentDiv) {
  61. var table = document.createElement('table');
  62. parentDiv.append(table);
  63. if (previewDiv) {
  64. K(table).mouseover(function() {
  65. previewDiv.show('block');
  66. });
  67. K(table).mouseout(function() {
  68. previewDiv.hide();
  69. });
  70. elements.push(K(table));
  71. }
  72. table.className = 'ke-table';
  73. table.cellPadding = 0;
  74. table.cellSpacing = 0;
  75. table.border = 0;
  76. var num = (pageNum - 1) * cells + startNum;
  77. for (var i = 0; i < rows; i++) {
  78. var row = table.insertRow(i);
  79. for (var j = 0; j < cols; j++) {
  80. var cell = K(row.insertCell(j));
  81. cell.addClass('ke-cell');
  82. bindCellEvent(cell, j, num);
  83. var span = K('<span class="ke-img"></span>')
  84. .css('background-position', '-' + (24 * num) + 'px 0px')
  85. .css('background-image', 'url(' + path + 'static.gif)');
  86. cell.append(span);
  87. elements.push(cell);
  88. num++;
  89. }
  90. }
  91. return table;
  92. }
  93. var table = createEmoticonsTable(currentPageNum, wrapperDiv);
  94. function removeEvent() {
  95. K.each(elements, function() {
  96. this.unbind();
  97. });
  98. }
  99. var pageDiv;
  100. function bindPageEvent(el, pageNum) {
  101. el.click(function(e) {
  102. removeEvent();
  103. table.parentNode.removeChild(table);
  104. pageDiv.remove();
  105. table = createEmoticonsTable(pageNum, wrapperDiv);
  106. createPageTable(pageNum);
  107. currentPageNum = pageNum;
  108. e.stop();
  109. });
  110. }
  111. function createPageTable(currentPageNum) {
  112. pageDiv = K('<div class="ke-page"></div>');
  113. wrapperDiv.append(pageDiv);
  114. for (var pageNum = 1; pageNum <= pages; pageNum++) {
  115. if (currentPageNum !== pageNum) {
  116. var a = K('<a href="javascript:;">[' + pageNum + ']</a>');
  117. bindPageEvent(a, pageNum);
  118. pageDiv.append(a);
  119. elements.push(a);
  120. } else {
  121. pageDiv.append(K('@[' + pageNum + ']'));
  122. }
  123. pageDiv.append(K('@&nbsp;'));
  124. }
  125. }
  126. createPageTable(currentPageNum);
  127. });
  128. });