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