Context Navigation

Back to Ticket #2430

Ticket #2430: fck_table.html

File fck_table.html, 15.9 KB (added by Alfonso Martínez de Lizarrondo, 17 years ago)
Previous patch

Line
1	<!--
2	* FCKeditor - The text editor for internet
3	* Copyright (C) 2003-2005 Frederico Caldeira Knabben
4	*
5	* Licensed under the terms of the GNU Lesser General Public License:
6	* http://www.opensource.org/licenses/lgpl-license.php
7	*
8	* For further information visit:
9	* http://www.fckeditor.net/
10	*
11	* "Support Open Source software. What about a donation today?"
12	*
13	* File Name: fck_table.html
14	* Table dialog window.
15	*
16	* File Authors:
17	* Frederico Caldeira Knabben (fredck@fckeditor.net)
18	*
19	* changed on 18 january 2006
20	* by Alfonso Martínez de Lizarrondo (Uritec) (alfonso -at- uritec dot net)
21	* and Koen Willems (kwillems -at- zonnet.nl)
22	* (added THEAD, TH and scope)
23	*
24	-->
25	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
26	<html>
27	<head>
28	<title>Table Properties</title>
29	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
30	<meta name="robots" content="noindex, nofollow" />
31	<script type="text/javascript">
32
33	// proposal of a function that replaces a tag with another one, keeping its contents:
34	// for example TD --> TH, and TH --> TD.
35	// input: the original node, and the new tag name
36	// this should go in fcktools.js
37	// FCKTools.ChangeTagName = function( oNode , newTag )
38	ChangeTagName = function( oNode , newTag )
39	{
40	// Element Node.
41	if (oNode.nodeType != 1) {
42	return null;
43	}
44
45	//the editor document
46	var oDoc = oNode.ownerDocument ;
47	//create the new node
48	var newNode = oDoc.createElement( newTag ) ;
49
50	//copy all attributes
51	var at = oNode.attributes;
52	for( var i=0; i<at.length; i++)
53	{
54	if( at[i] && at[i].nodeValue != "" && at[i].nodeValue != null)
55	{
56	newNode.setAttribute(at[i].nodeName, at[i].nodeValue);
57	}
58	}
59	//move children to the new node
60	while(oNode.firstChild)
61	newNode.appendChild(oNode.firstChild);
62
63	//finally replace the node and return the new one
64	oNode.parentNode.replaceChild(newNode, oNode);
65	return newNode;
66	}
67	// end
68
69
70	var oEditor = window.parent.InnerDialogLoaded() ;
71
72	// Gets the document DOM
73	var oDOM = oEditor.FCK.EditorDocument ;
74
75	// Gets the table if there is one selected.
76	var table ;
77	var e = oEditor.FCKSelection.GetSelectedElement() ;
78
79	if ( ( !e && document.location.search.substr(1) == 'Parent' ) \|\| ( e && e.tagName != 'TABLE' ) )
80	e = oEditor.FCKSelection.MoveToAncestorNode( 'TABLE' ) ;
81
82	if ( e && e.tagName == "TABLE" )
83	table = e ;
84
85	// Fired when the window loading process is finished. It sets the fields with the
86	// actual values if a table is selected in the editor.
87	window.onload = function()
88	{
89	// First of all, translate the dialog box texts
90	oEditor.FCKLanguageManager.TranslatePage(document) ;
91
92	if (table)
93	{
94	document.getElementById('txtRows').value = table.rows.length ;
95	document.getElementById('txtColumns').value = table.rows[0].cells.length ;
96
97	// Gets the value from the Width or the Style attribute
98	var iWidth = (table.style.width ? table.style.width : table.width ) ;
99	var iHeight = (table.style.height ? table.style.height : table.height ) ;
100
101	if (iWidth.indexOf('%') >= 0) // Percentual = %
102	{
103	iWidth = parseInt( iWidth.substr(0,iWidth.length - 1) ) ;
104	document.getElementById('selWidthType').value = "percent" ;
105	}
106	else if (iWidth.indexOf('px') >= 0) // Style Pixel = px
107	{ //
108	iWidth = iWidth.substr(0,iWidth.length - 2);
109	document.getElementById('selWidthType').value = "pixels" ;
110	}
111
112	if (iHeight && iHeight.indexOf('px') >= 0) // Style Pixel = px
113	iHeight = iHeight.substr(0,iHeight.length - 2);
114
115	document.getElementById('txtWidth').value = iWidth ;
116	document.getElementById('txtHeight').value = iHeight ;
117	document.getElementById('txtBorder').value = table.border ;
118	document.getElementById('selAlignment').value = table.align ;
119	document.getElementById('txtCellPadding').value = table.cellPadding ;
120	document.getElementById('txtCellSpacing').value = table.cellSpacing ;
121	document.getElementById('txtSummary').value = table.summary;
122	// document.getElementById('cmbFontStyle').value = table.className ;
123
124	if (table.caption) document.getElementById('txtCaption').value = table.caption.innerHTML ;
125
126	// check if the table contains <thead>
127	if(table.tHead)
128	{
129	document.getElementById('chkThead').checked = 'checked' ;
130	}
131	// end check
132
133	// check if all the first cells in every row are TH
134	document.getElementById('HeaderCol').value = 1 ;
135	document.getElementById('chkFirstColTh').checked = 'checked' ;
136	for(var row=0; row<table.rows.length; row++)
137	{
138	//if just one cell isn't a TH then it isn't a header column
139	if (table.rows[row].cells[0].nodeName!='TH')
140	{
141	document.getElementById('chkFirstColTh').checked = '' ;
142	document.getElementById('HeaderCol').value = 0 ;
143
144	break;
145	}
146	}
147	// end check
148
149	document.getElementById('txtRows').disabled = true ;
150	document.getElementById('txtColumns').disabled = true ;
151	}
152
153	window.parent.SetOkButton( true ) ;
154	window.parent.SetAutoSize( true ) ;
155	}
156
157	// Fired when the user press the OK button
158	function Ok()
159	{
160	var bExists = ( table != null ) ;
161
162	if ( ! bExists )
163	{
164	table = document.createElement( "TABLE" ) ;
165	}
166
167	// Removes the Width and Height styles
168	if ( bExists && table.style.width ) table.style.width = null ; //.removeAttribute("width") ;
169	if ( bExists && table.style.height ) table.style.height = null ; //.removeAttribute("height") ;
170
171	table.width = document.getElementById('txtWidth').value + ( document.getElementById('selWidthType').value == "percent" ? "%" : "") ;
172	table.height = document.getElementById('txtHeight').value ;
173	table.border = document.getElementById('txtBorder').value ;
174	table.align = document.getElementById('selAlignment').value ;
175	table.cellPadding = document.getElementById('txtCellPadding').value ;
176	table.cellSpacing = document.getElementById('txtCellSpacing').value ;
177	table.summary = document.getElementById('txtSummary').value ;
178	// table.className = cmbFontStyle.value ;
179
180	if ( document.getElementById('txtCaption').value != '')
181	{
182	if (! table.caption) table.createCaption() ;
183	table.caption.innerHTML = document.getElementById('txtCaption').value ;
184	}
185	else if ( bExists && table.caption )
186	{
187	if ( document.all )
188	table.caption.innerHTML = '' ; // TODO: It causes an IE internal error if using removeChild.
189	else
190	table.caption.parentNode.removeChild( table.caption ) ;
191	}
192
193	// should we make a <thead>?
194	if ( bExists && (table.tHead==null) && document.getElementById('chkThead').checked)
195	{
196	var oThead = table.createTHead() ;
197	var tbody=table.firstChild;
198	while (tbody.nodeName!='TBODY') {
199	tbody=tbody.nextSibling;
200	}
201	var theRow=tbody.firstChild;
202	while(theRow.nodeName != 'TR') {
203	theRow=theRow.nextSibling;
204	}
205	//now change TD to TH:
206	for (var i = 0; i<theRow.childNodes.length ; i++) {
207	var th=ChangeTagName(theRow.childNodes[i], 'TH');
208	if (th != null) th.scope='col';
209	}
210	oThead.appendChild(theRow);
211
212	}
213	if ( bExists && (table.tHead!=null) && !document.getElementById('chkThead').checked)
214	{
215	// move the row out of the THead and put it in the TBody:
216	var tHead=table.tHead;
217	var tbody=table.firstChild;
218	while (tbody.nodeName!='TBODY') {
219	tbody=tbody.nextSibling;
220	}
221	var previousFirstRow=tbody.firstChild;
222	while(tHead.firstChild) {
223	var theRow=tHead.firstChild;
224	for (var i = 0; i<theRow.childNodes.length ; i++) {
225	var newCell=ChangeTagName(theRow.childNodes[i], 'TD');
226	if (newCell != null) newCell.removeAttribute('scope');
227	}
228	tbody.insertBefore(theRow, previousFirstRow);
229	}
230	table.removeChild(tHead);
231	}
232
233	// should we make all first cells in a row TH?
234	if ( bExists && (document.getElementById('HeaderCol').value == 0) && document.getElementById('chkFirstColTh').checked)
235	{
236	for(var row=0; row<table.rows.length; row++)
237	{
238	var newCell = ChangeTagName(table.rows[row].cells[0], 'TH')
239	if (newCell != null) newCell.scope='col';
240	}
241	}
242
243	// should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)
244	if ( bExists && (document.getElementById('HeaderCol').value == 1) && !document.getElementById('chkFirstColTh').checked)
245	{
246	for(var row=0; row<table.rows.length; row++)
247	{
248	var newCell = ChangeTagName(table.rows[row].cells[0], 'TD')
249	if (newCell != null) newCell.removeAttribute('scope');
250	}
251	}
252
253	if (! bExists)
254	{
255	var bThead = 0;
256	if(document.getElementById('chkThead').checked) // should we make a <thead> ?
257	{
258	bThead = 1;
259	var oThead = table.createTHead() ;
260	var oRow = table.insertRow(-1) ;
261	oThead.appendChild(oRow);
262
263	var iCols = document.getElementById('txtColumns').value ;
264	for ( var c = 0 ; c < iCols ; c++ )
265	{
266	var oThcell = document.createElement("TH") ; // thanx to Alfonso!
267	oThcell.scope = 'col' ;
268	oRow.appendChild(oThcell) ;
269	if ( oEditor.FCKBrowserInfo.IsGecko )
270	oThcell.innerHTML = '<br _moz_editor_bogus_node="TRUE">' ;
271	}
272	}
273
274	var oTbody = document.createElement("TBODY") ; // make TBODY
275	table.appendChild(oTbody) ;
276
277	var iRows = document.getElementById('txtRows').value ;
278	var iCols = document.getElementById('txtColumns').value ;
279
280	for ( var r = 0 ; r < iRows - bThead; r++ ) // iRow minus bThead (which can be 0 or 1), because we use 1 row in THEAD (if we have one)
281	{
282	var oRow = document.createElement("TR") ;
283	oTbody.appendChild(oRow) ;
284
285	for ( var c = 0 ; c < iCols ; c++ )
286	{
287	if(c == 0 && document.getElementById('chkFirstColTh').checked)
288	{
289	var oThcell = document.createElement("TH") ; // thanx to Alfonso!
290	oThcell.scope = 'row' ;
291	oThcell.innerHTML = " " ;
292	oRow.appendChild(oThcell) ;
293	}
294	else
295	{
296	var oCell = document.createElement("TD")
297	oRow.appendChild(oCell) ;
298	if ( oEditor.FCKBrowserInfo.IsGecko )
299	oCell.innerHTML = '<br _moz_editor_bogus_node="TRUE">' ;
300	//oCell.innerHTML = " " ;
301	}
302	}
303	}
304
305	oEditor.FCKUndo.SaveUndoStep() ;
306
307	// START iCM MODIFICATIONS
308	// Amended to ensure that newly inserted tables are not incorrectly nested in P tags, etc
309	// We insert the table first and then rectify any nestings afterwards so we can re-use the
310	// FCKTablesProcessor function that corrects tables on SetHTML()
311	/*
312	table = oEditor.FCK.InsertElementAndGetIt( table ) ;
313	if ( !oEditor.FCKConfig.UseBROnCarriageReturn )
314	{
315	oEditor.FCKTablesProcessor.CheckTableNesting( table ) ;
316	}
317	*/
318	// END iCM MODIFICATIONS
319
320	oEditor.FCK.InsertElement( table ) ;
321	}
322
323	return true ;
324	}
325
326	function IsDigit( e )
327	{
328	e = e \|\| event ;
329	var iCode = ( e.keyCode \|\| e.charCode ) ;
330	return
331	(
332	( iCode >= 48 && iCode <= 57 ) // Numbers
333	\|\| (iCode >= 37 && iCode <= 40) // Arrows
334	\|\| iCode == 8 // Backspace
335	\|\| iCode == 46 // Delete
336	) ;
337	}
338
339	</script>
340	</head>
341	<body bottommargin="5" leftmargin="5" topmargin="5" rightmargin="5" scroll="no" style="OVERFLOW: hidden">
342	<table id="otable" cellSpacing="0" cellPadding="0" width="100%" border="0" height="100%">
343	<tr>
344	<td>
345	<table cellSpacing="1" cellPadding="1" width="100%" border="0">
346	<tr>
347	<td valign="top">
348	<table cellSpacing="0" cellPadding="0" border="0">
349	<tr>
350	<td><span fckLang="DlgTableRows">Rows</span>:</td>
351	<td> <input id="txtRows" type="text" maxLength="3" size="2" value="3" name="txtRows" onkeypress="return IsDigit(event);"></td>
352	</tr>
353	<tr>
354	<td><span fckLang="DlgTableColumns">Columns</span>:</td>
355	<td> <input id="txtColumns" type="text" maxLength="2" size="2" value="2" name="txtColumns" onkeypress="return IsDigit(event);"></td>
356	</tr>
357	<tr>
358	<!-- added these two lines -->
359	<td><span fckLang="DlgThead">Table Header</span>:</td>
360	<td><input id="chkThead" type="checkbox" name="chkThead"></td>
361	<!-- end addition -->
362	</tr>
363	<!-- added these four lines -->
364	<tr>
365	<td><span fckLang="DlgFirstColTh">first column th</span>:</td>
366	<td><input id="chkFirstColTh" type="checkbox" name="chkFirstColTh"><input type="hidden" name="HeaderCol" id="HeaderCol" value="0" /></td>
367	</tr>
368	<!-- end addition -->
369	<tr>
370	<td><span fckLang="DlgTableBorder">Border size</span>:</td>
371	<td> <INPUT id="txtBorder" type="text" maxLength="2" size="2" value="1" name="txtBorder" onkeypress="return IsDigit(event);"></td>
372	</tr>
373	<tr>
374	<td><span fckLang="DlgTableAlign">Alignment</span>:</td>
375	<td> <select id="selAlignment" name="selAlignment">
376	<option fckLang="DlgTableAlignNotSet" value="" selected><Not set></option>
377	<option fckLang="DlgTableAlignLeft" value="left">Left</option>
378	<option fckLang="DlgTableAlignCenter" value="center">Center</option>
379	<option fckLang="DlgTableAlignRight" value="right">Right</option>
380	</select></td>
381	</tr>
382	</table>
383	</td>
384	<td>   </td>
385	<td align="right" valign="top">
386	<table cellSpacing="0" cellPadding="0" border="0">
387	<tr>
388	<td><span fckLang="DlgTableWidth">Width</span>:</td>
389	<td> <input id="txtWidth" type="text" maxLength="4" size="3" value="200" name="txtWidth" onkeypress="return IsDigit(event);"></td>
390	<td> <select id="selWidthType" name="selWidthType">
391	<option fckLang="DlgTableWidthPx" value="pixels" selected>pixels</option>
392	<option fckLang="DlgTableWidthPc" value="percent">percent</option>
393	</select></td>
394	</tr>
395	<tr>
396	<td><span fckLang="DlgTableHeight">Height</span>:</td>
397	<td> <INPUT id="txtHeight" type="text" maxLength="4" size="3" name="txtHeight" onkeypress="return IsDigit(event);"></td>
398	<td> <span fckLang="DlgTableWidthPx">pixels</span></td>
399	</tr>
400	<tr>
401	<td> </td>
402	<td> </td>
403	<td> </td>
404	</tr>
405	<!-- added these two lines -->
406	<tr>
407	<td> </td>
408	<td> </td>
409	<td> </td>
410	</tr>
411	<!-- end addition -->
412
413	<tr>
414	<td nowrap><span fckLang="DlgTableCellSpace">Cell spacing</span>:</td>
415	<td> <input id="txtCellSpacing" type="text" maxLength="2" size="2" value="1" name="txtCellSpacing"
416	onkeypress="return IsDigit(event);"></td>
417	<td> </td>
418	</tr>
419	<tr>
420	<td nowrap><span fckLang="DlgTableCellPad">Cell padding</span>:</td>
421	<td> <input id="txtCellPadding" type="text" maxLength="2" size="2" value="1" name="txtCellPadding"
422	onkeypress="return IsDigit(event);"></td>
423	<td> </td>
424	</tr>
425	</table>
426	</td>
427	</tr>
428	</table>
429	<table cellSpacing="0" cellPadding="0" width="100%" border="0">
430	<!--
431	<tr>
432	<td nowrap>
433	<span fcklang="DlgClassName">Class Name</span>:</td>
434	<td> </td>
435	<td>
436	<script type="text/javascript">
437	// var tbstyles = new TBCombo( "FontStyle" , "null" , "", oEditor.config.StyleNames, oEditor.config.StyleValues, 'CheckStyle("cmbFontStyle")');
438	// document.write(tbstyles.GetHTML());
439	</script></td>
440	</tr>
441	-->
442	<tr>
443	<td nowrap><span fckLang="DlgTableCaption">Caption</span>:</td>
444	<td> </td>
445	<td width="100%" nowrap>
446	<input id="txtCaption" type="text" style="WIDTH: 100%"></td>
447	</tr>
448	<tr>
449	<td nowrap><span fckLang="DlgTableSummary">Summary</span>:</td>
450	<td> </td>
451	<td width="100%" nowrap>
452	<input id="txtSummary" type="text" style="WIDTH: 100%"></td>
453	</tr>
454	</table>
455	</td>
456	</tr>
457	</table>
458	</body>
459	</html>
460
461

Download in other formats:

Original Format