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