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

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