include/javascript/tiny_mce/plugins/table/js/cell.js

   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");
 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");
 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);