Ticket #2430: fck_table.html

File fck_table.html, 15.9 KB (added by Alfonso Martínez de Lizarrondo, 9 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 )
38ChangeTagName = 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
70var oEditor = window.parent.InnerDialogLoaded() ;
71
72// Gets the document DOM
73var oDOM = oEditor.FCK.EditorDocument ;
74
75// Gets the table if there is one selected.
76var table ;
77var e = oEditor.FCKSelection.GetSelectedElement() ;
78
79if ( ( !e && document.location.search.substr(1) == 'Parent' ) || ( e && e.tagName != 'TABLE' ) )
80        e = oEditor.FCKSelection.MoveToAncestorNode( 'TABLE' ) ;
81
82if ( 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.
87window.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
158function 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 = "&nbsp;" ;
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 = "&nbsp;" ;
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
326function 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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<select id="selAlignment" name="selAlignment">
376                                                                                                <option fckLang="DlgTableAlignNotSet" value="" selected>&lt;Not set&gt;</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>&nbsp;&nbsp;&nbsp;</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>&nbsp;<input id="txtWidth" type="text" maxLength="4" size="3" value="200" name="txtWidth" onkeypress="return IsDigit(event);"></td>
390                                                                                <td>&nbsp;<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>&nbsp;<INPUT id="txtHeight" type="text" maxLength="4" size="3" name="txtHeight" onkeypress="return IsDigit(event);"></td>
398                                                                                <td>&nbsp;<span fckLang="DlgTableWidthPx">pixels</span></td>
399                                                                        </tr>
400                                                                        <tr>
401                                                                                <td>&nbsp;</td>
402                                                                                <td>&nbsp;</td>
403                                                                                <td>&nbsp;</td>
404                                                                        </tr>
405                                                                        <!-- added these two lines -->
406                                                                        <tr>
407                                                                                <td>&nbsp;</td>
408                                                                                <td>&nbsp;</td>
409                                                                                <td>&nbsp;</td>
410                                                                        </tr>
411                                                                        <!-- end addition -->
412
413                                                                        <tr>
414                                                                                <td nowrap><span fckLang="DlgTableCellSpace">Cell spacing</span>:</td>
415                                                                                <td>&nbsp;<input id="txtCellSpacing" type="text" maxLength="2" size="2" value="1" name="txtCellSpacing"
416                                                                                                onkeypress="return IsDigit(event);"></td>
417                                                                                <td>&nbsp;</td>
418                                                                        </tr>
419                                                                        <tr>
420                                                                                <td nowrap><span fckLang="DlgTableCellPad">Cell padding</span>:</td>
421                                                                                <td>&nbsp;<input id="txtCellPadding" type="text" maxLength="2" size="2" value="1" name="txtCellPadding"
422                                                                                                onkeypress="return IsDigit(event);"></td>
423                                                                                <td>&nbsp;</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>&nbsp;</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>&nbsp;</td>
445                                                        <td width="100%" nowrap>&nbsp;
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>&nbsp;</td>
451                                                        <td width="100%" nowrap>&nbsp;
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                 
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy