[6] | 1 | tinyMCEPopup.requireLangPack(); |
---|
| 2 | |
---|
| 3 | function init() { |
---|
| 4 | tinyMCEPopup.resizeToInnerSize(); |
---|
| 5 | |
---|
| 6 | document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table'); |
---|
| 7 | document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor'); |
---|
| 8 | |
---|
| 9 | var inst = tinyMCEPopup.editor; |
---|
| 10 | var dom = inst.dom; |
---|
| 11 | var trElm = dom.getParent(inst.selection.getNode(), "tr"); |
---|
| 12 | var formObj = document.forms[0]; |
---|
| 13 | var st = dom.parseStyle(dom.getAttrib(trElm, "style")); |
---|
| 14 | |
---|
| 15 | // Get table row data |
---|
| 16 | var rowtype = trElm.parentNode.nodeName.toLowerCase(); |
---|
| 17 | var align = dom.getAttrib(trElm, 'align'); |
---|
| 18 | var valign = dom.getAttrib(trElm, 'valign'); |
---|
| 19 | var height = trimSize(getStyle(trElm, 'height', 'height')); |
---|
| 20 | var className = dom.getAttrib(trElm, 'class'); |
---|
| 21 | var bgcolor = convertRGBToHex(getStyle(trElm, 'bgcolor', 'backgroundColor')); |
---|
| 22 | var backgroundimage = getStyle(trElm, 'background', 'backgroundImage').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");; |
---|
| 23 | var id = dom.getAttrib(trElm, 'id'); |
---|
| 24 | var lang = dom.getAttrib(trElm, 'lang'); |
---|
| 25 | var dir = dom.getAttrib(trElm, 'dir'); |
---|
| 26 | |
---|
| 27 | // Setup form |
---|
| 28 | addClassesToList('class', 'table_row_styles'); |
---|
| 29 | formObj.bgcolor.value = bgcolor; |
---|
| 30 | formObj.backgroundimage.value = backgroundimage; |
---|
| 31 | formObj.height.value = height; |
---|
| 32 | formObj.id.value = id; |
---|
| 33 | formObj.lang.value = lang; |
---|
| 34 | formObj.style.value = dom.serializeStyle(st); |
---|
| 35 | selectByValue(formObj, 'align', align); |
---|
| 36 | selectByValue(formObj, 'valign', valign); |
---|
| 37 | selectByValue(formObj, 'class', className); |
---|
| 38 | selectByValue(formObj, 'rowtype', rowtype); |
---|
| 39 | selectByValue(formObj, 'dir', dir); |
---|
| 40 | |
---|
| 41 | // Resize some elements |
---|
| 42 | if (isVisible('backgroundimagebrowser')) |
---|
| 43 | document.getElementById('backgroundimage').style.width = '180px'; |
---|
| 44 | |
---|
| 45 | updateColor('bgcolor_pick', 'bgcolor'); |
---|
| 46 | } |
---|
| 47 | |
---|
| 48 | function updateAction() { |
---|
| 49 | var inst = tinyMCEPopup.editor; |
---|
| 50 | var dom = inst.dom; |
---|
| 51 | var trElm = dom.getParent(inst.selection.getNode(), "tr"); |
---|
| 52 | var tableElm = dom.getParent(inst.selection.getNode(), "table"); |
---|
| 53 | var formObj = document.forms[0]; |
---|
| 54 | var action = getSelectValue(formObj, 'action'); |
---|
| 55 | |
---|
| 56 | inst.execCommand('mceBeginUndoLevel'); |
---|
| 57 | |
---|
| 58 | switch (action) { |
---|
| 59 | case "row": |
---|
| 60 | updateRow(trElm); |
---|
| 61 | break; |
---|
| 62 | |
---|
| 63 | case "all": |
---|
| 64 | var rows = tableElm.getElementsByTagName("tr"); |
---|
| 65 | |
---|
| 66 | for (var i=0; i<rows.length; i++) |
---|
| 67 | updateRow(rows[i], true); |
---|
| 68 | |
---|
| 69 | break; |
---|
| 70 | |
---|
| 71 | case "odd": |
---|
| 72 | case "even": |
---|
| 73 | var rows = tableElm.getElementsByTagName("tr"); |
---|
| 74 | |
---|
| 75 | for (var i=0; i<rows.length; i++) { |
---|
| 76 | if ((i % 2 == 0 && action == "odd") || (i % 2 != 0 && action == "even")) |
---|
| 77 | updateRow(rows[i], true, true); |
---|
| 78 | } |
---|
| 79 | |
---|
| 80 | break; |
---|
| 81 | } |
---|
| 82 | |
---|
| 83 | inst.addVisual(); |
---|
| 84 | inst.nodeChanged(); |
---|
| 85 | inst.execCommand('mceEndUndoLevel'); |
---|
| 86 | tinyMCEPopup.close(); |
---|
| 87 | } |
---|
| 88 | |
---|
| 89 | function updateRow(tr_elm, skip_id, skip_parent) { |
---|
| 90 | var inst = tinyMCEPopup.editor; |
---|
| 91 | var formObj = document.forms[0]; |
---|
| 92 | var dom = inst.dom; |
---|
| 93 | var curRowType = tr_elm.parentNode.nodeName.toLowerCase(); |
---|
| 94 | var rowtype = getSelectValue(formObj, 'rowtype'); |
---|
| 95 | var doc = inst.getDoc(); |
---|
| 96 | |
---|
| 97 | // Update row element |
---|
| 98 | if (!skip_id) |
---|
| 99 | tr_elm.setAttribute('id', formObj.id.value); |
---|
| 100 | |
---|
| 101 | tr_elm.setAttribute('align', getSelectValue(formObj, 'align')); |
---|
| 102 | tr_elm.setAttribute('vAlign', getSelectValue(formObj, 'valign')); |
---|
| 103 | tr_elm.setAttribute('lang', formObj.lang.value); |
---|
| 104 | tr_elm.setAttribute('dir', getSelectValue(formObj, 'dir')); |
---|
| 105 | tr_elm.setAttribute('style', dom.serializeStyle(dom.parseStyle(formObj.style.value))); |
---|
| 106 | dom.setAttrib(tr_elm, 'class', getSelectValue(formObj, 'class')); |
---|
| 107 | |
---|
| 108 | // Clear deprecated attributes |
---|
| 109 | tr_elm.setAttribute('background', ''); |
---|
| 110 | tr_elm.setAttribute('bgColor', ''); |
---|
| 111 | tr_elm.setAttribute('height', ''); |
---|
| 112 | |
---|
| 113 | // Set styles |
---|
| 114 | tr_elm.style.height = getCSSSize(formObj.height.value); |
---|
| 115 | tr_elm.style.backgroundColor = formObj.bgcolor.value; |
---|
| 116 | |
---|
| 117 | if (formObj.backgroundimage.value != "") |
---|
| 118 | tr_elm.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')"; |
---|
| 119 | else |
---|
| 120 | tr_elm.style.backgroundImage = ''; |
---|
| 121 | |
---|
| 122 | // Setup new rowtype |
---|
| 123 | if (curRowType != rowtype && !skip_parent) { |
---|
| 124 | // first, clone the node we are working on |
---|
| 125 | var newRow = tr_elm.cloneNode(1); |
---|
| 126 | |
---|
| 127 | // next, find the parent of its new destination (creating it if necessary) |
---|
| 128 | var theTable = dom.getParent(tr_elm, "table"); |
---|
| 129 | var dest = rowtype; |
---|
| 130 | var newParent = null; |
---|
| 131 | for (var i = 0; i < theTable.childNodes.length; i++) { |
---|
| 132 | if (theTable.childNodes[i].nodeName.toLowerCase() == dest) |
---|
| 133 | newParent = theTable.childNodes[i]; |
---|
| 134 | } |
---|
| 135 | |
---|
| 136 | if (newParent == null) { |
---|
| 137 | newParent = doc.createElement(dest); |
---|
| 138 | |
---|
| 139 | if (dest == "thead") |
---|
| 140 | theTable.insertBefore(newParent, theTable.firstChild); |
---|
| 141 | else |
---|
| 142 | theTable.appendChild(newParent); |
---|
| 143 | } |
---|
| 144 | |
---|
| 145 | // append the row to the new parent |
---|
| 146 | newParent.appendChild(newRow); |
---|
| 147 | |
---|
| 148 | // remove the original |
---|
| 149 | tr_elm.parentNode.removeChild(tr_elm); |
---|
| 150 | |
---|
| 151 | // set tr_elm to the new node |
---|
| 152 | tr_elm = newRow; |
---|
| 153 | } |
---|
| 154 | |
---|
| 155 | dom.setAttrib(tr_elm, 'style', dom.serializeStyle(dom.parseStyle(tr_elm.style.cssText))); |
---|
| 156 | } |
---|
| 157 | |
---|
| 158 | function changedBackgroundImage() { |
---|
| 159 | var formObj = document.forms[0], dom = tinyMCEPopup.editor.dom; |
---|
| 160 | var st = dom.parseStyle(formObj.style.value); |
---|
| 161 | |
---|
| 162 | st['background-image'] = "url('" + formObj.backgroundimage.value + "')"; |
---|
| 163 | |
---|
| 164 | formObj.style.value = dom.serializeStyle(st); |
---|
| 165 | } |
---|
| 166 | |
---|
| 167 | function changedStyle() { |
---|
| 168 | var formObj = document.forms[0], dom = tinyMCEPopup.editor.dom; |
---|
| 169 | var st = dom.parseStyle(formObj.style.value); |
---|
| 170 | |
---|
| 171 | if (st['background-image']) |
---|
| 172 | formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1"); |
---|
| 173 | else |
---|
| 174 | formObj.backgroundimage.value = ''; |
---|
| 175 | |
---|
| 176 | if (st['height']) |
---|
| 177 | formObj.height.value = trimSize(st['height']); |
---|
| 178 | |
---|
| 179 | if (st['background-color']) { |
---|
| 180 | formObj.bgcolor.value = st['background-color']; |
---|
| 181 | updateColor('bgcolor_pick','bgcolor'); |
---|
| 182 | } |
---|
| 183 | } |
---|
| 184 | |
---|
| 185 | function changedSize() { |
---|
| 186 | var formObj = document.forms[0], dom = tinyMCEPopup.editor.dom; |
---|
| 187 | var st = dom.parseStyle(formObj.style.value); |
---|
| 188 | |
---|
| 189 | var height = formObj.height.value; |
---|
| 190 | if (height != "") |
---|
| 191 | st['height'] = getCSSSize(height); |
---|
| 192 | else |
---|
| 193 | st['height'] = ""; |
---|
| 194 | |
---|
| 195 | formObj.style.value = dom.serializeStyle(st); |
---|
| 196 | } |
---|
| 197 | |
---|
| 198 | function changedColor() { |
---|
| 199 | var formObj = document.forms[0], dom = tinyMCEPopup.editor.dom; |
---|
| 200 | var st = dom.parseStyle(formObj.style.value); |
---|
| 201 | |
---|
| 202 | st['background-color'] = formObj.bgcolor.value; |
---|
| 203 | |
---|
| 204 | formObj.style.value = dom.serializeStyle(st); |
---|
| 205 | } |
---|
| 206 | |
---|
| 207 | tinyMCEPopup.onInit.add(init); |
---|