[Summary view] [Print] [Text view]

   1  tinyMCEPopup.requireLangPack();
   2  
   3  var ed;
   4  
   5  function init() {
   6      ed = tinyMCEPopup.editor;
   7      tinyMCEPopup.resizeToInnerSize();
   8  
   9      document.getElementById('backgroundimagebrowsercontainer').innerHTML = getBrowserHTML('backgroundimagebrowser','backgroundimage','image','table');
  10      document.getElementById('bordercolor_pickcontainer').innerHTML = getColorPickerHTML('bordercolor_pick','bordercolor');
  11      document.getElementById('bgcolor_pickcontainer').innerHTML = getColorPickerHTML('bgcolor_pick','bgcolor')
  12  
  13      var inst = ed;
  14      var tdElm = ed.dom.getParent(ed.selection.getStart(), "td,th");
  15      var formObj = document.forms[0];
  16      var st = ed.dom.parseStyle(ed.dom.getAttrib(tdElm, "style"));
  17  
  18      // Get table cell data

  19      var celltype = tdElm.nodeName.toLowerCase();
  20      var align = ed.dom.getAttrib(tdElm, 'align');
  21      var valign = ed.dom.getAttrib(tdElm, 'valign');
  22      var width = trimSize(getStyle(tdElm, 'width', 'width'));
  23      var height = trimSize(getStyle(tdElm, 'height', 'height'));
  24      var bordercolor = convertRGBToHex(getStyle(tdElm, 'bordercolor', 'borderLeftColor'));
  25      var bgcolor = convertRGBToHex(getStyle(tdElm, 'bgcolor', 'backgroundColor'));
  26      var className = ed.dom.getAttrib(tdElm, 'class');
  27      var backgroundimage = getStyle(tdElm, 'background', 'backgroundImage').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
  28      var id = ed.dom.getAttrib(tdElm, 'id');
  29      var lang = ed.dom.getAttrib(tdElm, 'lang');
  30      var dir = ed.dom.getAttrib(tdElm, 'dir');
  31      var scope = ed.dom.getAttrib(tdElm, 'scope');
  32  
  33      // Setup form

  34      addClassesToList('class', 'table_cell_styles');
  35      TinyMCE_EditableSelects.init();
  36  
  37      if (!ed.dom.hasClass(tdElm, 'mceSelected')) {
  38          formObj.bordercolor.value = bordercolor;
  39          formObj.bgcolor.value = bgcolor;
  40          formObj.backgroundimage.value = backgroundimage;
  41          formObj.width.value = width;
  42          formObj.height.value = height;
  43          formObj.id.value = id;
  44          formObj.lang.value = lang;
  45          formObj.style.value = ed.dom.serializeStyle(st);
  46          selectByValue(formObj, 'align', align);
  47          selectByValue(formObj, 'valign', valign);
  48          selectByValue(formObj, 'class', className, true, true);
  49          selectByValue(formObj, 'celltype', celltype);
  50          selectByValue(formObj, 'dir', dir);
  51          selectByValue(formObj, 'scope', scope);
  52  
  53          // Resize some elements

  54          if (isVisible('backgroundimagebrowser'))
  55              document.getElementById('backgroundimage').style.width = '180px';
  56  
  57          updateColor('bordercolor_pick', 'bordercolor');
  58          updateColor('bgcolor_pick', 'bgcolor');
  59      } else
  60          tinyMCEPopup.dom.hide('action');
  61  }
  62  
  63  function updateAction() {
  64      var el, inst = ed, tdElm, trElm, tableElm, formObj = document.forms[0];
  65  
  66      if (!AutoValidator.validate(formObj)) {
  67          tinyMCEPopup.alert(AutoValidator.getErrorMessages(formObj).join('. ') + '.');
  68          return false;
  69      }
  70  
  71      tinyMCEPopup.restoreSelection();
  72      el = ed.selection.getStart();
  73      tdElm = ed.dom.getParent(el, "td,th");
  74      trElm = ed.dom.getParent(el, "tr");
  75      tableElm = ed.dom.getParent(el, "table");
  76  
  77      // Cell is selected

  78      if (ed.dom.hasClass(tdElm, 'mceSelected')) {
  79          // Update all selected sells

  80          tinymce.each(ed.dom.select('td.mceSelected,th.mceSelected'), function(td) {
  81              updateCell(td);
  82          });
  83  
  84          ed.addVisual();
  85          ed.nodeChanged();
  86          inst.execCommand('mceEndUndoLevel');
  87          tinyMCEPopup.close();
  88          return;
  89      }
  90  
  91      switch (getSelectValue(formObj, 'action')) {
  92          case "cell":
  93              var celltype = getSelectValue(formObj, 'celltype');
  94              var scope = getSelectValue(formObj, 'scope');
  95  
  96  			function doUpdate(s) {
  97                  if (s) {
  98                      updateCell(tdElm);
  99  
 100                      ed.addVisual();
 101                      ed.nodeChanged();
 102                      inst.execCommand('mceEndUndoLevel');
 103                      tinyMCEPopup.close();
 104                  }
 105              };
 106  
 107              if (ed.getParam("accessibility_warnings", 1)) {
 108                  if (celltype == "th" && scope == "")
 109                      tinyMCEPopup.confirm(ed.getLang('table_dlg.missing_scope', '', true), doUpdate);
 110                  else
 111                      doUpdate(1);
 112  
 113                  return;
 114              }
 115  
 116              updateCell(tdElm);
 117              break;
 118  
 119          case "row":
 120              var cell = trElm.firstChild;
 121  
 122              if (cell.nodeName != "TD" && cell.nodeName != "TH")
 123                  cell = nextCell(cell);
 124  
 125              do {
 126                  cell = updateCell(cell, true);
 127              } while ((cell = nextCell(cell)) != null);
 128  
 129              break;
 130  
 131          case "col":
 132              var curr, col = 0, cell = trElm.firstChild, rows = tableElm.getElementsByTagName("tr");
 133  
 134              if (cell.nodeName != "TD" && cell.nodeName != "TH")
 135                  cell = nextCell(cell);
 136  
 137              do {
 138                  if (cell == tdElm)
 139                      break;
 140                  col += cell.getAttribute("colspan")?cell.getAttribute("colspan"):1;
 141              } while ((cell = nextCell(cell)) != null);
 142  
 143              for (var i=0; i<rows.length; i++) {
 144                  cell = rows[i].firstChild;
 145  
 146                  if (cell.nodeName != "TD" && cell.nodeName != "TH")
 147                      cell = nextCell(cell);
 148  
 149                  curr = 0;
 150                  do {
 151                      if (curr == col) {
 152                          cell = updateCell(cell, true);
 153                          break;
 154                      }
 155                      curr += cell.getAttribute("colspan")?cell.getAttribute("colspan"):1;
 156                  } while ((cell = nextCell(cell)) != null);
 157              }
 158  
 159              break;
 160  
 161          case "all":
 162              var rows = tableElm.getElementsByTagName("tr");
 163  
 164              for (var i=0; i<rows.length; i++) {
 165                  var cell = rows[i].firstChild;
 166  
 167                  if (cell.nodeName != "TD" && cell.nodeName != "TH")
 168                      cell = nextCell(cell);
 169  
 170                  do {
 171                      cell = updateCell(cell, true);
 172                  } while ((cell = nextCell(cell)) != null);
 173              }
 174  
 175              break;
 176      }
 177  
 178      ed.addVisual();
 179      ed.nodeChanged();
 180      inst.execCommand('mceEndUndoLevel');
 181      tinyMCEPopup.close();
 182  }
 183  
 184  function nextCell(elm) {
 185      while ((elm = elm.nextSibling) != null) {
 186          if (elm.nodeName == "TD" || elm.nodeName == "TH")
 187              return elm;
 188      }
 189  
 190      return null;
 191  }
 192  
 193  function updateCell(td, skip_id) {
 194      var inst = ed;
 195      var formObj = document.forms[0];
 196      var curCellType = td.nodeName.toLowerCase();
 197      var celltype = getSelectValue(formObj, 'celltype');
 198      var doc = inst.getDoc();
 199      var dom = ed.dom;
 200  
 201      if (!skip_id)
 202          dom.setAttrib(td, 'id', formObj.id.value);
 203  
 204      dom.setAttrib(td, 'align', formObj.align.value);
 205      dom.setAttrib(td, 'vAlign', formObj.valign.value);
 206      dom.setAttrib(td, 'lang', formObj.lang.value);
 207      dom.setAttrib(td, 'dir', getSelectValue(formObj, 'dir'));
 208      dom.setAttrib(td, 'style', ed.dom.serializeStyle(ed.dom.parseStyle(formObj.style.value)));
 209      dom.setAttrib(td, 'scope', formObj.scope.value);
 210      dom.setAttrib(td, 'class', getSelectValue(formObj, 'class'));
 211  
 212      // Clear deprecated attributes

 213      ed.dom.setAttrib(td, 'width', '');
 214      ed.dom.setAttrib(td, 'height', '');
 215      ed.dom.setAttrib(td, 'bgColor', '');
 216      ed.dom.setAttrib(td, 'borderColor', '');
 217      ed.dom.setAttrib(td, 'background', '');
 218  
 219      // Set styles

 220      td.style.width = getCSSSize(formObj.width.value);
 221      td.style.height = getCSSSize(formObj.height.value);
 222      if (formObj.bordercolor.value != "") {
 223          td.style.borderColor = formObj.bordercolor.value;
 224          td.style.borderStyle = td.style.borderStyle == "" ? "solid" : td.style.borderStyle;
 225          td.style.borderWidth = td.style.borderWidth == "" ? "1px" : td.style.borderWidth;
 226      } else
 227          td.style.borderColor = '';
 228  
 229      td.style.backgroundColor = formObj.bgcolor.value;
 230  
 231      if (formObj.backgroundimage.value != "")
 232          td.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')";
 233      else
 234          td.style.backgroundImage = '';
 235  
 236      if (curCellType != celltype) {
 237          // changing to a different node type

 238          var newCell = doc.createElement(celltype);
 239  
 240          for (var c=0; c<td.childNodes.length; c++)
 241              newCell.appendChild(td.childNodes[c].cloneNode(1));
 242  
 243          for (var a=0; a<td.attributes.length; a++)
 244              ed.dom.setAttrib(newCell, td.attributes[a].name, ed.dom.getAttrib(td, td.attributes[a].name));
 245  
 246          td.parentNode.replaceChild(newCell, td);
 247          td = newCell;
 248      }
 249  
 250      dom.setAttrib(td, 'style', dom.serializeStyle(dom.parseStyle(td.style.cssText)));
 251  
 252      return td;
 253  }
 254  
 255  function changedBackgroundImage() {
 256      var formObj = document.forms[0];
 257      var st = ed.dom.parseStyle(formObj.style.value);
 258  
 259      st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
 260  
 261      formObj.style.value = ed.dom.serializeStyle(st);
 262  }
 263  
 264  function changedSize() {
 265      var formObj = document.forms[0];
 266      var st = ed.dom.parseStyle(formObj.style.value);
 267  
 268      var width = formObj.width.value;
 269      if (width != "")
 270          st['width'] = getCSSSize(width);
 271      else
 272          st['width'] = "";
 273  
 274      var height = formObj.height.value;
 275      if (height != "")
 276          st['height'] = getCSSSize(height);
 277      else
 278          st['height'] = "";
 279  
 280      formObj.style.value = ed.dom.serializeStyle(st);
 281  }
 282  
 283  function changedColor() {
 284      var formObj = document.forms[0];
 285      var st = ed.dom.parseStyle(formObj.style.value);
 286  
 287      st['background-color'] = formObj.bgcolor.value;
 288      st['border-color'] = formObj.bordercolor.value;
 289  
 290      formObj.style.value = ed.dom.serializeStyle(st);
 291  }
 292  
 293  function changedStyle() {
 294      var formObj = document.forms[0];
 295      var st = ed.dom.parseStyle(formObj.style.value);
 296  
 297      if (st['background-image'])
 298          formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
 299      else
 300          formObj.backgroundimage.value = '';
 301  
 302      if (st['width'])
 303          formObj.width.value = trimSize(st['width']);
 304  
 305      if (st['height'])
 306          formObj.height.value = trimSize(st['height']);
 307  
 308      if (st['background-color']) {
 309          formObj.bgcolor.value = st['background-color'];
 310          updateColor('bgcolor_pick','bgcolor');
 311      }
 312  
 313      if (st['border-color']) {
 314          formObj.bordercolor.value = st['border-color'];
 315          updateColor('bordercolor_pick','bordercolor');
 316      }
 317  }
 318  
 319  tinyMCEPopup.onInit.add(init);