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

   1 function init() {\r
   2         tinyMCEPopup.resizeToInnerSize();\r
   3 \r
   4         var inst = tinyMCE.selectedInstance;\r
   5         var trElm = tinyMCE.getParentElement(inst.getFocusElement(), "tr");\r
   6         var formObj = document.forms[0];\r
   7         var st = tinyMCE.parseStyle(trElm.style.cssText);\r
   8 \r
   9         // Get table row data\r
  10         var rowtype = trElm.parentNode.nodeName.toLowerCase();\r
  11         var align = tinyMCE.getAttrib(trElm, 'align');\r
  12         var valign = tinyMCE.getAttrib(trElm, 'valign');\r
  13         var height = trimSize(getStyle(trElm, 'height', 'height'));\r
  14         var className = tinyMCE.getVisualAidClass(tinyMCE.getAttrib(trElm, 'class'), false);\r
  15         var bgcolor = convertRGBToHex(getStyle(trElm, 'bgcolor', 'backgroundColor'));\r
  16         var backgroundimage = getStyle(trElm, 'background', 'backgroundImage').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");;\r
  17         var id = tinyMCE.getAttrib(trElm, 'id');\r
  18         var lang = tinyMCE.getAttrib(trElm, 'lang');\r
  19         var dir = tinyMCE.getAttrib(trElm, 'dir');\r
  20 \r
  21         // Setup form\r
  22         addClassesToList('class', 'table_row_styles');\r
  23         formObj.bgcolor.value = bgcolor;\r
  24         formObj.backgroundimage.value = backgroundimage;\r
  25         formObj.height.value = height;\r
  26         formObj.id.value = id;\r
  27         formObj.lang.value = lang;\r
  28         formObj.style.value = tinyMCE.serializeStyle(st);\r
  29         selectByValue(formObj, 'align', align);\r
  30         selectByValue(formObj, 'valign', valign);\r
  31         selectByValue(formObj, 'class', className);\r
  32         selectByValue(formObj, 'rowtype', rowtype);\r
  33         selectByValue(formObj, 'dir', dir);\r
  34 \r
  35         // Resize some elements\r
  36         if (isVisible('backgroundimagebrowser'))\r
  37                 document.getElementById('backgroundimage').style.width = '180px';\r
  38 \r
  39         updateColor('bgcolor_pick', 'bgcolor');\r
  40 }\r
  41 \r
  42 function updateAction() {\r
  43         var inst = tinyMCE.selectedInstance;\r
  44         var trElm = tinyMCE.getParentElement(inst.getFocusElement(), "tr");\r
  45         var tableElm = tinyMCE.getParentElement(inst.getFocusElement(), "table");\r
  46         var formObj = document.forms[0];\r
  47         var action = getSelectValue(formObj, 'action');\r
  48 \r
  49         inst.execCommand('mceBeginUndoLevel');\r
  50 \r
  51         switch (action) {\r
  52                 case "row":\r
  53                         updateRow(trElm);\r
  54                         break;\r
  55 \r
  56                 case "all":\r
  57                         var rows = tableElm.getElementsByTagName("tr");\r
  58 \r
  59                         for (var i=0; i<rows.length; i++)\r
  60                                 updateRow(rows[i], true);\r
  61 \r
  62                         break;\r
  63 \r
  64                 case "odd":\r
  65                 case "even":\r
  66                         var rows = tableElm.getElementsByTagName("tr");\r
  67 \r
  68                         for (var i=0; i<rows.length; i++) {\r
  69                                 if ((i % 2 == 0 && action == "odd") || (i % 2 != 0 && action == "even"))\r
  70                                         updateRow(rows[i], true, true);\r
  71                         }\r
  72 \r
  73                         break;\r
  74         }\r
  75 \r
  76         tinyMCE.handleVisualAid(inst.getBody(), true, inst.visualAid, inst);\r
  77         tinyMCE.triggerNodeChange();\r
  78         inst.execCommand('mceEndUndoLevel');\r
  79         tinyMCEPopup.close();\r
  80 }\r
  81 \r
  82 function updateRow(tr_elm, skip_id, skip_parent) {\r
  83         var inst = tinyMCE.selectedInstance;\r
  84         var formObj = document.forms[0];\r
  85         var curRowType = tr_elm.parentNode.nodeName.toLowerCase();\r
  86         var rowtype = getSelectValue(formObj, 'rowtype');\r
  87         var doc = inst.getDoc();\r
  88 \r
  89         // Update row element\r
  90         if (!skip_id)\r
  91                 tr_elm.setAttribute('id', formObj.id.value);\r
  92 \r
  93         tr_elm.setAttribute('align', getSelectValue(formObj, 'align'));\r
  94         tr_elm.setAttribute('vAlign', getSelectValue(formObj, 'valign'));\r
  95         tr_elm.setAttribute('lang', formObj.lang.value);\r
  96         tr_elm.setAttribute('dir', getSelectValue(formObj, 'dir'));\r
  97         tr_elm.setAttribute('style', tinyMCE.serializeStyle(tinyMCE.parseStyle(formObj.style.value)));\r
  98         tinyMCE.setAttrib(tr_elm, 'class', getSelectValue(formObj, 'class'));\r
  99 \r
 100         // Clear deprecated attributes\r
 101         tr_elm.setAttribute('background', '');\r
 102         tr_elm.setAttribute('bgColor', '');\r
 103         tr_elm.setAttribute('height', '');\r
 104 \r
 105         // Set styles\r
 106         tr_elm.style.height = getCSSSize(formObj.height.value);\r
 107         tr_elm.style.backgroundColor = formObj.bgcolor.value;\r
 108 \r
 109         if (formObj.backgroundimage.value != "")\r
 110                 tr_elm.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')";\r
 111         else\r
 112                 tr_elm.style.backgroundImage = '';\r
 113 \r
 114         // Setup new rowtype\r
 115         if (curRowType != rowtype && !skip_parent) {\r
 116                 // first, clone the node we are working on\r
 117                 var newRow = tr_elm.cloneNode(1);\r
 118 \r
 119                 // next, find the parent of its new destination (creating it if necessary)\r
 120                 var theTable = tinyMCE.getParentElement(tr_elm, "table");\r
 121                 var dest = rowtype;\r
 122                 var newParent = null;\r
 123                 for (var i = 0; i < theTable.childNodes.length; i++) {\r
 124                         if (theTable.childNodes[i].nodeName.toLowerCase() == dest)\r
 125                                 newParent = theTable.childNodes[i];\r
 126                 }\r
 127 \r
 128                 if (newParent == null) {\r
 129                         newParent = doc.createElement(dest);\r
 130 \r
 131                         if (dest == "thead")\r
 132                                 theTable.insertBefore(newParent, theTable.firstChild);\r
 133                         else\r
 134                                 theTable.appendChild(newParent);\r
 135                 }\r
 136 \r
 137                 // append the row to the new parent\r
 138                 newParent.appendChild(newRow);\r
 139 \r
 140                 // remove the original\r
 141                 tr_elm.parentNode.removeChild(tr_elm);\r
 142 \r
 143                 // set tr_elm to the new node\r
 144                 tr_elm = newRow;\r
 145         }\r
 146 }\r
 147 \r
 148 function changedBackgroundImage() {\r
 149         var formObj = document.forms[0];\r
 150         var st = tinyMCE.parseStyle(formObj.style.value);\r
 151 \r
 152         st['background-image'] = "url('" + formObj.backgroundimage.value + "')";\r
 153 \r
 154         formObj.style.value = tinyMCE.serializeStyle(st);\r
 155 }\r
 156 \r
 157 function changedStyle() {\r
 158         var formObj = document.forms[0];\r
 159         var st = tinyMCE.parseStyle(formObj.style.value);\r
 160 \r
 161         if (st['background-image'])\r
 162                 formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");\r
 163         else\r
 164                 formObj.backgroundimage.value = '';\r
 165 \r
 166         if (st['height'])\r
 167                 formObj.height.value = trimSize(st['height']);\r
 168 \r
 169         if (st['background-color']) {\r
 170                 formObj.bgcolor.value = st['background-color'];\r
 171                 updateColor('bgcolor_pick','bgcolor');\r
 172         }\r
 173 }\r
 174 \r
 175 function changedSize() {\r
 176         var formObj = document.forms[0];\r
 177         var st = tinyMCE.parseStyle(formObj.style.value);\r
 178 \r
 179         var height = formObj.height.value;\r
 180         if (height != "")\r
 181                 st['height'] = getCSSSize(height);\r
 182         else\r
 183                 st['height'] = "";\r
 184 \r
 185         formObj.style.value = tinyMCE.serializeStyle(st);\r
 186 }\r
 187 \r
 188 function changedColor() {\r
 189         var formObj = document.forms[0];\r
 190         var st = tinyMCE.parseStyle(formObj.style.value);\r
 191 \r
 192         st['background-color'] = formObj.bgcolor.value;\r
 193 \r
 194         formObj.style.value = tinyMCE.serializeStyle(st);\r
 195 }\r