httemplate/elements/fckeditor/editor/dialog/fck_table.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >\r
   2 <!--\r
   3  * FCKeditor - The text editor for Internet - http://www.fckeditor.net\r
   4  * Copyright (C) 2003-2010 Frederico Caldeira Knabben\r
   5  *\r
   6  * == BEGIN LICENSE ==\r
   7  *\r
   8  * Licensed under the terms of any of the following licenses at your\r
   9  * choice:\r
  10  *\r
  11  *  - GNU General Public License Version 2 or later (the "GPL")\r
  12  *    http://www.gnu.org/licenses/gpl.html\r
  13  *\r
  14  *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")\r
  15  *    http://www.gnu.org/licenses/lgpl.html\r
  16  *\r
  17  *  - Mozilla Public License Version 1.1 or later (the "MPL")\r
  18  *    http://www.mozilla.org/MPL/MPL-1.1.html\r
  19  *\r
  20  * == END LICENSE ==\r
  21  *\r
  22  * Table dialog window.\r
  23 -->\r
  24 <html xmlns="http://www.w3.org/1999/xhtml">\r
  25 <head>\r
  26         <title>Table Properties</title>\r
  27         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
  28         <meta name="robots" content="noindex, nofollow" />\r
  29         <script src="common/fck_dialog_common.js" type="text/javascript"></script>\r
  30         <script type="text/javascript">\r
  31 \r
  32 var dialog      = window.parent ;\r
  33 var oEditor = dialog.InnerDialogLoaded() ;\r
  34 \r
  35 var FCKDomTools = oEditor.FCKDomTools ;\r
  36 \r
  37 // Gets the table if there is one selected.\r
  38 var table ;\r
  39 var e = dialog.Selection.GetSelectedElement() ;\r
  40 var hasColumnHeaders ;\r
  41 \r
  42 if ( ( !e && document.location.search.substr(1) == 'Parent' ) || ( e && e.tagName != 'TABLE' ) )\r
  43         e = oEditor.FCKSelection.MoveToAncestorNode( 'TABLE' ) ;\r
  44 \r
  45 if ( e && e.tagName == "TABLE" )\r
  46         table = e ;\r
  47 \r
  48 // Fired when the window loading process is finished. It sets the fields with the\r
  49 // actual values if a table is selected in the editor.\r
  50 window.onload = function()\r
  51 {\r
  52         // First of all, translate the dialog box texts\r
  53         oEditor.FCKLanguageManager.TranslatePage(document) ;\r
  54 \r
  55         if (table)\r
  56         {\r
  57                 document.getElementById('txtRows').value    = table.rows.length ;\r
  58                 document.getElementById('txtColumns').value = table.rows[0].cells.length ;\r
  59 \r
  60                 // Gets the value from the Width or the Style attribute\r
  61                 var iWidth  = (table.style.width  ? table.style.width  : table.width ) ;\r
  62                 var iHeight = (table.style.height ? table.style.height : table.height ) ;\r
  63 \r
  64                 if (iWidth.indexOf('%') >= 0)                   // Percentual = %\r
  65                 {\r
  66                         iWidth = parseInt( iWidth.substr(0,iWidth.length - 1), 10 ) ;\r
  67                         document.getElementById('selWidthType').value = "percent" ;\r
  68                 }\r
  69                 else if (iWidth.indexOf('px') >= 0)             // Style Pixel = px\r
  70                 {                                                                                                                                                                                                                 //\r
  71                         iWidth = iWidth.substr(0,iWidth.length - 2);\r
  72                         document.getElementById('selWidthType').value = "pixels" ;\r
  73                 }\r
  74 \r
  75                 if (iHeight && iHeight.indexOf('px') >= 0)              // Style Pixel = px\r
  76                         iHeight = iHeight.substr(0,iHeight.length - 2);\r
  77 \r
  78                 document.getElementById('txtWidth').value               = iWidth || '' ;\r
  79                 document.getElementById('txtHeight').value              = iHeight || '' ;\r
  80                 document.getElementById('txtBorder').value              = GetAttribute( table, 'border', '' ) ;\r
  81                 document.getElementById('selAlignment').value   = GetAttribute( table, 'align', '' ) ;\r
  82                 document.getElementById('txtCellPadding').value = GetAttribute( table, 'cellPadding', '' ) ;\r
  83                 document.getElementById('txtCellSpacing').value = GetAttribute( table, 'cellSpacing', '' ) ;\r
  84                 document.getElementById('txtSummary').value     = GetAttribute( table, 'summary', '' ) ;\r
  85 //              document.getElementById('cmbFontStyle').value   = table.className ;\r
  86 \r
  87                 var eCaption = oEditor.FCKDomTools.GetFirstChild( table, 'CAPTION' ) ;\r
  88                 if ( eCaption ) document.getElementById('txtCaption').value = eCaption.innerHTML ;\r
  89 \r
  90                 hasColumnHeaders = true ;\r
  91                 // Check if all the first cells in every row are TH\r
  92                 for (var row=0; row<table.rows.length; row++)\r
  93                 {\r
  94                         // If just one cell isn't a TH then it isn't a header column\r
  95                         if ( table.rows[row].cells[0].nodeName != 'TH' )\r
  96                         {\r
  97                                 hasColumnHeaders = false ;\r
  98 \r
  99                                 break;\r
 100                         }\r
 101                 }\r
 102 \r
 103                 // Check if the table contains <thead>\r
 104                 if ((table.tHead !== null) )\r
 105                 {\r
 106                         if (hasColumnHeaders)\r
 107                                 GetE('selHeaders').value = 'both' ;\r
 108                         else\r
 109                                 GetE('selHeaders').value = 'row' ;\r
 110                 }\r
 111                 else\r
 112                 {\r
 113                         if (hasColumnHeaders)\r
 114                                 GetE('selHeaders').value = 'col' ;\r
 115                         else\r
 116                                 GetE('selHeaders').value = '' ;\r
 117                 }\r
 118 \r
 119 \r
 120                 document.getElementById('txtRows').disabled    = true ;\r
 121                 document.getElementById('txtColumns').disabled = true ;\r
 122                 SelectField( 'txtWidth' ) ;\r
 123         }\r
 124         else\r
 125                 SelectField( 'txtRows' ) ;\r
 126 \r
 127         dialog.SetOkButton( true ) ;\r
 128         dialog.SetAutoSize( true ) ;\r
 129 }\r
 130 \r
 131 // Fired when the user press the OK button\r
 132 function Ok()\r
 133 {\r
 134         var bExists = ( table != null ) ;\r
 135 \r
 136         var oDoc = oEditor.FCK.EditorDocument ;\r
 137         oEditor.FCKUndo.SaveUndoStep() ;\r
 138 \r
 139         if ( ! bExists )\r
 140                 table = oDoc.createElement( "TABLE" ) ;\r
 141 \r
 142         // Removes the Width and Height styles\r
 143         if ( bExists && table.style.width )             table.style.width = null ; //.removeAttribute("width") ;\r
 144         if ( bExists && table.style.height )    table.style.height = null ; //.removeAttribute("height") ;\r
 145 \r
 146         var sWidth = GetE('txtWidth').value ;\r
 147         if ( sWidth.length > 0 && GetE('selWidthType').value == 'percent' )\r
 148                 sWidth += '%' ;\r
 149 \r
 150         SetAttribute( table, 'width'            , sWidth ) ;\r
 151         SetAttribute( table, 'height'           , GetE('txtHeight').value ) ;\r
 152         SetAttribute( table, 'border'           , GetE('txtBorder').value ) ;\r
 153         SetAttribute( table, 'align'            , GetE('selAlignment').value ) ;\r
 154         SetAttribute( table, 'cellPadding'      , GetE('txtCellPadding').value ) ;\r
 155         SetAttribute( table, 'cellSpacing'      , GetE('txtCellSpacing').value ) ;\r
 156         SetAttribute( table, 'summary'          , GetE('txtSummary').value ) ;\r
 157 \r
 158         var headers = GetE('selHeaders').value ;\r
 159         if ( bExists )\r
 160         {\r
 161                 // Should we make a <thead>?\r
 162                 if ( table.tHead==null && (headers=='row' || headers=='both') )\r
 163                 {\r
 164                         var oThead = table.createTHead() ;\r
 165                         var tbody = FCKDomTools.GetFirstChild( table, 'TBODY' ) ;\r
 166                         var theRow= FCKDomTools.GetFirstChild( tbody, 'TR' ) ;\r
 167 \r
 168                         //now change TD to TH:\r
 169                         for (var i = 0; i<theRow.childNodes.length ; i++)\r
 170                         {\r
 171                                 var th = RenameNode(theRow.childNodes[i], 'TH') ;\r
 172                                 if (th != null)\r
 173                                         th.scope='col' ;\r
 174                         }\r
 175                         oThead.appendChild( theRow ) ;\r
 176                 }\r
 177 \r
 178                 if ( table.tHead!==null && !(headers=='row' || headers=='both') )\r
 179                 {\r
 180                         // Move the row out of the THead and put it in the TBody:\r
 181                         var tHead = table.tHead ;\r
 182                         var tbody = FCKDomTools.GetFirstChild( table, 'TBODY' ) ;\r
 183 \r
 184                         var previousFirstRow = tbody.firstChild ;\r
 185                         while ( tHead.firstChild )\r
 186                         {\r
 187                                 var theRow = tHead.firstChild ;\r
 188                                 for (var i = 0; i < theRow.childNodes.length ; i++ )\r
 189                                 {\r
 190                                         var newCell = RenameNode( theRow.childNodes[i], 'TD' ) ;\r
 191                                         if ( newCell != null )\r
 192                                                 newCell.removeAttribute( 'scope' ) ;\r
 193                                 }\r
 194                                 tbody.insertBefore( theRow, previousFirstRow ) ;\r
 195                         }\r
 196                         table.removeChild( tHead ) ;\r
 197                 }\r
 198 \r
 199                 // Should we make all first cells in a row TH?\r
 200                 if ( (!hasColumnHeaders)  && (headers=='col' || headers=='both') )\r
 201                 {\r
 202                         for( var row=0 ; row < table.rows.length ; row++ )\r
 203                         {\r
 204                                 var newCell = RenameNode(table.rows[row].cells[0], 'TH') ;\r
 205                                 if ( newCell != null )\r
 206                                         newCell.scope = 'row' ;\r
 207                         }\r
 208                 }\r
 209 \r
 210                 // Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)\r
 211                 if ( (hasColumnHeaders)  && !(headers=='col' || headers=='both') )\r
 212                 {\r
 213                         for( var row=0 ; row < table.rows.length ; row++ )\r
 214                         {\r
 215                                 var oRow = table.rows[row] ;\r
 216                                 if ( oRow.parentNode.nodeName == 'TBODY' )\r
 217                                 {\r
 218                                         var newCell = RenameNode(oRow.cells[0], 'TD') ;\r
 219                                         if (newCell != null)\r
 220                                                 newCell.removeAttribute( 'scope' ) ;\r
 221                                 }\r
 222                         }\r
 223                 }\r
 224         }\r
 225 \r
 226         if (! bExists)\r
 227         {\r
 228                 var iRows = GetE('txtRows').value ;\r
 229                 var iCols = GetE('txtColumns').value ;\r
 230 \r
 231                 var startRow = 0 ;\r
 232                 // Should we make a <thead> ?\r
 233                 if (headers=='row' || headers=='both')\r
 234                 {\r
 235                         startRow++ ;\r
 236                         var oThead = table.createTHead() ;\r
 237                         var oRow = table.insertRow(-1) ;\r
 238                         oThead.appendChild(oRow);\r
 239 \r
 240                         for ( var c = 0 ; c < iCols ; c++ )\r
 241                         {\r
 242                                 var oThcell = oDoc.createElement( 'TH' ) ;\r
 243                                 oThcell.scope = 'col' ;\r
 244                                 oRow.appendChild( oThcell ) ;\r
 245                                 if ( oEditor.FCKBrowserInfo.IsGeckoLike )\r
 246                                         oEditor.FCKTools.AppendBogusBr( oThcell ) ;\r
 247                         }\r
 248                 }\r
 249 \r
 250                 // Opera automatically creates a tbody when a thead has been added\r
 251                 var oTbody = FCKDomTools.GetFirstChild( table, 'TBODY' ) ;\r
 252                 if ( !oTbody )\r
 253                 {\r
 254                         // make TBODY if it doesn't exist\r
 255                         oTbody = oDoc.createElement( 'TBODY' ) ;\r
 256                         table.appendChild( oTbody ) ;\r
 257                 }\r
 258                 for ( var r = startRow ; r < iRows; r++ )\r
 259                 {\r
 260                         var oRow = oDoc.createElement( 'TR' ) ;\r
 261                         oTbody.appendChild(oRow) ;\r
 262 \r
 263                         var startCol = 0 ;\r
 264                         // Is the first column a header?\r
 265                         if (headers=='col' || headers=='both')\r
 266                         {\r
 267                                 var oThcell = oDoc.createElement( 'TH' ) ;\r
 268                                 oThcell.scope = 'row' ;\r
 269                                 oRow.appendChild( oThcell ) ;\r
 270                                 if ( oEditor.FCKBrowserInfo.IsGeckoLike )\r
 271                                         oEditor.FCKTools.AppendBogusBr( oThcell ) ;\r
 272 \r
 273                                 startCol++ ;\r
 274                         }\r
 275                         for ( var c = startCol ; c < iCols ; c++ )\r
 276                         {\r
 277                                 // IE will leave the TH at the end of the row if we use now oRow.insertCell(-1)\r
 278                                 var oCell = oDoc.createElement( 'TD' ) ;\r
 279                                 oRow.appendChild( oCell ) ;\r
 280                                 if ( oEditor.FCKBrowserInfo.IsGeckoLike )\r
 281                                         oEditor.FCKTools.AppendBogusBr( oCell ) ;\r
 282                         }\r
 283                 }\r
 284 \r
 285                 oEditor.FCK.InsertElement( table ) ;\r
 286         }\r
 287 \r
 288         var eCaption = oEditor.FCKDomTools.GetFirstChild( table, 'CAPTION' ) ;\r
 289 \r
 290         if ( eCaption && !oEditor.FCKBrowserInfo.IsIE )\r
 291                 eCaption.parentNode.removeChild( eCaption ) ;\r
 292 \r
 293         if ( document.getElementById('txtCaption').value != '' )\r
 294         {\r
 295                 if ( !eCaption || !oEditor.FCKBrowserInfo.IsIE )\r
 296                 {\r
 297                         eCaption = oDoc.createElement( 'CAPTION' ) ;\r
 298                         table.insertBefore( eCaption, table.firstChild ) ;\r
 299                 }\r
 300 \r
 301                 eCaption.innerHTML = document.getElementById('txtCaption').value ;\r
 302         }\r
 303         else if ( bExists && eCaption )\r
 304         {\r
 305                 // TODO: It causes an IE internal error if using removeChild or\r
 306                 // table.deleteCaption() (see #505).\r
 307                 if ( oEditor.FCKBrowserInfo.IsIE )\r
 308                         eCaption.innerHTML = '' ;\r
 309         }\r
 310 \r
 311         return true ;\r
 312 }\r
 313 \r
 314         </script>\r
 315 </head>\r
 316 <body style="overflow: hidden">\r
 317         <table id="otable" cellspacing="0" cellpadding="0" width="100%" border="0" style="height: 100%">\r
 318                 <tr>\r
 319                         <td>\r
 320                                 <table cellspacing="1" cellpadding="1" width="100%" border="0">\r
 321                                         <tr>\r
 322                                                 <td valign="top">\r
 323                                                         <table cellspacing="1" cellpadding="0" border="0">\r
 324                                                                 <tr>\r
 325                                                                         <td>\r
 326                                                                                 <span fcklang="DlgTableRows">Rows</span>:</td>\r
 327                                                                         <td>\r
 328                                                                                 &nbsp;<input id="txtRows" type="text" maxlength="3" size="2" value="3"\r
 329                                                                                         onkeypress="return IsDigit(event);" /></td>\r
 330                                                                 </tr>\r
 331                                                                 <tr>\r
 332                                                                         <td>\r
 333                                                                                 <span fcklang="DlgTableColumns">Columns</span>:</td>\r
 334                                                                         <td>\r
 335                                                                                 &nbsp;<input id="txtColumns" type="text" maxlength="2" size="2" value="2"\r
 336                                                                                         onkeypress="return IsDigit(event);" /></td>\r
 337                                                                 </tr>\r
 338                                                                 <tr>\r
 339                                                                         <td><span fcklang="DlgTableHeaders">Headers</span>:</td>\r
 340                                                                         <td>\r
 341                                                                                 &nbsp;<select id="selHeaders">\r
 342                                                                                         <option fcklang="DlgTableHeadersNone" value="">None</option>\r
 343                                                                                         <option fcklang="DlgTableHeadersRow" value="row">First row</option>\r
 344                                                                                         <option fcklang="DlgTableHeadersColumn" value="col">First column</option>\r
 345                                                                                         <option fcklang="DlgTableHeadersBoth" value="both">Both</option>\r
 346                                                                                 </select>\r
 347                                                                         </td>\r
 348                                                                 </tr>\r
 349                                                                 <tr>\r
 350                                                                         <td>\r
 351                                                                                 <span fcklang="DlgTableBorder">Border size</span>:</td>\r
 352                                                                         <td>\r
 353                                                                                 &nbsp;<input id="txtBorder" type="text" maxlength="2" size="2" value="1"\r
 354                                                                                         onkeypress="return IsDigit(event);" /></td>\r
 355                                                                 </tr>\r
 356                                                                 <tr>\r
 357                                                                         <td>\r
 358                                                                                 <span fcklang="DlgTableAlign">Alignment</span>:</td>\r
 359                                                                         <td>\r
 360                                                                                 &nbsp;<select id="selAlignment">\r
 361                                                                                         <option fcklang="DlgTableAlignNotSet" value="" selected="selected">&lt;Not set&gt;</option>\r
 362                                                                                         <option fcklang="DlgTableAlignLeft" value="left">Left</option>\r
 363                                                                                         <option fcklang="DlgTableAlignCenter" value="center">Center</option>\r
 364                                                                                         <option fcklang="DlgTableAlignRight" value="right">Right</option>\r
 365                                                                                 </select></td>\r
 366                                                                 </tr>\r
 367                                                         </table>\r
 368                                                 </td>\r
 369                                                 <td>\r
 370                                                         &nbsp;&nbsp;&nbsp;</td>\r
 371                                                 <td align="right" valign="top">\r
 372                                                         <table cellspacing="0" cellpadding="0" border="0">\r
 373                                                                 <tr>\r
 374                                                                         <td>\r
 375                                                                                 <span fcklang="DlgTableWidth">Width</span>:</td>\r
 376                                                                         <td>\r
 377                                                                                 &nbsp;<input id="txtWidth" type="text" maxlength="4" size="3" value="200"\r
 378                                                                                         onkeypress="return IsDigit(event);" /></td>\r
 379                                                                         <td>\r
 380                                                                                 &nbsp;<select id="selWidthType">\r
 381                                                                                         <option fcklang="DlgTableWidthPx" value="pixels" selected="selected">pixels</option>\r
 382                                                                                         <option fcklang="DlgTableWidthPc" value="percent">percent</option>\r
 383                                                                                 </select></td>\r
 384                                                                 </tr>\r
 385                                                                 <tr>\r
 386                                                                         <td>\r
 387                                                                                 <span fcklang="DlgTableHeight">Height</span>:</td>\r
 388                                                                         <td>\r
 389                                                                                 &nbsp;<input id="txtHeight" type="text" maxlength="4" size="3" onkeypress="return IsDigit(event);" /></td>\r
 390                                                                         <td>\r
 391                                                                                 &nbsp;<span fcklang="DlgTableWidthPx">pixels</span></td>\r
 392                                                                 </tr>\r
 393                                                                 <tr>\r
 394                                                                         <td colspan="3">&nbsp;</td>\r
 395                                                                 </tr>\r
 396                                                                 <tr>\r
 397                                                                         <td nowrap="nowrap">\r
 398                                                                                 <span fcklang="DlgTableCellSpace">Cell spacing</span>:</td>\r
 399                                                                         <td>\r
 400                                                                                 &nbsp;<input id="txtCellSpacing" type="text" maxlength="2" size="2" value="1"\r
 401                                                                                         onkeypress="return IsDigit(event);" /></td>\r
 402                                                                         <td>\r
 403                                                                                 &nbsp;</td>\r
 404                                                                 </tr>\r
 405                                                                 <tr>\r
 406                                                                         <td nowrap="nowrap">\r
 407                                                                                 <span fcklang="DlgTableCellPad">Cell padding</span>:</td>\r
 408                                                                         <td>\r
 409                                                                                 &nbsp;<input id="txtCellPadding" type="text" maxlength="2" size="2" value="1"\r
 410                                                                                         onkeypress="return IsDigit(event);" /></td>\r
 411                                                                         <td>\r
 412                                                                                 &nbsp;</td>\r
 413                                                                 </tr>\r
 414                                                         </table>\r
 415                                                 </td>\r
 416                                         </tr>\r
 417                                 </table>\r
 418                                 <table cellspacing="0" cellpadding="0" width="100%" border="0">\r
 419                                         <tr>\r
 420                                                 <td nowrap="nowrap">\r
 421                                                         <span fcklang="DlgTableCaption">Caption</span>:&nbsp;</td>\r
 422                                                 <td>\r
 423                                                         &nbsp;</td>\r
 424                                                 <td width="100%" nowrap="nowrap">\r
 425                                                         <input id="txtCaption" type="text" style="width: 100%" /></td>\r
 426                                         </tr>\r
 427                                         <tr>\r
 428                                                 <td nowrap="nowrap">\r
 429                                                         <span fcklang="DlgTableSummary">Summary</span>:&nbsp;</td>\r
 430                                                 <td>\r
 431                                                         &nbsp;</td>\r
 432                                                 <td width="100%" nowrap="nowrap">\r
 433                                                         <input id="txtSummary" type="text" style="width: 100%" /></td>\r
 434                                         </tr>\r
 435                                 </table>\r
 436                         </td>\r
 437                 </tr>\r
 438         </table>\r
 439 </body>\r
 440 </html>\r