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

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