cell.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. tinyMCEPopup.requireLangPack();
  2. var ed;
  3. function init() {
  4. ed = tinyMCEPopup.editor;
  5. tinyMCEPopup.resizeToInnerSize();
  6. document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
  7. document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor');
  8. document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor')
  9. var inst = ed;
  10. var tdElm = ed.dom.getParent(ed.selection.getStart(), "td,th");
  11. var formObj = document.forms[0];
  12. var st = ed.dom.parseStyle(ed.dom.getAttrib(tdElm, "style"));
  13. // Get table cell data
  14. var celltype = tdElm.nodeName.toLowerCase();
  15. var align = ed.dom.getAttrib(tdElm, 'align');
  16. var valign = ed.dom.getAttrib(tdElm, 'valign');
  17. var width = trimSize(getStyle(tdElm, 'width', 'width'));
  18. var height = trimSize(getStyle(tdElm, 'height', 'height'));
  19. var bordercolor = convertRGBToHex(getStyle(tdElm, 'bordercolor', 'borderLeftColor'));
  20. var bgcolor = convertRGBToHex(getStyle(tdElm, 'bgcolor', 'backgroundColor'));
  21. var className = ed.dom.getAttrib(tdElm, 'class');
  22. var backgroundimage = getStyle(tdElm, 'background', 'backgroundImage').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
  23. var id = ed.dom.getAttrib(tdElm, 'id');
  24. var lang = ed.dom.getAttrib(tdElm, 'lang');
  25. var dir = ed.dom.getAttrib(tdElm, 'dir');
  26. var scope = ed.dom.getAttrib(tdElm, 'scope');
  27. // Setup form
  28. addClassesToList('class', 'table_cell_styles');
  29. TinyMCE_EditableSelects.init();
  30. if (!ed.dom.hasClass(tdElm, 'mceSelected')) {
  31. formObj.bordercolor.value = bordercolor;
  32. formObj.bgcolor.value = bgcolor;
  33. formObj.backgroundimage.value = backgroundimage;
  34. formObj.width.value = width;
  35. formObj.height.value = height;
  36. formObj.id.value = id;
  37. formObj.lang.value = lang;
  38. formObj.style.value = ed.dom.serializeStyle(st);
  39. selectByValue(formObj, 'align', align);
  40. selectByValue(formObj, 'valign', valign);
  41. selectByValue(formObj, 'class', className, true, true);
  42. selectByValue(formObj, 'celltype', celltype);
  43. selectByValue(formObj, 'dir', dir);
  44. selectByValue(formObj, 'scope', scope);
  45. // Resize some elements
  46. if (isVisible('backgroundimagebrowser'))
  47. document.getElementById('backgroundimage').style.width = '180px';
  48. updateColor('bordercolor_pick', 'bordercolor');
  49. updateColor('bgcolor_pick', 'bgcolor');
  50. } else
  51. tinyMCEPopup.dom.hide('action');
  52. }
  53. function updateAction() {
  54. var el, inst = ed, tdElm, trElm, tableElm, formObj = document.forms[0];
  55. if (!AutoValidator.validate(formObj)) {
  56. tinyMCEPopup.alert(AutoValidator.getErrorMessages(formObj).join('. ') + '.');
  57. return false;
  58. }
  59. tinyMCEPopup.restoreSelection();
  60. el = ed.selection.getStart();
  61. tdElm = ed.dom.getParent(el, "td,th");
  62. trElm = ed.dom.getParent(el, "tr");
  63. tableElm = ed.dom.getParent(el, "table");
  64. // Cell is selected
  65. if (ed.dom.hasClass(tdElm, 'mceSelected')) {
  66. // Update all selected sells
  67. tinymce.each(ed.dom.select('td.mceSelected,th.mceSelected'), function(td) {
  68. updateCell(td);
  69. });
  70. ed.addVisual();
  71. ed.nodeChanged();
  72. inst.execCommand('mceEndUndoLevel');
  73. tinyMCEPopup.close();
  74. return;
  75. }
  76. switch (getSelectValue(formObj, 'action')) {
  77. case "cell":
  78. var celltype = getSelectValue(formObj, 'celltype');
  79. var scope = getSelectValue(formObj, 'scope');
  80. function doUpdate(s) {
  81. if (s) {
  82. updateCell(tdElm);
  83. ed.addVisual();
  84. ed.nodeChanged();
  85. inst.execCommand('mceEndUndoLevel');
  86. tinyMCEPopup.close();
  87. }
  88. };
  89. if (ed.getParam("accessibility_warnings", 1)) {
  90. if (celltype == "th" && scope == "")
  91. tinyMCEPopup.confirm(ed.getLang('table_dlg.missing_scope', '', true), doUpdate);
  92. else
  93. doUpdate(1);
  94. return;
  95. }
  96. updateCell(tdElm);
  97. break;
  98. case "row":
  99. var cell = trElm.firstChild;
  100. if (cell.nodeName != "TD" && cell.nodeName != "TH")
  101. cell = nextCell(cell);
  102. do {
  103. cell = updateCell(cell, true);
  104. } while ((cell = nextCell(cell)) != null);
  105. break;
  106. case "col":
  107. var curr, col = 0, cell = trElm.firstChild, rows = tableElm.getElementsByTagName("tr");
  108. if (cell.nodeName != "TD" && cell.nodeName != "TH")
  109. cell = nextCell(cell);
  110. do {
  111. if (cell == tdElm)
  112. break;
  113. col += cell.getAttribute("colspan")?cell.getAttribute("colspan"):1;
  114. } while ((cell = nextCell(cell)) != null);
  115. for (var i=0; i<rows.length; i++) {
  116. cell = rows[i].firstChild;
  117. if (cell.nodeName != "TD" && cell.nodeName != "TH")
  118. cell = nextCell(cell);
  119. curr = 0;
  120. do {
  121. if (curr == col) {
  122. cell = updateCell(cell, true);
  123. break;
  124. }
  125. curr += cell.getAttribute("colspan")?cell.getAttribute("colspan"):1;
  126. } while ((cell = nextCell(cell)) != null);
  127. }
  128. break;
  129. case "all":
  130. var rows = tableElm.getElementsByTagName("tr");
  131. for (var i=0; i<rows.length; i++) {
  132. var cell = rows[i].firstChild;
  133. if (cell.nodeName != "TD" && cell.nodeName != "TH")
  134. cell = nextCell(cell);
  135. do {
  136. cell = updateCell(cell, true);
  137. } while ((cell = nextCell(cell)) != null);
  138. }
  139. break;
  140. }
  141. ed.addVisual();
  142. ed.nodeChanged();
  143. inst.execCommand('mceEndUndoLevel');
  144. tinyMCEPopup.close();
  145. }
  146. function nextCell(elm) {
  147. while ((elm = elm.nextSibling) != null) {
  148. if (elm.nodeName == "TD" || elm.nodeName == "TH")
  149. return elm;
  150. }
  151. return null;
  152. }
  153. function updateCell(td, skip_id) {
  154. var inst = ed;
  155. var formObj = document.forms[0];
  156. var curCellType = td.nodeName.toLowerCase();
  157. var celltype = getSelectValue(formObj, 'celltype');
  158. var doc = inst.getDoc();
  159. var dom = ed.dom;
  160. if (!skip_id)
  161. dom.setAttrib(td, 'id', formObj.id.value);
  162. dom.setAttrib(td, 'align', formObj.align.value);
  163. dom.setAttrib(td, 'vAlign', formObj.valign.value);
  164. dom.setAttrib(td, 'lang', formObj.lang.value);
  165. dom.setAttrib(td, 'dir', getSelectValue(formObj, 'dir'));
  166. dom.setAttrib(td, 'style', ed.dom.serializeStyle(ed.dom.parseStyle(formObj.style.value)));
  167. dom.setAttrib(td, 'scope', formObj.scope.value);
  168. dom.setAttrib(td, 'class', getSelectValue(formObj, 'class'));
  169. // Clear deprecated attributes
  170. ed.dom.setAttrib(td, 'width', '');
  171. ed.dom.setAttrib(td, 'height', '');
  172. ed.dom.setAttrib(td, 'bgColor', '');
  173. ed.dom.setAttrib(td, 'borderColor', '');
  174. ed.dom.setAttrib(td, 'background', '');
  175. // Set styles
  176. td.style.width = getCSSSize(formObj.width.value);
  177. td.style.height = getCSSSize(formObj.height.value);
  178. if (formObj.bordercolor.value != "") {
  179. td.style.borderColor = formObj.bordercolor.value;
  180. td.style.borderStyle = td.style.borderStyle == "" ? "solid" : td.style.borderStyle;
  181. td.style.borderWidth = td.style.borderWidth == "" ? "1px" : td.style.borderWidth;
  182. } else
  183. td.style.borderColor = '';
  184. td.style.backgroundColor = formObj.bgcolor.value;
  185. if (formObj.backgroundimage.value != "")
  186. td.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')";
  187. else
  188. td.style.backgroundImage = '';
  189. if (curCellType != celltype) {
  190. // changing to a different node type
  191. var newCell = doc.createElement(celltype);
  192. for (var c=0; c<td.childNodes.length; c++)
  193. newCell.appendChild(td.childNodes[c].cloneNode(1));
  194. for (var a=0; a<td.attributes.length; a++)
  195. ed.dom.setAttrib(newCell, td.attributes[a].name, ed.dom.getAttrib(td, td.attributes[a].name));
  196. td.parentNode.replaceChild(newCell, td);
  197. td = newCell;
  198. }
  199. dom.setAttrib(td, 'style', dom.serializeStyle(dom.parseStyle(td.style.cssText)));
  200. return td;
  201. }
  202. function changedBackgroundImage() {
  203. var formObj = document.forms[0];
  204. var st = ed.dom.parseStyle(formObj.style.value);
  205. st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
  206. formObj.style.value = ed.dom.serializeStyle(st);
  207. }
  208. function changedSize() {
  209. var formObj = document.forms[0];
  210. var st = ed.dom.parseStyle(formObj.style.value);
  211. var width = formObj.width.value;
  212. if (width != "")
  213. st['width'] = getCSSSize(width);
  214. else
  215. st['width'] = "";
  216. var height = formObj.height.value;
  217. if (height != "")
  218. st['height'] = getCSSSize(height);
  219. else
  220. st['height'] = "";
  221. formObj.style.value = ed.dom.serializeStyle(st);
  222. }
  223. function changedColor() {
  224. var formObj = document.forms[0];
  225. var st = ed.dom.parseStyle(formObj.style.value);
  226. st['background-color'] = formObj.bgcolor.value;
  227. st['border-color'] = formObj.bordercolor.value;
  228. formObj.style.value = ed.dom.serializeStyle(st);
  229. }
  230. function changedStyle() {
  231. var formObj = document.forms[0];
  232. var st = ed.dom.parseStyle(formObj.style.value);
  233. if (st['background-image'])
  234. formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
  235. else
  236. formObj.backgroundimage.value = '';
  237. if (st['width'])
  238. formObj.width.value = trimSize(st['width']);
  239. if (st['height'])
  240. formObj.height.value = trimSize(st['height']);
  241. if (st['background-color']) {
  242. formObj.bgcolor.value = st['background-color'];
  243. updateColor('bgcolor_pick','bgcolor');
  244. }
  245. if (st['border-color']) {
  246. formObj.bordercolor.value = st['border-color'];
  247. updateColor('bordercolor_pick','bordercolor');
  248. }
  249. }
  250. tinyMCEPopup.onInit.add(init);