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