edittable.js 8.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. /**
  2. * Created with JetBrains PhpStorm.
  3. * User: xuheng
  4. * Date: 12-12-19
  5. * Time: 下午4:55
  6. * To change this template use File | Settings | File Templates.
  7. */
  8. (function () {
  9. var title = $G("J_title"),
  10. titleCol = $G("J_titleCol"),
  11. caption = $G("J_caption"),
  12. sorttable = $G("J_sorttable"),
  13. autoSizeContent = $G("J_autoSizeContent"),
  14. autoSizePage = $G("J_autoSizePage"),
  15. tone = $G("J_tone"),
  16. me,
  17. preview = $G("J_preview");
  18. var editTable = function () {
  19. me = this;
  20. me.init();
  21. };
  22. editTable.prototype = {
  23. init:function () {
  24. var colorPiker = new UE.ui.ColorPicker({
  25. editor:editor
  26. }),
  27. colorPop = new UE.ui.Popup({
  28. editor:editor,
  29. content:colorPiker
  30. });
  31. title.checked = editor.queryCommandState("inserttitle") == -1;
  32. titleCol.checked = editor.queryCommandState("inserttitlecol") == -1;
  33. caption.checked = editor.queryCommandState("insertcaption") == -1;
  34. sorttable.checked = editor.queryCommandState("enablesort") == 1;
  35. var enablesortState = editor.queryCommandState("enablesort"),
  36. disablesortState = editor.queryCommandState("disablesort");
  37. sorttable.checked = !!(enablesortState < 0 && disablesortState >=0);
  38. sorttable.disabled = !!(enablesortState < 0 && disablesortState < 0);
  39. sorttable.title = enablesortState < 0 && disablesortState < 0 ? lang.errorMsg:'';
  40. me.createTable(title.checked, titleCol.checked, caption.checked);
  41. me.setAutoSize();
  42. me.setColor(me.getColor());
  43. domUtils.on(title, "click", me.titleHanler);
  44. domUtils.on(titleCol, "click", me.titleColHanler);
  45. domUtils.on(caption, "click", me.captionHanler);
  46. domUtils.on(sorttable, "click", me.sorttableHanler);
  47. domUtils.on(autoSizeContent, "click", me.autoSizeContentHanler);
  48. domUtils.on(autoSizePage, "click", me.autoSizePageHanler);
  49. domUtils.on(tone, "click", function () {
  50. colorPop.showAnchor(tone);
  51. });
  52. domUtils.on(document, 'mousedown', function () {
  53. colorPop.hide();
  54. });
  55. colorPiker.addListener("pickcolor", function () {
  56. me.setColor(arguments[1]);
  57. colorPop.hide();
  58. });
  59. colorPiker.addListener("picknocolor", function () {
  60. me.setColor("");
  61. colorPop.hide();
  62. });
  63. },
  64. createTable:function (hasTitle, hasTitleCol, hasCaption) {
  65. var arr = [],
  66. sortSpan = '<span>^</span>';
  67. arr.push("<table id='J_example'>");
  68. if (hasCaption) {
  69. arr.push("<caption>" + lang.captionName + "</caption>")
  70. }
  71. if (hasTitle) {
  72. arr.push("<tr>");
  73. if(hasTitleCol) { arr.push("<th>" + lang.titleName + "</th>"); }
  74. for (var j = 0; j < 5; j++) {
  75. arr.push("<th>" + lang.titleName + "</th>");
  76. }
  77. arr.push("</tr>");
  78. }
  79. for (var i = 0; i < 6; i++) {
  80. arr.push("<tr>");
  81. if(hasTitleCol) { arr.push("<th>" + lang.titleName + "</th>") }
  82. for (var k = 0; k < 5; k++) {
  83. arr.push("<td>" + lang.cellsName + "</td>")
  84. }
  85. arr.push("</tr>");
  86. }
  87. arr.push("</table>");
  88. preview.innerHTML = arr.join("");
  89. this.updateSortSpan();
  90. },
  91. titleHanler:function () {
  92. var example = $G("J_example"),
  93. frg=document.createDocumentFragment(),
  94. color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
  95. colCount = example.rows[0].children.length;
  96. if (title.checked) {
  97. example.insertRow(0);
  98. for (var i = 0, node; i < colCount; i++) {
  99. node = document.createElement("th");
  100. node.innerHTML = lang.titleName;
  101. frg.appendChild(node);
  102. }
  103. example.rows[0].appendChild(frg);
  104. } else {
  105. domUtils.remove(example.rows[0]);
  106. }
  107. me.setColor(color);
  108. me.updateSortSpan();
  109. },
  110. titleColHanler:function () {
  111. var example = $G("J_example"),
  112. color = domUtils.getComputedStyle(domUtils.getElementsByTagName(example, "td")[0], "border-color"),
  113. colArr = example.rows,
  114. colCount = colArr.length;
  115. if (titleCol.checked) {
  116. for (var i = 0, node; i < colCount; i++) {
  117. node = document.createElement("th");
  118. node.innerHTML = lang.titleName;
  119. colArr[i].insertBefore(node, colArr[i].children[0]);
  120. }
  121. } else {
  122. for (var i = 0; i < colCount; i++) {
  123. domUtils.remove(colArr[i].children[0]);
  124. }
  125. }
  126. me.setColor(color);
  127. me.updateSortSpan();
  128. },
  129. captionHanler:function () {
  130. var example = $G("J_example");
  131. if (caption.checked) {
  132. var row = document.createElement('caption');
  133. row.innerHTML = lang.captionName;
  134. example.insertBefore(row, example.firstChild);
  135. } else {
  136. domUtils.remove(domUtils.getElementsByTagName(example, 'caption')[0]);
  137. }
  138. },
  139. sorttableHanler:function(){
  140. me.updateSortSpan();
  141. },
  142. autoSizeContentHanler:function () {
  143. var example = $G("J_example");
  144. example.removeAttribute("width");
  145. },
  146. autoSizePageHanler:function () {
  147. var example = $G("J_example");
  148. var tds = example.getElementsByTagName(example, "td");
  149. utils.each(tds, function (td) {
  150. td.removeAttribute("width");
  151. });
  152. example.setAttribute('width', '100%');
  153. },
  154. updateSortSpan: function(){
  155. var example = $G("J_example"),
  156. row = example.rows[0];
  157. var spans = domUtils.getElementsByTagName(example,"span");
  158. utils.each(spans,function(span){
  159. span.parentNode.removeChild(span);
  160. });
  161. if (sorttable.checked) {
  162. utils.each(row.cells, function(cell, i){
  163. var span = document.createElement("span");
  164. span.innerHTML = "^";
  165. cell.appendChild(span);
  166. });
  167. }
  168. },
  169. getColor:function () {
  170. var start = editor.selection.getStart(), color,
  171. cell = domUtils.findParentByTagName(start, ["td", "th", "caption"], true);
  172. color = cell && domUtils.getComputedStyle(cell, "border-color");
  173. if (!color) color = "#DDDDDD";
  174. return color;
  175. },
  176. setColor:function (color) {
  177. var example = $G("J_example"),
  178. arr = domUtils.getElementsByTagName(example, "td").concat(
  179. domUtils.getElementsByTagName(example, "th"),
  180. domUtils.getElementsByTagName(example, "caption")
  181. );
  182. tone.value = color;
  183. utils.each(arr, function (node) {
  184. node.style.borderColor = color;
  185. });
  186. },
  187. setAutoSize:function () {
  188. var me = this;
  189. autoSizePage.checked = true;
  190. me.autoSizePageHanler();
  191. }
  192. };
  193. new editTable;
  194. dialog.onok = function () {
  195. editor.__hasEnterExecCommand = true;
  196. var checks = {
  197. title:"inserttitle deletetitle",
  198. titleCol:"inserttitlecol deletetitlecol",
  199. caption:"insertcaption deletecaption",
  200. sorttable:"enablesort disablesort"
  201. };
  202. editor.fireEvent('saveScene');
  203. for(var i in checks){
  204. var cmds = checks[i].split(" "),
  205. input = $G("J_" + i);
  206. if(input["checked"]){
  207. editor.queryCommandState(cmds[0])!=-1 &&editor.execCommand(cmds[0]);
  208. }else{
  209. editor.queryCommandState(cmds[1])!=-1 &&editor.execCommand(cmds[1]);
  210. }
  211. }
  212. editor.execCommand("edittable", tone.value);
  213. autoSizeContent.checked ?editor.execCommand('adaptbytext') : "";
  214. autoSizePage.checked ? editor.execCommand("adaptbywindow") : "";
  215. editor.fireEvent('saveScene');
  216. editor.__hasEnterExecCommand = false;
  217. };
  218. })();