1 tinyMCEPopup
.requireLangPack();
6 ed
= tinyMCEPopup
.editor
;
7 tinyMCEPopup
.resizeToInnerSize();
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')
14 var tdElm
= ed
.dom
.getParent(ed
.selection
.getStart(), "td,th");
15 var formObj
= document
.forms
[0];
16 var st
= ed
.dom
.parseStyle(ed
.dom
.getAttrib(tdElm
, "style"));
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');
34 addClassesToList('class', 'table_cell_styles');
35 TinyMCE_EditableSelects
.init();
37 if (!ed
.dom
.hasClass(tdElm
, 'mceSelected')) {
38 formObj
.bordercolor
.value
= bordercolor
;
39 formObj
.bgcolor
.value
= bgcolor
;
40 formObj
.backgroundimage
.value
= backgroundimage
;
41 formObj
.width
.value
= width
;
42 formObj
.height
.value
= height
;
43 formObj
.id
.value
= id
;
44 formObj
.lang
.value
= lang
;
45 formObj
.style
.value
= ed
.dom
.serializeStyle(st
);
46 selectByValue(formObj
, 'align', align
);
47 selectByValue(formObj
, 'valign', valign
);
48 selectByValue(formObj
, 'class', className
, true, true);
49 selectByValue(formObj
, 'celltype', celltype
);
50 selectByValue(formObj
, 'dir', dir
);
51 selectByValue(formObj
, 'scope', scope
);
53 // Resize some elements
54 if (isVisible('backgroundimagebrowser'))
55 document
.getElementById('backgroundimage').style
.width
= '180px';
57 updateColor('bordercolor_pick', 'bordercolor');
58 updateColor('bgcolor_pick', 'bgcolor');
60 tinyMCEPopup
.dom
.hide('action');
63 function updateAction() {
64 var el
, inst
= ed
, tdElm
, trElm
, tableElm
, formObj
= document
.forms
[0];
66 if (!AutoValidator
.validate(formObj
)) {
67 tinyMCEPopup
.alert(AutoValidator
.getErrorMessages(formObj
).join('. ') + '.');
71 tinyMCEPopup
.restoreSelection();
72 el
= ed
.selection
.getStart();
73 tdElm
= ed
.dom
.getParent(el
, "td,th");
74 trElm
= ed
.dom
.getParent(el
, "tr");
75 tableElm
= ed
.dom
.getParent(el
, "table");
78 if (ed
.dom
.hasClass(tdElm
, 'mceSelected')) {
79 // Update all selected sells
80 tinymce
.each(ed
.dom
.select('td.mceSelected,th.mceSelected'), function(td
) {
86 inst
.execCommand('mceEndUndoLevel');
91 switch (getSelectValue(formObj
, 'action')) {
93 var celltype
= getSelectValue(formObj
, 'celltype');
94 var scope
= getSelectValue(formObj
, 'scope');
96 function doUpdate(s
) {
102 inst
.execCommand('mceEndUndoLevel');
103 tinyMCEPopup
.close();
107 if (ed
.getParam("accessibility_warnings", 1)) {
108 if (celltype
== "th" && scope
== "")
109 tinyMCEPopup
.confirm(ed
.getLang('table_dlg.missing_scope', '', true), doUpdate
);
120 var cell
= trElm
.firstChild
;
122 if (cell
.nodeName
!= "TD" && cell
.nodeName
!= "TH")
123 cell
= nextCell(cell
);
126 cell
= updateCell(cell
, true);
127 } while ((cell
= nextCell(cell
)) != null);
132 var curr
, col
= 0, cell
= trElm
.firstChild
, rows
= tableElm
.getElementsByTagName("tr");
134 if (cell
.nodeName
!= "TD" && cell
.nodeName
!= "TH")
135 cell
= nextCell(cell
);
140 col
+= cell
.getAttribute("colspan")?cell
.getAttribute("colspan"):1;
141 } while ((cell
= nextCell(cell
)) != null);
143 for (var i
=0; i
<rows
.length
; i
++) {
144 cell
= rows
[i
].firstChild
;
146 if (cell
.nodeName
!= "TD" && cell
.nodeName
!= "TH")
147 cell
= nextCell(cell
);
152 cell
= updateCell(cell
, true);
155 curr
+= cell
.getAttribute("colspan")?cell
.getAttribute("colspan"):1;
156 } while ((cell
= nextCell(cell
)) != null);
162 var rows
= tableElm
.getElementsByTagName("tr");
164 for (var i
=0; i
<rows
.length
; i
++) {
165 var cell
= rows
[i
].firstChild
;
167 if (cell
.nodeName
!= "TD" && cell
.nodeName
!= "TH")
168 cell
= nextCell(cell
);
171 cell
= updateCell(cell
, true);
172 } while ((cell
= nextCell(cell
)) != null);
180 inst
.execCommand('mceEndUndoLevel');
181 tinyMCEPopup
.close();
184 function nextCell(elm
) {
185 while ((elm
= elm
.nextSibling
) != null) {
186 if (elm
.nodeName
== "TD" || elm
.nodeName
== "TH")
193 function updateCell(td
, skip_id
) {
195 var formObj
= document
.forms
[0];
196 var curCellType
= td
.nodeName
.toLowerCase();
197 var celltype
= getSelectValue(formObj
, 'celltype');
198 var doc
= inst
.getDoc();
202 dom
.setAttrib(td
, 'id', formObj
.id
.value
);
204 dom
.setAttrib(td
, 'align', formObj
.align
.value
);
205 dom
.setAttrib(td
, 'vAlign', formObj
.valign
.value
);
206 dom
.setAttrib(td
, 'lang', formObj
.lang
.value
);
207 dom
.setAttrib(td
, 'dir', getSelectValue(formObj
, 'dir'));
208 dom
.setAttrib(td
, 'style', ed
.dom
.serializeStyle(ed
.dom
.parseStyle(formObj
.style
.value
)));
209 dom
.setAttrib(td
, 'scope', formObj
.scope
.value
);
210 dom
.setAttrib(td
, 'class', getSelectValue(formObj
, 'class'));
212 // Clear deprecated attributes
213 ed
.dom
.setAttrib(td
, 'width', '');
214 ed
.dom
.setAttrib(td
, 'height', '');
215 ed
.dom
.setAttrib(td
, 'bgColor', '');
216 ed
.dom
.setAttrib(td
, 'borderColor', '');
217 ed
.dom
.setAttrib(td
, 'background', '');
220 td
.style
.width
= getCSSSize(formObj
.width
.value
);
221 td
.style
.height
= getCSSSize(formObj
.height
.value
);
222 if (formObj
.bordercolor
.value
!= "") {
223 td
.style
.borderColor
= formObj
.bordercolor
.value
;
224 td
.style
.borderStyle
= td
.style
.borderStyle
== "" ? "solid" : td
.style
.borderStyle
;
225 td
.style
.borderWidth
= td
.style
.borderWidth
== "" ? "1px" : td
.style
.borderWidth
;
227 td
.style
.borderColor
= '';
229 td
.style
.backgroundColor
= formObj
.bgcolor
.value
;
231 if (formObj
.backgroundimage
.value
!= "")
232 td
.style
.backgroundImage
= "url('" + formObj
.backgroundimage
.value
+ "')";
234 td
.style
.backgroundImage
= '';
236 if (curCellType
!= celltype
) {
237 // changing to a different node type
238 var newCell
= doc
.createElement(celltype
);
240 for (var c
=0; c
<td
.childNodes
.length
; c
++)
241 newCell
.appendChild(td
.childNodes
[c
].cloneNode(1));
243 for (var a
=0; a
<td
.attributes
.length
; a
++)
244 ed
.dom
.setAttrib(newCell
, td
.attributes
[a
].name
, ed
.dom
.getAttrib(td
, td
.attributes
[a
].name
));
246 td
.parentNode
.replaceChild(newCell
, td
);
250 dom
.setAttrib(td
, 'style', dom
.serializeStyle(dom
.parseStyle(td
.style
.cssText
)));
255 function changedBackgroundImage() {
256 var formObj
= document
.forms
[0];
257 var st
= ed
.dom
.parseStyle(formObj
.style
.value
);
259 st
['background-image'] = "url('" + formObj
.backgroundimage
.value
+ "')";
261 formObj
.style
.value
= ed
.dom
.serializeStyle(st
);
264 function changedSize() {
265 var formObj
= document
.forms
[0];
266 var st
= ed
.dom
.parseStyle(formObj
.style
.value
);
268 var width
= formObj
.width
.value
;
270 st
['width'] = getCSSSize(width
);
274 var height
= formObj
.height
.value
;
276 st
['height'] = getCSSSize(height
);
280 formObj
.style
.value
= ed
.dom
.serializeStyle(st
);
283 function changedColor() {
284 var formObj
= document
.forms
[0];
285 var st
= ed
.dom
.parseStyle(formObj
.style
.value
);
287 st
['background-color'] = formObj
.bgcolor
.value
;
288 st
['border-color'] = formObj
.bordercolor
.value
;
290 formObj
.style
.value
= ed
.dom
.serializeStyle(st
);
293 function changedStyle() {
294 var formObj
= document
.forms
[0];
295 var st
= ed
.dom
.parseStyle(formObj
.style
.value
);
297 if (st
['background-image'])
298 formObj
.backgroundimage
.value
= st
['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
300 formObj
.backgroundimage
.value
= '';
303 formObj
.width
.value
= trimSize(st
['width']);
306 formObj
.height
.value
= trimSize(st
['height']);
308 if (st
['background-color']) {
309 formObj
.bgcolor
.value
= st
['background-color'];
310 updateColor('bgcolor_pick','bgcolor');
313 if (st
['border-color']) {
314 formObj
.bordercolor
.value
= st
['border-color'];
315 updateColor('bordercolor_pick','bordercolor');
319 tinyMCEPopup
.onInit
.add(init
);