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