/static/scripts/tiny_mce/plugins/table/js/cell.js

http://n23.googlecode.com/ · JavaScript · 259 lines · 195 code · 58 blank · 6 comment · 47 complexity · 77573fb1f34efa6612ec52c565d7a4f1 MD5 · raw file

  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.getNode(), "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. formObj.bordercolor.value = bordercolor;
  31. formObj.bgcolor.value = bgcolor;
  32. formObj.backgroundimage.value = backgroundimage;
  33. formObj.width.value = width;
  34. formObj.height.value = height;
  35. formObj.id.value = id;
  36. formObj.lang.value = lang;
  37. formObj.style.value = ed.dom.serializeStyle(st);
  38. selectByValue(formObj, 'align', align);
  39. selectByValue(formObj, 'valign', valign);
  40. selectByValue(formObj, 'class', className, true, true);
  41. selectByValue(formObj, 'celltype', celltype);
  42. selectByValue(formObj, 'dir', dir);
  43. selectByValue(formObj, 'scope', scope);
  44. // Resize some elements
  45. if (isVisible('backgroundimagebrowser'))
  46. document.getElementById('backgroundimage').style.width = '180px';
  47. updateColor('bordercolor_pick', 'bordercolor');
  48. updateColor('bgcolor_pick', 'bgcolor');
  49. }
  50. function updateAction() {
  51. var el, inst = ed, tdElm, trElm, tableElm, formObj = document.forms[0];
  52. tinyMCEPopup.restoreSelection();
  53. el = ed.selection.getNode();
  54. tdElm = ed.dom.getParent(el, "td,th");
  55. trElm = ed.dom.getParent(el, "tr");
  56. tableElm = ed.dom.getParent(el, "table");
  57. ed.execCommand('mceBeginUndoLevel');
  58. switch (getSelectValue(formObj, 'action')) {
  59. case "cell":
  60. var celltype = getSelectValue(formObj, 'celltype');
  61. var scope = getSelectValue(formObj, 'scope');
  62. if (ed.getParam("accessibility_warnings")) {
  63. if (celltype == "th" && scope == "")
  64. var answer = confirm(ed.getLang('table_dlg.missing_scope', '', true));
  65. else
  66. var answer = true;
  67. if (!answer)
  68. return;
  69. }
  70. updateCell(tdElm);
  71. break;
  72. case "row":
  73. var cell = trElm.firstChild;
  74. if (cell.nodeName != "TD" && cell.nodeName != "TH")
  75. cell = nextCell(cell);
  76. do {
  77. cell = updateCell(cell, true);
  78. } while ((cell = nextCell(cell)) != null);
  79. break;
  80. case "all":
  81. var rows = tableElm.getElementsByTagName("tr");
  82. for (var i=0; i<rows.length; i++) {
  83. var cell = rows[i].firstChild;
  84. if (cell.nodeName != "TD" && cell.nodeName != "TH")
  85. cell = nextCell(cell);
  86. do {
  87. cell = updateCell(cell, true);
  88. } while ((cell = nextCell(cell)) != null);
  89. }
  90. break;
  91. }
  92. ed.addVisual();
  93. ed.nodeChanged();
  94. inst.execCommand('mceEndUndoLevel');
  95. tinyMCEPopup.close();
  96. }
  97. function nextCell(elm) {
  98. while ((elm = elm.nextSibling) != null) {
  99. if (elm.nodeName == "TD" || elm.nodeName == "TH")
  100. return elm;
  101. }
  102. return null;
  103. }
  104. function updateCell(td, skip_id) {
  105. var inst = ed;
  106. var formObj = document.forms[0];
  107. var curCellType = td.nodeName.toLowerCase();
  108. var celltype = getSelectValue(formObj, 'celltype');
  109. var doc = inst.getDoc();
  110. var dom = ed.dom;
  111. if (!skip_id)
  112. td.setAttribute('id', formObj.id.value);
  113. td.setAttribute('align', formObj.align.value);
  114. td.setAttribute('vAlign', formObj.valign.value);
  115. td.setAttribute('lang', formObj.lang.value);
  116. td.setAttribute('dir', getSelectValue(formObj, 'dir'));
  117. td.setAttribute('style', ed.dom.serializeStyle(ed.dom.parseStyle(formObj.style.value)));
  118. td.setAttribute('scope', formObj.scope.value);
  119. ed.dom.setAttrib(td, 'class', getSelectValue(formObj, 'class'));
  120. // Clear deprecated attributes
  121. ed.dom.setAttrib(td, 'width', '');
  122. ed.dom.setAttrib(td, 'height', '');
  123. ed.dom.setAttrib(td, 'bgColor', '');
  124. ed.dom.setAttrib(td, 'borderColor', '');
  125. ed.dom.setAttrib(td, 'background', '');
  126. // Set styles
  127. td.style.width = getCSSSize(formObj.width.value);
  128. td.style.height = getCSSSize(formObj.height.value);
  129. if (formObj.bordercolor.value != "") {
  130. td.style.borderColor = formObj.bordercolor.value;
  131. td.style.borderStyle = td.style.borderStyle == "" ? "solid" : td.style.borderStyle;
  132. td.style.borderWidth = td.style.borderWidth == "" ? "1px" : td.style.borderWidth;
  133. } else
  134. td.style.borderColor = '';
  135. td.style.backgroundColor = formObj.bgcolor.value;
  136. if (formObj.backgroundimage.value != "")
  137. td.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')";
  138. else
  139. td.style.backgroundImage = '';
  140. if (curCellType != celltype) {
  141. // changing to a different node type
  142. var newCell = doc.createElement(celltype);
  143. for (var c=0; c<td.childNodes.length; c++)
  144. newCell.appendChild(td.childNodes[c].cloneNode(1));
  145. for (var a=0; a<td.attributes.length; a++)
  146. ed.dom.setAttrib(newCell, td.attributes[a].name, ed.dom.getAttrib(td, td.attributes[a].name));
  147. td.parentNode.replaceChild(newCell, td);
  148. td = newCell;
  149. }
  150. dom.setAttrib(td, 'style', dom.serializeStyle(dom.parseStyle(td.style.cssText)));
  151. return td;
  152. }
  153. function changedBackgroundImage() {
  154. var formObj = document.forms[0];
  155. var st = ed.dom.parseStyle(formObj.style.value);
  156. st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
  157. formObj.style.value = ed.dom.serializeStyle(st);
  158. }
  159. function changedSize() {
  160. var formObj = document.forms[0];
  161. var st = ed.dom.parseStyle(formObj.style.value);
  162. var width = formObj.width.value;
  163. if (width != "")
  164. st['width'] = getCSSSize(width);
  165. else
  166. st['width'] = "";
  167. var height = formObj.height.value;
  168. if (height != "")
  169. st['height'] = getCSSSize(height);
  170. else
  171. st['height'] = "";
  172. formObj.style.value = ed.dom.serializeStyle(st);
  173. }
  174. function changedColor() {
  175. var formObj = document.forms[0];
  176. var st = ed.dom.parseStyle(formObj.style.value);
  177. st['background-color'] = formObj.bgcolor.value;
  178. st['border-color'] = formObj.bordercolor.value;
  179. formObj.style.value = ed.dom.serializeStyle(st);
  180. }
  181. function changedStyle() {
  182. var formObj = document.forms[0];
  183. var st = ed.dom.parseStyle(formObj.style.value);
  184. if (st['background-image'])
  185. formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
  186. else
  187. formObj.backgroundimage.value = '';
  188. if (st['width'])
  189. formObj.width.value = trimSize(st['width']);
  190. if (st['height'])
  191. formObj.height.value = trimSize(st['height']);
  192. if (st['background-color']) {
  193. formObj.bgcolor.value = st['background-color'];
  194. updateColor('bgcolor_pick','bgcolor');
  195. }
  196. if (st['border-color']) {
  197. formObj.bordercolor.value = st['border-color'];
  198. updateColor('bordercolor_pick','bordercolor');
  199. }
  200. }
  201. tinyMCEPopup.onInit.add(init);