summaryrefslogtreecommitdiff
path: root/public/javascripts/tiny_mce/plugins/table/js
diff options
context:
space:
mode:
Diffstat (limited to 'public/javascripts/tiny_mce/plugins/table/js')
-rwxr-xr-xpublic/javascripts/tiny_mce/plugins/table/js/cell.js269
-rwxr-xr-xpublic/javascripts/tiny_mce/plugins/table/js/merge_cells.js29
-rwxr-xr-xpublic/javascripts/tiny_mce/plugins/table/js/row.js212
-rwxr-xr-xpublic/javascripts/tiny_mce/plugins/table/js/table.js413
4 files changed, 923 insertions, 0 deletions
diff --git a/public/javascripts/tiny_mce/plugins/table/js/cell.js b/public/javascripts/tiny_mce/plugins/table/js/cell.js
new file mode 100755
index 0000000..f23b067
--- /dev/null
+++ b/public/javascripts/tiny_mce/plugins/table/js/cell.js
@@ -0,0 +1,269 @@
1tinyMCEPopup.requireLangPack();
2
3var ed;
4
5function 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
60function 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
134function 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
143function 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
205function 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
214function 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
233function 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
243function 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
269tinyMCEPopup.onInit.add(init);
diff --git a/public/javascripts/tiny_mce/plugins/table/js/merge_cells.js b/public/javascripts/tiny_mce/plugins/table/js/merge_cells.js
new file mode 100755
index 0000000..31d6df0
--- /dev/null
+++ b/public/javascripts/tiny_mce/plugins/table/js/merge_cells.js
@@ -0,0 +1,29 @@
1tinyMCEPopup.requireLangPack();
2
3function init() {
4 var f = document.forms[0], v;
5
6 tinyMCEPopup.resizeToInnerSize();
7
8 f.numcols.value = tinyMCEPopup.getWindowArg('numcols', 1);
9 f.numrows.value = tinyMCEPopup.getWindowArg('numrows', 1);
10}
11
12function mergeCells() {
13 var args = [], f = document.forms[0];
14
15 tinyMCEPopup.restoreSelection();
16
17 if (!AutoValidator.validate(f)) {
18 tinyMCEPopup.alert(tinyMCEPopup.getLang('invalid_data'));
19 return false;
20 }
21
22 args["numcols"] = f.numcols.value;
23 args["numrows"] = f.numrows.value;
24
25 tinyMCEPopup.execCommand("mceTableMergeCells", false, args);
26 tinyMCEPopup.close();
27}
28
29tinyMCEPopup.onInit.add(init);
diff --git a/public/javascripts/tiny_mce/plugins/table/js/row.js b/public/javascripts/tiny_mce/plugins/table/js/row.js
new file mode 100755
index 0000000..d25f635
--- /dev/null
+++ b/public/javascripts/tiny_mce/plugins/table/js/row.js
@@ -0,0 +1,212 @@
1tinyMCEPopup.requireLangPack();
2
3function 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
50function 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
91function 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
163function 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
172function 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
190function 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
203function 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
212tinyMCEPopup.onInit.add(init);
diff --git a/public/javascripts/tiny_mce/plugins/table/js/table.js b/public/javascripts/tiny_mce/plugins/table/js/table.js
new file mode 100755
index 0000000..a7f3c3a
--- /dev/null
+++ b/public/javascripts/tiny_mce/plugins/table/js/table.js
@@ -0,0 +1,413 @@
1tinyMCEPopup.requireLangPack();
2
3var action, orgTableWidth, orgTableHeight, dom = tinyMCEPopup.editor.dom;
4
5function 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 = formObj.elements['align'].options[formObj.elements['align'].selectedIndex].value;
28 frame = formObj.elements['frame'].options[formObj.elements['frame'].selectedIndex].value;
29 rules = formObj.elements['rules'].options[formObj.elements['rules'].selectedIndex].value;
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 = formObj.elements['class'].options[formObj.elements['class'].selectedIndex].value;
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 style += 'width: ' + width;
160 } else
161 html += makeAttrib('width', width);
162
163/* if (height) {
164 if (style)
165 style += '; ';
166
167 style += 'height: ' + height;
168 }*/
169
170 //html += makeAttrib('height', height);
171 //html += makeAttrib('bordercolor', bordercolor);
172 //html += makeAttrib('bgcolor', bgcolor);
173 html += makeAttrib('align', align);
174 html += makeAttrib('frame', frame);
175 html += makeAttrib('rules', rules);
176 html += makeAttrib('class', className);
177 html += makeAttrib('style', style);
178 html += makeAttrib('summary', summary);
179 html += makeAttrib('dir', dir);
180 html += makeAttrib('lang', lang);
181 html += '>';
182
183 if (caption) {
184 if (!tinymce.isIE)
185 html += '<caption><br mce_bogus="1"/></caption>';
186 else
187 html += '<caption></caption>';
188 }
189
190 for (var y=0; y<rows; y++) {
191 html += "<tr>";
192
193 for (var x=0; x<cols; x++) {
194 if (!tinymce.isIE)
195 html += '<td><br mce_bogus="1"/></td>';
196 else
197 html += '<td></td>';
198 }
199
200 html += "</tr>";
201 }
202
203 html += "</table>";
204
205 inst.execCommand('mceBeginUndoLevel');
206 inst.execCommand('mceInsertContent', false, html);
207 inst.addVisual();
208 inst.execCommand('mceEndUndoLevel');
209
210 tinyMCEPopup.close();
211}
212
213function makeAttrib(attrib, value) {
214 var formObj = document.forms[0];
215 var valueElm = formObj.elements[attrib];
216
217 if (typeof(value) == "undefined" || value == null) {
218 value = "";
219
220 if (valueElm)
221 value = valueElm.value;
222 }
223
224 if (value == "")
225 return "";
226
227 // XML encode it
228 value = value.replace(/&/g, '&amp;');
229 value = value.replace(/\"/g, '&quot;');
230 value = value.replace(/</g, '&lt;');
231 value = value.replace(/>/g, '&gt;');
232
233 return ' ' + attrib + '="' + value + '"';
234}
235
236function init() {
237 tinyMCEPopup.resizeToInnerSize();
238
239 document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
240 document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
241 document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor');
242 document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor');
243
244 var cols = 2, rows = 2, border = tinyMCEPopup.getParam('table_default_border', '0'), cellpadding = tinyMCEPopup.getParam('table_default_cellpadding', ''), cellspacing = tinyMCEPopup.getParam('table_default_cellspacing', '');
245 var align = "", width = "", height = "", bordercolor = "", bgcolor = "", className = "";
246 var id = "", summary = "", style = "", dir = "", lang = "", background = "", bgcolor = "", bordercolor = "", rules, frame;
247 var inst = tinyMCEPopup.editor, dom = inst.dom;
248 var formObj = document.forms[0];
249 var elm = dom.getParent(inst.selection.getNode(), "table");
250
251 action = tinyMCEPopup.getWindowArg('action');
252
253 if (!action)
254 action = elm ? "update" : "insert";
255
256 if (elm && action != "insert") {
257 var rowsAr = elm.rows;
258 var cols = 0;
259 for (var i=0; i<rowsAr.length; i++)
260 if (rowsAr[i].cells.length > cols)
261 cols = rowsAr[i].cells.length;
262
263 cols = cols;
264 rows = rowsAr.length;
265
266 st = dom.parseStyle(dom.getAttrib(elm, "style"));
267 border = trimSize(getStyle(elm, 'border', 'borderWidth'));
268 cellpadding = dom.getAttrib(elm, 'cellpadding', "");
269 cellspacing = dom.getAttrib(elm, 'cellspacing', "");
270 width = trimSize(getStyle(elm, 'width', 'width'));
271 height = trimSize(getStyle(elm, 'height', 'height'));
272 bordercolor = convertRGBToHex(getStyle(elm, 'bordercolor', 'borderLeftColor'));
273 bgcolor = convertRGBToHex(getStyle(elm, 'bgcolor', 'backgroundColor'));
274 align = dom.getAttrib(elm, 'align', align);
275 frame = dom.getAttrib(elm, 'frame');
276 rules = dom.getAttrib(elm, 'rules');
277 className = tinymce.trim(dom.getAttrib(elm, 'class').replace(/mceItem.+/g, ''));
278 id = dom.getAttrib(elm, 'id');
279 summary = dom.getAttrib(elm, 'summary');
280 style = dom.serializeStyle(st);
281 dir = dom.getAttrib(elm, 'dir');
282 lang = dom.getAttrib(elm, 'lang');
283 background = getStyle(elm, 'background', 'backgroundImage').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
284 formObj.caption.checked = elm.getElementsByTagName('caption').length > 0;
285
286 orgTableWidth = width;
287 orgTableHeight = height;
288
289 action = "update";
290 formObj.insert.value = inst.getLang('update');
291 }
292
293 addClassesToList('class', "table_styles");
294 TinyMCE_EditableSelects.init();
295
296 // Update form
297 selectByValue(formObj, 'align', align);
298 selectByValue(formObj, 'frame', frame);
299 selectByValue(formObj, 'rules', rules);
300 selectByValue(formObj, 'class', className, true, true);
301 formObj.cols.value = cols;
302 formObj.rows.value = rows;
303 formObj.border.value = border;
304 formObj.cellpadding.value = cellpadding;
305 formObj.cellspacing.value = cellspacing;
306 formObj.width.value = width;
307 formObj.height.value = height;
308 formObj.bordercolor.value = bordercolor;
309 formObj.bgcolor.value = bgcolor;
310 formObj.id.value = id;
311 formObj.summary.value = summary;
312 formObj.style.value = style;
313 formObj.dir.value = dir;
314 formObj.lang.value = lang;
315 formObj.backgroundimage.value = background;
316
317 updateColor('bordercolor_pick', 'bordercolor');
318 updateColor('bgcolor_pick', 'bgcolor');
319
320 // Resize some elements
321 if (isVisible('backgroundimagebrowser'))
322 document.getElementById('backgroundimage').style.width = '180px';
323
324 // Disable some fields in update mode
325 if (action == "update") {
326 formObj.cols.disabled = true;
327 formObj.rows.disabled = true;
328 }
329}
330
331function changedSize() {
332 var formObj = document.forms[0];
333 var st = dom.parseStyle(formObj.style.value);
334
335/* var width = formObj.width.value;
336 if (width != "")
337 st['width'] = tinyMCEPopup.getParam("inline_styles") ? getCSSSize(width) : "";
338 else
339 st['width'] = "";*/
340
341 var height = formObj.height.value;
342 if (height != "")
343 st['height'] = getCSSSize(height);
344 else
345 st['height'] = "";
346
347 formObj.style.value = dom.serializeStyle(st);
348}
349
350function changedBackgroundImage() {
351 var formObj = document.forms[0];
352 var st = dom.parseStyle(formObj.style.value);
353
354 st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
355
356 formObj.style.value = dom.serializeStyle(st);
357}
358
359function changedBorder() {
360 var formObj = document.forms[0];
361 var st = dom.parseStyle(formObj.style.value);
362
363 // Update border width if the element has a color
364 if (formObj.border.value != "" && formObj.bordercolor.value != "")
365 st['border-width'] = formObj.border.value + "px";
366
367 formObj.style.value = dom.serializeStyle(st);
368}
369
370function changedColor() {
371 var formObj = document.forms[0];
372 var st = dom.parseStyle(formObj.style.value);
373
374 st['background-color'] = formObj.bgcolor.value;
375
376 if (formObj.bordercolor.value != "") {
377 st['border-color'] = formObj.bordercolor.value;
378
379 // Add border-width if it's missing
380 if (!st['border-width'])
381 st['border-width'] = formObj.border.value == "" ? "1px" : formObj.border.value + "px";
382 }
383
384 formObj.style.value = dom.serializeStyle(st);
385}
386
387function changedStyle() {
388 var formObj = document.forms[0];
389 var st = dom.parseStyle(formObj.style.value);
390
391 if (st['background-image'])
392 formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
393 else
394 formObj.backgroundimage.value = '';
395
396 if (st['width'])
397 formObj.width.value = trimSize(st['width']);
398
399 if (st['height'])
400 formObj.height.value = trimSize(st['height']);
401
402 if (st['background-color']) {
403 formObj.bgcolor.value = st['background-color'];
404 updateColor('bgcolor_pick','bgcolor');
405 }
406
407 if (st['border-color']) {
408 formObj.bordercolor.value = st['border-color'];
409 updateColor('bordercolor_pick','bordercolor');
410 }
411}
412
413tinyMCEPopup.onInit.add(init);