webcit/tiny_mce/plugins/table/js/cell.js

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