1 tinyMCEPopup.requireLangPack(); |
|
2 |
|
3 var action, orgTableWidth, orgTableHeight, dom = tinyMCEPopup.editor.dom; |
|
4 |
|
5 function insertTable() { |
|
6 var formObj = document.forms[0]; |
|
7 var inst = tinyMCEPopup.editor, dom = inst.dom; |
|
8 var cols = 2, rows = 2, border = 0, cellpadding = -1, cellspacing = -1, align, width, height, className, caption, frame, rules; |
|
9 var html = '', capEl, elm; |
|
10 var cellLimit, rowLimit, colLimit; |
|
11 |
|
12 tinyMCEPopup.restoreSelection(); |
|
13 |
|
14 if (!AutoValidator.validate(formObj)) { |
|
15 tinyMCEPopup.alert(inst.getLang('invalid_data')); |
|
16 return false; |
|
17 } |
|
18 |
|
19 elm = dom.getParent(inst.selection.getNode(), 'table'); |
|
20 |
|
21 // Get form data |
|
22 cols = formObj.elements['cols'].value; |
|
23 rows = formObj.elements['rows'].value; |
|
24 border = formObj.elements['border'].value != "" ? formObj.elements['border'].value : 0; |
|
25 cellpadding = formObj.elements['cellpadding'].value != "" ? formObj.elements['cellpadding'].value : ""; |
|
26 cellspacing = formObj.elements['cellspacing'].value != "" ? formObj.elements['cellspacing'].value : ""; |
|
27 align = getSelectValue(formObj, "align"); |
|
28 frame = getSelectValue(formObj, "tframe"); |
|
29 rules = getSelectValue(formObj, "rules"); |
|
30 width = formObj.elements['width'].value; |
|
31 height = formObj.elements['height'].value; |
|
32 bordercolor = formObj.elements['bordercolor'].value; |
|
33 bgcolor = formObj.elements['bgcolor'].value; |
|
34 className = getSelectValue(formObj, "class"); |
|
35 id = formObj.elements['id'].value; |
|
36 summary = formObj.elements['summary'].value; |
|
37 style = formObj.elements['style'].value; |
|
38 dir = formObj.elements['dir'].value; |
|
39 lang = formObj.elements['lang'].value; |
|
40 background = formObj.elements['backgroundimage'].value; |
|
41 caption = formObj.elements['caption'].checked; |
|
42 |
|
43 cellLimit = tinyMCEPopup.getParam('table_cell_limit', false); |
|
44 rowLimit = tinyMCEPopup.getParam('table_row_limit', false); |
|
45 colLimit = tinyMCEPopup.getParam('table_col_limit', false); |
|
46 |
|
47 // Validate table size |
|
48 if (colLimit && cols > colLimit) { |
|
49 tinyMCEPopup.alert(inst.getLang('table_dlg.col_limit').replace(/\{\$cols\}/g, colLimit)); |
|
50 return false; |
|
51 } else if (rowLimit && rows > rowLimit) { |
|
52 tinyMCEPopup.alert(inst.getLang('table_dlg.row_limit').replace(/\{\$rows\}/g, rowLimit)); |
|
53 return false; |
|
54 } else if (cellLimit && cols * rows > cellLimit) { |
|
55 tinyMCEPopup.alert(inst.getLang('table_dlg.cell_limit').replace(/\{\$cells\}/g, cellLimit)); |
|
56 return false; |
|
57 } |
|
58 |
|
59 // Update table |
|
60 if (action == "update") { |
|
61 inst.execCommand('mceBeginUndoLevel'); |
|
62 |
|
63 dom.setAttrib(elm, 'cellPadding', cellpadding, true); |
|
64 dom.setAttrib(elm, 'cellSpacing', cellspacing, true); |
|
65 dom.setAttrib(elm, 'border', border); |
|
66 dom.setAttrib(elm, 'align', align); |
|
67 dom.setAttrib(elm, 'frame', frame); |
|
68 dom.setAttrib(elm, 'rules', rules); |
|
69 dom.setAttrib(elm, 'class', className); |
|
70 dom.setAttrib(elm, 'style', style); |
|
71 dom.setAttrib(elm, 'id', id); |
|
72 dom.setAttrib(elm, 'summary', summary); |
|
73 dom.setAttrib(elm, 'dir', dir); |
|
74 dom.setAttrib(elm, 'lang', lang); |
|
75 |
|
76 capEl = inst.dom.select('caption', elm)[0]; |
|
77 |
|
78 if (capEl && !caption) |
|
79 capEl.parentNode.removeChild(capEl); |
|
80 |
|
81 if (!capEl && caption) { |
|
82 capEl = elm.ownerDocument.createElement('caption'); |
|
83 |
|
84 if (!tinymce.isIE) |
|
85 capEl.innerHTML = '<br mce_bogus="1"/>'; |
|
86 |
|
87 elm.insertBefore(capEl, elm.firstChild); |
|
88 } |
|
89 |
|
90 if (width && inst.settings.inline_styles) { |
|
91 dom.setStyle(elm, 'width', width); |
|
92 dom.setAttrib(elm, 'width', ''); |
|
93 } else { |
|
94 dom.setAttrib(elm, 'width', width, true); |
|
95 dom.setStyle(elm, 'width', ''); |
|
96 } |
|
97 |
|
98 // Remove these since they are not valid XHTML |
|
99 dom.setAttrib(elm, 'borderColor', ''); |
|
100 dom.setAttrib(elm, 'bgColor', ''); |
|
101 dom.setAttrib(elm, 'background', ''); |
|
102 |
|
103 if (height && inst.settings.inline_styles) { |
|
104 dom.setStyle(elm, 'height', height); |
|
105 dom.setAttrib(elm, 'height', ''); |
|
106 } else { |
|
107 dom.setAttrib(elm, 'height', height, true); |
|
108 dom.setStyle(elm, 'height', ''); |
|
109 } |
|
110 |
|
111 if (background != '') |
|
112 elm.style.backgroundImage = "url('" + background + "')"; |
|
113 else |
|
114 elm.style.backgroundImage = ''; |
|
115 |
|
116 /* if (tinyMCEPopup.getParam("inline_styles")) { |
|
117 if (width != '') |
|
118 elm.style.width = getCSSSize(width); |
|
119 }*/ |
|
120 |
|
121 if (bordercolor != "") { |
|
122 elm.style.borderColor = bordercolor; |
|
123 elm.style.borderStyle = elm.style.borderStyle == "" ? "solid" : elm.style.borderStyle; |
|
124 elm.style.borderWidth = border == "" ? "1px" : border; |
|
125 } else |
|
126 elm.style.borderColor = ''; |
|
127 |
|
128 elm.style.backgroundColor = bgcolor; |
|
129 elm.style.height = getCSSSize(height); |
|
130 |
|
131 inst.addVisual(); |
|
132 |
|
133 // Fix for stange MSIE align bug |
|
134 //elm.outerHTML = elm.outerHTML; |
|
135 |
|
136 inst.nodeChanged(); |
|
137 inst.execCommand('mceEndUndoLevel'); |
|
138 |
|
139 // Repaint if dimensions changed |
|
140 if (formObj.width.value != orgTableWidth || formObj.height.value != orgTableHeight) |
|
141 inst.execCommand('mceRepaint'); |
|
142 |
|
143 tinyMCEPopup.close(); |
|
144 return true; |
|
145 } |
|
146 |
|
147 // Create new table |
|
148 html += '<table'; |
|
149 |
|
150 html += makeAttrib('id', id); |
|
151 html += makeAttrib('border', border); |
|
152 html += makeAttrib('cellpadding', cellpadding); |
|
153 html += makeAttrib('cellspacing', cellspacing); |
|
154 |
|
155 if (width && inst.settings.inline_styles) { |
|
156 if (style) |
|
157 style += '; '; |
|
158 |
|
159 // Force px |
|
160 if (/^[0-9\.]+$/.test(width)) |
|
161 width += 'px'; |
|
162 |
|
163 style += 'width: ' + width; |
|
164 } else |
|
165 html += makeAttrib('width', width); |
|
166 |
|
167 /* if (height) { |
|
168 if (style) |
|
169 style += '; '; |
|
170 |
|
171 style += 'height: ' + height; |
|
172 }*/ |
|
173 |
|
174 //html += makeAttrib('height', height); |
|
175 //html += makeAttrib('bordercolor', bordercolor); |
|
176 //html += makeAttrib('bgcolor', bgcolor); |
|
177 html += makeAttrib('align', align); |
|
178 html += makeAttrib('frame', frame); |
|
179 html += makeAttrib('rules', rules); |
|
180 html += makeAttrib('class', className); |
|
181 html += makeAttrib('style', style); |
|
182 html += makeAttrib('summary', summary); |
|
183 html += makeAttrib('dir', dir); |
|
184 html += makeAttrib('lang', lang); |
|
185 html += '>'; |
|
186 |
|
187 if (caption) { |
|
188 if (!tinymce.isIE) |
|
189 html += '<caption><br mce_bogus="1"/></caption>'; |
|
190 else |
|
191 html += '<caption></caption>'; |
|
192 } |
|
193 |
|
194 for (var y=0; y<rows; y++) { |
|
195 html += "<tr>"; |
|
196 |
|
197 for (var x=0; x<cols; x++) { |
|
198 if (!tinymce.isIE) |
|
199 html += '<td><br mce_bogus="1"/></td>'; |
|
200 else |
|
201 html += '<td></td>'; |
|
202 } |
|
203 |
|
204 html += "</tr>"; |
|
205 } |
|
206 |
|
207 html += "</table>"; |
|
208 |
|
209 inst.execCommand('mceBeginUndoLevel'); |
|
210 |
|
211 // Move table |
|
212 if (inst.settings.fix_table_elements) { |
|
213 var bm = inst.selection.getBookmark(), patt = ''; |
|
214 |
|
215 inst.execCommand('mceInsertContent', false, '<br class="_mce_marker" />'); |
|
216 |
|
217 tinymce.each('h1,h2,h3,h4,h5,h6,p'.split(','), function(n) { |
|
218 if (patt) |
|
219 patt += ','; |
|
220 |
|
221 patt += n + ' ._mce_marker'; |
|
222 }); |
|
223 |
|
224 tinymce.each(inst.dom.select(patt), function(n) { |
|
225 inst.dom.split(inst.dom.getParent(n, 'h1,h2,h3,h4,h5,h6,p'), n); |
|
226 }); |
|
227 |
|
228 dom.setOuterHTML(dom.select('._mce_marker')[0], html); |
|
229 |
|
230 inst.selection.moveToBookmark(bm); |
|
231 } else |
|
232 inst.execCommand('mceInsertContent', false, html); |
|
233 |
|
234 inst.addVisual(); |
|
235 inst.execCommand('mceEndUndoLevel'); |
|
236 |
|
237 tinyMCEPopup.close(); |
|
238 } |
|
239 |
|
240 function makeAttrib(attrib, value) { |
|
241 var formObj = document.forms[0]; |
|
242 var valueElm = formObj.elements[attrib]; |
|
243 |
|
244 if (typeof(value) == "undefined" || value == null) { |
|
245 value = ""; |
|
246 |
|
247 if (valueElm) |
|
248 value = valueElm.value; |
|
249 } |
|
250 |
|
251 if (value == "") |
|
252 return ""; |
|
253 |
|
254 // XML encode it |
|
255 value = value.replace(/&/g, '&'); |
|
256 value = value.replace(/\"/g, '"'); |
|
257 value = value.replace(/</g, '<'); |
|
258 value = value.replace(/>/g, '>'); |
|
259 |
|
260 return ' ' + attrib + '="' + value + '"'; |
|
261 } |
|
262 |
|
263 function init() { |
|
264 tinyMCEPopup.resizeToInnerSize(); |
|
265 |
|
266 document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table'); |
|
267 document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table'); |
|
268 document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor'); |
|
269 document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor'); |
|
270 |
|
271 var cols = 2, rows = 2, border = tinyMCEPopup.getParam('table_default_border', '0'), cellpadding = tinyMCEPopup.getParam('table_default_cellpadding', ''), cellspacing = tinyMCEPopup.getParam('table_default_cellspacing', ''); |
|
272 var align = "", width = "", height = "", bordercolor = "", bgcolor = "", className = ""; |
|
273 var id = "", summary = "", style = "", dir = "", lang = "", background = "", bgcolor = "", bordercolor = "", rules, frame; |
|
274 var inst = tinyMCEPopup.editor, dom = inst.dom; |
|
275 var formObj = document.forms[0]; |
|
276 var elm = dom.getParent(inst.selection.getNode(), "table"); |
|
277 |
|
278 action = tinyMCEPopup.getWindowArg('action'); |
|
279 |
|
280 if (!action) |
|
281 action = elm ? "update" : "insert"; |
|
282 |
|
283 if (elm && action != "insert") { |
|
284 var rowsAr = elm.rows; |
|
285 var cols = 0; |
|
286 for (var i=0; i<rowsAr.length; i++) |
|
287 if (rowsAr[i].cells.length > cols) |
|
288 cols = rowsAr[i].cells.length; |
|
289 |
|
290 cols = cols; |
|
291 rows = rowsAr.length; |
|
292 |
|
293 st = dom.parseStyle(dom.getAttrib(elm, "style")); |
|
294 border = trimSize(getStyle(elm, 'border', 'borderWidth')); |
|
295 cellpadding = dom.getAttrib(elm, 'cellpadding', ""); |
|
296 cellspacing = dom.getAttrib(elm, 'cellspacing', ""); |
|
297 width = trimSize(getStyle(elm, 'width', 'width')); |
|
298 height = trimSize(getStyle(elm, 'height', 'height')); |
|
299 bordercolor = convertRGBToHex(getStyle(elm, 'bordercolor', 'borderLeftColor')); |
|
300 bgcolor = convertRGBToHex(getStyle(elm, 'bgcolor', 'backgroundColor')); |
|
301 align = dom.getAttrib(elm, 'align', align); |
|
302 frame = dom.getAttrib(elm, 'frame'); |
|
303 rules = dom.getAttrib(elm, 'rules'); |
|
304 className = tinymce.trim(dom.getAttrib(elm, 'class').replace(/mceItem.+/g, '')); |
|
305 id = dom.getAttrib(elm, 'id'); |
|
306 summary = dom.getAttrib(elm, 'summary'); |
|
307 style = dom.serializeStyle(st); |
|
308 dir = dom.getAttrib(elm, 'dir'); |
|
309 lang = dom.getAttrib(elm, 'lang'); |
|
310 background = getStyle(elm, 'background', 'backgroundImage').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1"); |
|
311 formObj.caption.checked = elm.getElementsByTagName('caption').length > 0; |
|
312 |
|
313 orgTableWidth = width; |
|
314 orgTableHeight = height; |
|
315 |
|
316 action = "update"; |
|
317 formObj.insert.value = inst.getLang('update'); |
|
318 } |
|
319 |
|
320 addClassesToList('class', "table_styles"); |
|
321 TinyMCE_EditableSelects.init(); |
|
322 |
|
323 // Update form |
|
324 selectByValue(formObj, 'align', align); |
|
325 selectByValue(formObj, 'tframe', frame); |
|
326 selectByValue(formObj, 'rules', rules); |
|
327 selectByValue(formObj, 'class', className, true, true); |
|
328 formObj.cols.value = cols; |
|
329 formObj.rows.value = rows; |
|
330 formObj.border.value = border; |
|
331 formObj.cellpadding.value = cellpadding; |
|
332 formObj.cellspacing.value = cellspacing; |
|
333 formObj.width.value = width; |
|
334 formObj.height.value = height; |
|
335 formObj.bordercolor.value = bordercolor; |
|
336 formObj.bgcolor.value = bgcolor; |
|
337 formObj.id.value = id; |
|
338 formObj.summary.value = summary; |
|
339 formObj.style.value = style; |
|
340 formObj.dir.value = dir; |
|
341 formObj.lang.value = lang; |
|
342 formObj.backgroundimage.value = background; |
|
343 |
|
344 updateColor('bordercolor_pick', 'bordercolor'); |
|
345 updateColor('bgcolor_pick', 'bgcolor'); |
|
346 |
|
347 // Resize some elements |
|
348 if (isVisible('backgroundimagebrowser')) |
|
349 document.getElementById('backgroundimage').style.width = '180px'; |
|
350 |
|
351 // Disable some fields in update mode |
|
352 if (action == "update") { |
|
353 formObj.cols.disabled = true; |
|
354 formObj.rows.disabled = true; |
|
355 } |
|
356 } |
|
357 |
|
358 function changedSize() { |
|
359 var formObj = document.forms[0]; |
|
360 var st = dom.parseStyle(formObj.style.value); |
|
361 |
|
362 /* var width = formObj.width.value; |
|
363 if (width != "") |
|
364 st['width'] = tinyMCEPopup.getParam("inline_styles") ? getCSSSize(width) : ""; |
|
365 else |
|
366 st['width'] = "";*/ |
|
367 |
|
368 var height = formObj.height.value; |
|
369 if (height != "") |
|
370 st['height'] = getCSSSize(height); |
|
371 else |
|
372 st['height'] = ""; |
|
373 |
|
374 formObj.style.value = dom.serializeStyle(st); |
|
375 } |
|
376 |
|
377 function changedBackgroundImage() { |
|
378 var formObj = document.forms[0]; |
|
379 var st = dom.parseStyle(formObj.style.value); |
|
380 |
|
381 st['background-image'] = "url('" + formObj.backgroundimage.value + "')"; |
|
382 |
|
383 formObj.style.value = dom.serializeStyle(st); |
|
384 } |
|
385 |
|
386 function changedBorder() { |
|
387 var formObj = document.forms[0]; |
|
388 var st = dom.parseStyle(formObj.style.value); |
|
389 |
|
390 // Update border width if the element has a color |
|
391 if (formObj.border.value != "" && formObj.bordercolor.value != "") |
|
392 st['border-width'] = formObj.border.value + "px"; |
|
393 |
|
394 formObj.style.value = dom.serializeStyle(st); |
|
395 } |
|
396 |
|
397 function changedColor() { |
|
398 var formObj = document.forms[0]; |
|
399 var st = dom.parseStyle(formObj.style.value); |
|
400 |
|
401 st['background-color'] = formObj.bgcolor.value; |
|
402 |
|
403 if (formObj.bordercolor.value != "") { |
|
404 st['border-color'] = formObj.bordercolor.value; |
|
405 |
|
406 // Add border-width if it's missing |
|
407 if (!st['border-width']) |
|
408 st['border-width'] = formObj.border.value == "" ? "1px" : formObj.border.value + "px"; |
|
409 } |
|
410 |
|
411 formObj.style.value = dom.serializeStyle(st); |
|
412 } |
|
413 |
|
414 function changedStyle() { |
|
415 var formObj = document.forms[0]; |
|
416 var st = dom.parseStyle(formObj.style.value); |
|
417 |
|
418 if (st['background-image']) |
|
419 formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1"); |
|
420 else |
|
421 formObj.backgroundimage.value = ''; |
|
422 |
|
423 if (st['width']) |
|
424 formObj.width.value = trimSize(st['width']); |
|
425 |
|
426 if (st['height']) |
|
427 formObj.height.value = trimSize(st['height']); |
|
428 |
|
429 if (st['background-color']) { |
|
430 formObj.bgcolor.value = st['background-color']; |
|
431 updateColor('bgcolor_pick','bgcolor'); |
|
432 } |
|
433 |
|
434 if (st['border-color']) { |
|
435 formObj.bordercolor.value = st['border-color']; |
|
436 updateColor('bordercolor_pick','bordercolor'); |
|
437 } |
|
438 } |
|
439 |
|
440 tinyMCEPopup.onInit.add(init); |
|