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