[Summary view] [Print] [Text view]

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

  16      var rowtype = trElm.parentNode.nodeName.toLowerCase();
  17      var align = dom.getAttrib(trElm, 'align');
  18      var valign = dom.getAttrib(trElm, 'valign');
  19      var height = trimSize(getStyle(trElm, 'height', 'height'));
  20      var className = dom.getAttrib(trElm, 'class');
  21      var bgcolor = convertRGBToHex(getStyle(trElm, 'bgcolor', 'backgroundColor'));
  22      var backgroundimage = getStyle(trElm, 'background', 'backgroundImage').replace(new RegExp("url\\(['\"]?([^'\"]*)['\"]?\\)", 'gi'), "$1");
  23      var id = dom.getAttrib(trElm, 'id');
  24      var lang = dom.getAttrib(trElm, 'lang');
  25      var dir = dom.getAttrib(trElm, 'dir');
  26  
  27      selectByValue(formObj, 'rowtype', rowtype);
  28      setActionforRowType(formObj, rowtype);
  29  
  30      // Any cells selected

  31      if (dom.select('td.mceSelected,th.mceSelected', trElm).length == 0) {
  32          // Setup form

  33          addClassesToList('class', 'table_row_styles');
  34          TinyMCE_EditableSelects.init();
  35  
  36          formObj.bgcolor.value = bgcolor;
  37          formObj.backgroundimage.value = backgroundimage;
  38          formObj.height.value = height;
  39          formObj.id.value = id;
  40          formObj.lang.value = lang;
  41          formObj.style.value = dom.serializeStyle(st);
  42          selectByValue(formObj, 'align', align);
  43          selectByValue(formObj, 'valign', valign);
  44          selectByValue(formObj, 'class', className, true, true);
  45          selectByValue(formObj, 'dir', dir);
  46  
  47          // Resize some elements

  48          if (isVisible('backgroundimagebrowser'))
  49              document.getElementById('backgroundimage').style.width = '180px';
  50  
  51          updateColor('bgcolor_pick', 'bgcolor');
  52      } else
  53          tinyMCEPopup.dom.hide('action');
  54  }
  55  
  56  function updateAction() {
  57      var inst = tinyMCEPopup.editor, dom = inst.dom, trElm, tableElm, formObj = document.forms[0];
  58      var action = getSelectValue(formObj, 'action');
  59  
  60      if (!AutoValidator.validate(formObj)) {
  61          tinyMCEPopup.alert(AutoValidator.getErrorMessages(formObj).join('. ') + '.');
  62          return false;
  63      }
  64  
  65      tinyMCEPopup.restoreSelection();
  66      trElm = dom.getParent(inst.selection.getStart(), "tr");
  67      tableElm = dom.getParent(inst.selection.getStart(), "table");
  68  
  69      // Update all selected rows

  70      if (dom.select('td.mceSelected,th.mceSelected', trElm).length > 0) {
  71          tinymce.each(tableElm.rows, function(tr) {
  72              var i;
  73  
  74              for (i = 0; i < tr.cells.length; i++) {
  75                  if (dom.hasClass(tr.cells[i], 'mceSelected')) {
  76                      updateRow(tr, true);
  77                      return;
  78                  }
  79              }
  80          });
  81  
  82          inst.addVisual();
  83          inst.nodeChanged();
  84          inst.execCommand('mceEndUndoLevel');
  85          tinyMCEPopup.close();
  86          return;
  87      }
  88  
  89      switch (action) {
  90          case "row":
  91              updateRow(trElm);
  92              break;
  93  
  94          case "all":
  95              var rows = tableElm.getElementsByTagName("tr");
  96  
  97              for (var i=0; i<rows.length; i++)
  98                  updateRow(rows[i], true);
  99  
 100              break;
 101  
 102          case "odd":
 103          case "even":
 104              var rows = tableElm.getElementsByTagName("tr");
 105  
 106              for (var i=0; i<rows.length; i++) {
 107                  if ((i % 2 == 0 && action == "odd") || (i % 2 != 0 && action == "even"))
 108                      updateRow(rows[i], true, true);
 109              }
 110  
 111              break;
 112      }
 113  
 114      inst.addVisual();
 115      inst.nodeChanged();
 116      inst.execCommand('mceEndUndoLevel');
 117      tinyMCEPopup.close();
 118  }
 119  
 120  function updateRow(tr_elm, skip_id, skip_parent) {
 121      var inst = tinyMCEPopup.editor;
 122      var formObj = document.forms[0];
 123      var dom = inst.dom;
 124      var curRowType = tr_elm.parentNode.nodeName.toLowerCase();
 125      var rowtype = getSelectValue(formObj, 'rowtype');
 126      var doc = inst.getDoc();
 127  
 128      // Update row element

 129      if (!skip_id)
 130          dom.setAttrib(tr_elm, 'id', formObj.id.value);
 131  
 132      dom.setAttrib(tr_elm, 'align', getSelectValue(formObj, 'align'));
 133      dom.setAttrib(tr_elm, 'vAlign', getSelectValue(formObj, 'valign'));
 134      dom.setAttrib(tr_elm, 'lang', formObj.lang.value);
 135      dom.setAttrib(tr_elm, 'dir', getSelectValue(formObj, 'dir'));
 136      dom.setAttrib(tr_elm, 'style', dom.serializeStyle(dom.parseStyle(formObj.style.value)));
 137      dom.setAttrib(tr_elm, 'class', getSelectValue(formObj, 'class'));
 138  
 139      // Clear deprecated attributes

 140      dom.setAttrib(tr_elm, 'background', '');
 141      dom.setAttrib(tr_elm, 'bgColor', '');
 142      dom.setAttrib(tr_elm, 'height', '');
 143  
 144      // Set styles

 145      tr_elm.style.height = getCSSSize(formObj.height.value);
 146      tr_elm.style.backgroundColor = formObj.bgcolor.value;
 147  
 148      if (formObj.backgroundimage.value != "")
 149          tr_elm.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')";
 150      else
 151          tr_elm.style.backgroundImage = '';
 152  
 153      // Setup new rowtype

 154      if (curRowType != rowtype && !skip_parent) {
 155          // first, clone the node we are working on

 156          var newRow = tr_elm.cloneNode(1);
 157  
 158          // next, find the parent of its new destination (creating it if necessary)

 159          var theTable = dom.getParent(tr_elm, "table");
 160          var dest = rowtype;
 161          var newParent = null;
 162          for (var i = 0; i < theTable.childNodes.length; i++) {
 163              if (theTable.childNodes[i].nodeName.toLowerCase() == dest)
 164                  newParent = theTable.childNodes[i];
 165          }
 166  
 167          if (newParent == null) {
 168              newParent = doc.createElement(dest);
 169  
 170              if (theTable.firstChild.nodeName == 'CAPTION')
 171                  inst.dom.insertAfter(newParent, theTable.firstChild);
 172              else
 173                  theTable.insertBefore(newParent, theTable.firstChild);
 174          }
 175  
 176          // append the row to the new parent

 177          newParent.appendChild(newRow);
 178  
 179          // remove the original

 180          tr_elm.parentNode.removeChild(tr_elm);
 181  
 182          // set tr_elm to the new node

 183          tr_elm = newRow;
 184      }
 185  
 186      dom.setAttrib(tr_elm, 'style', dom.serializeStyle(dom.parseStyle(tr_elm.style.cssText)));
 187  }
 188  
 189  function changedBackgroundImage() {
 190      var formObj = document.forms[0], dom = tinyMCEPopup.editor.dom;
 191      var st = dom.parseStyle(formObj.style.value);
 192  
 193      st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
 194  
 195      formObj.style.value = dom.serializeStyle(st);
 196  }
 197  
 198  function changedStyle() {
 199      var formObj = document.forms[0], dom = tinyMCEPopup.editor.dom;
 200      var st = dom.parseStyle(formObj.style.value);
 201  
 202      if (st['background-image'])
 203          formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
 204      else
 205          formObj.backgroundimage.value = '';
 206  
 207      if (st['height'])
 208          formObj.height.value = trimSize(st['height']);
 209  
 210      if (st['background-color']) {
 211          formObj.bgcolor.value = st['background-color'];
 212          updateColor('bgcolor_pick','bgcolor');
 213      }
 214  }
 215  
 216  function changedSize() {
 217      var formObj = document.forms[0], dom = tinyMCEPopup.editor.dom;
 218      var st = dom.parseStyle(formObj.style.value);
 219  
 220      var height = formObj.height.value;
 221      if (height != "")
 222          st['height'] = getCSSSize(height);
 223      else
 224          st['height'] = "";
 225  
 226      formObj.style.value = dom.serializeStyle(st);
 227  }
 228  
 229  function changedColor() {
 230      var formObj = document.forms[0], dom = tinyMCEPopup.editor.dom;
 231      var st = dom.parseStyle(formObj.style.value);
 232  
 233      st['background-color'] = formObj.bgcolor.value;
 234  
 235      formObj.style.value = dom.serializeStyle(st);
 236  }
 237  
 238  function changedRowType() {
 239      var formObj = document.forms[0];
 240      var rowtype = getSelectValue(formObj, 'rowtype');
 241  
 242      setActionforRowType(formObj, rowtype);
 243  
 244  }
 245  
 246  function setActionforRowType(formObj, rowtype) {
 247      if (rowtype === "tbody") {
 248          formObj.action.disabled = false;
 249      } else {
 250          selectByValue(formObj, 'action', "row");
 251          formObj.action.disabled = true;
 252      }
 253  }
 254  tinyMCEPopup.onInit.add(init);