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 = trimSize(getStyle(tdElm, 'width', 'width'));
  14         var height = trimSize(getStyle(tdElm, 'height', 'height'));
  15         var bordercolor = convertRGBToHex(getStyle(tdElm, 'bordercolor', 'borderLeftColor'));
  16         var bgcolor = convertRGBToHex(getStyle(tdElm, 'bgcolor', 'backgroundColor'));
  17         var className = tinyMCE.getVisualAidClass(tinyMCE.getAttrib(tdElm, 'class'), false);
  18         var backgroundimage = getStyle(tdElm, 'background', 'backgroundImage').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         var scope = tinyMCE.getAttrib(tdElm, 'scope');
  23
  24         // Setup form
  25         addClassesToList('class', 'table_cell_styles');
  26         formObj.bordercolor.value = bordercolor;
  27         formObj.bgcolor.value = bgcolor;
  28         formObj.backgroundimage.value = backgroundimage;
  29         formObj.width.value = width;
  30         formObj.height.value = height;
  31         formObj.id.value = id;
  32         formObj.lang.value = lang;
  33         formObj.style.value = tinyMCE.serializeStyle(st);
  34         selectByValue(formObj, 'align', align);
  35         selectByValue(formObj, 'valign', valign);
  36         selectByValue(formObj, 'class', className);
  37         selectByValue(formObj, 'celltype', celltype);
  38         selectByValue(formObj, 'dir', dir);
  39         selectByValue(formObj, 'scope', scope);
  40
  41         // Resize some elements
  42         if (isVisible('backgroundimagebrowser'))
  43                 document.getElementById('backgroundimage').style.width = '180px';
  44
  45         updateColor('bordercolor_pick', 'bordercolor');
  46         updateColor('bgcolor_pick', 'bgcolor');
  47 }
  48
  49 function updateAction() {
  50         var inst = tinyMCE.selectedInstance;
  51         var tdElm = tinyMCE.getParentElement(inst.getFocusElement(), "td,th");
  52         var trElm = tinyMCE.getParentElement(inst.getFocusElement(), "tr");
  53         var tableElm = tinyMCE.getParentElement(inst.getFocusElement(), "table");
  54         var formObj = document.forms[0];
  55
  56         inst.execCommand('mceBeginUndoLevel');
  57
  58         switch (getSelectValue(formObj, 'action')) {
  59                 case "cell":
  60                         var celltype = getSelectValue(formObj, 'celltype');
  61                         var scope = getSelectValue(formObj, 'scope');
  62
  63                         if (tinyMCE.getParam("accessibility_warnings")) {
  64                                 if (celltype == "th" && scope == "")
  65                                         var answer = confirm(tinyMCE.getLang('lang_table_missing_scope', '', true));
  66                                 else
  67                                         var answer = true;
  68
  69                                 if (!answer)
  70                                         return;
  71                         }
  72
  73                         updateCell(tdElm);
  74                         break;
  75
  76                 case "row":
  77                         var cell = trElm.firstChild;
  78
  79                         do {
  80                                 cell = updateCell(cell, true);
  81                         } while ((cell = nextCell(cell)));
  82
  83                         break;
  84
  85                 case "all":
  86                         var rows = tableElm.getElementsByTagName("tr");
  87
  88                         for (var i=0; i<rows.length; i++) {
  89                                 var cell = rows[i].firstChild;
  90
  91                                 do {
  92                                         cell = updateCell(cell, true);
  93                                 } while ((cell = nextCell(cell)));
  94                         }
  95
  96                         break;
  97         }
  98
  99         tinyMCE.handleVisualAid(inst.getBody(), true, inst.visualAid, inst);
 100         tinyMCE.triggerNodeChange();
 101         inst.execCommand('mceEndUndoLevel');
 102         tinyMCEPopup.close();
 103 }
 104
 105 function nextCell(elm) {
 106         while ((elm = elm.nextSibling)) {
 107                 if (elm.nodeName == "TD" || elm.nodeName == "TH")
 108                         return elm;
 109         }
 110
 111         return null;
 112 }
 113
 114 function updateCell(td, skip_id) {
 115         var inst = tinyMCE.selectedInstance;
 116         var formObj = document.forms[0];
 117         var curCellType = td.nodeName.toLowerCase();
 118         var celltype = getSelectValue(formObj, 'celltype');
 119         var doc = inst.getDoc();
 120
 121         if (!skip_id)
 122                 td.setAttribute('id', formObj.id.value);
 123
 124         td.setAttribute('align', formObj.align.value);
 125         td.setAttribute('vAlign', formObj.valign.value);
 126         td.setAttribute('lang', formObj.lang.value);
 127         td.setAttribute('dir', getSelectValue(formObj, 'dir'));
 128         td.setAttribute('style', tinyMCE.serializeStyle(tinyMCE.parseStyle(formObj.style.value)));
 129         td.setAttribute('scope', formObj.scope.value);
 130         tinyMCE.setAttrib(td, 'class', getSelectValue(formObj, 'class'));
 131
 132         // Clear deprecated attributes
 133         tinyMCE.setAttrib(td, 'width', '');
 134         tinyMCE.setAttrib(td, 'height', '');
 135         tinyMCE.setAttrib(td, 'bgColor', '');
 136         tinyMCE.setAttrib(td, 'borderColor', '');
 137         tinyMCE.setAttrib(td, 'background', '');
 138
 139         // Set styles
 140         td.style.width = getCSSSize(formObj.width.value);
 141         td.style.height = getCSSSize(formObj.height.value);
 142         if (formObj.bordercolor.value != "") {
 143                 td.style.borderColor = formObj.bordercolor.value;
 144                 td.style.borderStyle = td.style.borderStyle == "" ? "solid" : td.style.borderStyle;
 145                 td.style.borderWidth = td.style.borderWidth == "" ? "1px" : td.style.borderWidth;
 146         } else
 147                 td.style.borderColor = '';
 148
 149         td.style.backgroundColor = formObj.bgcolor.value;
 150
 151         if (formObj.backgroundimage.value != "")
 152                 td.style.backgroundImage = "url('" + formObj.backgroundimage.value + "')";
 153         else
 154                 td.style.backgroundImage = '';
 155
 156         if (curCellType != celltype) {
 157                 // changing to a different node type
 158                 var newCell = doc.createElement(celltype);
 159
 160                 for (var c=0; c<td.childNodes.length; c++) {
 161                         newCell.appendChild(td.childNodes[c].cloneNode(1));
 162                 }
 163
 164                 for (var a=0; a<td.attributes.length; a++) {
 165                         var attr = td.attributes[a];
 166                         newCell.setAttribute(attr.name, attr.value);
 167                 }
 168
 169                 td.parentNode.replaceChild(newCell, td);
 170                 td = newCell;
 171
 172                 return newCell;
 173         }
 174
 175         return td;
 176 }
 177
 178 function changedBackgroundImage() {
 179         var formObj = document.forms[0];
 180         var st = tinyMCE.parseStyle(formObj.style.value);
 181
 182         st['background-image'] = "url('" + formObj.backgroundimage.value + "')";
 183
 184         formObj.style.value = tinyMCE.serializeStyle(st);
 185 }
 186
 187 function changedSize() {
 188         var formObj = document.forms[0];
 189         var st = tinyMCE.parseStyle(formObj.style.value);
 190
 191         var width = formObj.width.value;
 192         if (width != "")
 193                 st['width'] = getCSSSize(width);
 194         else
 195                 st['width'] = "";
 196
 197         var height = formObj.height.value;
 198         if (height != "")
 199                 st['height'] = getCSSSize(height);
 200         else
 201                 st['height'] = "";
 202
 203         formObj.style.value = tinyMCE.serializeStyle(st);
 204 }
 205
 206 function changedColor() {
 207         var formObj = document.forms[0];
 208         var st = tinyMCE.parseStyle(formObj.style.value);
 209
 210         st['background-color'] = formObj.bgcolor.value;
 211         st['border-color'] = formObj.bordercolor.value;
 212
 213         formObj.style.value = tinyMCE.serializeStyle(st);
 214 }
 215
 216 function changedStyle() {
 217         var formObj = document.forms[0];
 218         var st = tinyMCE.parseStyle(formObj.style.value);
 219
 220         if (st['background-image'])
 221                 formObj.backgroundimage.value = st['background-image'].replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
 222         else
 223                 formObj.backgroundimage.value = '';
 224
 225         if (st['width'])
 226                 formObj.width.value = trimSize(st['width']);
 227
 228         if (st['height'])
 229                 formObj.height.value = trimSize(st['height']);
 230
 231         if (st['background-color']) {
 232                 formObj.bgcolor.value = st['background-color'];
 233                 updateColor('bgcolor_pick','bgcolor');
 234         }
 235
 236         if (st['border-color']) {
 237                 formObj.bordercolor.value = st['border-color'];
 238                 updateColor('bordercolor_pick','bordercolor');
 239         }
 240 }