webcit/tiny_mce/plugins/table/jscripts/cell.js

   1 function init() {
   2         tinyMCEPopup.resizeToInnerSize();
   3
   4         var inst = tinyMCE.selectedInstance;
   5         var tdElm = tinyMCE.getParentElement(inst.getFocusElement(), "td,th");
   6         var formObj = document.forms[0];
   7         var st = tinyMCE.parseStyle(tdElm.style.cssText);
   8
   9         // Get table cell data
  10         var celltype = tdElm.nodeName.toLowerCase();
  11         var align = tinyMCE.getAttrib(tdElm, 'align');
  12         var valign = tinyMCE.getAttrib(tdElm, 'valign');
  13         var width = tinyMCE.getAttrib(tdElm, 'width');
  14         var height = tinyMCE.getAttrib(tdElm, 'height');
  15         var className = tinyMCE.getVisualAidClass(tinyMCE.getAttrib(tdElm, 'class'), false);
  16         var bordercolor = tinyMCE.getAttrib(tdElm, 'bordercolor');
  17         var bgcolor = tinyMCE.getAttrib(tdElm, 'bgcolor');
  18         var backgroundimage = getStyle(tdElm, st, 'background', 'background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");;
  19         var id = tinyMCE.getAttrib(tdElm, 'id');
  20         var lang = tinyMCE.getAttrib(tdElm, 'lang');
  21         var dir = tinyMCE.getAttrib(tdElm, 'dir');
  22
  23         // Setup form
  24         addClassesToList('class', 'table_cell_styles');
  25         formObj.bordercolor.value = bordercolor;
  26         formObj.bgcolor.value = bgcolor;
  27         formObj.backgroundimage.value = backgroundimage;
  28         formObj.width.value = width;
  29         formObj.height.value = height;
  30         formObj.id.value = id;
  31         formObj.lang.value = lang;
  32         formObj.style.value = tinyMCE.serializeStyle(st);
  33         selectByValue(formObj, 'align', align);
  34         selectByValue(formObj, 'valign', valign);
  35         selectByValue(formObj, 'class', className);
  36         selectByValue(formObj, 'celltype', celltype);
  37         selectByValue(formObj, 'dir', dir);
  38
  39         // Resize some elements
  40         if (isVisible('backgroundimagebrowser'))
  41                 document.getElementById('backgroundimage').style.width = '180px';
  42
  43         updateColor('bordercolor_pick', 'bordercolor');
  44         updateColor('bgcolor_pick', 'bgcolor');
  45 }
  46
  47 function updateAction() {
  48         var inst = tinyMCE.selectedInstance;
  49         var tdElm = tinyMCE.getParentElement(inst.getFocusElement(), "td,th");
  50         var trElm = tinyMCE.getParentElement(inst.getFocusElement(), "tr");
  51         var tableElm = tinyMCE.getParentElement(inst.getFocusElement(), "table");
  52         var formObj = document.forms[0];
  53
  54         inst.execCommand('mceBeginUndoLevel');
  55
  56         switch (getSelectValue(formObj, 'action')) {
  57                 case "cell":
  58                         updateCell(tdElm);
  59                         break;
  60
  61                 case "row":
  62                         var cell = trElm.firstChild;
  63
  64                         do {
  65                                 cell = updateCell(cell, true);
  66                         } while ((cell = nextCell(cell)));
  67
  68                         break;
  69
  70                 case "all":
  71                         var rows = tableElm.getElementsByTagName("tr");
  72
  73                         for (var i=0; i<rows.length; i++) {
  74                                 var cell = rows[i].firstChild;
  75
  76                                 do {
  77                                         cell = updateCell(cell, true);
  78                                 } while ((cell = nextCell(cell)));
  79                         }
  80
  81                         break;
  82         }
  83
  84         tinyMCE.handleVisualAid(inst.getBody(), true, inst.visualAid, inst);
  85         tinyMCE.triggerNodeChange();
  86         inst.execCommand('mceEndUndoLevel');
  87         tinyMCEPopup.close();
  88 }
  89
  90 function nextCell(elm) {
  91         while ((elm = elm.nextSibling)) {
  92                 if (elm.nodeName == "TD" || elm.nodeName == "TH")
  93                         return elm;
  94         }
  95
  96         return null;
  97 }
  98
  99 function updateCell(td, skip_id) {
 100         var inst = tinyMCE.selectedInstance;
 101         var formObj = document.forms[0];
 102         var curCellType = td.nodeName.toLowerCase();
 103         var celltype = getSelectValue(formObj, 'celltype');
 104         var doc = inst.getDoc();
 105
 106         if (!skip_id)
 107                 td.setAttribute('id', formObj.id.value);
 108
 109         td.setAttribute('align', formObj.align.value);
 110         td.setAttribute('vAlign', formObj.valign.value);
 111         td.setAttribute('width', formObj.width.value);
 112         td.setAttribute('height', formObj.height.value);
 113         td.setAttribute('borderColor', formObj.bordercolor.value);
 114         td.setAttribute('bgColor', formObj.bgcolor.value);
 115         td.setAttribute('lang', formObj.lang.value);
 116         td.setAttribute('dir', getSelectValue(formObj, 'dir'));
 117         td.setAttribute('style', tinyMCE.serializeStyle(tinyMCE.parseStyle(formObj.style.value)));
 118         tinyMCE.setAttrib(td, 'class', getSelectValue(formObj, 'class'));
 119
 120         if (curCellType != celltype) {
 121                 // changing to a different node type
 122                 var newCell = doc.createElement(celltype);
 123
 124                 for (var c=0; c<td.childNodes.length; c++) {
 125                         newCell.appendChild(td.childNodes[c].cloneNode(1));
 126                 }
 127
 128                 for (var a=0; a<td.attributes.length; a++) {
 129                         var attr = td.attributes[a];
 130                         newCell.setAttribute(attr.name, attr.value);
 131                 }
 132
 133                 td.parentNode.replaceChild(newCell, td);
 134                 td = newCell;
 135
 136                 return newCell;
 137         }
 138
 139         return td;
 140 }
 141
 142 function getStyle(elm, st, attrib, style) {
 143         var val = tinyMCE.getAttrib(elm, attrib);
 144
 145         if (typeof(style) == 'undefined')
 146                 style = attrib;
 147
 148         return val == '' ? (st[style] ? st[style].replace('px', '') : '') : val;
 149 }
 150
 151 function changedBackgroundImage() {
 152         var formObj = document.forms[0];
 153         var st = tinyMCE.parseStyle(formObj.style.value);
 154
 155         st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
 156
 157         formObj.style.value = tinyMCE.serializeStyle(st);
 158 }
 159
 160 function changedStyle() {
 161         var formObj = document.forms[0];
 162         var st = tinyMCE.parseStyle(formObj.style.value);
 163
 164         if (st['background-image'])
 165                 formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
 166         else
 167                 formObj.backgroundimage.value = '';
 168 }