bgneal@45: tinyMCEPopup.requireLangPack(); bgneal@45: bgneal@45: var action, orgTableWidth, orgTableHeight, dom = tinyMCEPopup.editor.dom; bgneal@45: bgneal@45: function insertTable() { bgneal@45: var formObj = document.forms[0]; bgneal@45: var inst = tinyMCEPopup.editor, dom = inst.dom; bgneal@45: var cols = 2, rows = 2, border = 0, cellpadding = -1, cellspacing = -1, align, width, height, className, caption, frame, rules; bgneal@45: var html = '', capEl, elm; bgneal@45: var cellLimit, rowLimit, colLimit; bgneal@45: bgneal@45: tinyMCEPopup.restoreSelection(); bgneal@45: bgneal@45: if (!AutoValidator.validate(formObj)) { bgneal@45: tinyMCEPopup.alert(AutoValidator.getErrorMessages(formObj).join('. ') + '.'); bgneal@45: return false; bgneal@45: } bgneal@45: bgneal@45: elm = dom.getParent(inst.selection.getNode(), 'table'); bgneal@45: bgneal@45: // Get form data bgneal@45: cols = formObj.elements['cols'].value; bgneal@45: rows = formObj.elements['rows'].value; bgneal@45: border = formObj.elements['border'].value != "" ? formObj.elements['border'].value : 0; bgneal@45: cellpadding = formObj.elements['cellpadding'].value != "" ? formObj.elements['cellpadding'].value : ""; bgneal@45: cellspacing = formObj.elements['cellspacing'].value != "" ? formObj.elements['cellspacing'].value : ""; bgneal@45: align = getSelectValue(formObj, "align"); bgneal@45: frame = getSelectValue(formObj, "tframe"); bgneal@45: rules = getSelectValue(formObj, "rules"); bgneal@45: width = formObj.elements['width'].value; bgneal@45: height = formObj.elements['height'].value; bgneal@45: bordercolor = formObj.elements['bordercolor'].value; bgneal@45: bgcolor = formObj.elements['bgcolor'].value; bgneal@45: className = getSelectValue(formObj, "class"); bgneal@45: id = formObj.elements['id'].value; bgneal@45: summary = formObj.elements['summary'].value; bgneal@45: style = formObj.elements['style'].value; bgneal@45: dir = formObj.elements['dir'].value; bgneal@45: lang = formObj.elements['lang'].value; bgneal@45: background = formObj.elements['backgroundimage'].value; bgneal@45: caption = formObj.elements['caption'].checked; bgneal@45: bgneal@45: cellLimit = tinyMCEPopup.getParam('table_cell_limit', false); bgneal@45: rowLimit = tinyMCEPopup.getParam('table_row_limit', false); bgneal@45: colLimit = tinyMCEPopup.getParam('table_col_limit', false); bgneal@45: bgneal@45: // Validate table size bgneal@45: if (colLimit && cols > colLimit) { bgneal@45: tinyMCEPopup.alert(inst.getLang('table_dlg.col_limit').replace(/\{\$cols\}/g, colLimit)); bgneal@45: return false; bgneal@45: } else if (rowLimit && rows > rowLimit) { bgneal@45: tinyMCEPopup.alert(inst.getLang('table_dlg.row_limit').replace(/\{\$rows\}/g, rowLimit)); bgneal@45: return false; bgneal@45: } else if (cellLimit && cols * rows > cellLimit) { bgneal@45: tinyMCEPopup.alert(inst.getLang('table_dlg.cell_limit').replace(/\{\$cells\}/g, cellLimit)); bgneal@45: return false; bgneal@45: } bgneal@45: bgneal@45: // Update table bgneal@45: if (action == "update") { bgneal@45: dom.setAttrib(elm, 'cellPadding', cellpadding, true); bgneal@45: dom.setAttrib(elm, 'cellSpacing', cellspacing, true); bgneal@45: bgneal@45: if (!isCssSize(border)) { bgneal@45: dom.setAttrib(elm, 'border', border); bgneal@45: } else { bgneal@45: dom.setAttrib(elm, 'border', ''); bgneal@45: } bgneal@45: bgneal@45: if (border == '') { bgneal@45: dom.setStyle(elm, 'border-width', ''); bgneal@45: dom.setStyle(elm, 'border', ''); bgneal@45: dom.setAttrib(elm, 'border', ''); bgneal@45: } bgneal@45: bgneal@45: dom.setAttrib(elm, 'align', align); bgneal@45: dom.setAttrib(elm, 'frame', frame); bgneal@45: dom.setAttrib(elm, 'rules', rules); bgneal@45: dom.setAttrib(elm, 'class', className); bgneal@45: dom.setAttrib(elm, 'style', style); bgneal@45: dom.setAttrib(elm, 'id', id); bgneal@45: dom.setAttrib(elm, 'summary', summary); bgneal@45: dom.setAttrib(elm, 'dir', dir); bgneal@45: dom.setAttrib(elm, 'lang', lang); bgneal@45: bgneal@45: capEl = inst.dom.select('caption', elm)[0]; bgneal@45: bgneal@45: if (capEl && !caption) bgneal@45: capEl.parentNode.removeChild(capEl); bgneal@45: bgneal@45: if (!capEl && caption) { bgneal@45: capEl = elm.ownerDocument.createElement('caption'); bgneal@45: bgneal@45: if (!tinymce.isIE) bgneal@45: capEl.innerHTML = '
'; bgneal@45: bgneal@45: elm.insertBefore(capEl, elm.firstChild); bgneal@45: } bgneal@45: bgneal@45: if (width && inst.settings.inline_styles) { bgneal@45: dom.setStyle(elm, 'width', width); bgneal@45: dom.setAttrib(elm, 'width', ''); bgneal@45: } else { bgneal@45: dom.setAttrib(elm, 'width', width, true); bgneal@45: dom.setStyle(elm, 'width', ''); bgneal@45: } bgneal@45: bgneal@45: // Remove these since they are not valid XHTML bgneal@45: dom.setAttrib(elm, 'borderColor', ''); bgneal@45: dom.setAttrib(elm, 'bgColor', ''); bgneal@45: dom.setAttrib(elm, 'background', ''); bgneal@45: bgneal@45: if (height && inst.settings.inline_styles) { bgneal@45: dom.setStyle(elm, 'height', height); bgneal@45: dom.setAttrib(elm, 'height', ''); bgneal@45: } else { bgneal@45: dom.setAttrib(elm, 'height', height, true); bgneal@45: dom.setStyle(elm, 'height', ''); bgneal@45: } bgneal@45: bgneal@45: if (background != '') bgneal@45: elm.style.backgroundImage = "url('" + background + "')"; bgneal@45: else bgneal@45: elm.style.backgroundImage = ''; bgneal@45: bgneal@45: /* if (tinyMCEPopup.getParam("inline_styles")) { bgneal@45: if (width != '') bgneal@45: elm.style.width = getCSSSize(width); bgneal@45: }*/ bgneal@45: bgneal@45: if (bordercolor != "") { bgneal@45: elm.style.borderColor = bordercolor; bgneal@45: elm.style.borderStyle = elm.style.borderStyle == "" ? "solid" : elm.style.borderStyle; bgneal@45: elm.style.borderWidth = cssSize(border); bgneal@45: } else bgneal@45: elm.style.borderColor = ''; bgneal@45: bgneal@45: elm.style.backgroundColor = bgcolor; bgneal@45: elm.style.height = getCSSSize(height); bgneal@45: bgneal@45: inst.addVisual(); bgneal@45: bgneal@45: // Fix for stange MSIE align bug bgneal@45: //elm.outerHTML = elm.outerHTML; bgneal@45: bgneal@45: inst.nodeChanged(); bgneal@45: inst.execCommand('mceEndUndoLevel', false, {}, {skip_undo: true}); bgneal@45: bgneal@45: // Repaint if dimensions changed bgneal@45: if (formObj.width.value != orgTableWidth || formObj.height.value != orgTableHeight) bgneal@45: inst.execCommand('mceRepaint'); bgneal@45: bgneal@45: tinyMCEPopup.close(); bgneal@45: return true; bgneal@45: } bgneal@45: bgneal@45: // Create new table bgneal@45: html += ''); bgneal@45: bgneal@45: tinymce.each('h1,h2,h3,h4,h5,h6,p'.split(','), function(n) { bgneal@45: if (patt) bgneal@45: patt += ','; bgneal@45: bgneal@45: patt += n + ' ._mce_marker'; bgneal@45: }); bgneal@45: bgneal@45: tinymce.each(inst.dom.select(patt), function(n) { bgneal@45: inst.dom.split(inst.dom.getParent(n, 'h1,h2,h3,h4,h5,h6,p'), n); bgneal@45: }); bgneal@45: bgneal@45: dom.setOuterHTML(dom.select('br._mce_marker')[0], html); bgneal@45: } else bgneal@45: inst.execCommand('mceInsertContent', false, html); bgneal@45: bgneal@45: tinymce.each(dom.select('table[data-mce-new]'), function(node) { bgneal@45: var tdorth = dom.select('td,th', node); bgneal@45: bgneal@45: // Fixes a bug in IE where the caret cannot be placed after the table if the table is at the end of the document bgneal@45: if (tinymce.isIE && node.nextSibling == null) { bgneal@45: dom.insertAfter(dom.create('p'), node); bgneal@45: } bgneal@45: bgneal@45: try { bgneal@45: // IE9 might fail to do this selection bgneal@45: inst.selection.setCursorLocation(tdorth[0], 0); bgneal@45: } catch (ex) { bgneal@45: // Ignore bgneal@45: } bgneal@45: bgneal@45: dom.setAttrib(node, 'data-mce-new', ''); bgneal@45: }); bgneal@45: bgneal@45: inst.addVisual(); bgneal@45: inst.execCommand('mceEndUndoLevel', false, {}, {skip_undo: true}); bgneal@45: bgneal@45: tinyMCEPopup.close(); bgneal@45: } bgneal@45: bgneal@45: function makeAttrib(attrib, value) { bgneal@45: var formObj = document.forms[0]; bgneal@45: var valueElm = formObj.elements[attrib]; bgneal@45: bgneal@45: if (typeof(value) == "undefined" || value == null) { bgneal@45: value = ""; bgneal@45: bgneal@45: if (valueElm) bgneal@45: value = valueElm.value; bgneal@45: } bgneal@45: bgneal@45: if (value == "") bgneal@45: return ""; bgneal@45: bgneal@45: // XML encode it bgneal@45: value = value.replace(/&/g, '&'); bgneal@45: value = value.replace(/\"/g, '"'); bgneal@45: value = value.replace(//g, '>'); bgneal@45: bgneal@45: return ' ' + attrib + '="' + value + '"'; bgneal@45: } bgneal@45: bgneal@45: function init() { bgneal@45: tinyMCEPopup.resizeToInnerSize(); bgneal@45: bgneal@45: document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table'); bgneal@45: document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table'); bgneal@45: document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor'); bgneal@45: document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor'); bgneal@45: bgneal@45: var cols = 2, rows = 2, border = tinyMCEPopup.getParam('table_default_border', '0'), cellpadding = tinyMCEPopup.getParam('table_default_cellpadding', ''), cellspacing = tinyMCEPopup.getParam('table_default_cellspacing', ''); bgneal@45: var align = "", width = "", height = "", bordercolor = "", bgcolor = "", className = ""; bgneal@45: var id = "", summary = "", style = "", dir = "", lang = "", background = "", bgcolor = "", bordercolor = "", rules = "", frame = ""; bgneal@45: var inst = tinyMCEPopup.editor, dom = inst.dom; bgneal@45: var formObj = document.forms[0]; bgneal@45: var elm = dom.getParent(inst.selection.getNode(), "table"); bgneal@45: bgneal@45: action = tinyMCEPopup.getWindowArg('action'); bgneal@45: bgneal@45: if (!action) bgneal@45: action = elm ? "update" : "insert"; bgneal@45: bgneal@45: if (elm && action != "insert") { bgneal@45: var rowsAr = elm.rows; bgneal@45: var cols = 0; bgneal@45: for (var i=0; i cols) bgneal@45: cols = rowsAr[i].cells.length; bgneal@45: bgneal@45: cols = cols; bgneal@45: rows = rowsAr.length; bgneal@45: bgneal@45: st = dom.parseStyle(dom.getAttrib(elm, "style")); bgneal@45: border = trimSize(getStyle(elm, 'border', 'borderWidth')); bgneal@45: cellpadding = dom.getAttrib(elm, 'cellpadding', ""); bgneal@45: cellspacing = dom.getAttrib(elm, 'cellspacing', ""); bgneal@45: width = trimSize(getStyle(elm, 'width', 'width')); bgneal@45: height = trimSize(getStyle(elm, 'height', 'height')); bgneal@45: bordercolor = convertRGBToHex(getStyle(elm, 'bordercolor', 'borderLeftColor')); bgneal@45: bgcolor = convertRGBToHex(getStyle(elm, 'bgcolor', 'backgroundColor')); bgneal@45: align = dom.getAttrib(elm, 'align', align); bgneal@45: frame = dom.getAttrib(elm, 'frame'); bgneal@45: rules = dom.getAttrib(elm, 'rules'); bgneal@45: className = tinymce.trim(dom.getAttrib(elm, 'class').replace(/mceItem.+/g, '')); bgneal@45: id = dom.getAttrib(elm, 'id'); bgneal@45: summary = dom.getAttrib(elm, 'summary'); bgneal@45: style = dom.serializeStyle(st); bgneal@45: dir = dom.getAttrib(elm, 'dir'); bgneal@45: lang = dom.getAttrib(elm, 'lang'); bgneal@45: background = getStyle(elm, 'background', 'backgroundImage').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1"); bgneal@45: formObj.caption.checked = elm.getElementsByTagName('caption').length > 0; bgneal@45: bgneal@45: orgTableWidth = width; bgneal@45: orgTableHeight = height; bgneal@45: bgneal@45: action = "update"; bgneal@45: formObj.insert.value = inst.getLang('update'); bgneal@45: } bgneal@45: bgneal@45: addClassesToList('class', "table_styles"); bgneal@45: TinyMCE_EditableSelects.init(); bgneal@45: bgneal@45: // Update form bgneal@45: selectByValue(formObj, 'align', align); bgneal@45: selectByValue(formObj, 'tframe', frame); bgneal@45: selectByValue(formObj, 'rules', rules); bgneal@45: selectByValue(formObj, 'class', className, true, true); bgneal@45: formObj.cols.value = cols; bgneal@45: formObj.rows.value = rows; bgneal@45: formObj.border.value = border; bgneal@45: formObj.cellpadding.value = cellpadding; bgneal@45: formObj.cellspacing.value = cellspacing; bgneal@45: formObj.width.value = width; bgneal@45: formObj.height.value = height; bgneal@45: formObj.bordercolor.value = bordercolor; bgneal@45: formObj.bgcolor.value = bgcolor; bgneal@45: formObj.id.value = id; bgneal@45: formObj.summary.value = summary; bgneal@45: formObj.style.value = style; bgneal@45: formObj.dir.value = dir; bgneal@45: formObj.lang.value = lang; bgneal@45: formObj.backgroundimage.value = background; bgneal@45: bgneal@45: updateColor('bordercolor_pick', 'bordercolor'); bgneal@45: updateColor('bgcolor_pick', 'bgcolor'); bgneal@45: bgneal@45: // Resize some elements bgneal@45: if (isVisible('backgroundimagebrowser')) bgneal@45: document.getElementById('backgroundimage').style.width = '180px'; bgneal@45: bgneal@45: // Disable some fields in update mode bgneal@45: if (action == "update") { bgneal@45: formObj.cols.disabled = true; bgneal@45: formObj.rows.disabled = true; bgneal@45: } bgneal@45: } bgneal@45: bgneal@45: function changedSize() { bgneal@45: var formObj = document.forms[0]; bgneal@45: var st = dom.parseStyle(formObj.style.value); bgneal@45: bgneal@45: /* var width = formObj.width.value; bgneal@45: if (width != "") bgneal@45: st['width'] = tinyMCEPopup.getParam("inline_styles") ? getCSSSize(width) : ""; bgneal@45: else bgneal@45: st['width'] = "";*/ bgneal@45: bgneal@45: var height = formObj.height.value; bgneal@45: if (height != "") bgneal@45: st['height'] = getCSSSize(height); bgneal@45: else bgneal@45: st['height'] = ""; bgneal@45: bgneal@45: formObj.style.value = dom.serializeStyle(st); bgneal@45: } bgneal@45: bgneal@45: function isCssSize(value) { bgneal@45: return /^[0-9.]+(%|in|cm|mm|em|ex|pt|pc|px)$/.test(value); bgneal@45: } bgneal@45: bgneal@45: function cssSize(value, def) { bgneal@45: value = tinymce.trim(value || def); bgneal@45: bgneal@45: if (!isCssSize(value)) { bgneal@45: return parseInt(value, 10) + 'px'; bgneal@45: } bgneal@45: bgneal@45: return value; bgneal@45: } bgneal@45: bgneal@45: function changedBackgroundImage() { bgneal@45: var formObj = document.forms[0]; bgneal@45: var st = dom.parseStyle(formObj.style.value); bgneal@45: bgneal@45: st['background-image'] = "url('" + formObj.backgroundimage.value + "')"; bgneal@45: bgneal@45: formObj.style.value = dom.serializeStyle(st); bgneal@45: } bgneal@45: bgneal@45: function changedBorder() { bgneal@45: var formObj = document.forms[0]; bgneal@45: var st = dom.parseStyle(formObj.style.value); bgneal@45: bgneal@45: // Update border width if the element has a color bgneal@45: if (formObj.border.value != "" && (isCssSize(formObj.border.value) || formObj.bordercolor.value != "")) bgneal@45: st['border-width'] = cssSize(formObj.border.value); bgneal@45: else { bgneal@45: if (!formObj.border.value) { bgneal@45: st['border'] = ''; bgneal@45: st['border-width'] = ''; bgneal@45: } bgneal@45: } bgneal@45: bgneal@45: formObj.style.value = dom.serializeStyle(st); bgneal@45: } bgneal@45: bgneal@45: function changedColor() { bgneal@45: var formObj = document.forms[0]; bgneal@45: var st = dom.parseStyle(formObj.style.value); bgneal@45: bgneal@45: st['background-color'] = formObj.bgcolor.value; bgneal@45: bgneal@45: if (formObj.bordercolor.value != "") { bgneal@45: st['border-color'] = formObj.bordercolor.value; bgneal@45: bgneal@45: // Add border-width if it's missing bgneal@45: if (!st['border-width']) bgneal@45: st['border-width'] = cssSize(formObj.border.value, 1); bgneal@45: } bgneal@45: bgneal@45: formObj.style.value = dom.serializeStyle(st); bgneal@45: } bgneal@45: bgneal@45: function changedStyle() { bgneal@45: var formObj = document.forms[0]; bgneal@45: var st = dom.parseStyle(formObj.style.value); bgneal@45: bgneal@45: if (st['background-image']) bgneal@45: formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1"); bgneal@45: else bgneal@45: formObj.backgroundimage.value = ''; bgneal@45: bgneal@45: if (st['width']) bgneal@45: formObj.width.value = trimSize(st['width']); bgneal@45: bgneal@45: if (st['height']) bgneal@45: formObj.height.value = trimSize(st['height']); bgneal@45: bgneal@45: if (st['background-color']) { bgneal@45: formObj.bgcolor.value = st['background-color']; bgneal@45: updateColor('bgcolor_pick','bgcolor'); bgneal@45: } bgneal@45: bgneal@45: if (st['border-color']) { bgneal@45: formObj.bordercolor.value = st['border-color']; bgneal@45: updateColor('bordercolor_pick','bordercolor'); bgneal@45: } bgneal@45: } bgneal@45: bgneal@45: tinyMCEPopup.onInit.add(init);