[Sommaire] [Imprimer]

   1  /* Import plugin specific language pack */

   2  tinyMCE.importPluginLanguagePack('table', 'albanian,arabic,brazilian,catala,chinese,czech,danish,dutch,english,euskara,finnish,french,galego,german,greek,hungarian,icelandic,indonesian,italian,macedonian,norwegian,polish,portuguese,romanian,russian,slovak,slovenian,spanish,swedish,thai,turkish,ukrainian,vietnamese');
   3  
   4  /**

   5   * Returns the HTML contents of the table control.

   6   */
   7  function TinyMCE_table_getControlHTML(control_name) {
   8      var controls = new Array(
   9          ['table', 'table.gif', '{$lang_table_desc}', 'mceInsertTable', true],
  10          ['delete_col', 'table_delete_col.gif', '{$lang_table_delete_col_desc}', 'mceTableDeleteCol'],
  11          ['delete_row', 'table_delete_row.gif', '{$lang_table_delete_row_desc}', 'mceTableDeleteRow'],
  12          ['col_after', 'table_insert_col_after.gif', '{$lang_table_insert_col_after_desc}', 'mceTableInsertColAfter'],
  13          ['col_before', 'table_insert_col_before.gif', '{$lang_table_insert_col_before_desc}', 'mceTableInsertColBefore'],
  14          ['row_after', 'table_insert_row_after.gif', '{$lang_table_insert_row_after_desc}', 'mceTableInsertRowAfter'],
  15          ['row_before', 'table_insert_row_before.gif', '{$lang_table_insert_row_before_desc}', 'mceTableInsertRowBefore'],
  16          ['row_props', 'table_row_props.gif', '{$lang_table_row_desc}', 'mceTableRowProps', true],
  17          ['cell_props', 'table_cell_props.gif', '{$lang_table_cell_desc}', 'mceTableCellProps', true]);
  18  
  19      // Render table control

  20      for (var i=0; i<controls.length; i++) {
  21          var but = controls[i];
  22  
  23          if (but[0] == control_name && tinyMCE.isMSIE)
  24              return '<img id="{$editor_id}_' + but[0] + '" src="{$pluginurl}/images/' + but[1] + '" title="' + but[2] + '" width="20" height="20" class="mceButtonDisabled" onmouseover="tinyMCE.switchClass(this,\'mceButtonOver\');" onmouseout="tinyMCE.restoreClass(this);" onmousedown="tinyMCE.restoreAndSwitchClass(this,\'mceButtonDown\');" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'' + but[3] + '\', ' + (but.length > 4 ? but[4] : false) + (but.length > 5 ? ', \'' + but[5] + '\'' : '') + ')">';
  25          else
  26          if (but[0] == control_name)
  27              return '<img id="{$editor_id}_' + but[0] + '" src="{$themeurl}/images/spacer.gif" style="background-image:url({$pluginurl}/images/buttons.gif); background-position: ' + (0-(i*20)) + 'px 0px" title="' + but[2] + '" width="20" height="20" class="mceButtonDisabled" onmouseover="tinyMCE.switchClass(this,\'mceButtonOver\');" onmouseout="tinyMCE.restoreClass(this);" onmousedown="tinyMCE.restoreAndSwitchClass(this,\'mceButtonDown\');" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'' + but[3] + '\', ' + (but.length > 4 ? but[4] : false) + (but.length > 5 ? ', \'' + but[5] + '\'' : '') + ')">';
  28      }
  29  
  30      // Special tablecontrols

  31      if (control_name == "tablecontrols") {
  32          var html = "";
  33  
  34          html += tinyMCE.getControlHTML("table");
  35          html += tinyMCE.getControlHTML("separator");
  36          html += tinyMCE.getControlHTML("row_props");
  37          html += tinyMCE.getControlHTML("cell_props");
  38          html += tinyMCE.getControlHTML("separator");
  39          html += tinyMCE.getControlHTML("row_before");
  40          html += tinyMCE.getControlHTML("row_after");
  41          html += tinyMCE.getControlHTML("delete_row");
  42          html += tinyMCE.getControlHTML("separator");
  43          html += tinyMCE.getControlHTML("col_before");
  44          html += tinyMCE.getControlHTML("col_after");
  45          html += tinyMCE.getControlHTML("delete_col");
  46  
  47          return html;
  48      }
  49  
  50      return "";
  51  }
  52  
  53  /**

  54   * Executes the table commands.

  55   */
  56  function TinyMCE_table_execCommand(editor_id, element, command, user_interface, value) {
  57  	function getAttrib(elm, name) {
  58          return elm.getAttribute(name) ? elm.getAttribute(name) : "";
  59      }
  60  
  61      var inst = tinyMCE.getInstanceById(editor_id);
  62      var focusElm = inst.getFocusElement();
  63      var tdElm = tinyMCE.getParentElement(focusElm, "td");
  64      var trElm = tinyMCE.getParentElement(focusElm, "tr");
  65  
  66      // Handle commands

  67      switch (command) {
  68          case "mceTableRowProps":
  69              if (trElm == null)
  70                  return true;
  71  
  72              if (user_interface) {
  73                  // Setup template

  74                  var template = new Array();
  75  
  76                  template['file'] = '../../plugins/table/row.htm';
  77                  template['width'] = 340;
  78                  template['height'] = 220;
  79  
  80                  // Open window

  81                  tinyMCE.openWindow(template, {editor_id : inst.editorId, align : getAttrib(trElm, 'align'), valign : getAttrib(trElm, 'valign'), height : getAttrib(trElm, 'height'), className : getAttrib(trElm, 'className')});
  82              } else {
  83                  trElm.setAttribute('align', value['align']);
  84                  trElm.setAttribute('vAlign', value['valign']);
  85                  trElm.setAttribute('height', value['height']);
  86                  trElm.setAttribute('class', value['className']);
  87                  trElm.setAttribute('className', value['className']);
  88              }
  89  
  90              return true;
  91  
  92          case "mceTableCellProps":
  93              if (tdElm == null)
  94                  return true;
  95  
  96              if (user_interface) {
  97                  // Setup template

  98                  var template = new Array();
  99  
 100                  template['file'] = '../../plugins/table/cell.htm';
 101                  template['width'] = 340;
 102                  template['height'] = 220;
 103  
 104                  // Open window

 105                  tinyMCE.openWindow(template, {editor_id : inst.editorId, align : getAttrib(tdElm, 'align'), valign : getAttrib(tdElm, 'valign'), width : getAttrib(tdElm, 'width'), height : getAttrib(tdElm, 'height'), className : getAttrib(tdElm, 'className')});
 106              } else {
 107                  tdElm.setAttribute('align', value['align']);
 108                  tdElm.setAttribute('vAlign', value['valign']);
 109                  tdElm.setAttribute('width', value['width']);
 110                  tdElm.setAttribute('height', value['height']);
 111                  tdElm.setAttribute('class', value['className']);
 112                  tdElm.setAttribute('className', value['className']);
 113              }
 114  
 115              return true;
 116  
 117          case "mceInsertTable":
 118              if (user_interface) {
 119                  var cols = 2, rows = 2, border = 0, cellpadding = "", cellspacing = "", align = "", width = "", height = "", action = "insert", className = "";
 120  
 121                  tinyMCE.tableElement = tinyMCE.getParentElement(inst.getFocusElement(), "table");
 122  
 123                  if (tinyMCE.tableElement) {
 124                      var rowsAr = tinyMCE.tableElement.rows;
 125                      var cols = 0;
 126                      for (var i=0; i<rowsAr.length; i++)
 127                          if (rowsAr[i].cells.length > cols)
 128                              cols = rowsAr[i].cells.length;
 129  
 130                      cols = cols;
 131                      rows = rowsAr.length;
 132  
 133                      border = tinyMCE.getAttrib(tinyMCE.tableElement, 'border', border);
 134                      cellpadding = tinyMCE.getAttrib(tinyMCE.tableElement, 'cellpadding', "");
 135                      cellspacing = tinyMCE.getAttrib(tinyMCE.tableElement, 'cellspacing', "");
 136                      width = tinyMCE.getAttrib(tinyMCE.tableElement, 'width', width);
 137                      height = tinyMCE.getAttrib(tinyMCE.tableElement, 'height', height);
 138                      align = tinyMCE.getAttrib(tinyMCE.tableElement, 'align', align);
 139                      className = tinyMCE.getAttrib(tinyMCE.tableElement, tinyMCE.isMSIE ? 'className' : "class", "");
 140  
 141                      if (tinyMCE.isMSIE) {
 142                          width = tinyMCE.tableElement.style.pixelWidth == 0 ? tinyMCE.tableElement.getAttribute("width") : tinyMCE.tableElement.style.pixelWidth;
 143                          height = tinyMCE.tableElement.style.pixelHeight == 0 ? tinyMCE.tableElement.getAttribute("height") : tinyMCE.tableElement.style.pixelHeight;
 144                      }
 145  
 146                      action = "update";
 147                  }
 148  
 149                  // Setup template

 150                  var template = new Array();
 151  
 152                  template['file'] = '../../plugins/table/table.htm';
 153                  template['width'] = 340;
 154                  template['height'] = 220;
 155  
 156                  // Language specific width and height addons

 157                  template['width'] += tinyMCE.getLang('lang_insert_table_delta_width', 0);
 158                  template['height'] += tinyMCE.getLang('lang_insert_table_delta_height', 0);
 159  
 160                  // Open window

 161                  tinyMCE.openWindow(template, {editor_id : inst.editorId, cols : cols, rows : rows, border : border, cellpadding : cellpadding, cellspacing : cellspacing, align : align, width : width, height : height, action : action, className : className});
 162              } else {
 163                  var html = '';
 164                  var cols = 2, rows = 2, border = 0, cellpadding = -1, cellspacing = -1, align, width, height, className;
 165  
 166                  if (typeof(value) == 'object') {
 167                      cols = value['cols'];
 168                      rows = value['rows'];
 169                      border = value['border'] != "" ? value['border'] : 0;
 170                      cellpadding = value['cellpadding'] != "" ? value['cellpadding'] : -1;
 171                      cellspacing = value['cellspacing'] != "" ? value['cellspacing'] : -1;
 172                      align = value['align'];
 173                      width = value['width'];
 174                      height = value['height'];
 175                      className = value['className'];
 176                  }
 177  
 178                  // Update table

 179                  if (tinyMCE.tableElement) {
 180                      tinyMCE.setAttrib(tinyMCE.tableElement, 'cellPadding', cellpadding);
 181                      tinyMCE.setAttrib(tinyMCE.tableElement, 'cellSpacing', cellspacing);
 182                      tinyMCE.setAttrib(tinyMCE.tableElement, 'border', border);
 183                      tinyMCE.setAttrib(tinyMCE.tableElement, 'width', width);
 184                      tinyMCE.setAttrib(tinyMCE.tableElement, 'height', height);
 185                      tinyMCE.setAttrib(tinyMCE.tableElement, 'align', align, true);
 186                      tinyMCE.setAttrib(tinyMCE.tableElement, tinyMCE.isMSIE ? 'className' : "class", className, true);
 187  
 188                      if (tinyMCE.isMSIE) {
 189                          tinyMCE.tableElement.style.pixelWidth = (width == null || width == "") ? 0 : width;
 190                          tinyMCE.tableElement.style.pixelHeight = (height == null || height == "") ? 0 : height;
 191                      }
 192  
 193                      tinyMCE.handleVisualAid(tinyMCE.tableElement, false, inst.visualAid);
 194  
 195                      // Fix for stange MSIE align bug

 196                      tinyMCE.tableElement.outerHTML = tinyMCE.tableElement.outerHTML;
 197  
 198                      //inst.contentWindow.dispatchEvent(createEvent("click"));

 199  
 200                      tinyMCE.triggerNodeChange();
 201                      return true;
 202                  }
 203  
 204                  // Create new table

 205                  html += '<table border="' + border + '" ';
 206                  var visualAidStyle = inst.visualAid ? tinyMCE.settings['visual_table_style'] : "";
 207  
 208                  if (cellpadding != -1)
 209                      html += 'cellpadding="' + cellpadding + '" ';
 210  
 211                  if (cellspacing != -1)
 212                      html += 'cellspacing="' + cellspacing + '" ';
 213  
 214                  if (width != 0 && width != "")
 215                      html += 'width="' + width + '" ';
 216  
 217                  if (height != 0 && height != "")
 218                      html += 'height="' + height + '" ';
 219  
 220                  if (align)
 221                      html += 'align="' + align + '" ';
 222  
 223                  if (className)
 224                      html += 'class="' + className + '" ';
 225  
 226                  if (border == 0 && tinyMCE.settings['visual'])
 227                      html += 'style="' + visualAidStyle + '" ';
 228  
 229                  html += '>';
 230  
 231                  for (var y=0; y<rows; y++) {
 232                      html += "<tr>";
 233                      for (var x=0; x<cols; x++) {
 234                          if (border == 0 && tinyMCE.settings['visual'])
 235                              html += '<td style="' + visualAidStyle + '">';
 236                          else
 237                              html += '<td>';
 238  
 239                          html += "&nbsp;</td>";
 240                      }
 241                      html += "</tr>";
 242                  }
 243  
 244                  html += "</table>";
 245  
 246                  inst.execCommand('mceInsertContent', false, html);
 247              }
 248  
 249              return true;
 250  
 251          case "mceTableInsertRowBefore":
 252          case "mceTableInsertRowAfter":
 253          case "mceTableDeleteRow":
 254          case "mceTableInsertColBefore":
 255          case "mceTableInsertColAfter":
 256          case "mceTableDeleteCol":
 257              var trElement = tinyMCE.getParentElement(inst.getFocusElement(), "tr");
 258              var tdElement = tinyMCE.getParentElement(inst.getFocusElement(), "td");
 259              var tableElement = tinyMCE.getParentElement(inst.getFocusElement(), "table");
 260  
 261              // No table just return (invalid command)

 262              if (!tableElement)
 263                  return true;
 264  
 265              var doc = inst.contentWindow.document;
 266              var tableBorder = tableElement.getAttribute("border");
 267              var visualAidStyle = inst.visualAid ? tinyMCE.settings['visual_table_style'] : "";
 268  
 269              // Table has a tbody use that reference

 270              if (tableElement.firstChild && tableElement.firstChild.nodeName.toLowerCase() == "tbody")
 271                  tableElement = tableElement.firstChild;
 272  
 273              if (tableElement && trElement) {
 274                  switch (command) {
 275                      case "mceTableInsertRowBefore":
 276                          var numcells = trElement.cells.length;
 277                          var rowCount = 0;
 278                          var tmpTR = trElement;
 279  
 280                          // Count rows

 281                          while (tmpTR) {
 282                              if (tmpTR.nodeName.toLowerCase() == "tr")
 283                                  rowCount++;
 284  
 285                              tmpTR = tmpTR.previousSibling;
 286                          }
 287  
 288                          var r = tableElement.insertRow(rowCount == 0 ? 1 : rowCount-1);
 289                          for (var i=0; i<numcells; i++) {
 290                              var newTD = doc.createElement("td");
 291                              newTD.innerHTML = "&nbsp;";
 292  
 293                              if (tableBorder == 0)
 294                                  newTD.style.cssText = visualAidStyle;
 295  
 296                              var c = r.appendChild(newTD);
 297  
 298                              if (tdElement.parentNode.childNodes[i].colSpan)
 299                                  c.colSpan = tdElement.parentNode.childNodes[i].colSpan;
 300                          }
 301                      break;
 302  
 303                      case "mceTableInsertRowAfter":
 304                          var numcells = trElement.cells.length;
 305                          var rowCount = 0;
 306                          var tmpTR = trElement;
 307                          var doc = inst.contentWindow.document;
 308  
 309                          // Count rows

 310                          while (tmpTR) {
 311                              if (tmpTR.nodeName.toLowerCase() == "tr")
 312                                  rowCount++;
 313  
 314                              tmpTR = tmpTR.previousSibling;
 315                          }
 316  
 317                          var r = tableElement.insertRow(rowCount == 0 ? 1 : rowCount);
 318                          for (var i=0; i<numcells; i++) {
 319                              var newTD = doc.createElement("td");
 320                              newTD.innerHTML = "&nbsp;";
 321  
 322                              if (tableBorder == 0)
 323                                  newTD.style.cssText = visualAidStyle;
 324  
 325                              var c = r.appendChild(newTD);
 326  
 327                              if (tdElement.parentNode.childNodes[i].colSpan)
 328                                  c.colSpan = tdElement.parentNode.childNodes[i].colSpan;
 329                          }
 330                      break;
 331  
 332                      case "mceTableDeleteRow":
 333                          // Remove whole table

 334                          if (tableElement.rows.length <= 1) {
 335                              tableElement.parentNode.removeChild(tableElement);
 336                              tinyMCE.triggerNodeChange();
 337                              return true;
 338                          }
 339  
 340                          var selElm = inst.contentWindow.document.body;
 341                          if (trElement.previousSibling)
 342                              selElm = trElement.previousSibling.cells[0];
 343  
 344                          // Delete row

 345                          trElement.parentNode.removeChild(trElement);
 346  
 347                          if (tinyMCE.isGecko)
 348                              inst.selectNode(selElm);
 349                      break;
 350  
 351                      case "mceTableInsertColBefore":
 352                          var cellCount = tdElement.cellIndex;
 353  
 354                          // Add columns

 355                          for (var y=0; y<tableElement.rows.length; y++) {
 356                              var cell = tableElement.rows[y].cells[cellCount];
 357  
 358                              // Can't add cell after cell that doesn't exist

 359                              if (!cell)
 360                                  break;
 361  
 362                              var newTD = doc.createElement("td");
 363                              newTD.innerHTML = "&nbsp;";
 364  
 365                              if (tableBorder == 0)
 366                                  newTD.style.cssText = visualAidStyle;
 367  
 368                              cell.parentNode.insertBefore(newTD, cell);
 369                          }
 370                      break;
 371  
 372                      case "mceTableInsertColAfter":
 373                          var cellCount = tdElement.cellIndex;
 374  
 375                          // Add columns

 376                          for (var y=0; y<tableElement.rows.length; y++) {
 377                              var append = false;
 378                              var cell = tableElement.rows[y].cells[cellCount];
 379                              if (cellCount == tableElement.rows[y].cells.length-1)
 380                                  append = true;
 381                              else
 382                                  cell = tableElement.rows[y].cells[cellCount+1];
 383  
 384                              var newTD = doc.createElement("td");
 385                              newTD.innerHTML = "&nbsp;";
 386  
 387                              if (tableBorder == 0)
 388                                  newTD.style.cssText = visualAidStyle;
 389  
 390                              if (append)
 391                                  cell.parentNode.appendChild(newTD);
 392                              else
 393                                  cell.parentNode.insertBefore(newTD, cell);
 394                          }
 395                      break;
 396  
 397                      case "mceTableDeleteCol":
 398                          var index = tdElement.cellIndex;
 399                          var selElm = inst.contentWindow.document.body;
 400  
 401                          var numCols = 0;
 402                          for (var y=0; y<tableElement.rows.length; y++) {
 403                              if (tableElement.rows[y].cells.length > numCols)
 404                                  numCols = tableElement.rows[y].cells.length;
 405                          }
 406  
 407                          // Remove whole table

 408                          if (numCols <= 1) {
 409                              if (tinyMCE.isGecko)
 410                                  inst.selectNode(selElm);
 411  
 412                              tableElement.parentNode.removeChild(tableElement);
 413                              tinyMCE.triggerNodeChange();
 414                              return true;
 415                          }
 416  
 417                          // Remove columns

 418                          for (var y=0; y<tableElement.rows.length; y++) {
 419                              var cell = tableElement.rows[y].cells[index];
 420                              if (cell)
 421                                  cell.parentNode.removeChild(cell);
 422                          }
 423  
 424                          if (index > 0)
 425                              selElm = tableElement.rows[0].cells[index-1];
 426  
 427                          if (tinyMCE.isGecko)
 428                              inst.selectNode(selElm);
 429                      break;
 430                  }
 431  
 432                  tinyMCE.triggerNodeChange();
 433              }
 434  
 435          return true;
 436      }
 437  
 438      // Pass to next handler in chain

 439      return false;
 440  }
 441  
 442  function TinyMCE_table_handleNodeChange(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {
 443      // Reset table controls

 444      tinyMCE.switchClassSticky(editor_id + '_table', 'mceButtonNormal');
 445      tinyMCE.switchClassSticky(editor_id + '_row_props', 'mceButtonDisabled', true);
 446      tinyMCE.switchClassSticky(editor_id + '_cell_props', 'mceButtonDisabled', true);
 447      tinyMCE.switchClassSticky(editor_id + '_row_before', 'mceButtonDisabled', true);
 448      tinyMCE.switchClassSticky(editor_id + '_row_after', 'mceButtonDisabled', true);
 449      tinyMCE.switchClassSticky(editor_id + '_delete_row', 'mceButtonDisabled', true);
 450      tinyMCE.switchClassSticky(editor_id + '_col_before', 'mceButtonDisabled', true);
 451      tinyMCE.switchClassSticky(editor_id + '_col_after', 'mceButtonDisabled', true);
 452      tinyMCE.switchClassSticky(editor_id + '_delete_col', 'mceButtonDisabled', true);
 453  
 454      // Within a tr element

 455      if (tinyMCE.getParentElement(node, "tr"))
 456          tinyMCE.switchClassSticky(editor_id + '_row_props', 'mceButtonSelected', false);
 457  
 458      // Within a td element

 459      if (tinyMCE.getParentElement(node, "td")) {
 460          tinyMCE.switchClassSticky(editor_id + '_cell_props', 'mceButtonSelected', false);
 461          tinyMCE.switchClassSticky(editor_id + '_row_before', 'mceButtonNormal', false);
 462          tinyMCE.switchClassSticky(editor_id + '_row_after', 'mceButtonNormal', false);
 463          tinyMCE.switchClassSticky(editor_id + '_delete_row', 'mceButtonNormal', false);
 464          tinyMCE.switchClassSticky(editor_id + '_col_before', 'mceButtonNormal', false);
 465          tinyMCE.switchClassSticky(editor_id + '_col_after', 'mceButtonNormal', false);
 466          tinyMCE.switchClassSticky(editor_id + '_delete_col', 'mceButtonNormal', false);
 467      }
 468  
 469      // Within table

 470      if (tinyMCE.getParentElement(node, "table"))
 471          tinyMCE.switchClassSticky(editor_id + '_table', 'mceButtonSelected');
 472  }