1 tinyMCEPopup.requireLangPack(); |
|
2 |
|
3 var ed; |
|
4 |
|
5 function init() { |
|
6 ed = tinyMCEPopup.editor; |
|
7 tinyMCEPopup.resizeToInnerSize(); |
|
8 |
|
9 document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table'); |
|
10 document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor'); |
|
11 document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor') |
|
12 |
|
13 var inst = ed; |
|
14 var tdElm = ed.dom.getParent(ed.selection.getNode(), "td,th"); |
|
15 var formObj = document.forms[0]; |
|
16 var st = ed.dom.parseStyle(ed.dom.getAttrib(tdElm, "style")); |
|
17 |
|
18 // Get table cell data |
|
19 var celltype = tdElm.nodeName.toLowerCase(); |
|
20 var align = ed.dom.getAttrib(tdElm, 'align'); |
|
21 var valign = ed.dom.getAttrib(tdElm, 'valign'); |
|
22 var width = trimSize(getStyle(tdElm, 'width', 'width')); |
|
23 var height = trimSize(getStyle(tdElm, 'height', 'height')); |
|
24 var bordercolor = convertRGBToHex(getStyle(tdElm, 'bordercolor', 'borderLeftColor')); |
|
25 var bgcolor = convertRGBToHex(getStyle(tdElm, 'bgcolor', 'backgroundColor')); |
|
26 var className = ed.dom.getAttrib(tdElm, 'class'); |
|
27 var backgroundimage = getStyle(tdElm, 'background', 'backgroundImage').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");; |
|
28 var id = ed.dom.getAttrib(tdElm, 'id'); |
|
29 var lang = ed.dom.getAttrib(tdElm, 'lang'); |
|
30 var dir = ed.dom.getAttrib(tdElm, 'dir'); |
|
31 var scope = ed.dom.getAttrib(tdElm, 'scope'); |
|
32 |
|
33 // Setup form |
|
34 addClassesToList('class', 'table_cell_styles'); |
|
35 TinyMCE_EditableSelects.init(); |
|
36 |
|
37 formObj.bordercolor.value = bordercolor; |
|
38 formObj.bgcolor.value = bgcolor; |
|
39 formObj.backgroundimage.value = backgroundimage; |
|
40 formObj.width.value = width; |
|
41 formObj.height.value = height; |
|
42 formObj.id.value = id; |
|
43 formObj.lang.value = lang; |
|
44 formObj.style.value = ed.dom.serializeStyle(st); |
|
45 selectByValue(formObj, 'align', align); |
|
46 selectByValue(formObj, 'valign', valign); |
|
47 selectByValue(formObj, 'class', className, true, true); |
|
48 selectByValue(formObj, 'celltype', celltype); |
|
49 selectByValue(formObj, 'dir', dir); |
|
50 selectByValue(formObj, 'scope', scope); |
|
51 |
|
52 // Resize some elements |
|
53 if (isVisible('backgroundimagebrowser')) |
|
54 document.getElementById('backgroundimage').style.width = '180px'; |
|
55 |
|
56 updateColor('bordercolor_pick', 'bordercolor'); |
|
57 updateColor('bgcolor_pick', 'bgcolor'); |
|
58 } |
|
59 |
|
60 function updateAction() { |
|
61 var el, inst = ed, tdElm, trElm, tableElm, formObj = document.forms[0]; |
|
62 |
|
63 tinyMCEPopup.restoreSelection(); |
|
64 el = ed.selection.getNode(); |
|
65 tdElm = ed.dom.getParent(el, "td,th"); |
|
66 trElm = ed.dom.getParent(el, "tr"); |
|
67 tableElm = ed.dom.getParent(el, "table"); |
|
68 |
|
69 ed.execCommand('mceBeginUndoLevel'); |
|
70 |
|
71 switch (getSelectValue(formObj, 'action')) { |
|
72 case "cell": |
|
73 var celltype = getSelectValue(formObj, 'celltype'); |
|
74 var scope = getSelectValue(formObj, 'scope'); |
|
75 |
|
76 function doUpdate(s) { |
|
77 if (s) { |
|
78 updateCell(tdElm); |
|
79 |
|
80 ed.addVisual(); |
|
81 ed.nodeChanged(); |
|
82 inst.execCommand('mceEndUndoLevel'); |
|
83 tinyMCEPopup.close(); |
|
84 } |
|
85 }; |
|
86 |
|
87 if (ed.getParam("accessibility_warnings", 1)) { |
|
88 if (celltype == "th" && scope == "") |
|
89 tinyMCEPopup.confirm(ed.getLang('table_dlg.missing_scope', '', true), doUpdate); |
|
90 else |
|
91 doUpdate(1); |
|
92 |
|
93 return; |
|
94 } |
|
95 |
|
96 updateCell(tdElm); |
|
97 break; |
|
98 |
|
99 case "row": |
|
100 var cell = trElm.firstChild; |
|
101 |
|
102 if (cell.nodeName != "TD" && cell.nodeName != "TH") |
|
103 cell = nextCell(cell); |
|
104 |
|
105 do { |
|
106 cell = updateCell(cell, true); |
|
107 } while ((cell = nextCell(cell)) != null); |
|
108 |
|
109 break; |
|
110 |
|
111 case "all": |
|
112 var rows = tableElm.getElementsByTagName("tr"); |
|
113 |
|
114 for (var i=0; i<rows.length; i++) { |
|
115 var cell = rows[i].firstChild; |
|
116 |
|
117 if (cell.nodeName != "TD" && cell.nodeName != "TH") |
|
118 cell = nextCell(cell); |
|
119 |
|
120 do { |
|
121 cell = updateCell(cell, true); |
|
122 } while ((cell = nextCell(cell)) != null); |
|
123 } |
|
124 |
|
125 break; |
|
126 } |
|
127 |
|
128 ed.addVisual(); |
|
129 ed.nodeChanged(); |
|
130 inst.execCommand('mceEndUndoLevel'); |
|
131 tinyMCEPopup.close(); |
|
132 } |
|
133 |
|
134 function nextCell(elm) { |
|
135 while ((elm = elm.nextSibling) != null) { |
|
136 if (elm.nodeName == "TD" || elm.nodeName == "TH") |
|
137 return elm; |
|
138 } |
|
139 |
|
140 return null; |
|
141 } |
|
142 |
|
143 function updateCell(td, skip_id) { |
|
144 var inst = ed; |
|
145 var formObj = document.forms[0]; |
|
146 var curCellType = td.nodeName.toLowerCase(); |
|
147 var celltype = getSelectValue(formObj, 'celltype'); |
|
148 var doc = inst.getDoc(); |
|
149 var dom = ed.dom; |
|
150 |
|
151 if (!skip_id) |
|
152 td.setAttribute('id', formObj.id.value); |
|
153 |
|
154 td.setAttribute('align', formObj.align.value); |
|
155 td.setAttribute('vAlign', formObj.valign.value); |
|
156 td.setAttribute('lang', formObj.lang.value); |
|
157 td.setAttribute('dir', getSelectValue(formObj, 'dir')); |
|
158 td.setAttribute('style', ed.dom.serializeStyle(ed.dom.parseStyle(formObj.style.value))); |
|
159 td.setAttribute('scope', formObj.scope.value); |
|
160 ed.dom.setAttrib(td, 'class', getSelectValue(formObj, 'class')); |
|
161 |
|
162 // Clear deprecated attributes |
|
163 ed.dom.setAttrib(td, 'width', ''); |
|
164 ed.dom.setAttrib(td, 'height', ''); |
|
165 ed.dom.setAttrib(td, 'bgColor', ''); |
|
166 ed.dom.setAttrib(td, 'borderColor', ''); |
|
167 ed.dom.setAttrib(td, 'background', ''); |
|
168 |
|
169 // Set styles |
|
170 td.style.width = getCSSSize(formObj.width.value); |
|
171 td.style.height = getCSSSize(formObj.height.value); |
|
172 if (formObj.bordercolor.value != "") { |
|
173 td.style.borderColor = formObj.bordercolor.value; |
|
174 td.style.borderStyle = td.style.borderStyle == "" ? "solid" : td.style.borderStyle; |
|
175 td.style.borderWidth = td.style.borderWidth == "" ? "1px" : td.style.borderWidth; |
|
176 } else |
|
177 td.style.borderColor = ''; |
|
178 |
|
179 td.style.backgroundColor = formObj.bgcolor.value; |
|
180 |
|
181 if (formObj.backgroundimage.value != "") |
|
182 td.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')"; |
|
183 else |
|
184 td.style.backgroundImage = ''; |
|
185 |
|
186 if (curCellType != celltype) { |
|
187 // changing to a different node type |
|
188 var newCell = doc.createElement(celltype); |
|
189 |
|
190 for (var c=0; c<td.childNodes.length; c++) |
|
191 newCell.appendChild(td.childNodes[c].cloneNode(1)); |
|
192 |
|
193 for (var a=0; a<td.attributes.length; a++) |
|
194 ed.dom.setAttrib(newCell, td.attributes[a].name, ed.dom.getAttrib(td, td.attributes[a].name)); |
|
195 |
|
196 td.parentNode.replaceChild(newCell, td); |
|
197 td = newCell; |
|
198 } |
|
199 |
|
200 dom.setAttrib(td, 'style', dom.serializeStyle(dom.parseStyle(td.style.cssText))); |
|
201 |
|
202 return td; |
|
203 } |
|
204 |
|
205 function changedBackgroundImage() { |
|
206 var formObj = document.forms[0]; |
|
207 var st = ed.dom.parseStyle(formObj.style.value); |
|
208 |
|
209 st['background-image'] = "url('" + formObj.backgroundimage.value + "')"; |
|
210 |
|
211 formObj.style.value = ed.dom.serializeStyle(st); |
|
212 } |
|
213 |
|
214 function changedSize() { |
|
215 var formObj = document.forms[0]; |
|
216 var st = ed.dom.parseStyle(formObj.style.value); |
|
217 |
|
218 var width = formObj.width.value; |
|
219 if (width != "") |
|
220 st['width'] = getCSSSize(width); |
|
221 else |
|
222 st['width'] = ""; |
|
223 |
|
224 var height = formObj.height.value; |
|
225 if (height != "") |
|
226 st['height'] = getCSSSize(height); |
|
227 else |
|
228 st['height'] = ""; |
|
229 |
|
230 formObj.style.value = ed.dom.serializeStyle(st); |
|
231 } |
|
232 |
|
233 function changedColor() { |
|
234 var formObj = document.forms[0]; |
|
235 var st = ed.dom.parseStyle(formObj.style.value); |
|
236 |
|
237 st['background-color'] = formObj.bgcolor.value; |
|
238 st['border-color'] = formObj.bordercolor.value; |
|
239 |
|
240 formObj.style.value = ed.dom.serializeStyle(st); |
|
241 } |
|
242 |
|
243 function changedStyle() { |
|
244 var formObj = document.forms[0]; |
|
245 var st = ed.dom.parseStyle(formObj.style.value); |
|
246 |
|
247 if (st['background-image']) |
|
248 formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1"); |
|
249 else |
|
250 formObj.backgroundimage.value = ''; |
|
251 |
|
252 if (st['width']) |
|
253 formObj.width.value = trimSize(st['width']); |
|
254 |
|
255 if (st['height']) |
|
256 formObj.height.value = trimSize(st['height']); |
|
257 |
|
258 if (st['background-color']) { |
|
259 formObj.bgcolor.value = st['background-color']; |
|
260 updateColor('bgcolor_pick','bgcolor'); |
|
261 } |
|
262 |
|
263 if (st['border-color']) { |
|
264 formObj.bordercolor.value = st['border-color']; |
|
265 updateColor('bordercolor_pick','bordercolor'); |
|
266 } |
|
267 } |
|
268 |
|
269 tinyMCEPopup.onInit.add(init); |
|