[1] | 1 | tinyMCEPopup.requireLangPack(); |
---|
| 2 | |
---|
| 3 | var action, orgTableWidth, orgTableHeight, dom = tinyMCEPopup.editor.dom; |
---|
| 4 | |
---|
| 5 | function insertTable() { |
---|
| 6 | var formObj = document.forms[0]; |
---|
| 7 | var inst = tinyMCEPopup.editor, dom = inst.dom; |
---|
| 8 | var cols = 2, rows = 2, border = 0, cellpadding = -1, cellspacing = -1, align, width, height, className, caption, frame, rules; |
---|
| 9 | var html = '', capEl, elm; |
---|
| 10 | var cellLimit, rowLimit, colLimit; |
---|
| 11 | |
---|
| 12 | if (!AutoValidator.validate(formObj)) { |
---|
| 13 | alert(inst.getLang('invalid_data')); |
---|
| 14 | return false; |
---|
| 15 | } |
---|
| 16 | |
---|
| 17 | elm = dom.getParent(inst.selection.getNode(), 'table'); |
---|
| 18 | |
---|
| 19 | // Get form data |
---|
| 20 | cols = formObj.elements['cols'].value; |
---|
| 21 | rows = formObj.elements['rows'].value; |
---|
| 22 | border = formObj.elements['border'].value != "" ? formObj.elements['border'].value : 0; |
---|
| 23 | cellpadding = formObj.elements['cellpadding'].value != "" ? formObj.elements['cellpadding'].value : ""; |
---|
| 24 | cellspacing = formObj.elements['cellspacing'].value != "" ? formObj.elements['cellspacing'].value : ""; |
---|
| 25 | align = formObj.elements['align'].options[formObj.elements['align'].selectedIndex].value; |
---|
| 26 | frame = formObj.elements['frame'].options[formObj.elements['frame'].selectedIndex].value; |
---|
| 27 | rules = formObj.elements['rules'].options[formObj.elements['rules'].selectedIndex].value; |
---|
| 28 | width = formObj.elements['width'].value; |
---|
| 29 | height = formObj.elements['height'].value; |
---|
| 30 | bordercolor = formObj.elements['bordercolor'].value; |
---|
| 31 | bgcolor = formObj.elements['bgcolor'].value; |
---|
| 32 | className = formObj.elements['class'].options[formObj.elements['class'].selectedIndex].value; |
---|
| 33 | id = formObj.elements['id'].value; |
---|
| 34 | summary = formObj.elements['summary'].value; |
---|
| 35 | style = formObj.elements['style'].value; |
---|
| 36 | dir = formObj.elements['dir'].value; |
---|
| 37 | lang = formObj.elements['lang'].value; |
---|
| 38 | background = formObj.elements['backgroundimage'].value; |
---|
| 39 | caption = formObj.elements['caption'].checked; |
---|
| 40 | |
---|
| 41 | cellLimit = tinyMCEPopup.getParam('table_cell_limit', false); |
---|
| 42 | rowLimit = tinyMCEPopup.getParam('table_row_limit', false); |
---|
| 43 | colLimit = tinyMCEPopup.getParam('table_col_limit', false); |
---|
| 44 | |
---|
| 45 | // Validate table size |
---|
| 46 | if (colLimit && cols > colLimit) { |
---|
| 47 | alert(inst.getLang('table_col_limit', '', true, {cols : colLimit})); |
---|
| 48 | return false; |
---|
| 49 | } else if (rowLimit && rows > rowLimit) { |
---|
| 50 | alert(inst.getLang('table_row_limit', '', true, {rows : rowLimit})); |
---|
| 51 | return false; |
---|
| 52 | } else if (cellLimit && cols * rows > cellLimit) { |
---|
| 53 | alert(inst.getLang('table_cell_limit', '', true, {cells : cellLimit})); |
---|
| 54 | return false; |
---|
| 55 | } |
---|
| 56 | |
---|
| 57 | // Update table |
---|
| 58 | if (action == "update") { |
---|
| 59 | inst.execCommand('mceBeginUndoLevel'); |
---|
| 60 | |
---|
| 61 | dom.setAttrib(elm, 'cellPadding', cellpadding, true); |
---|
| 62 | dom.setAttrib(elm, 'cellSpacing', cellspacing, true); |
---|
| 63 | dom.setAttrib(elm, 'border', border); |
---|
| 64 | dom.setAttrib(elm, 'align', align); |
---|
| 65 | dom.setAttrib(elm, 'frame', frame); |
---|
| 66 | dom.setAttrib(elm, 'rules', rules); |
---|
| 67 | dom.setAttrib(elm, 'class', className); |
---|
| 68 | dom.setAttrib(elm, 'style', style); |
---|
| 69 | dom.setAttrib(elm, 'id', id); |
---|
| 70 | dom.setAttrib(elm, 'summary', summary); |
---|
| 71 | dom.setAttrib(elm, 'dir', dir); |
---|
| 72 | dom.setAttrib(elm, 'lang', lang); |
---|
| 73 | |
---|
| 74 | capEl = inst.dom.select('caption', elm)[0]; |
---|
| 75 | |
---|
| 76 | if (capEl && !caption) |
---|
| 77 | capEl.parentNode.removeChild(capEl); |
---|
| 78 | |
---|
| 79 | if (!capEl && caption) { |
---|
| 80 | capEl = elm.ownerDocument.createElement('caption'); |
---|
| 81 | |
---|
| 82 | if (!tinymce.isIE) |
---|
| 83 | capEl.innerHTML = '<br mce_bogus="1"/>'; |
---|
| 84 | |
---|
| 85 | elm.insertBefore(capEl, elm.firstChild); |
---|
| 86 | } |
---|
| 87 | |
---|
| 88 | dom.setAttrib(elm, 'width', width, true); |
---|
| 89 | |
---|
| 90 | // Remove these since they are not valid XHTML |
---|
| 91 | dom.setAttrib(elm, 'borderColor', ''); |
---|
| 92 | dom.setAttrib(elm, 'bgColor', ''); |
---|
| 93 | dom.setAttrib(elm, 'background', ''); |
---|
| 94 | dom.setAttrib(elm, 'height', ''); |
---|
| 95 | |
---|
| 96 | if (background != '') |
---|
| 97 | elm.style.backgroundImage = "url('" + background + "')"; |
---|
| 98 | else |
---|
| 99 | elm.style.backgroundImage = ''; |
---|
| 100 | |
---|
| 101 | /* if (tinyMCEPopup.getParam("inline_styles")) { |
---|
| 102 | if (width != '') |
---|
| 103 | elm.style.width = getCSSSize(width); |
---|
| 104 | }*/ |
---|
| 105 | |
---|
| 106 | if (bordercolor != "") { |
---|
| 107 | elm.style.borderColor = bordercolor; |
---|
| 108 | elm.style.borderStyle = elm.style.borderStyle == "" ? "solid" : elm.style.borderStyle; |
---|
| 109 | elm.style.borderWidth = border == "" ? "1px" : border; |
---|
| 110 | } else |
---|
| 111 | elm.style.borderColor = ''; |
---|
| 112 | |
---|
| 113 | elm.style.backgroundColor = bgcolor; |
---|
| 114 | elm.style.height = getCSSSize(height); |
---|
| 115 | |
---|
| 116 | inst.addVisual(); |
---|
| 117 | |
---|
| 118 | // Fix for stange MSIE align bug |
---|
| 119 | //elm.outerHTML = elm.outerHTML; |
---|
| 120 | |
---|
| 121 | inst.nodeChanged(); |
---|
| 122 | inst.execCommand('mceEndUndoLevel'); |
---|
| 123 | |
---|
| 124 | // Repaint if dimensions changed |
---|
| 125 | if (formObj.width.value != orgTableWidth || formObj.height.value != orgTableHeight) |
---|
| 126 | inst.execCommand('mceRepaint'); |
---|
| 127 | |
---|
| 128 | tinyMCEPopup.close(); |
---|
| 129 | return true; |
---|
| 130 | } |
---|
| 131 | |
---|
| 132 | // Create new table |
---|
| 133 | html += '<table'; |
---|
| 134 | |
---|
| 135 | html += makeAttrib('id', id); |
---|
| 136 | html += makeAttrib('border', border); |
---|
| 137 | html += makeAttrib('cellpadding', cellpadding); |
---|
| 138 | html += makeAttrib('cellspacing', cellspacing); |
---|
| 139 | html += makeAttrib('width', width); |
---|
| 140 | //html += makeAttrib('height', height); |
---|
| 141 | //html += makeAttrib('bordercolor', bordercolor); |
---|
| 142 | //html += makeAttrib('bgcolor', bgcolor); |
---|
| 143 | html += makeAttrib('align', align); |
---|
| 144 | html += makeAttrib('frame', frame); |
---|
| 145 | html += makeAttrib('rules', rules); |
---|
| 146 | html += makeAttrib('class', className); |
---|
| 147 | html += makeAttrib('style', style); |
---|
| 148 | html += makeAttrib('summary', summary); |
---|
| 149 | html += makeAttrib('dir', dir); |
---|
| 150 | html += makeAttrib('lang', lang); |
---|
| 151 | html += '>'; |
---|
| 152 | |
---|
| 153 | if (caption) { |
---|
| 154 | if (!tinymce.isIE) |
---|
| 155 | html += '<caption><br mce_bogus="1"/></caption>'; |
---|
| 156 | else |
---|
| 157 | html += '<caption></caption>'; |
---|
| 158 | } |
---|
| 159 | |
---|
| 160 | for (var y=0; y<rows; y++) { |
---|
| 161 | html += "<tr>"; |
---|
| 162 | |
---|
| 163 | for (var x=0; x<cols; x++) { |
---|
| 164 | if (!tinymce.isIE) |
---|
| 165 | html += '<td><br mce_bogus="1"/></td>'; |
---|
| 166 | else |
---|
| 167 | html += '<td></td>'; |
---|
| 168 | } |
---|
| 169 | |
---|
| 170 | html += "</tr>"; |
---|
| 171 | } |
---|
| 172 | |
---|
| 173 | html += "</table>"; |
---|
| 174 | |
---|
| 175 | inst.execCommand('mceBeginUndoLevel'); |
---|
| 176 | inst.execCommand('mceInsertContent', false, html); |
---|
| 177 | inst.addVisual(); |
---|
| 178 | inst.execCommand('mceEndUndoLevel'); |
---|
| 179 | |
---|
| 180 | tinyMCEPopup.close(); |
---|
| 181 | } |
---|
| 182 | |
---|
| 183 | function makeAttrib(attrib, value) { |
---|
| 184 | var formObj = document.forms[0]; |
---|
| 185 | var valueElm = formObj.elements[attrib]; |
---|
| 186 | |
---|
| 187 | if (typeof(value) == "undefined" || value == null) { |
---|
| 188 | value = ""; |
---|
| 189 | |
---|
| 190 | if (valueElm) |
---|
| 191 | value = valueElm.value; |
---|
| 192 | } |
---|
| 193 | |
---|
| 194 | if (value == "") |
---|
| 195 | return ""; |
---|
| 196 | |
---|
| 197 | // XML encode it |
---|
| 198 | value = value.replace(/&/g, '&'); |
---|
| 199 | value = value.replace(/\"/g, '"'); |
---|
| 200 | value = value.replace(/</g, '<'); |
---|
| 201 | value = value.replace(/>/g, '>'); |
---|
| 202 | |
---|
| 203 | return ' ' + attrib + '="' + value + '"'; |
---|
| 204 | } |
---|
| 205 | |
---|
| 206 | function init() { |
---|
| 207 | tinyMCEPopup.resizeToInnerSize(); |
---|
| 208 | |
---|
| 209 | document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table'); |
---|
| 210 | document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table'); |
---|
| 211 | document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor'); |
---|
| 212 | document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor'); |
---|
| 213 | |
---|
| 214 | var cols = 2, rows = 2, border = tinyMCEPopup.getParam('table_default_border', '0'), cellpadding = tinyMCEPopup.getParam('table_default_cellpadding', ''), cellspacing = tinyMCEPopup.getParam('table_default_cellspacing', ''); |
---|
| 215 | var align = "", width = "", height = "", bordercolor = "", bgcolor = "", className = ""; |
---|
| 216 | var id = "", summary = "", style = "", dir = "", lang = "", background = "", bgcolor = "", bordercolor = "", rules, frame; |
---|
| 217 | var inst = tinyMCEPopup.editor, dom = inst.dom; |
---|
| 218 | var formObj = document.forms[0]; |
---|
| 219 | var elm = dom.getParent(inst.selection.getNode(), "table"); |
---|
| 220 | |
---|
| 221 | action = tinyMCEPopup.getWindowArg('action'); |
---|
| 222 | |
---|
| 223 | if (!action) |
---|
| 224 | action = elm ? "update" : "insert"; |
---|
| 225 | |
---|
| 226 | if (elm && action != "insert") { |
---|
| 227 | var rowsAr = elm.rows; |
---|
| 228 | var cols = 0; |
---|
| 229 | for (var i=0; i<rowsAr.length; i++) |
---|
| 230 | if (rowsAr[i].cells.length > cols) |
---|
| 231 | cols = rowsAr[i].cells.length; |
---|
| 232 | |
---|
| 233 | cols = cols; |
---|
| 234 | rows = rowsAr.length; |
---|
| 235 | |
---|
| 236 | st = dom.parseStyle(dom.getAttrib(elm, "style")); |
---|
| 237 | border = trimSize(getStyle(elm, 'border', 'borderWidth')); |
---|
| 238 | cellpadding = dom.getAttrib(elm, 'cellpadding', ""); |
---|
| 239 | cellspacing = dom.getAttrib(elm, 'cellspacing', ""); |
---|
| 240 | width = trimSize(getStyle(elm, 'width', 'width')); |
---|
| 241 | height = trimSize(getStyle(elm, 'height', 'height')); |
---|
| 242 | bordercolor = convertRGBToHex(getStyle(elm, 'bordercolor', 'borderLeftColor')); |
---|
| 243 | bgcolor = convertRGBToHex(getStyle(elm, 'bgcolor', 'backgroundColor')); |
---|
| 244 | align = dom.getAttrib(elm, 'align', align); |
---|
| 245 | frame = dom.getAttrib(elm, 'frame'); |
---|
| 246 | rules = dom.getAttrib(elm, 'rules'); |
---|
| 247 | className = tinymce.trim(dom.getAttrib(elm, 'class').replace(/mceItem.+/g, '')); |
---|
| 248 | id = dom.getAttrib(elm, 'id'); |
---|
| 249 | summary = dom.getAttrib(elm, 'summary'); |
---|
| 250 | style = dom.serializeStyle(st); |
---|
| 251 | dir = dom.getAttrib(elm, 'dir'); |
---|
| 252 | lang = dom.getAttrib(elm, 'lang'); |
---|
| 253 | background = getStyle(elm, 'background', 'backgroundImage').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1"); |
---|
| 254 | formObj.caption.checked = elm.getElementsByTagName('caption').length > 0; |
---|
| 255 | |
---|
| 256 | orgTableWidth = width; |
---|
| 257 | orgTableHeight = height; |
---|
| 258 | |
---|
| 259 | action = "update"; |
---|
| 260 | formObj.insert.value = inst.getLang('update'); |
---|
| 261 | } |
---|
| 262 | |
---|
| 263 | addClassesToList('class', "table_styles"); |
---|
| 264 | |
---|
| 265 | // Update form |
---|
| 266 | selectByValue(formObj, 'align', align); |
---|
| 267 | selectByValue(formObj, 'frame', frame); |
---|
| 268 | selectByValue(formObj, 'rules', rules); |
---|
| 269 | selectByValue(formObj, 'class', className); |
---|
| 270 | formObj.cols.value = cols; |
---|
| 271 | formObj.rows.value = rows; |
---|
| 272 | formObj.border.value = border; |
---|
| 273 | formObj.cellpadding.value = cellpadding; |
---|
| 274 | formObj.cellspacing.value = cellspacing; |
---|
| 275 | formObj.width.value = width; |
---|
| 276 | formObj.height.value = height; |
---|
| 277 | formObj.bordercolor.value = bordercolor; |
---|
| 278 | formObj.bgcolor.value = bgcolor; |
---|
| 279 | formObj.id.value = id; |
---|
| 280 | formObj.summary.value = summary; |
---|
| 281 | formObj.style.value = style; |
---|
| 282 | formObj.dir.value = dir; |
---|
| 283 | formObj.lang.value = lang; |
---|
| 284 | formObj.backgroundimage.value = background; |
---|
| 285 | |
---|
| 286 | updateColor('bordercolor_pick', 'bordercolor'); |
---|
| 287 | updateColor('bgcolor_pick', 'bgcolor'); |
---|
| 288 | |
---|
| 289 | // Resize some elements |
---|
| 290 | if (isVisible('backgroundimagebrowser')) |
---|
| 291 | document.getElementById('backgroundimage').style.width = '180px'; |
---|
| 292 | |
---|
| 293 | // Disable some fields in update mode |
---|
| 294 | if (action == "update") { |
---|
| 295 | formObj.cols.disabled = true; |
---|
| 296 | formObj.rows.disabled = true; |
---|
| 297 | } |
---|
| 298 | } |
---|
| 299 | |
---|
| 300 | function changedSize() { |
---|
| 301 | var formObj = document.forms[0]; |
---|
| 302 | var st = dom.parseStyle(formObj.style.value); |
---|
| 303 | |
---|
| 304 | /* var width = formObj.width.value; |
---|
| 305 | if (width != "") |
---|
| 306 | st['width'] = tinyMCEPopup.getParam("inline_styles") ? getCSSSize(width) : ""; |
---|
| 307 | else |
---|
| 308 | st['width'] = "";*/ |
---|
| 309 | |
---|
| 310 | var height = formObj.height.value; |
---|
| 311 | if (height != "") |
---|
| 312 | st['height'] = getCSSSize(height); |
---|
| 313 | else |
---|
| 314 | st['height'] = ""; |
---|
| 315 | |
---|
| 316 | formObj.style.value = dom.serializeStyle(st); |
---|
| 317 | } |
---|
| 318 | |
---|
| 319 | function changedBackgroundImage() { |
---|
| 320 | var formObj = document.forms[0]; |
---|
| 321 | var st = dom.parseStyle(formObj.style.value); |
---|
| 322 | |
---|
| 323 | st['background-image'] = "url('" + formObj.backgroundimage.value + "')"; |
---|
| 324 | |
---|
| 325 | formObj.style.value = dom.serializeStyle(st); |
---|
| 326 | } |
---|
| 327 | |
---|
| 328 | function changedBorder() { |
---|
| 329 | var formObj = document.forms[0]; |
---|
| 330 | var st = dom.parseStyle(formObj.style.value); |
---|
| 331 | |
---|
| 332 | // Update border width if the element has a color |
---|
| 333 | if (formObj.border.value != "" && formObj.bordercolor.value != "") |
---|
| 334 | st['border-width'] = formObj.border.value + "px"; |
---|
| 335 | |
---|
| 336 | formObj.style.value = dom.serializeStyle(st); |
---|
| 337 | } |
---|
| 338 | |
---|
| 339 | function changedColor() { |
---|
| 340 | var formObj = document.forms[0]; |
---|
| 341 | var st = dom.parseStyle(formObj.style.value); |
---|
| 342 | |
---|
| 343 | st['background-color'] = formObj.bgcolor.value; |
---|
| 344 | |
---|
| 345 | if (formObj.bordercolor.value != "") { |
---|
| 346 | st['border-color'] = formObj.bordercolor.value; |
---|
| 347 | |
---|
| 348 | // Add border-width if it's missing |
---|
| 349 | if (!st['border-width']) |
---|
| 350 | st['border-width'] = formObj.border.value == "" ? "1px" : formObj.border.value + "px"; |
---|
| 351 | } |
---|
| 352 | |
---|
| 353 | formObj.style.value = dom.serializeStyle(st); |
---|
| 354 | } |
---|
| 355 | |
---|
| 356 | function changedStyle() { |
---|
| 357 | var formObj = document.forms[0]; |
---|
| 358 | var st = dom.parseStyle(formObj.style.value); |
---|
| 359 | |
---|
| 360 | if (st['background-image']) |
---|
| 361 | formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1"); |
---|
| 362 | else |
---|
| 363 | formObj.backgroundimage.value = ''; |
---|
| 364 | |
---|
| 365 | if (st['width']) |
---|
| 366 | formObj.width.value = trimSize(st['width']); |
---|
| 367 | |
---|
| 368 | if (st['height']) |
---|
| 369 | formObj.height.value = trimSize(st['height']); |
---|
| 370 | |
---|
| 371 | if (st['background-color']) { |
---|
| 372 | formObj.bgcolor.value = st['background-color']; |
---|
| 373 | updateColor('bgcolor_pick','bgcolor'); |
---|
| 374 | } |
---|
| 375 | |
---|
| 376 | if (st['border-color']) { |
---|
| 377 | formObj.bordercolor.value = st['border-color']; |
---|
| 378 | updateColor('bordercolor_pick','bordercolor'); |
---|
| 379 | } |
---|
| 380 | } |
---|
| 381 | |
---|
| 382 | tinyMCEPopup.onInit.add(init); |
---|