← Back to branch summary

~kosova/+junk/tuxfamily-twiki

« back to all changes in this revision

Viewing changes to foswiki/pub/System/TinyMCEPlugin/tinymce/jscripts/tiny_mce/plugins/table/jscripts/cell.js

  • Committer: James Michael DuPont
  • Date: 2009-07-18 19:58:49 UTC
  • Revision ID: jamesmikedupont@gmail.com-20090718195849-vgbmaht2ys791uo2
added foswiki

Show diffs side-by-side

added added

removed removed

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