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